/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties;
:root, :host {
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-zh-sc: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC";
  --font-zh-tc: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Source Han Sans TC";
  --font-ja: "Hiragino Sans", "Yu Gothic UI", Meiryo, "Noto Sans JP";
  --font-ar: Tahoma, "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic";
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --font-fallback: sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo;
  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-compact: 1.4;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 1.75;
  --color-red-100: oklch(93.6% 0.032 17.717);
  --color-red-200: oklch(88.5% 0.062 18.334);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-600: oklch(57.7% 0.245 27.325);
  --color-red-800: oklch(44.4% 0.177 26.899);
  --color-orange-200: oklch(90.1% 0.076 70.697);
  --color-orange-500: oklch(70.5% 0.213 47.604);
  --color-amber-500: oklch(76.9% 0.188 70.08);
  --color-yellow-500: oklch(79.5% 0.184 86.047);
  --color-lime-500: oklch(76.8% 0.233 130.85);
  --color-green-100: oklch(96.2% 0.044 156.743);
  --color-green-200: oklch(92.5% 0.084 155.995);
  --color-green-500: oklch(72.3% 0.219 149.579);
  --color-green-600: oklch(62.7% 0.194 149.214);
  --color-green-700: oklch(52.7% 0.154 150.069);
  --color-green-800: oklch(44.8% 0.119 151.328);
  --color-emerald-500: oklch(69.6% 0.17 162.48);
  --color-teal-500: oklch(70.4% 0.14 182.503);
  --color-sky-100: oklch(95.1% 0.026 236.824);
  --color-sky-500: oklch(68.5% 0.169 237.323);
  --color-sky-600: oklch(58.8% 0.158 241.966);
  --color-blue-100: oklch(93.2% 0.032 255.585);
  --color-blue-200: oklch(88.2% 0.059 254.128);
  --color-blue-300: oklch(80.9% 0.105 251.813);
  --color-blue-500: oklch(62.3% 0.214 259.815);
  --color-blue-600: oklch(54.6% 0.245 262.881);
  --color-blue-800: oklch(42.4% 0.199 265.638);
  --color-indigo-200: oklch(87% 0.065 274.039);
  --color-indigo-500: oklch(58.5% 0.233 277.117);
  --color-violet-500: oklch(60.6% 0.25 292.717);
  --color-purple-500: oklch(62.7% 0.265 303.9);
  --color-purple-600: oklch(55.8% 0.288 302.321);
  --color-fuchsia-200: oklch(90.3% 0.076 319.62);
  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
  --color-fuchsia-800: oklch(45.2% 0.211 324.591);
  --color-pink-400: oklch(71.8% 0.202 349.761);
  --color-pink-500: oklch(65.6% 0.241 354.308);
  --color-rose-100: oklch(94.1% 0.03 12.58);
  --color-rose-500: oklch(64.5% 0.246 16.439);
  --color-rose-600: oklch(58.6% 0.253 17.585);
  --color-slate-100: oklch(96.8% 0.007 247.896);
  --color-slate-200: oklch(92.9% 0.013 255.508);
  --color-slate-400: oklch(70.4% 0.04 256.788);
  --color-slate-600: oklch(44.6% 0.043 257.281);
  --color-slate-800: oklch(27.9% 0.041 260.031);
  --color-slate-900: oklch(20.8% 0.042 265.755);
  --color-gray-300: oklch(87.2% 0.01 258.338);
  --color-black: #000;
  --color-white: #fff;
  --spacing: 0.25rem;
  --container-3xs: 16rem;
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --tracking-wider: 0.05em;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --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: var(--font-mono);
  --text-3xs: max(0.5rem, 8px);
  --text-2xs: max(0.625rem, 10px);
  --duration-fastest: calc(var(--duration-normal) *0.25);
  --duration-faster: calc(var(--duration-normal) *0.5);
  --duration-fast: calc(var(--duration-normal) *0.75);
  --duration-normal: 200ms;
  --duration-slow: calc(var(--duration-normal) * 1.5);
  --duration-slower: calc(var(--duration-normal) * 2);
  --duration-slowest: calc(var(--duration-normal) * 2.5);
  --transition-all-fastest: all var(--duration-fastest) var(--default-transition-timing-function);
  --transition-all-faster: all var(--duration-faster) var(--default-transition-timing-function);
  --transition-all-fast: all var(--duration-fast) var(--default-transition-timing-function);
  --transition-all-normal: all var(--duration-normal) var(--default-transition-timing-function);
  --transition-all-slow: all var(--duration-slow) var(--default-transition-timing-function);
  --transition-all-slower: all var(--duration-slower) var(--default-transition-timing-function);
  --transition-all-slowest: all var(--duration-slowest) var(--default-transition-timing-function);
  --color-stage-light: #ffffff;
  --color-stage-dark: #121212;
  --color-stage: var(--color-stage-light);
  --color-primary-base: #0f67ff;
  --color-secondary-base: #6f58dc;
  --color-tertiary-base: #00b8cc;
  --color-warning-base: #fa8c1c;
  --color-caution-base: #f4b000;
  --color-highlight-base: #f1f100;
  --color-info-base: #0097f5;
  --color-success-base: #439e3b;
  --color-error-base: #e04e40;
  --color-ink-base: #0d0d0d;
  --color-title-base: var(--color-ink-base);
  --color-primary: oklch(from var(--color-primary-base) l calc(c * var(--color-c-factor,1)) h);
  --color-primary-outline: oklch(from var(--color-primary) l c h);
  --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
  --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
  --color-primary-contrast: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
  --color-primary-surface: oklch(from var(--color-primary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
  --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
  --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
  --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
  --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
  --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
  --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
  --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  --color-secondary: oklch(from var(--color-secondary-base) l calc(c * var(--color-c-factor,1)) h);
  --color-secondary-outline: oklch(from var(--color-secondary) l c h);
  --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
  --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
  --color-secondary-contrast: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
  --color-secondary-surface: oklch(from var(--color-secondary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
  --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
  --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
  --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
  --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
  --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
  --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
  --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  --color-tertiary: oklch(from var(--color-tertiary-base) l calc(c * var(--color-c-factor,1)) h);
  --color-tertiary-outline: oklch(from var(--color-tertiary) l c h);
  --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
  --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
  --color-tertiary-contrast: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
  --color-tertiary-surface: oklch(from var(--color-tertiary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
  --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
  --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
  --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
  --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
  --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
  --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
  --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  --color-success: oklch(from var(--color-success-base) l calc(c * var(--color-c-factor,1)) h);
  --color-success-outline: oklch(from var(--color-success) l c h);
  --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
  --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
  --color-success-contrast: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
  --color-success-surface: oklch(from var(--color-success) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
  --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
  --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
  --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
  --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
  --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
  --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
  --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  --color-info: oklch(from var(--color-info-base) l calc(c * var(--color-c-factor,1)) h);
  --color-info-outline: oklch(from var(--color-info) l c h);
  --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
  --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
  --color-info-contrast: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
  --color-info-surface: oklch(from var(--color-info) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
  --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
  --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
  --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
  --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
  --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
  --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
  --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  --color-highlight: oklch(from var(--color-highlight-base) l calc(c * var(--color-c-factor,1)) h);
  --color-highlight-outline: oklch(from var(--color-highlight) l c h);
  --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
  --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
  --color-highlight-contrast: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
  --color-highlight-surface: oklch(from var(--color-highlight) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
  --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
  --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
  --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
  --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
  --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
  --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
  --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  --color-error: oklch(from var(--color-error-base) l calc(c * var(--color-c-factor,1)) h);
  --color-error-outline: oklch(from var(--color-error) l c h);
  --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
  --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
  --color-error-contrast: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
  --color-error-surface: oklch(from var(--color-error) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
  --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
  --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
  --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
  --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
  --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
  --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
  --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  --color-warning: oklch(from var(--color-warning-base) l calc(c * var(--color-c-factor,1)) h);
  --color-warning-outline: oklch(from var(--color-warning) l c h);
  --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
  --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
  --color-warning-contrast: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
  --color-warning-surface: oklch(from var(--color-warning) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
  --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
  --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
  --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
  --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
  --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
  --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
  --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  --color-caution: oklch(from var(--color-caution-base) l calc(c * var(--color-c-factor,1)) h);
  --color-caution-outline: oklch(from var(--color-caution) l c h);
  --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
  --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
  --color-caution-contrast: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
  --color-caution-surface: oklch(from var(--color-caution) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
  --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
  --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
  --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
  --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
  --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
  --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
  --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
  --color-title-outline: oklch(from var(--color-title) l c h);
  --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
  --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
  --color-title-contrast: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
  --color-title-surface: oklch(from var(--color-title) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
  --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
  --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
  --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
  --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
  --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
  --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
  --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  --color-description-base: oklch(from var(--color-title) calc(l * 2.5) c h);
  --color-description: var(--color-description-base);
  --color-description-outline: var(--color-title);
  --color-description-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
  --color-description-active: oklch(from var(--color-title) calc(l * 0.9) c h);
  --color-description-contrast: var(--color-title-contrast);
  --color-description-body: var(--color-description-base);
  --color-description-fg: var(--color-description-base);
  --color-description-surface: var(--color-title-surface);
  --color-description-bg: var(--color-title-bg);
  --color-description-bg-hover: var(--color-title-bg-hover);
  --color-description-bg-active: var(--color-title-bg-active);
  --color-description-bd: var(--color-title-bd);
  --color-description-bd-hover: var(--color-title-bd-hover);
  --color-description-bd-active: var(--color-title-bd-active);
  --color-caption-base: oklch(from var(--color-title) calc(l * 3.5) c h);
  --color-caption: var(--color-caption-base);
  --color-caption-outline: var(--color-title);
  --color-caption-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
  --color-caption-active: oklch(from var(--color-title) calc(l * 0.9) c h);
  --color-caption-contrast: var(--color-title-contrast);
  --color-caption-body: var(--color-caption-base);
  --color-caption-fg: var(--color-caption-base);
  --color-caption-surface: var(--color-title-surface);
  --color-caption-bg: var(--color-title-bg);
  --color-caption-bg-hover: var(--color-title-bg-hover);
  --color-caption-bg-active: var(--color-title-bg-active);
  --color-caption-bd: var(--color-title-bd);
  --color-caption-bd-hover: var(--color-title-bd-hover);
  --color-caption-bd-active: var(--color-title-bd-active);
  --color-placeholder-base: oklch(from var(--color-title) calc(l * 4.5) c h);
  --color-placeholder: var(--color-placeholder-base);
  --color-placeholder-outline: var(--color-title);
  --color-placeholder-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
  --color-placeholder-active: oklch(from var(--color-title) calc(l * 0.9) c h);
  --color-placeholder-contrast: var(--color-title-contrast);
  --color-placeholder-body: var(--color-placeholder-base);
  --color-placeholder-fg: var(--color-placeholder-base);
  --color-placeholder-surface: var(--color-title-surface);
  --color-placeholder-bg: var(--color-title-bg);
  --color-placeholder-bg-hover: var(--color-title-bg-hover);
  --color-placeholder-bg-active: var(--color-title-bg-active);
  --color-placeholder-bd: var(--color-title-bd);
  --color-placeholder-bd-hover: var(--color-title-bd-hover);
  --color-placeholder-bd-active: var(--color-title-bd-active);
  --color-ink: oklch(from var(--color-ink-base) l calc(c * var(--color-c-factor,1)) h);
  --color-ink-outline: oklch(from var(--color-ink) l c h);
  --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
  --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
  --color-ink-contrast: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
  --color-ink-surface: oklch(from var(--color-ink) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
  --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
  --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
  --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
  --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
  --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
  --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
  --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  --shadow-base: 0 0.375rem 0.75rem oklch(from var(--color-black) l c h / 0.08);
  --shadow-border: 1px 0 0 var(--color-title-bd),
          -1px 0 0 var(--color-title-bd),
          0 1px 0 var(--color-title-bd),
          0 -1px 0 var(--color-title-bd),
          var(--shadow-base);
  --shadow-border-inner: inset 0 0 0 1px var(--color-title-bd),
          var(--shadow-base);
  --shadow-bubble: 1px 1px 0.75rem oklch(from var(--color-black) l c h / 0.12);
  --shadow-card: 0 0.375rem 2rem oklch(from var(--color-black) l c h / 0.12);
  --shadow-desk: 0 4px 20px 0px oklch(from var(--color-black) l c h / 0.08),
          0 25px 25px -10px oklch(from var(--color-black) l c h / 0.24);
}
@layer base {
  @layer base {
    html, :host {
      font-family: var(--default-font-family), var(--font-sans), var(--font-zh-sc), var(--font-zh-tc), var(--font-ja), var(--font-ar), var(--font-emoji), var(--font-fallback);
      line-height: var(--leading-normal);
      -webkit-text-size-adjust: 100%;
      tab-size: var(--default-tab-size, 4);
      -webkit-tap-highlight-color: transparent;
      font-feature-settings: var(--default-font-feature-settings, normal);
      font-variation-settings: var(--default-font-variation-settings, normal);
      text-wrap: pretty;
    }
    :where([lang]:lang(zh)), :where([lang]:lang(zh-CN)), :where([lang]:lang(zh-Hans)) {
      font-family: var(--font-zh-sc), var(--font-sans), var(--font-emoji), var(--font-fallback);
    }
    :where([lang]:lang(zh-TW)), :where([lang]:lang(zh-HK)), :where([lang]:lang(zh-Hant)) {
      font-family: var(--font-zh-tc), var(--font-sans), var(--font-emoji), var(--font-fallback);
    }
    :where([lang]:lang(ja)) {
      font-family: var(--font-ja), var(--font-sans), var(--font-emoji), var(--font-fallback);
    }
    :where([lang]:lang(ar)) {
      font-family: var(--font-ar), var(--font-sans), var(--font-emoji), var(--font-fallback);
    }
    :where([lang]:lang(zh)), :where([lang]:lang(ja)) {
      line-height: var(--leading-loose);
    }
    :where([lang]:lang(ar)), :where([lang]:lang(ko)) {
      line-height: var(--leading-relaxed);
    }
    html {
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      scroll-behavior: auto;
    }
    html:focus-within {
      scroll-behavior: smooth;
    }
    body {
      margin: 0;
    }
    *, *::before, *::after {
      box-sizing: border-box;
    }
    ::selection {
      background-color: Highlight;
      color: HighlightText;
    }
    h1 {
      line-height: var(--leading-tight);
    }
    h2, h3 {
      line-height: var(--leading-snug);
    }
    h4, h5 {
      line-height: var(--leading-compact);
    }
    h6 {
      line-height: var(--leading-normal);
    }
    h1, h2, h3, h4, h5, h6 {
      margin-block: 0;
    }
    :where([lang]:lang(zh)) h1, :where([lang]:lang(ja)) h1, :where([lang]:lang(ko)) h1 {
      line-height: calc(var(--leading-tight) + 0.05);
    }
    :where([lang]:lang(zh)) h2, :where([lang]:lang(ja)) h2, :where([lang]:lang(ko)) h2, :where([lang]:lang(zh)) h3, :where([lang]:lang(ja)) h3, :where([lang]:lang(ko)) h3 {
      line-height: calc(var(--leading-snug) + 0.05);
    }
    b, strong {
      font-weight: bolder;
    }
    code, kbd, samp, pre {
      font-family: var(--default-mono-font-family, var(--font-mono));
      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;
    }
    button, input, optgroup, select, textarea {
      font-family: inherit;
      line-height: var(--leading-normal);
      margin: 0;
    }
    input[list]::-webkit-calendar-picker-indicator {
      line-height: 1em;
    }
    legend {
      padding: 0;
    }
    progress {
      vertical-align: baseline;
    }
    ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
      height: auto;
    }
    [type="search"] {
      -webkit-appearance: textfield;
      outline-offset: -2px;
    }
    ::-webkit-search-decoration {
      -webkit-appearance: none;
    }
    ::-webkit-file-upload-button {
      -webkit-appearance: button;
      font: inherit;
    }
    button, [type="button"], [type="reset"], [type="submit"] {
      -webkit-appearance: button;
      cursor: pointer;
    }
    :disabled, [aria-disabled="true"] {
      cursor: not-allowed;
    }
    [hidden]:where(:not([hidden='until-found'])) {
      display: none !important;
    }
    textarea {
      overflow: auto;
      resize: vertical;
      vertical-align: top;
    }
    input, select, meter, progress, button {
      vertical-align: middle;
    }
    input[type="checkbox"], input[type="radio"], progress, meter {
      accent-color: var(--default-accent-color);
    }
    summary {
      display: list-item;
    }
    label {
      display: inline-flex;
      align-items: center;
    }
    label:where(:has(input)) {
      cursor: pointer;
    }
    form {
      position: relative;
    }
    img, svg {
      vertical-align: middle;
    }
    img, video,  picture {
      max-width: 100%;
      height: auto;
    }
    img, video, audio, picture, iframe, canvas, embed, object {
      display: block;
    }
    picture img {
      border-radius: inherit;
      width: 100%;
      height: auto;
      object-fit: cover;
    }
    iframe {
      width: 100%;
      border: 0;
    }
    abbr:where([title]) {
      cursor: help;
    }
    hr {
      border: 0;
      height: 1px;
      background-color: currentColor;
    }
    pre {
      white-space: pre-wrap;
      overflow-wrap: break-word;
    }
    pre>code {
      display: block;
    }
    kbd {
      display: inline-flex;
      vertical-align: middle;
      user-select: none;
    }
    article {
      overflow-wrap: break-word;
      hyphens: auto;
    }
    table {
      border-color: var(--default-border-color, currentColor);
      min-width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }
    table th {
      text-align: inherit;
    }
    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }
  }
}
.poster {
  --poster-aspect-ratio: 4 / 3;
  --poster-height: auto;
  --poster-background: var(--color-title-bg);
  --poster-border-radius: var(--default-border-radius);
  --poster-display: inline-flex;
  color: var(--poster-color);
  height: var(--poster-height);
  aspect-ratio: var(--poster-aspect-ratio);
  overflow: hidden;
  border-radius: var(--poster-border-radius);
  background-color: var(--poster-background);
  max-width: 100%;
  display: var(--poster-display);
  justify-content: center;
  align-items: center;
  position: relative;
  container-type: inline-size;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  --: ;
  transition: var(--transition-all-normal);
  >picture, >img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    --: ;
    transition: var(--transition-all-normal);
  }
  picture:has(img[src=""]), picture:has(img:not([src])), img[src=""], img:where(:not([src])) {
    display: none;
  }
  &:where(:has(img[src=""], img:not([src]))) {
    --poster-color: var(--color-caption);
  }
  &:where(:not(:has(img[src=""], img:not([src])))) {
    --poster-color: white;
  }
  &:before {
    content: attr(data-content);
    width: 100%;
    height: 100%;
    border-radius: inherit;
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    --: ;
    transition: var(--transition-all-normal);
  }
  &:hover {
    &:where(:has(img[src=""], img:not([src]))):before {
      content: var(--i18n-no-poster);
    }
    &:where(:not(:has(img[src=""], img:not([src])))):before {
      content: attr(data-content-hover);
    }
    .poster-caption-hidden {
      translate: 0 0;
      &:where(.poster-caption-top) {
        translate: 0 0;
      }
      &:where(.poster-caption-center) {
        opacity: 1;
      }
    }
    .poster-marker-hidden {
      opacity: 1;
    }
  }
  &:where(:has(img[src=""])):before, &:where(:has(img:not([src]))):before {
    content: var(--i18n-no-poster);
  }
}
.skeleton {
  --skeleton-background: var(--color-title-bg-hover);
  background-color: var(--skeleton-background);
  position: relative;
  color: transparent;
  overflow: hidden;
  user-select: none;
  isolation: isolate;
  * {
    visibility: hidden;
  }
  &::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: linear-gradient(calc(100deg * var(--direction-factor-1)), transparent 20%, rgba(255, 255, 255, calc(0.9 - 0.8 * var(--scheme-factor-2))) 50%, transparent 80%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    animation: skeleton-shimmer 1.5s linear infinite;
  }
}
.hidden-visibility {
  visibility: hidden;
  pointer-events: none;
}
.avatar-flower {
  --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.28,8.15c.08-1.45-.47-2.89-1.51-3.93s-2.46-1.59-3.93-1.51c-.97-1.08-2.37-1.72-3.85-1.72s-2.87.63-3.85,1.72c-1.45-.07-2.89.47-3.93,1.51-1.04,1.04-1.58,2.47-1.51,3.93-1.08.97-1.72,2.37-1.72,3.85s.63,2.87,1.72,3.85c-.08,1.45.47,2.89,1.51,3.93s2.46,1.59,3.93,1.51c.97,1.08,2.37,1.72,3.85,1.72s2.87-.63,3.85-1.72c1.45.08,2.89-.46,3.93-1.51,1.04-1.04,1.58-2.47,1.51-3.93,1.08-.97,1.72-2.37,1.72-3.85s-.63-2.87-1.72-3.85Z'/%3E%3C/svg%3E");
  --avatar-border-radius: 0;
  border: none;
  transform: scaleX(var(--direction-factor-1));
  &:has(*) {
    background-color: transparent;
    >* {
      mask-image: var(--avatar-mask);
      mask-size: calc(100% - var(--avatar-border-width)*2);
      mask-position: center;
      mask-repeat: no-repeat;
      background-color: var(--avatar-background);
    }
  }
  &:where(:not(:has(*))) {
    mask-image: var(--avatar-mask);
    mask-size: 100%;
    mask-position: center;
    mask-repeat: no-repeat;
  }
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--avatar-border-color);
    mask: var(--avatar-mask) content-box, var(--avatar-mask);
    mask-composite: exclude;
    padding: var(--avatar-border-width);
    pointer-events: none;
  }
}
.avatar-squircle {
  --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M 12,0 C 2.4,0 0,2.4 0,12 0,21.6 2.4,24 12,24 21.6,24 24,21.6 24,12 24,2.4 21.6,0 12,0 Z'/%3E%3C/svg%3E");
  --avatar-border-radius: 0;
  border: none;
  transform: scaleX(var(--direction-factor-1));
  &:has(*) {
    background-color: transparent;
    >* {
      mask-image: var(--avatar-mask);
      mask-size: calc(100% - var(--avatar-border-width)*2);
      mask-position: center;
      mask-repeat: no-repeat;
      background-color: var(--avatar-background);
    }
  }
  &:where(:not(:has(*))) {
    mask-image: var(--avatar-mask);
    mask-size: 100%;
    mask-position: center;
    mask-repeat: no-repeat;
  }
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--avatar-border-color);
    mask: var(--avatar-mask) content-box, var(--avatar-mask);
    mask-composite: exclude;
    padding: var(--avatar-border-width);
    pointer-events: none;
  }
}
.avatar-bubble-end {
  --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12,2c6.08,0,11,4.48,11,10,0,2.45-.98,4.7-2.59,6.44l1.59,5.56-6.03-2.68c-1.23.43-2.57.68-3.97.68-6.08,0-11-4.48-11-10,0-5.52,4.92-10,11-10Z'/%3E%3C/svg%3E");
  --avatar-border-radius: 0;
  border: none;
  &:has(*) {
    background-color: transparent;
    >* {
      mask-image: var(--avatar-mask);
      mask-size: calc(100% - var(--avatar-border-width)*2);
      mask-position: center;
      mask-repeat: no-repeat;
      background-color: var(--avatar-background);
    }
  }
  &:where(:not(:has(*))) {
    mask-image: var(--avatar-mask);
    mask-size: 100%;
    mask-position: center;
    mask-repeat: no-repeat;
  }
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--avatar-border-color);
    mask: var(--avatar-mask) content-box, var(--avatar-mask);
    mask-composite: exclude;
    padding: var(--avatar-border-width);
    pointer-events: none;
  }
  &:dir(rtl) {
    --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12,2C5.92,2,1,6.48,1,12c0,2.45.98,4.7,2.59,6.44l-1.59,5.56,6.03-2.68c1.23.43,2.57.68,3.97.68,6.08,0,11-4.48,11-10S18.08,2,12,2Z'/%3E%3C/svg%3E");
  }
}
.avatar-bubble-start {
  --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12,2C5.92,2,1,6.48,1,12c0,2.45.98,4.7,2.59,6.44l-1.59,5.56,6.03-2.68c1.23.43,2.57.68,3.97.68,6.08,0,11-4.48,11-10S18.08,2,12,2Z'/%3E%3C/svg%3E");
  --avatar-border-radius: 0;
  border: none;
  &:has(*) {
    background-color: transparent;
    >* {
      mask-image: var(--avatar-mask);
      mask-size: calc(100% - var(--avatar-border-width)*2);
      mask-position: center;
      mask-repeat: no-repeat;
      background-color: var(--avatar-background);
    }
  }
  &:where(:not(:has(*))) {
    mask-image: var(--avatar-mask);
    mask-size: 100%;
    mask-position: center;
    mask-repeat: no-repeat;
  }
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--avatar-border-color);
    mask: var(--avatar-mask) content-box, var(--avatar-mask);
    mask-composite: exclude;
    padding: var(--avatar-border-width);
    pointer-events: none;
  }
  &:dir(rtl) {
    --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12,2c6.08,0,11,4.48,11,10,0,2.45-.98,4.7-2.59,6.44l1.59,5.56-6.03-2.68c-1.23.43-2.57.68-3.97.68-6.08,0-11-4.48-11-10,0-5.52,4.92-10,11-10Z'/%3E%3C/svg%3E");
  }
}
.dropmenu {
  --dropmenu-width: calc(var(--spacing)*50);
  --dropmenu-border-radius: var(--default-border-radius);
  --dropmenu-background: var(--color-stage);
  --dropmenu-background-selected: var(--color-primary);
  --dropmenu-color-selected: var(--color-primary-contrast);
  --dropmenu-background-hover: var(--color-primary-bg);
  --dropmenu-color-hover: var(--color-primary);
  --dropmenu-padding: 0;
  --dropmenu-font-size: 0.875rem;
  --dropmenu-arrow-host: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>');
  --dropmenu-arrow-item: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg>');
  --dropmenu-rotate-host: 180deg;
  --dropmenu-rotate-item: 180deg;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  [data-role=host] {
    gap: 0.5em;
    font-size: var(--dropmenu-font-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --: ;
    transition: var(--transition-all-normal);
  }
  >:first-child, li>:first-child {
    &:where(label)>input {
      appearance: none;
      outline: none;
      position: absolute;
      opacity: 0;
    }
  }
  [data-role=host]:after, li:where(:has(>ul))>:first-child:after {
    content: '';
    display: inline-block;
    height: 1em;
    aspect-ratio: 1/1;
    text-align: center;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transition: var(--transition-all-slow);
    opacity: var(--default-opacity-disabled);
    pointer-events: none;
    font-size: min(1em, 16px);
  }
  [data-role=host]:after {
    mask-image: var(--dropmenu-arrow-host);
  }
  &:where(:not(.dropmenu-list, .dropmenu-upright)):dir(rtl) {
    li:where(:has(>ul))>:first-child:after {
      scale: -1 1;
    }
  }
  li {
    font-size: var(--dropmenu-font-size);
    position: relative;
    &:where(:first-child) {
      border-start-start-radius: inherit;
      border-start-end-radius: inherit;
      >:first-child {
        border-radius: inherit;
      }
    }
    &:where(:last-child) {
      border-end-start-radius: inherit;
      border-end-end-radius: inherit;
      >:first-child {
        border-radius: inherit;
      }
    }
    >:first-child {
      padding: 0.5em 1em;
      display: flex;
      align-items: center;
      gap: 0.5em;
      position: relative;
      --: ;
      transition: var(--transition-all-normal);
      &:where([data-disabled=true]) {
        opacity: var(--default-opacity-disabled);
        pointer-events: none;
      }
      >[data-role=indent] {
        min-width: 0.5em;
      }
      &:where([data-selected=true]) {
        background-color: var(--dropmenu-background-selected);
        color: var(--dropmenu-color-selected);
      }
      &:where(:not([data-selected=true], [data-disabled=true])) {
        &:hover, &:where(:has(input:checked)) {
          background-color: var(--dropmenu-background-hover);
          color: var(--dropmenu-color-hover);
        }
      }
    }
    &:where(:has(>ul)) {
      >:first-child:after {
        margin-inline-end: -0.5em;
        mask-image: var(--dropmenu-arrow-item);
      }
    }
    &:last-child>:first-child {
      border: none;
    }
  }
  &:where(:not(.dropmenu-list)) {
    >:first-child {
      &:where([data-expanded=true]) {
        &:after {
          rotate: var(--dropmenu-rotate-item);
        }
        +ul {
          display: block;
        }
      }
    }
    ul {
      width: var(--dropmenu-width);
      border: 1px solid var(--color-title-bd);
      border-radius: var(--dropmenu-border-radius);
    }
    li {
      >:first-child {
        border-bottom: 1px solid var(--color-title-bd);
      }
      &:where(:has(>ul)) {
        >:first-child {
          &:after {
            margin-inline-start: auto;
          }
        }
        &:where(:not(:has(>label>input))):hover, &:where(:has(>label>input:checked)), &:where(:has(>:first-child[data-expanded=true])) {
          >:first-child:after {
            rotate: var(--dropmenu-rotate-item);
          }
          >ul {
            display: block;
          }
        }
        &:before {
          display: block;
          content: '';
          position: absolute;
          inset-block-start: 0;
          inset-inline-end: calc(-1 * var(--spacing)*2);
          width: calc(var(--spacing)*2);
          height: 100%;
        }
      }
      ul {
        box-sizing: border-box;
        background-color: var(--dropmenu-background);
        translate: calc((100% + var(--spacing)*2) * var(--direction-factor-1)) 0;
        position: absolute;
        width: 100%;
        inset-block-start: -1px;
        inset-inline-end: 0;
        display: none;
      }
    }
    &:where(:not(:has(>label>input))):hover, &:where(:has(>label>input:checked)) {
      &>:first-child:after {
        rotate: var(--dropmenu-rotate-host);
      }
      &>ul {
        display: block;
      }
    }
  }
  &:where(:not(.dropmenu-list, .dropmenu-inline)) {
    >ul {
      background-color: var(--color-stage);
      translate: calc(-50% * var(--direction-factor-1)) 0;
      position: absolute;
      inset-block-start: 100%;
      inset-inline-start: 50%;
      z-index: 3;
      box-shadow: var(--shadow-base);
    }
  }
  &:where(:not(.dropmenu-list)) {
    >ul {
      display: none;
    }
  }
}
.shell-v {
  --shell-border-radius: var(--default-border-radius);
  --shell-font-size: 0.875rem;
  --shell-width: var(--default-width-input);
  --shell-row-height: var(--default-height-input);
  --shell-outline-width: 1px;
  --shell-gap: 0.571em;
  --shell-padding-x: 0.571em;
  --shell-border-width: 1px;
  --shell-border-color: var(--color-title-bd);
  --shell-border-color-hover: var(--color-title-bd-hover);
  --shell-border-color-focus: var(--color-primary);
  --shell-border-color-readonly: var(--color-description);
  --shell-color-invalid: var(--color-error);
  --shell-border-color-invalid: var(--shell-color-invalid);
  --shell-background: transparent;
  --shell-background-hover: var(--shell-background);
  --shell-background-focus: var(--shell-background-hover);
  --shell-background-invalid: var(--color-error-surface);
  --shell-flex-direction: column;
  --shell-input-width: 100%;
  font-size: var(--shell-font-size);
  padding-inline: var(--shell-padding-x);
  border: var(--shell-border-width) solid var(--shell-border-color);
  display: inline-flex;
  background-color: var(--shell-background);
  flex-direction: var(--shell-flex-direction);
  width: var(--shell-width);
  max-width: 100%;
  border-radius: var(--shell-border-radius);
  position: relative;
  --: ;
  transition: var(--transition-all-normal);
  align-items: flex-start;
  padding-block: calc(var(--shell-padding-x)/2);
  gap: 0;
  &:where(:has(:focus-visible)) {
    --shell-border-color: var(--shell-border-color-focus);
    background-color: var(--shell-background-focus);
    outline: none;
    &:where(:not(:has(:user-invalid))) {
      border-color: var(--shell-border-color-focus);
      box-shadow: 0 0 0 calc(var(--shell-outline-width) + 3px) var(--shell-border-color-focus), 0 0 0 var(--shell-outline-width) var(--shell-border-color-focus);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: 0 0 0 calc(var(--shell-outline-width) + 3px) color-mix(in oklab, var(--shell-border-color-focus) 20%, transparent), 0 0 0 var(--shell-outline-width) var(--shell-border-color-focus);
      }
    }
    &:where(:has(:user-invalid)) {
      border-color: var(--shell-color-invalid);
      box-shadow: 0 0 0 calc(var(--shell-outline-width) + 3px) var(--shell-color-invalid), 0 0 0 var(--shell-outline-width) var(--shell-color-invalid);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: 0 0 0 calc(var(--shell-outline-width) + 3px) color-mix(in oklab, var(--shell-color-invalid) 20%, transparent), 0 0 0 var(--shell-outline-width) var(--shell-color-invalid);
      }
    }
  }
  &:where(:has([placeholder]:not(:placeholder-shown):not(:focus-visible))), &:where(:not(:has([disabled], :focus-visible, :user-invalid)):hover) {
    border-color: var(--shell-border-color-hover);
    background-color: var(--shell-background-hover);
  }
  &:where(:has([disabled])) {
    opacity: var(--default-opacity-disabled);
    input {
      opacity: 1;
    }
  }
  &:where(:has(:user-invalid)) {
    border-color: var(--shell-border-color-invalid);
    background-color: var(--shell-background-invalid);
  }
  input {
    --input-font-size: inherit;
    --input-row-height: var(--shell-row-height);
    --input-border-width: 0px;
    --input-border-color-focus: transparent;
    --input-padding-x: 0;
    --input-color: var(--shell-color, var(--color-title));
    --input-border-width: 0;
    --input-color-invalid: var(--shell-color-invalid);
    flex: auto;
    width: var(--shell-input-width);
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  >*:where(:not(input)) {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
  }
  &:where(:not(.shell-v,:has(textarea))) {
    [data-role=placeholder] {
      position: absolute;
      top: 50%;
      translate: 0 -50%;
      inset-inline-start: var(--shell-padding-x);
      pointer-events: none;
      line-height: var(--input-row-height);
      --: ;
      transition: var(--transition-all-normal);
    }
    &:where(:has(:focus-visible)), &:where(:not(:has(:placeholder-shown))) {
      [data-role=placeholder] {
        scale: 0.75;
        translate: 0 0;
        transform-origin: calc(100% * var(--direction-factor-2)) top;
        top: 0;
      }
    }
  }
  &>*:where(:last-child:not(input)) {
    position: absolute;
    inset-inline-end: var(--shell-padding-x);
  }
}
.alarm {
  --alarm-height: auto;
  --alarm-color: var(--color-white);
  --alarm-background: var(--color-error);
  --alarm-padding: calc(var(--spacing)*2);
  --alarm-font-size: max(0.875rem, 12px);
  --alarm-leading: var(--leading-tight);
  font-size: var(--alarm-font-size);
  text-align: center;
  gap: var(--alarm-padding);
  color: var(--alarm-color);
  border-radius: calc(infinity * 1px);
  padding: var(--alarm-padding);
  background-color: var(--alarm-background);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --: ;
  transition: var(--transition-all-normal);
  &:where(:not(:empty)) {
    min-width: calc(1lh + var(--alarm-padding));
  }
  * {
    line-height: var(--alarm-leading);
    position: relative;
    z-index: 2;
  }
  &:before, &:after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    background-color: var(--alarm-background);
    transform: scale(3);
    opacity: var(--default-opacity-disabled);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    pointer-events: none;
  }
  &:before {
    animation: alarm-wave-2 1s infinite;
  }
  &:after {
    animation: alarm-wave-4 1s infinite;
  }
  img {
    height: 2lh;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: inherit;
  }
  svg {
    height: 1lh;
    width: 1lh;
  }
}
.droppanel {
  --droppanel-width: auto;
  --droppanel-border-radius: var(--default-border-radius);
  --droppanel-background: var(--color-stage);
  --droppanel-padding: 0;
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>');
  --droppanel-arrow-host: var(--icon-mask-image);
  --droppanel-rotate-host: 180deg;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  [data-role=host] {
    gap: 0.5em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --: ;
    transition: var(--transition-all-normal);
  }
  >:first-child {
    input {
      appearance: none;
      outline: none;
      position: absolute;
      opacity: 0;
    }
  }
  [data-role=host]:after {
    content: '';
    transition: var(--transition-all-slow);
    font-size: min(1em, 16px);
    mask-image: var(--droppanel-arrow-host);
    pointer-events: none;
    opacity: var(--default-opacity-disabled, 0.5);
    display: inline-block;
    height: 1em;
    aspect-ratio: 1/1;
    text-align: center;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
  }
  >[data-role=panel] {
    border: 1px solid var(--color-title-bd);
    border-radius: var(--droppanel-border-radius);
    display: none;
  }
  &:where(:not(.droppanel-inline)) {
    >[data-role=panel] {
      background-color: var(--color-stage);
      translate: calc(-50% * var(--direction-factor-1)) 0;
      position: absolute;
      inset-block-start: 100%;
      inset-inline-start: 50%;
      z-index: 3;
      box-shadow: var(--shadow-base);
    }
  }
  &:where(:not(:has(>:first-child input))):hover, &:where(:has(>:first-child input:checked)), &:where([data-expanded=true]) {
    [data-role=host]:after {
      rotate: var(--droppanel-rotate-host);
    }
    >[data-role=panel] {
      display: block;
    }
  }
}
.blockquote-quote {
  --blockquote-border-color: var(--color-title-bd);
  border-inline-start: none;
  position: relative;
  padding-end: 0;
  padding-start: 1rem;
  background-color: transparent;
  isolation: isolate;
  &:before {
    color: var(--blockquote-border-color);
    font-size: 4rem;
    line-height: 3rem;
    height: 2rem;
    overflow: hidden;
    font-family: serif;
    display: block;
    position: absolute;
    pointer-events: none;
    z-index: -1;
  }
  &:before {
    content: "❝";
    top: 0;
    inset-inline-start: 0;
  }
  &:dir(rtl) {
    &:before {
      content: "❞";
    }
  }
}
.shell {
  --shell-border-radius: var(--default-border-radius);
  --shell-font-size: 0.875rem;
  --shell-width: var(--default-width-input);
  --shell-row-height: var(--default-height-input);
  --shell-outline-width: 1px;
  --shell-gap: 0.571em;
  --shell-padding-x: 0.571em;
  --shell-border-width: 1px;
  --shell-border-color: var(--color-title-bd);
  --shell-border-color-hover: var(--color-title-bd-hover);
  --shell-border-color-focus: var(--color-primary);
  --shell-border-color-readonly: var(--color-description);
  --shell-color-invalid: var(--color-error);
  --shell-border-color-invalid: var(--shell-color-invalid);
  --shell-background: transparent;
  --shell-background-hover: var(--shell-background);
  --shell-background-focus: var(--shell-background-hover);
  --shell-background-invalid: var(--color-error-surface);
  --shell-flex-direction: row;
  --shell-input-width: 0;
  font-size: var(--shell-font-size);
  padding-inline: var(--shell-padding-x);
  border: var(--shell-border-width) solid var(--shell-border-color);
  display: inline-flex;
  background-color: var(--shell-background);
  flex-direction: var(--shell-flex-direction);
  width: var(--shell-width);
  max-width: 100%;
  border-radius: var(--shell-border-radius);
  position: relative;
  --: ;
  transition: var(--transition-all-normal);
  align-items: center;
  gap: var(--shell-gap);
  &:where(:has(:focus-visible)) {
    --shell-border-color: var(--shell-border-color-focus);
    background-color: var(--shell-background-focus);
    outline: none;
    &:where(:not(:has(:user-invalid))) {
      border-color: var(--shell-border-color-focus);
      box-shadow: 0 0 0 calc(var(--shell-outline-width) + 3px) var(--shell-border-color-focus), 0 0 0 var(--shell-outline-width) var(--shell-border-color-focus);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: 0 0 0 calc(var(--shell-outline-width) + 3px) color-mix(in oklab, var(--shell-border-color-focus) 20%, transparent), 0 0 0 var(--shell-outline-width) var(--shell-border-color-focus);
      }
    }
    &:where(:has(:user-invalid)) {
      border-color: var(--shell-color-invalid);
      box-shadow: 0 0 0 calc(var(--shell-outline-width) + 3px) var(--shell-color-invalid), 0 0 0 var(--shell-outline-width) var(--shell-color-invalid);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: 0 0 0 calc(var(--shell-outline-width) + 3px) color-mix(in oklab, var(--shell-color-invalid) 20%, transparent), 0 0 0 var(--shell-outline-width) var(--shell-color-invalid);
      }
    }
  }
  &:where(:has([placeholder]:not(:placeholder-shown):not(:focus-visible))), &:where(:not(:has([disabled], :focus-visible, :user-invalid)):hover) {
    border-color: var(--shell-border-color-hover);
    background-color: var(--shell-background-hover);
  }
  &:where(:has([disabled])) {
    opacity: var(--default-opacity-disabled);
    input {
      opacity: 1;
    }
  }
  &:where(:has(:user-invalid)) {
    border-color: var(--shell-border-color-invalid);
    background-color: var(--shell-background-invalid);
  }
  input {
    --input-font-size: inherit;
    --input-row-height: var(--shell-row-height);
    --input-border-width: 0px;
    --input-border-color-focus: transparent;
    --input-padding-x: 0;
    --input-color: var(--shell-color, var(--color-title));
    --input-border-width: 0;
    --input-color-invalid: var(--shell-color-invalid);
    flex: auto;
    width: var(--shell-input-width);
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  >*:where(:not(input)) {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
  }
  &:where(:not(.shell-v,:has(textarea))) {
    [data-role=placeholder] {
      position: absolute;
      top: 50%;
      translate: 0 -50%;
      inset-inline-start: var(--shell-padding-x);
      pointer-events: none;
      line-height: var(--input-row-height);
      --: ;
      transition: var(--transition-all-normal);
    }
    &:where(:has(:focus-visible)), &:where(:not(:has(:placeholder-shown))) {
      [data-role=placeholder] {
        scale: 0.75;
        translate: 0 0;
        transform-origin: calc(100% * var(--direction-factor-2)) top;
        top: 0;
      }
    }
  }
}
.shell-h {
  --shell-border-radius: var(--default-border-radius);
  --shell-font-size: 0.875rem;
  --shell-width: var(--default-width-input);
  --shell-row-height: var(--default-height-input);
  --shell-outline-width: 1px;
  --shell-gap: 0.571em;
  --shell-padding-x: 0.571em;
  --shell-border-width: 1px;
  --shell-border-color: var(--color-title-bd);
  --shell-border-color-hover: var(--color-title-bd-hover);
  --shell-border-color-focus: var(--color-primary);
  --shell-border-color-readonly: var(--color-description);
  --shell-color-invalid: var(--color-error);
  --shell-border-color-invalid: var(--shell-color-invalid);
  --shell-background: transparent;
  --shell-background-hover: var(--shell-background);
  --shell-background-focus: var(--shell-background-hover);
  --shell-background-invalid: var(--color-error-surface);
  --shell-flex-direction: row;
  --shell-input-width: 0;
  font-size: var(--shell-font-size);
  padding-inline: var(--shell-padding-x);
  border: var(--shell-border-width) solid var(--shell-border-color);
  display: inline-flex;
  background-color: var(--shell-background);
  flex-direction: var(--shell-flex-direction);
  width: var(--shell-width);
  max-width: 100%;
  border-radius: var(--shell-border-radius);
  position: relative;
  --: ;
  transition: var(--transition-all-normal);
  align-items: center;
  gap: var(--shell-gap);
  &:where(:has(:focus-visible)) {
    --shell-border-color: var(--shell-border-color-focus);
    background-color: var(--shell-background-focus);
    outline: none;
    &:where(:not(:has(:user-invalid))) {
      border-color: var(--shell-border-color-focus);
      box-shadow: 0 0 0 calc(var(--shell-outline-width) + 3px) var(--shell-border-color-focus), 0 0 0 var(--shell-outline-width) var(--shell-border-color-focus);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: 0 0 0 calc(var(--shell-outline-width) + 3px) color-mix(in oklab, var(--shell-border-color-focus) 20%, transparent), 0 0 0 var(--shell-outline-width) var(--shell-border-color-focus);
      }
    }
    &:where(:has(:user-invalid)) {
      border-color: var(--shell-color-invalid);
      box-shadow: 0 0 0 calc(var(--shell-outline-width) + 3px) var(--shell-color-invalid), 0 0 0 var(--shell-outline-width) var(--shell-color-invalid);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: 0 0 0 calc(var(--shell-outline-width) + 3px) color-mix(in oklab, var(--shell-color-invalid) 20%, transparent), 0 0 0 var(--shell-outline-width) var(--shell-color-invalid);
      }
    }
  }
  &:where(:has([placeholder]:not(:placeholder-shown):not(:focus-visible))), &:where(:not(:has([disabled], :focus-visible, :user-invalid)):hover) {
    border-color: var(--shell-border-color-hover);
    background-color: var(--shell-background-hover);
  }
  &:where(:has([disabled])) {
    opacity: var(--default-opacity-disabled);
    input {
      opacity: 1;
    }
  }
  &:where(:has(:user-invalid)) {
    border-color: var(--shell-border-color-invalid);
    background-color: var(--shell-background-invalid);
  }
  input {
    --input-font-size: inherit;
    --input-row-height: var(--shell-row-height);
    --input-border-width: 0px;
    --input-border-color-focus: transparent;
    --input-padding-x: 0;
    --input-color: var(--shell-color, var(--color-title));
    --input-border-width: 0;
    --input-color-invalid: var(--shell-color-invalid);
    flex: auto;
    width: var(--shell-input-width);
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  >*:where(:not(input)) {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
  }
  &:where(:not(.shell-v,:has(textarea))) {
    [data-role=placeholder] {
      position: absolute;
      top: 50%;
      translate: 0 -50%;
      inset-inline-start: var(--shell-padding-x);
      pointer-events: none;
      line-height: var(--input-row-height);
      --: ;
      transition: var(--transition-all-normal);
    }
    &:where(:has(:focus-visible)), &:where(:not(:has(:placeholder-shown))) {
      [data-role=placeholder] {
        scale: 0.75;
        translate: 0 0;
        transform-origin: calc(100% * var(--direction-factor-2)) top;
        top: 0;
      }
    }
  }
}
.sketch-wrong {
  --sketch-wrong-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M2,2 C32.67,8 63.33,15 94,19 M8,21 C36.67,15 69.33,8 98,2' stroke='black' stroke-width='2px' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  position: relative;
  display: inline-block;
  &:after {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: 0;
    top: 0;
    height: 100%;
    background-color: var(--sketch-wrong-color, currentColor);
    mask-image: var(--sketch-wrong-image);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    pointer-events: none;
  }
}
.sketch-through {
  --sketch-through-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M2,13.08c7.12-.57,16.25-1.26,30-1.04,10.46.17,21.28,1.68,31,1.96,8.84.25,18.85-.68,35-1.96' stroke='black' stroke-width='2px' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  position: relative;
  display: inline-block;
  &:after {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    top: 0;
    height: 100%;
    background-color: var(--sketch-through-color, currentColor);
    mask-image: var(--sketch-through-image);
    mask-size: 100% 1lh;
    pointer-events: none;
  }
}
.sketch-underline {
  --sketch-underline-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M1,22c5.37.74,9.78,1.22,17,1,8.57-.27,13.18-1.98,21-2,9.66-.03,10.09,2.17,19,2,8.68-.16,10.34-1.28,19-2,4.81-.4,12-1,22,1' stroke='black' stroke-width='2px' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  position: relative;
  &:after {
    content: "";
    position: absolute;
    left: -2%;
    right: -2px;
    height: 1lh;
    bottom: -0.2em;
    background-color: var(--sketch-underline-color, currentColor);
    mask-image: var(--sketch-underline-image);
    mask-size: 100% 1lh;
    pointer-events: none;
  }
}
.lamp {
  --lamp-height: calc(var(--spacing)*8);
  --lamp-font-size: 0.875rem;
  --lamp-color: inherit;
  --lamp-padding-x: 1em;
  --lamp-color-selected: var(--color-primary);
  --lamp-item-gap: calc(1em/3);
  --lamp-item-width: 2em;
  --lamp-item-height: 2px;
  --lamp-outline-color: var(--lamp-color-selected);
  font-size: var(--lamp-font-size);
  display: flex;
  overflow: auto;
  input {
    appearance: none;
    outline: none;
    position: absolute;
    opacity: 0;
  }
  >* {
    height: var(--lamp-height);
    color: var(--lamp-color);
    cursor: pointer;
    padding-inline: var(--lamp-padding-x);
    gap: var(--lamp-item-gap);
    min-width: 2em;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --: ;
    transition: var(--transition-all-normal);
    &:has(:focus-visible) {
      outline: var(--default-outline-width) solid var(--lamp-outline-color);
      outline-offset: calc(-1*var(--default-outline-offset));
    }
    &:where([data-disabled=true]) {
      pointer-events: none;
      opacity: var(--default-opacity-disabled, 0.5);
    }
    &:where([data-selected=true],:has(:checked)) {
      color: var(--lamp-color-selected);
    }
    &:where(:not([data-selected=true], :has(:checked), [data-disabled=true])):hover {
      color: var(--lamp-color-selected);
    }
  }
  .lamp-label {
    height: var(--lamp-height);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --: ;
    transition: var(--transition-all-normal);
  }
  >*:where(:not(:has(.lamp-label))), .lamp-label {
    &:after {
      content: '';
      display: block;
      background-color: var(--lamp-color-selected);
      height: var(--lamp-item-height);
      width: var(--lamp-item-width);
      translate: -50% 0;
      scale: 0 1;
      position: absolute;
      left: 50%;
      bottom: 0;
      --: ;
      transition: var(--transition-all-normal);
    }
  }
  >* {
    &:where(:has(:checked), [data-selected=true]) {
      &:where(:not(:has(.lamp-label))), .lamp-label {
        &:after {
          scale: 1;
        }
      }
    }
  }
}
.tree {
  --tree-font-size: 0.875rem;
  --tree-note-font-size: var(--text-xs);
  --tree-padding-x: 0;
  --tree-padding-y: 0;
  --tree-node-padding-x: 0.8em;
  --tree-node-padding-y: calc((calc(var(--spacing) * 8) - var(--tree-leading))/2);
  --tree-width: 20em;
  --tree-height: auto;
  --tree-leading: calc(1em * (calc(var(--spacing) * 6)/var(--tree-font-size)));
  --tree-node-background-hover: transparent;
  --tree-node-background-selected: var(--color-primary);
  --tree-node-color-selected: var(--color-primary-contrast);
  --tree-node-background-active: var(--color-primary);
  --tree-node-color-active: var(--color-primary-contrast);
  --tree-arrow-background-hover: var(--color-title-bg-hover);
  --tree-arrow-rotate: 180deg;
  --tree-input-width: 8em;
  --tree-node-gap: 0.5em;
  --tree-note-color: var(--color-caption);
  --tree-node-border-radius: var(--default-border-radius);
  font-size: var(--tree-font-size);
  padding-inline: var(--tree-padding-x);
  padding-block: var(--tree-padding-y);
  width: var(--tree-width);
  max-width: 100%;
  max-height: 100%;
  height: var(--tree-height);
  overflow: auto;
  >ul, li>ul {
    list-style: none;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    >li {
      list-style-type: none;
      &:before {
        display: none;
      }
    }
  }
  &:where([data-disabled=true]) {
    pointer-events: none;
    opacity: var(--default-opacity-disabled, 0.5);
  }
  [data-role=indent] {
    display: none;
  }
  li li {
    padding-inline-start: var(--tree-leading);
  }
  &:where(.tree-btns) {
    li li:where(:not(:has(>ul))) {
      padding-inline-start: 0;
    }
  }
  &:where(:not(.tree-expanded-all)) :where(li)> :where(ul), :where(li:first-child:not(.tree-expanded))> :where(ul) {
    display: none;
  }
  li {
    --tree-note-padding: var(--tree-node-padding-x);
  }
  li>:first-child {
    border-radius: var(--tree-node-border-radius);
    display: flex;
    align-items: center;
    gap: var(--tree-node-gap);
    padding-inline: var(--tree-node-padding-x);
    padding-block: var(--tree-node-padding-y);
    line-height: var(--tree-leading);
    --: ;
    transition: var(--transition-all-normal);
    margin-block: 1px;
    &:where(:not(.tree-selected, :has(input:checked))):hover {
      background-color: var(--tree-node-background-hover);
    }
    &:where(:has([data-role=arrow]:last-child)) {
      padding-inline-end: calc(var(--tree-node-padding-x)/2);
    }
    &:where(:has([data-role=arrow]:first-child)) {
      padding-inline-start: calc(var(--tree-node-padding-x)/2);
    }
    >[data-role=content] {
      display: flex;
      align-items: center;
      gap: var(--tree-node-gap);
      flex: auto;
      width: 0;
      >[data-role=label] {
        max-width: 100%;
        display: inline-flex;
        input {
          --input-width: var(--tree-input-width);
          --input-row-height: 100%;
          --input-border-radius: calc(var(--spacing) * 1);
          --input-padding-x: 0.4em;
        }
        &:where(:not(:has(input))) {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      >[data-role=spacer] {
        flex: auto;
      }
    }
    >[data-role=arrow] {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      --: ;
      transition: var(--transition-all-normal);
      width: 1lh;
      height: 1lh;
      border-radius: calc(var(--spacing) * 1);
      opacity: 0.5;
      >* {
        --: ;
        transition: var(--transition-all-normal);
      }
      >img, >svg {
        max-width: 1lh;
        max-height: 1lh;
      }
      &:where(:not(:empty)):hover {
        cursor: pointer;
        background-color: var(--tree-arrow-background-hover);
      }
    }
    &:where(:not(:has(~ul))) {
      >[data-role=arrow]>* {
        display: none;
      }
    }
    >[data-role=check] {
      width: 1lh;
      height: 1lh;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  }
  li>[data-role=note] {
    display: flex;
    padding-inline-start: var(--tree-note-padding);
    gap: var(--tree-node-gap);
    >[data-role=content] {
      font-size: var(--tree-note-font-size);
      color: var(--tree-note-color);
    }
  }
  li:where(:has(:first-child>[data-role=check])) {
    --tree-note-padding: calc(var(--tree-node-padding-x) + var(--tree-leading) + var(--tree-node-gap));
  }
  li:where(:has(:first-child>[data-role=arrow]:not(:last-child))) {
    --tree-note-padding: calc(var(--tree-leading) + var(--tree-node-gap));
    &:where(:has(:first-child>[data-role=check])) {
      --tree-note-padding: calc((var(--tree-leading) + var(--tree-node-gap)) * 2);
    }
  }
}
.spacer-v {
  --spacer-size: 1rem;
  pointer-events: none;
  width: var(--spacer-size);
  height: auto;
  display: inline-block;
}
.spacer {
  --spacer-size: 1rem;
  pointer-events: none;
  height: var(--spacer-size);
  display: block;
}
.spacer-h {
  --spacer-size: 1rem;
  pointer-events: none;
  height: var(--spacer-size);
  display: block;
}
.disabled {
  pointer-events: none;
  opacity: var(--default-opacity-disabled, 0.5);
}
.hidden-opacity {
  opacity: 0;
  pointer-events: none;
}
.tree-disabled {
  :where(&), &:where(:not(.tree))~* {
    pointer-events: none;
    opacity: var(--default-opacity-disabled, 0.5);
  }
}
.collapse {
  visibility: collapse;
}
.visible {
  visibility: visible;
}
.swatch {
  :where(&) {
    --swatch-color: var(--color-title);
    --swatch-border-color: var(--color-title-bd);
    --swatch-border-color-hover: var(--color-title-bd-hover);
    --swatch-height: var(--default-height-input);
    --swatch-width: var(--swatch-height);
    --swatch-border-width: 1px;
    --swatch-padding: var(--spacing);
    --swatch-border-radius: var(--default-border-radius);
    --swatch-font-size: 0.875rem;
    &:where(:not([type=color])) {
      font-size: var(--swatch-font-size);
      color: oklch(from var(--swatch-color) clamp(0.17, (0.7 - l) * 100, 1) 0 h);
      height: var(--swatch-height);
      width: var(--swatch-width);
      border-radius: var(--swatch-border-radius);
      border: var(--swatch-border-width) solid var(--swatch-border-color);
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      --: ;
      transition: var(--transition-all-normal);
      &:before {
        content: '';
        width: calc(var(--swatch-width) - calc(var(--swatch-padding)*2) - var(--swatch-border-width)*2);
        height: calc(var(--swatch-height) - calc(var(--swatch-padding)*2) - var(--swatch-border-width)*2);
        border-radius: calc(var(--swatch-border-radius)/2);
        background-color: var(--swatch-color);
        position: absolute;
        inset: 0;
        margin: auto;
        --: ;
        transition: var(--transition-all-normal);
      }
      >* {
        position: relative;
        z-index: 1;
      }
      &:hover {
        border-color: var(--swatch-border-color-hover);
      }
    }
  }
}
.dropmenu-upright {
  &:where(:not(.dropmenu-list)) {
    --dropmenu-rotate-item: 90deg;
    li {
      >ul {
        translate: 0 0;
        inset: auto;
        position: relative;
        border-top: none;
        border-inline: none;
        border-radius: 0;
      }
    }
  }
}
.absolute-cover {
  position: absolute;
  inset: 0;
}
.fixed-cover {
  position: fixed;
  inset: 0;
}
.flag-horn {
  --flag-font-size: 12px;
  --flag-height: 24px;
  --flag-inset-block: 12px;
  --flag-color: var(--color-primary-contrast);
  --flag-background: var(--color-primary);
  --flag-x-factor: 1;
  --flag-zindex: 11;
  font-size: var(--flag-font-size);
  height: var(--flag-height);
  width: calc(var(--flag-height)*2.5);
  display: flex;
  justify-content: flex-start;
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: var(--flag-inset-block);
  z-index: var(--flag-zindex);
  >*:first-child {
    display: inline-block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: calc(100% - var(--flag-height)/2);
    height: inherit;
    line-height: var(--flag-height);
    color: var(--flag-color);
    background-color: var(--flag-background);
  }
  &:before, &:after {
    content: '';
    width: 0;
    height: 0;
    border-width: calc(var(--flag-height)/4);
    border-style: solid;
    position: absolute;
    inset-inline-end: 0;
    transform: scaleX(calc(var(--flag-x-factor)*var(--direction-factor-1)));
  }
  &:before {
    border-color: var(--flag-background) transparent transparent var(--flag-background);
    inset-block-start: 0;
  }
  &:after {
    border-color: transparent transparent var(--flag-background) var(--flag-background);
    inset-block-end: 0;
  }
}
.step-v {
  :where(&) {
    --step-color-selected: var(--color-primary);
    --step-color-selected-text: var(--color-primary);
    --step-color-deselected: var(--color-caption);
    --step-color-deselected-text: var(--color-caption);
    --step-color-header: inherit;
    --step-color-header-selected: var(--color-primary-contrast);
    --step-color-label: inherit;
    --step-color-description: var(--color-description);
    --step-background-selected: transparent;
    --step-background-deselected: transparent;
    --step-height-track: max(0.125rem, 2px);
    --step-font-size-label: 1rem;
    --step-font-size-header: 0.75rem;
    --step-font-size-node: 0.75rem;
    --step-font-size-description: 0.75rem;
    --step-width-header: calc(var(--spacing)*18);
    --step-width-track: calc(var(--spacing)*15);
    text-align: center;
    display: flex;
    line-height: var(--leading-tight);
    flex-direction: column;
    &:where(:has([data-role=node]:empty)) {
      --step-height-node: var(--text-3xs);
      --step-padding-node: 0;
    }
    &:where(:has([data-role=node]:not(:empty))) {
      &:where(:has([data-role=node]>img, [data-role=node]>picture, [data-role=node]>svg)) {
        --step-height-node: max(calc(var(--spacing)*7), 28px);
        --step-padding-node: 0;
      }
      &:where(:not(:has([data-role=node]>img, [data-role=node]>picture, [data-role=node]>svg))) {
        --step-height-node: max(calc(var(--spacing)*6), 24px);
        --step-padding-node: 0.25em;
      }
    }
    >* {
      flex: 1;
      position: relative;
    }
    >* [data-role=header] {
      color: var(--step-color-header);
      font-size: var(--step-font-size-header);
      padding-inline: 6px;
      padding-block: 3px;
      border-radius: var(--spacing);
      position: relative;
      margin-block-end: calc(var(--spacing)*2);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    >* [data-role=track] {
      line-height: var(--step-height-node);
      box-sizing: border-box;
      zoom: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    >* [data-role=body] {
      display: flex;
      flex-direction: column;
      gap: 0.5em;
    }
    >* [data-role=node] {
      font-size: var(--step-font-size-node);
      color: var(--step-color-selected-text);
      height: var(--step-height-node);
      min-width: var(--step-height-node);
      border-radius: calc(infinity * 1px);
      border: 2px solid var(--step-color-selected);
      background-color: var(--step-background-selected);
      padding-inline: var(--step-padding-node);
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      >img, >picture, >svg {
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }
      >img, >picture {
        object-fit: cover;
      }
    }
    >* [data-role=track]>:first-child, >* [data-role=track]>:last-child {
      flex: auto;
      background-color: var(--step-color-selected);
    }
    >* [data-role=label] {
      color: var(--step-color-label);
      font-size: var(--step-font-size-label);
      margin-top: 0.5em;
    }
    >* [data-role=description] {
      font-size: var(--step-font-size-description);
      color: var(--step-color-description);
    }
    >*:where([data-selected=true]) [data-role=header]:before {
      content: '';
      width: 0;
      height: 0;
      position: absolute;
    }
    >*:where([data-selected=true])~* {
      [data-role=track]>:first-child, [data-role=track]>:last-child {
        background-color: var(--step-color-deselected);
      }
      [data-role=node] {
        border-color: var(--step-color-deselected);
        color: var(--step-color-deselected-text);
        background-color: var(--step-background-deselected);
      }
      [data-role=label], [data-role=description], [data-role=header] {
        color: var(--step-color-deselected);
      }
    }
    >*:where([data-selected=true]) [data-role=header] {
      color: var(--step-color-header-selected);
      background-color: var(--step-color-selected);
    }
    >* {
      display: flex;
      gap: calc(var(--spacing)*2);
      &:where(:has([data-role=body])) {
        width: 100%;
      }
    }
    >* [data-role=track] {
      height: 100%;
      width: auto;
      display: flex;
      flex-direction: column;
    }
    >* [data-role=track]>:first-child, >* [data-role=track]>:last-child {
      width: var(--step-height-track);
      height: var(--step-width-track);
    }
    &:where(:not(.step-trim, .step-between)) {
      >*:where(:not(:first-child)) [data-role=track]>:first-child {
        display: none;
      }
      >* [data-role=label] {
        margin-top: 0;
      }
      >*:where(:first-child) {
        [data-role=label] {
          margin-top: var(--step-width-track);
        }
        [data-role=header] {
          margin-top: var(--step-width-track);
        }
      }
    }
    >* [data-role=body] {
      text-align: start;
      flex: auto;
      width: 0;
    }
    >* [data-role=description] {
      margin-inline: 0;
    }
    >* [data-role=header] {
      width: var(--step-width-header);
      margin-block-end: 0;
      padding-inline: 0;
      height: fit-content;
    }
    >*:where([data-selected=true]) [data-role=header]:before {
      margin-inline-start: 0;
      border-inline-end: 0;
      border-block-start: 5px solid transparent;
      border-block-end: 5px solid transparent;
      border-inline-start: 5px solid var(--step-color-selected);
      inset-inline-start: auto;
      inset-block-end: auto;
      inset-block-start: 5px;
      inset-inline-end: -4px;
    }
    &.step-plain>* [data-role=node] {
      padding: 0;
      aspect-ratio: 1/1;
    }
  }
}
.table-fixed-end {
  th:last-child, td:last-child {
    background-color: var(--color-stage);
    position: sticky;
    inset-inline-end: 0;
    z-index: 3;
  }
  th:last-child:before, td:last-child:before {
    content: '';
    width: 1px;
    height: 100%;
    background-color: var(--table-wrapper-border-color);
    position: absolute;
    inset-inline-start: -1px;
    inset-block-start: 0;
  }
  &:where(:has([class*="table-stripe"])) tbody tr:nth-child(odd) td:last-child {
    background-color: var(--table-color-stripe);
  }
  &:where(:has([class*="table-stripe"])) tbody tr.table-selected td:last-child {
    background-color: var(--table-color-select);
  }
  &:where(:has(.table-hoverable)) tbody tr:not(.table-selected):hover td:last-child {
    background-color: var(--table-wrapper-border-color);
  }
}
.switch {
  --switch-height: 20px;
  --switch-width: calc(var(--switch-height)*2);
  --switch-border-radius: var(--switch-height);
  --switch-border-width: 2px;
  --switch-background: var(--color-title-bd);
  --switch-background-checked: var(--color-primary);
  --switch-color: var(--color-title-contrast);
  --switch-color-checked: var(--color-primary-contrast);
  --switch-input-fs: max(calc(var(--switch-height)/2), 10px);
  --switch-gap: 0.4em;
  --switch-font-size: 0.875rem;
  --switch-indeterminate-bg: var(--color-primary-bd);
  --switch-thumb-height: calc(var(--switch-height) - var(--switch-border-width)*2);
  --switch-thumb-radius: var(--switch-border-radius);
  --switch-thumb-inset: calc(var(--switch-width) - var(--switch-thumb-height) - var(--switch-border-width));
  --switch-thumb-background: var(--color-white);
  --switch-thumb-color: var(--color-description);
  font-size: var(--switch-font-size);
  display: inline-flex;
  align-items: center;
  gap: var(--switch-gap);
  input {
    appearance: none;
    position: relative;
    font-size: var(--switch-input-fs);
    border-radius: var(--switch-border-radius);
    background-color: var(--switch-background);
    display: inline-flex;
    align-items: center;
    width: var(--switch-width);
    height: var(--switch-height);
    --: ;
    transition: var(--transition-all-normal);
    &:where(:not(:disabled)) {
      cursor: pointer;
    }
    &:before {
      content: attr(data-off-thumb);
      color: var(--switch-thumb-color);
      height: var(--switch-thumb-height);
      aspect-ratio: 1/1;
      line-height: var(--switch-thumb-height);
      overflow: hidden;
      border-radius: var(--switch-thumb-radius);
      background-color: var(--switch-thumb-background);
      position: absolute;
      inset-inline-end: var(--switch-thumb-inset);
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      --: ;
      transition: var(--transition-all-normal);
    }
    &:after {
      content: attr(data-off-track);
      color: var(--switch-color);
      display: block;
      scale: 0.8;
      height: var(--switch-height);
      line-height: var(--switch-height);
      width: calc(var(--switch-width) - var(--switch-border-width) - var(--switch-thumb-height));
      white-space: nowrap;
      overflow: hidden;
      text-align: center;
      position: absolute;
      inset-inline-end: 0;
    }
  }
  &:where(:has(input:checked)) {
    --switch-thumb-inset: var(--switch-border-width);
    input {
      background-color: var(--switch-background-checked);
      &:before {
        content: attr(data-on-thumb);
        color: var(--switch-background-checked);
      }
      &:after {
        color: var(--switch-color-checked);
        content: attr(data-on-track);
        inset-inline-end: auto;
        inset-inline-start: 0;
      }
    }
  }
}
.flag-ribbon {
  --flag-font-size: 12px;
  --flag-height: 96px;
  --flag-height-in: calc(var(--flag-height)/4);
  --flag-offset: calc(var(--flag-height-in)/2/1.4);
  --flag-color: var(--color-primary-contrast);
  --flag-background: var(--color-primary);
  --flag-x-factor: 1;
  --flag-y-factor: 1;
  --flag-zindex: 11;
  height: var(--flag-height);
  aspect-ratio: 1/1;
  overflow: hidden;
  font-size: var(--flag-font-size);
  display: block;
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  z-index: var(--flag-zindex);
  >*:first-child {
    color: var(--flag-color);
    background-color: var(--flag-background);
    height: var(--flag-height-in);
    width: 200%;
    line-height: var(--flag-height-in);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    transform: translate(-50%, -50%) rotate(calc(-45deg*var(--flag-x-factor)*var(--flag-y-factor)*var(--direction-factor-1)));
    position: absolute;
    left: calc(50% - var(--flag-offset)*var(--flag-x-factor)*var(--direction-factor-1));
    top: calc(50% - var(--flag-offset)*var(--flag-y-factor));
  }
}
.flag-circle {
  --flag-font-size: 12px;
  --flag-height: 42px;
  --flag-inset-block: 12px;
  --flag-inset-inline: 12px;
  --flag-color: var(--color-primary-contrast);
  --flag-background: var(--color-primary);
  --flag-zindex: 11;
  text-align: center;
  font-size: var(--flag-font-size);
  line-height: var(--leading-tight);
  width: var(--flag-height);
  aspect-ratio: 1/1;
  border-radius: 100%;
  color: var(--flag-color);
  background-color: var(--flag-background);
  overflow: hidden;
  position: absolute;
  inset-inline-start: var(--flag-inset-inline);
  inset-block-start: var(--flag-inset-block);
  z-index: var(--flag-zindex);
  display: flex;
  align-items: center;
  justify-content: center;
  >*:first-child {
    width: inherit;
    height: inherit;
    border-radius: inherit;
    line-height: var(--leading-tight);
  }
}
.flag-triangle {
  --flag-height: 42px;
  --flag-height-in: calc(var(--flag-height) * 1.4);
  --flag-font-size: 12px;
  --flag-x-factor: 1;
  --flag-lh-offset: 6px;
  --flag-rotate: -45deg;
  --flag-color: var(--color-primary-contrast);
  --flag-background: var(--color-primary);
  --flag-zindex: 11;
  display: flex;
  overflow: hidden;
  width: var(--flag-height);
  aspect-ratio: 1/1;
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  z-index: var(--flag-zindex);
  >*:first-child {
    color: var(--flag-color);
    background-color: var(--flag-background);
    overflow: hidden;
    font-size: var(--flag-font-size);
    width: var(--flag-height-in);
    aspect-ratio: 1/1;
    white-space: nowrap;
    line-height: calc(var(--flag-height-in)/2 + var(--flag-height-in) + var(--flag-lh-offset));
    text-align: center;
    rotate: calc(-45deg * var(--direction-factor-1)* var(--flag-x-factor));
    position: absolute;
    inset-block-start: calc(var(--flag-height-in) / -2);
    inset-inline-start: calc(var(--flag-height-in) / -2);
  }
}
.flag-diamond {
  --flag-height: 24px;
  --flag-color: var(--color-primary-contrast);
  --flag-background: var(--color-primary);
  --flag-font-size: 12px;
  --flag-x-factor: 1;
  --flag-y-factor: 1;
  --flag-zindex: 11;
  --flag-padding-start: calc(var(--flag-height)/2);
  --flag-padding-end: calc(var(--flag-padding-start)*1.5);
  display: flex;
  width: fit-content;
  height: var(--flag-height);
  max-width: 50%;
  max-height: 50%;
  overflow: hidden;
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  z-index: var(--flag-zindex);
  &:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-end-end-radius: calc(var(--flag-height)/2);
    background-color: var(--flag-background);
    transform: skew(calc(-18deg*var(--flag-x-factor)*var(--flag-y-factor)*var(--direction-factor-1)));
    transform-origin: 0 0;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
  }
  >*:first-child {
    display: inline-block;
    height: var(--flag-height);
    line-height: var(--flag-height);
    color: var(--flag-color);
    padding-inline-start: var(--flag-padding-start);
    padding-inline-end: var(--flag-padding-end);
    font-size: var(--flag-font-size);
    position: relative;
    z-index: 2;
  }
}
.progress {
  :where(&) {
    --progress-opacity: 1;
    --progress-background: var(--color-title-bg-hover);
    --progress-background-bar: var(--color-primary);
    --progress-color: var(--color-primary-contrast);
    --progress-color-track: var(--color-title);
    --progress-height: 1rem;
    --progress-width: 100%;
    --progress-value: 0%;
    --progress-font-size: var(--text-2xs);
    --progress-border-radius: 0;
    --progress-image: none;
    width: var(--progress-width);
    height: var(--progress-height);
    max-width: 100%;
    font-size: var(--progress-font-size);
    line-height: 1em;
    background-color: var(--progress-background);
    border-radius: var(--progress-border-radius);
    display: flex;
    position: relative;
    overflow: hidden;
    >[data-role=bar] {
      width: var(--progress-value);
      height: 100%;
      color: var(--progress-color);
      background-image: var(--progress-image);
      background-color: var(--progress-background-bar);
      border-radius: inherit;
      display: flex;
      align-items: center;
      overflow: hidden;
      --: ;
      transition: var(--transition-all-slowest);
      position: relative;
      z-index: 2;
      &:where(:has(*)) {
        >* {
          position: absolute;
          inset-inline-start: max(100%, 3em);
          inset-block-start: 0;
          padding-inline: calc(var(--spacing) * 2);
          height: 100%;
          display: inline-flex;
          align-items: center;
          translate: calc(-100% * var(--direction-factor-1)) 0;
        }
      }
      &:where(:not(:has(*))) {
        justify-content: center;
      }
    }
    >[data-role=base] {
      position: absolute;
      inset-inline-start: max(var(--progress-value), 3em);
      inset-block-start: 0;
      translate: calc(-100% * var(--direction-factor-1)) 0;
      height: 100%;
      padding-inline: calc(var(--spacing) * 2);
      display: inline-flex;
      align-items: center;
      z-index: 1;
      color: var(--progress-color-track);
    }
  }
}
.poster-caption-center {
  font-size: 0.85rem;
  color: white;
  width: 100%;
  height: 100%;
  background-color: oklch(from var(--color-black) l c h / 0.6);
  line-height: var(--leading-tight);
  padding: 0.5em 1em;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 2;
  flex-dirction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  --: ;
  transition: var(--transition-all-normal);
}
.poster-marker {
  max-width: 80%;
  position: absolute;
  inset-block-start: calc(var(--spacing) * 2);
  inset-inline-start: calc(var(--spacing) * 2);
  z-index: 3;
  display: flex;
  gap: calc(var(--spacing) * 1);
}
.table-fixed-header {
  thead tr:last-child {
    border: none;
  }
  thead th {
    background-color: var(--color-stage);
    box-shadow: inset 0 -1px 0 0 var(--table-wrapper-border-color);
    position: sticky;
    inset-block-start: 0;
    z-index: 3;
  }
  tbody tr:last-child {
    border-block-end: 1px solid var(--table-wrapper-border-color);
  }
  &:where(:has(.table-grid)) thead th {
    box-shadow: inset 0 -1px 0 0 var(--table-wrapper-border-color), inset calc(-1px * var(--direction-factor-1)) 0 0 0 var(--table-wrapper-border-color);
  }
  &:where(.table-fixed-start) {
    tr th:first-child {
      box-shadow: inset 0 -1px 0 0 var(--table-wrapper-border-color), inset calc(-1px * var(--direction-factor-1)) 0 0 0 var(--table-wrapper-border-color);
      z-index: 4;
    }
  }
  &:where(.table-fixed-end) {
    tr th:last-child {
      z-index: 4;
    }
    tr th:last-child:before {
      content: '';
      width: 1px;
      height: 100%;
      background-color: var(--table-wrapper-border-color);
      position: absolute;
      inset-inline-start: -1px;
      inset-block-start: 0;
    }
  }
}
.poster-caption-top {
  font-size: 0.85rem;
  color: white;
  width: 100%;
  text-align: center;
  background-color: oklch(from var(--color-black) l c h / 0.6);
  line-height: var(--leading-tight);
  padding: 0.5em 1em;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 2;
  --: ;
  transition: var(--transition-all-normal);
}
.check {
  :where(&) {
    --check-input-border-width: 1px;
    --check-input-border-color: var(--color-title-bd-hover);
    --check-input-border-color-hover: var(--color-primary);
    --check-input-background: var(--color-title-surface);
    --check-input-fill: var(--color-primary);
    --check-outline-color: var(--default-outline-color);
    --check-indeterminate-bg: var(--color-primary-bd);
    --check-indeterminate-bd: var(--color-primary);
    --check-halo-color: var(--color-primary);
    --check-gap: 0.4em;
    --check-font-size: 0.875rem;
    --check-height: auto;
    --check-background: transparent;
    --check-border-radius: 0;
    --check-padding-x: 0;
    --check-padding-y: 0;
    --check-border-width: 0;
    --check-border-color: transparent;
    --check-color: inherit;
    --check-leading: var(--leading-tight);
    --check-input-size: var(--default-size-check);
    --check-input-size-in: 10px;
    --check-input-size-offset: 2px;
    --check-direction: row;
    --check-align-items: center;
    &:where(:has([type=radio])) {
      --check-input-radius: 100%;
    }
    &:where(:has([type=checkbox])) {
      --check-input-radius: var(--spacing);
    }
    font-size: var(--check-font-size);
    color: var(--check-color);
    height: var(--check-height);
    display: inline-flex;
    align-items: var(--check-align-items);
    flex-direction: var(--check-direction);
    gap: var(--check-gap);
    background-color: var(--check-background);
    border-radius: var(--check-border-radius);
    padding: var(--check-padding-y) var(--check-padding-x);
    line-height: var(--check-leading);
    border: var(--check-border-width) solid var(--check-border-color);
    position: relative;
    --: ;
    transition: var(--transition-all-normal);
    input {
      appearance: none;
      position: relative;
      width: var(--check-input-size);
      height: var(--check-input-size);
      border-radius: var(--check-input-radius);
      outline-offset: 0;
      animation-name: none;
      font-size: inherit;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      &:where([type=checkbox]) {
        width: calc(var(--check-input-size) - var(--check-input-size-offset));
        height: calc(var(--check-input-size) - var(--check-input-size-offset));
        margin-inline: calc(var(--check-input-size-offset)/2);
      }
      &:where(:not(:disabled)) {
        cursor: pointer;
      }
      &:before {
        content: '';
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: var(--check-input-radius);
        display: inline-block;
        border: var(--check-input-border-width) solid var(--check-input-border-color);
        background-color: var(--check-input-background);
        --: ;
        transition: var(--transition-all-normal);
      }
      &:after {
        content: '';
        width: var(--check-input-size-in);
        aspect-ratio: 1/1;
        display: inline-block;
        transform: scale(0);
        position: absolute;
        --: ;
        transition: var(--transition-all-normal);
      }
      &:where([type=radio]):after {
        background-color: var(--check-input-fill);
        border-radius: var(--check-input-radius);
        inset-block-start: calc((var(--check-input-size) - var(--check-input-size-in))/2);
        inset-inline-start: calc((var(--check-input-size) - var(--check-input-size-in))/2);
      }
      &:where([type=checkbox]):after {
        inset-block-start: calc((var(--check-input-size) - var(--check-input-size-in) - var(--check-input-size-offset))/2);
        inset-inline-start: calc((var(--check-input-size) - var(--check-input-size-in) - var(--check-input-size-offset))/2);
        background-color: var(--check-input-fill);
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
        mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;
      }
      &:where(:checked):after {
        transform: scale(1);
      }
      &:where(:not(:disabled, :focus-visible):hover):before {
        border-color: var(--check-input-border-color-hover);
      }
      &:where(:focus-visible):before {
        background-clip: padding-box;
      }
      &:where(:checked) {
        animation: check-halo var(--custom-duration, 500ms) ease-out forwards;
      }
    }
    >*:nth-child(2) {
      flex: 1;
      line-height: inherit;
    }
    &:where(:has(:checked)) {
      --check-input-border-color: var(--color-primary);
    }
    &:where(:has([type=checkbox]:checked)) {
      --check-input-fill: var(--color-primary-contrast);
      --check-input-background: var(--color-primary);
    }
    &:where(:has([disabled])) {
      cursor: not-allowed;
      opacity: var(--default-opacity-disabled);
    }
    &:where(:has(:focus-visible)) {
      --check-input-border-color: transparent;
    }
    &:where(:has([type=checkbox]:indeterminate)) {
      input:before {
        border-color: var(--check-indeterminate-bd);
      }
      input:after {
        transform: scale(1);
        background-color: var(--check-indeterminate-bg);
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' %3E%3Crect x='0' y='0' width='24' height='24' rx='2' /%3E%3C/svg%3E");
      }
    }
  }
}
.absolute-center {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: calc(-50% * var(--direction-factor-1)) -50%;
}
.fixed-center {
  position: fixed;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: calc(-50% * var(--direction-factor-1)) -50%;
}
.bubble {
  :where(&) {
    --bubble-width: 500px;
    --bubble-height: auto;
    --bubble-background: var(--color-stage);
    --bubble-border-radius: 0px;
    --bubble-padding-x: 0;
    --bubble-padding-y: var(--bubble-padding-x);
    --bubble-box-shadow: oklch(from var(--color-black) l c h / 0.12);
    --bubble-display: block;
    --bubble-border-width: 1px;
    --bubble-border-color: var(--color-title-bd);
    --bubble-arrow-size: calc(10px + round(down, calc(var(--bubble-border-radius)/8), 2px));
    --bubble-arrow-radius: 0;
    --bubble-arrow-offset: calc(2em + var(--bubble-border-radius) + var(--bubble-arrow-size));
    --bubble-bridge-size: calc(var(--bubble-arrow-size)*0.75 + var(--bubble-border-width));
    --bubble-margin-bridge: calc(var(--bubble-bridge-size) - var(--bubble-border-width));
    will-change: transform, opacity, width, height;
    contain: layout;
    min-width: var(--default-height-input);
    max-width: calc(100vw - var(--default-height-input)*2);
    border: var(--bubble-border-width) solid var(--bubble-border-color);
    border-radius: var(--bubble-border-radius);
    background: var(--bubble-background);
    color: var(--bubble-color, inherit);
    filter: drop-shadow(2px 2px 6px var(--bubble-box-shadow));
    padding: var(--bubble-padding-y) var(--bubble-padding-x);
    position: relative;
    margin-bottom: var(--bubble-margin-bridge);
    --: ;
    transition: var(--transition-all-normal);
    &:after {
      content: "";
      border-bottom-right-radius: var(--bubble-arrow-radius);
      display: block;
      position: absolute;
      inset-inline-start: calc(50% - var(--bubble-arrow-size)/2);
      inset-block-end: calc(var(--bubble-arrow-size)/-2);
      rotate: 45deg;
      height: var(--bubble-arrow-size);
      aspect-ratio: 1/1;
      box-shadow: var(--bubble-border-width) var(--bubble-border-width) 0 var(--bubble-border-color);
      background: inherit;
    }
    &:before {
      content: "";
      display: block;
      opacity: 0;
      height: var(--bubble-bridge-size);
      width: 100%;
      position: absolute;
      inset-inline-start: 0;
      bottom: calc(var(--bubble-bridge-size)*-1);
    }
  }
}
.poster-marker-start-bottom {
  max-width: 80%;
  position: absolute;
  inset-block-end: calc(var(--spacing) * 2);
  inset-inline-start: calc(var(--spacing) * 2);
  z-index: 3;
  display: flex;
  gap: calc(var(--spacing) * 1);
}
.poster-caption {
  font-size: 0.85rem;
  color: white;
  width: 100%;
  text-align: center;
  background-color: oklch(from var(--color-black) l c h / 0.6);
  line-height: var(--leading-tight);
  padding: 0.5em 1em;
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  z-index: 2;
  --: ;
  transition: var(--transition-all-normal);
}
.step {
  :where(&) {
    --step-color-selected: var(--color-primary);
    --step-color-selected-text: var(--color-primary);
    --step-color-deselected: var(--color-caption);
    --step-color-deselected-text: var(--color-caption);
    --step-color-header: inherit;
    --step-color-header-selected: var(--color-primary-contrast);
    --step-color-label: inherit;
    --step-color-description: var(--color-description);
    --step-background-selected: transparent;
    --step-background-deselected: transparent;
    --step-height-track: max(0.125rem, 2px);
    --step-font-size-label: 1rem;
    --step-font-size-header: 0.75rem;
    --step-font-size-node: 0.75rem;
    --step-font-size-description: 0.75rem;
    --step-width-track: auto;
    text-align: center;
    display: flex;
    line-height: var(--leading-tight);
    &:where(:has([data-role=node]:empty)) {
      --step-height-node: var(--text-3xs);
      --step-padding-node: 0;
    }
    &:where(:has([data-role=node]:not(:empty))) {
      &:where(:has([data-role=node]>img, [data-role=node]>picture, [data-role=node]>svg)) {
        --step-height-node: max(calc(var(--spacing)*7), 28px);
        --step-padding-node: 0;
      }
      &:where(:not(:has([data-role=node]>img, [data-role=node]>picture, [data-role=node]>svg))) {
        --step-height-node: max(calc(var(--spacing)*6), 24px);
        --step-padding-node: 0.25em;
      }
    }
    >* {
      flex: 1;
      position: relative;
    }
    >* [data-role=header] {
      color: var(--step-color-header);
      font-size: var(--step-font-size-header);
      padding-inline: 6px;
      padding-block: 3px;
      border-radius: var(--spacing);
      position: relative;
      margin-block-end: calc(var(--spacing)*2);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    >* [data-role=track] {
      line-height: var(--step-height-node);
      box-sizing: border-box;
      zoom: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    >* [data-role=body] {
      display: flex;
      flex-direction: column;
      gap: 0.5em;
    }
    >* [data-role=node] {
      font-size: var(--step-font-size-node);
      color: var(--step-color-selected-text);
      height: var(--step-height-node);
      min-width: var(--step-height-node);
      border-radius: calc(infinity * 1px);
      border: 2px solid var(--step-color-selected);
      background-color: var(--step-background-selected);
      padding-inline: var(--step-padding-node);
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      >img, >picture, >svg {
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }
      >img, >picture {
        object-fit: cover;
      }
    }
    >* [data-role=track]>:first-child, >* [data-role=track]>:last-child {
      flex: auto;
      background-color: var(--step-color-selected);
    }
    >* [data-role=label] {
      color: var(--step-color-label);
      font-size: var(--step-font-size-label);
      margin-top: 0.5em;
    }
    >* [data-role=description] {
      font-size: var(--step-font-size-description);
      color: var(--step-color-description);
    }
    >*:where([data-selected=true]) [data-role=header]:before {
      content: '';
      width: 0;
      height: 0;
      position: absolute;
    }
    >*:where([data-selected=true])~* {
      [data-role=track]>:first-child, [data-role=track]>:last-child {
        background-color: var(--step-color-deselected);
      }
      [data-role=node] {
        border-color: var(--step-color-deselected);
        color: var(--step-color-deselected-text);
        background-color: var(--step-background-deselected);
      }
      [data-role=label], [data-role=description], [data-role=header] {
        color: var(--step-color-deselected);
      }
    }
    >*:where([data-selected=true]) [data-role=header] {
      color: var(--step-color-header-selected);
      background-color: var(--step-color-selected);
    }
    >* [data-role=header] {
      padding-inline: 6px;
    }
    >* [data-role=track] {
      width: 100%;
    }
    >* [data-role=track]>:first-child, >* [data-role=track]>:last-child {
      width: var(--step-width-track);
      height: var(--step-height-track);
    }
    >* [data-role=description] {
      margin-inline: 1em;
    }
    >*:where([data-selected=true]) [data-role=header]:before {
      border-inline-end: 5px solid transparent;
      border-inline-start: 5px solid transparent;
      border-block-start: 5px solid var(--step-color-selected);
      margin-inline-start: -5px;
      inset-inline-start: 50%;
      inset-block-end: -4px;
    }
  }
}
.step-h {
  :where(&) {
    --step-color-selected: var(--color-primary);
    --step-color-selected-text: var(--color-primary);
    --step-color-deselected: var(--color-caption);
    --step-color-deselected-text: var(--color-caption);
    --step-color-header: inherit;
    --step-color-header-selected: var(--color-primary-contrast);
    --step-color-label: inherit;
    --step-color-description: var(--color-description);
    --step-background-selected: transparent;
    --step-background-deselected: transparent;
    --step-height-track: max(0.125rem, 2px);
    --step-font-size-label: 1rem;
    --step-font-size-header: 0.75rem;
    --step-font-size-node: 0.75rem;
    --step-font-size-description: 0.75rem;
    --step-width-track: auto;
    text-align: center;
    display: flex;
    line-height: var(--leading-tight);
    &:where(:has([data-role=node]:empty)) {
      --step-height-node: var(--text-3xs);
      --step-padding-node: 0;
    }
    &:where(:has([data-role=node]:not(:empty))) {
      &:where(:has([data-role=node]>img, [data-role=node]>picture, [data-role=node]>svg)) {
        --step-height-node: max(calc(var(--spacing)*7), 28px);
        --step-padding-node: 0;
      }
      &:where(:not(:has([data-role=node]>img, [data-role=node]>picture, [data-role=node]>svg))) {
        --step-height-node: max(calc(var(--spacing)*6), 24px);
        --step-padding-node: 0.25em;
      }
    }
    >* {
      flex: 1;
      position: relative;
    }
    >* [data-role=header] {
      color: var(--step-color-header);
      font-size: var(--step-font-size-header);
      padding-inline: 6px;
      padding-block: 3px;
      border-radius: var(--spacing);
      position: relative;
      margin-block-end: calc(var(--spacing)*2);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    >* [data-role=track] {
      line-height: var(--step-height-node);
      box-sizing: border-box;
      zoom: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    >* [data-role=body] {
      display: flex;
      flex-direction: column;
      gap: 0.5em;
    }
    >* [data-role=node] {
      font-size: var(--step-font-size-node);
      color: var(--step-color-selected-text);
      height: var(--step-height-node);
      min-width: var(--step-height-node);
      border-radius: calc(infinity * 1px);
      border: 2px solid var(--step-color-selected);
      background-color: var(--step-background-selected);
      padding-inline: var(--step-padding-node);
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      >img, >picture, >svg {
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }
      >img, >picture {
        object-fit: cover;
      }
    }
    >* [data-role=track]>:first-child, >* [data-role=track]>:last-child {
      flex: auto;
      background-color: var(--step-color-selected);
    }
    >* [data-role=label] {
      color: var(--step-color-label);
      font-size: var(--step-font-size-label);
      margin-top: 0.5em;
    }
    >* [data-role=description] {
      font-size: var(--step-font-size-description);
      color: var(--step-color-description);
    }
    >*:where([data-selected=true]) [data-role=header]:before {
      content: '';
      width: 0;
      height: 0;
      position: absolute;
    }
    >*:where([data-selected=true])~* {
      [data-role=track]>:first-child, [data-role=track]>:last-child {
        background-color: var(--step-color-deselected);
      }
      [data-role=node] {
        border-color: var(--step-color-deselected);
        color: var(--step-color-deselected-text);
        background-color: var(--step-background-deselected);
      }
      [data-role=label], [data-role=description], [data-role=header] {
        color: var(--step-color-deselected);
      }
    }
    >*:where([data-selected=true]) [data-role=header] {
      color: var(--step-color-header-selected);
      background-color: var(--step-color-selected);
    }
    >* [data-role=header] {
      padding-inline: 6px;
    }
    >* [data-role=track] {
      width: 100%;
    }
    >* [data-role=track]>:first-child, >* [data-role=track]>:last-child {
      width: var(--step-width-track);
      height: var(--step-height-track);
    }
    >* [data-role=description] {
      margin-inline: 1em;
    }
    >*:where([data-selected=true]) [data-role=header]:before {
      border-inline-end: 5px solid transparent;
      border-inline-start: 5px solid transparent;
      border-block-start: 5px solid var(--step-color-selected);
      margin-inline-start: -5px;
      inset-inline-start: 50%;
      inset-block-end: -4px;
    }
  }
}
.btns-end {
  flex-direction: column;
  >* {
    &:where(:first-child) {
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }
    &:where(:last-child) {
      border-start-start-radius: 0;
      border-start-end-radius: 0;
    }
    &:where(:not(:first-of-type)) {
      margin-block-start: -1px;
    }
  }
  &:where(.btns-flush) {
    border-start-end-radius: inherit;
    height: 100%;
    &:before {
      content: "";
      width: 1px;
      height: 100%;
      background-color: var(--color-title-bd);
      position: absolute;
      inset-inline-start: 0;
      top: 0;
    }
    >* {
      border-radius: 0;
      border-inline-end: none;
      &:where(:first-child) {
        border-start-end-radius: inherit;
      }
    }
  }
}
.blockquote-bar {
  position: relative;
  border-inline-start: none;
  height: fit-content;
  padding-inline-start: 2rem;
  border-radius: var(--default-border-radius);
  &:before {
    content: '';
    display: block;
    height: calc(100% - calc(var(--spacing) * 6));
    width: var(--blockquote-border-width);
    background-color: var(--blockquote-border-color);
    position: absolute;
    top: calc(var(--spacing) * 3);
    inset-inline-start: calc(var(--spacing) * 3);
  }
}
.blockquote-card {
  --blockquote-border-color: var(--color-title-bd);
  position: relative;
  border-inline-start: none;
  height: fit-content;
  padding-inline-start: 4rem;
  border-radius: var(--default-border-radius);
  border: 1px solid var(--blockquote-border-color);
  &:before {
    content: "❝";
    color: var(--blockquote-border-color);
    font-size: 4rem;
    line-height: 3rem;
    height: 2rem;
    overflow: hidden;
    font-family: serif;
    display: block;
    position: absolute;
    top: 0.7rem;
    inset-inline-start: 1rem;
  }
  &:dir(rtl) {
    &:before {
      content: "❞";
    }
  }
}
.table-fixed-start {
  th:first-child, td:first-child {
    background-color: var(--color-stage);
    box-shadow: inset calc(-1px * var(--direction-factor-1)) 0 0 0 var(--table-wrapper-border-color);
    position: sticky;
    inset-inline-start: 0;
    z-index: 3;
  }
  &:where(:has([class*="table-stripe"])) tbody tr:nth-child(odd) td:first-child {
    background-color: var(--table-color-stripe);
  }
  &:where(:has([class*="table-stripe"])) tbody tr.table-selected td:first-child {
    background-color: var(--table-color-select);
  }
  &:where(:has(.table-hoverable)) tbody tr:not(.table-selected):hover td:first-child {
    background-color: var(--table-wrapper-border-color);
  }
}
.dropmenu-list {
  --dropmenu-arrow-item: var(--dropmenu-arrow-host);
  [data-role=host]:after {
    order: -1;
  }
  li {
    margin-inline-start: 2em;
    >:first-child {
      border-radius: var(--dropmenu-border-radius);
    }
    &:has(>ul) {
      >:first-child:after {
        order: -1;
        position: absolute;
        inset-inline-start: 0;
      }
    }
  }
}
.poster-marker-end-top {
  max-width: 80%;
  position: absolute;
  inset-block-start: calc(var(--spacing) * 2);
  inset-inline-end: calc(var(--spacing) * 2);
  z-index: 3;
  display: flex;
  gap: calc(var(--spacing) * 1);
}
.stats-h {
  --stats-font-size: calc(var(--spacing)*8);
  --stats-leading: var(--leading-tight);
  --stats-color-tips: var(--color-description);
  font-size: var(--stats-font-size);
  display: inline-flex;
  [data-role=main] {
    flex: auto;
    display: inline-flex;
    align-items: baseline;
    gap: max(0.125em, 4px);
    position: relative;
  }
  [data-role=label] {
    font-size: var(--stats-font-size);
    line-height: var(--stats-leading);
    position: relative;
    >.badge {
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: 0;
      translate: calc(100% * var(--direction-factor-1)) 0;
    }
  }
  [data-role=prefix] {
    align-self: flex-start;
    font-size: clamp(10px, 0.375em, 14px);
    margin-top: calc(var(--stats-font-size) * (var(--stats-leading) - 0.9));
  }
  [data-role=suffix] {
    color: var(--stats-color-tips);
    font-size: clamp(10px, 0.375em, 14px);
  }
  [data-role=tips] {
    color: var(--stats-color-tips);
    font-size: clamp(12px, 0.375em, 16px);
  }
  flex-direction: row;
  align-items: center;
  gap: calc(var(--spacing)*2);
  [data-role=tips] {
    line-height: var(--stats-leading);
  }
}
.stats {
  --stats-font-size: calc(var(--spacing)*8);
  --stats-leading: var(--leading-tight);
  --stats-color-tips: var(--color-description);
  font-size: var(--stats-font-size);
  display: inline-flex;
  flex-direction: column;
  [data-role=main] {
    flex: auto;
    display: inline-flex;
    align-items: baseline;
    gap: max(0.125em, 4px);
    position: relative;
  }
  [data-role=label] {
    font-size: var(--stats-font-size);
    line-height: var(--stats-leading);
    position: relative;
    >.badge {
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: 0;
      translate: calc(100% * var(--direction-factor-1)) 0;
    }
  }
  [data-role=prefix] {
    align-self: flex-start;
    font-size: clamp(10px, 0.375em, 14px);
    margin-top: calc(var(--stats-font-size) * (var(--stats-leading) - 0.9));
  }
  [data-role=suffix] {
    color: var(--stats-color-tips);
    font-size: clamp(10px, 0.375em, 14px);
  }
  [data-role=tips] {
    color: var(--stats-color-tips);
    font-size: clamp(12px, 0.375em, 16px);
  }
}
.stats-v {
  --stats-font-size: calc(var(--spacing)*8);
  --stats-leading: var(--leading-tight);
  --stats-color-tips: var(--color-description);
  font-size: var(--stats-font-size);
  display: inline-flex;
  flex-direction: column;
  [data-role=main] {
    flex: auto;
    display: inline-flex;
    align-items: baseline;
    gap: max(0.125em, 4px);
    position: relative;
  }
  [data-role=label] {
    font-size: var(--stats-font-size);
    line-height: var(--stats-leading);
    position: relative;
    >.badge {
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: 0;
      translate: calc(100% * var(--direction-factor-1)) 0;
    }
  }
  [data-role=prefix] {
    align-self: flex-start;
    font-size: clamp(10px, 0.375em, 14px);
    margin-top: calc(var(--stats-font-size) * (var(--stats-leading) - 0.9));
  }
  [data-role=suffix] {
    color: var(--stats-color-tips);
    font-size: clamp(10px, 0.375em, 14px);
  }
  [data-role=tips] {
    color: var(--stats-color-tips);
    font-size: clamp(12px, 0.375em, 16px);
  }
}
.step-pending {
  &:where(:not(.step-solid, .step-plain)) {
    [data-selected=true] [data-role=node] {
      background-color: var(--step-color-selected);
      color: var(--step-color-header-selected);
    }
  }
  &:where(.step-solid:not(.step-plain)) {
    [data-selected=true] [data-role=node] {
      background-color: transparent;
      color: var(--step-color-selected);
    }
  }
  &:where(.step-plain) [data-selected=true] [data-role=node]:after {
    content: '';
    font-size: 0.75rem;
    display: inline-block;
    height: 1em;
    aspect-ratio: 1/1;
    text-align: center;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>');
    position: absolute;
    inset-inline-end: -0.5em;
    inset-block-start: -0.5em;
  }
}
.poster-marker-end-bottom {
  max-width: 80%;
  position: absolute;
  inset-block-end: calc(var(--spacing) * 2);
  inset-inline-end: calc(var(--spacing) * 2);
  z-index: 3;
  display: flex;
  gap: calc(var(--spacing) * 1);
}
.btns-start {
  flex-direction: column;
  >* {
    &:where(:first-child) {
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }
    &:where(:last-child) {
      border-start-start-radius: 0;
      border-start-end-radius: 0;
    }
    &:where(:not(:first-of-type)) {
      margin-block-start: -1px;
    }
  }
  &:where(.btns-flush) {
    border-start-start-radius: inherit;
    height: 100%;
    &:before {
      content: "";
      width: 1px;
      height: 100%;
      background-color: var(--color-title-bd);
      position: absolute;
      inset-inline-end: 0;
      top: 0;
    }
    >* {
      border-radius: 0;
      border-inline-start: none;
      &:where(:first-child) {
        border-start-start-radius: inherit;
      }
    }
  }
}
.field-h {
  --field-height: var(--default-height-input);
  --field-width: var(--default-width-input);
  --field-padding-x: 0;
  --field-padding-y: 0;
  --field-font-size: 0.875rem;
  --field-gap: 0.4em;
  font-size: var(--field-font-size);
  width: var(--field-width);
  max-width: 100%;
  padding: var(--field-padding-y) var(--field-padding-x);
  display: flex;
  align-items: flex-start;
  position: relative;
  flex-direction: row;
  gap: var(--field-gap);
  &:where(:has(.input-4,.input-5)) {
    --field-font-size: var(--text-2xs);
  }
  &:where(:has(.input-6, .input-7)) {
    --field-font-size: max(0.75rem, 12px);
  }
  &:where(:has(.input-14, .input-15)) {
    --field-font-size: 1rem;
  }
  [data-role=label], [data-role=help] {
    height: var(--field-height);
    line-height: calc(var(--field-height) / 2);
    display: inline-flex;
    align-items: center;
    gap: var(--field-gap);
  }
  [data-role=label] {
    width: var(--field-width-label);
    &:empty {
      display: none;
    }
  }
  [data-role=help] {
    inset-inline-end: var(--field-padding-x);
  }
  [data-role=content] {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
    gap: var(--field-gap);
  }
  [data-role=note] {
    width: 100%;
  }
  [data-role=control] {
    width: 100%;
    min-height: var(--field-height);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
  }
  [data-role=input], .shell, .shell-h, .shell-v {
    min-width: auto;
    width: 100%;
  }
  [data-role=content] {
    width: var(--field-width);
  }
  [data-role=help] {
    position: static;
  }
}
.field {
  --field-height: var(--default-height-input);
  --field-width: var(--default-width-input);
  --field-padding-x: 0;
  --field-padding-y: 0;
  --field-font-size: 0.875rem;
  --field-gap: 0.4em;
  font-size: var(--field-font-size);
  width: var(--field-width);
  max-width: 100%;
  padding: var(--field-padding-y) var(--field-padding-x);
  display: flex;
  align-items: flex-start;
  position: relative;
  flex-direction: column;
  &:where(:has(.input-4,.input-5)) {
    --field-font-size: var(--text-2xs);
  }
  &:where(:has(.input-6, .input-7)) {
    --field-font-size: max(0.75rem, 12px);
  }
  &:where(:has(.input-14, .input-15)) {
    --field-font-size: 1rem;
  }
  [data-role=label], [data-role=help] {
    height: var(--field-height);
    line-height: calc(var(--field-height) / 2);
    display: inline-flex;
    align-items: center;
    gap: var(--field-gap);
  }
  [data-role=label] {
    width: var(--field-width-label);
    &:empty {
      display: none;
    }
  }
  [data-role=help] {
    inset-inline-end: var(--field-padding-x);
  }
  [data-role=content] {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
    gap: var(--field-gap);
  }
  [data-role=note] {
    width: 100%;
  }
  [data-role=control] {
    width: 100%;
    min-height: var(--field-height);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
  }
  [data-role=input], .shell, .shell-h, .shell-v {
    min-width: auto;
    width: 100%;
  }
  [data-role=content] {
    width: 100%;
  }
  [data-role=help] {
    position: absolute;
  }
}
.field-v {
  --field-height: var(--default-height-input);
  --field-width: var(--default-width-input);
  --field-padding-x: 0;
  --field-padding-y: 0;
  --field-font-size: 0.875rem;
  --field-gap: 0.4em;
  font-size: var(--field-font-size);
  width: var(--field-width);
  max-width: 100%;
  padding: var(--field-padding-y) var(--field-padding-x);
  display: flex;
  align-items: flex-start;
  position: relative;
  flex-direction: column;
  &:where(:has(.input-4,.input-5)) {
    --field-font-size: var(--text-2xs);
  }
  &:where(:has(.input-6, .input-7)) {
    --field-font-size: max(0.75rem, 12px);
  }
  &:where(:has(.input-14, .input-15)) {
    --field-font-size: 1rem;
  }
  [data-role=label], [data-role=help] {
    height: var(--field-height);
    line-height: calc(var(--field-height) / 2);
    display: inline-flex;
    align-items: center;
    gap: var(--field-gap);
  }
  [data-role=label] {
    width: var(--field-width-label);
    &:empty {
      display: none;
    }
  }
  [data-role=help] {
    inset-inline-end: var(--field-padding-x);
  }
  [data-role=content] {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
    gap: var(--field-gap);
  }
  [data-role=note] {
    width: 100%;
  }
  [data-role=control] {
    width: 100%;
    min-height: var(--field-height);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
  }
  [data-role=input], .shell, .shell-h, .shell-v {
    min-width: auto;
    width: 100%;
  }
  [data-role=content] {
    width: 100%;
  }
  [data-role=help] {
    position: absolute;
  }
}
.sketch-mark {
  --sketch-mark-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M79,23c-4.34,0-9.13-.52-13-1-3.97-.5-7.28-1-12-1s-7.09.49-10,1c-2.8.49-6.03,1-10,1s-6.76-.46-10-1c-2.43-.41-5.65-.88-8-1-5.07-.25-13.06,1.35-15,2,0,0,1.09-2.97,1-4-.07-.79-.97-2.21-1-3-.04-1.03,1.06-2.97,1-4-.04-.79-1-2.21-1-3v-2c0-.9-1-3-1-3,5-1,10.43-1.33,17-1,3.39.17,7.31.55,10,1,2.74.46,4.71,1,7,1s4.59-.58,7-1c3.21-.57,6.77-1,13-1,5.84,0,10.69.46,15,1,3.62.45,6.79,1,10,1,9.23,0,16.01-1.17,20-2,0,0-.15,2.26,0,3,.16.78,1,3.21,1,4,0,2-1.02,4.23-1,6,.02,1.52,1,6,1,6-7.96,1-10.41,1-21,1Z' fill='black'/%3E%3C/svg%3E");
  position: relative;
  isolation: isolate;
  display: inline-block;
  &:after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -4px;
    right: -4px;
    top: 0.1em;
    bottom: 0.1em;
    background-color: var(--sketch-mark-color, var(--color-highlight));
    mask-image: var(--sketch-mark-image);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
  }
}
.sketch-circling {
  --sketch-circling-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 24' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M47,4c-7-2-20.1-3.18-31-1C11,4-.15,8.1,1,15c1,6,19.48,8.31,30,7,8-1,18.97-6.12,18-10s-12-6-15-6'  stroke='black' stroke-width='2px' fill='none' stroke-linecap='round' /%3E%3C/svg%3E");
  position: relative;
  display: inline-block;
  &:after {
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    top: 0.1em;
    bottom: 0.1em;
    background-color: var(--sketch-circling-color, var(--color-error));
    mask-image: var(--sketch-circling-image);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
  }
}
.table-crossable {
  overflow: hidden;
  tr:where(:not(.table-selected, .table-disabled)):hover {
    background-color: var(--table-color-hover);
  }
  td:hover::before {
    content: "";
    position: absolute;
    background-color: var(--table-color-hover);
    width: 100%;
    height: 10000px;
    left: 0;
    top: -5000px;
    z-index: -1;
  }
}
.deform {
  --deform-height: 14px;
  --deform-width-line: var(--deform-height);
  --deform-height-line: 2px;
  height: var(--deform-height);
  aspect-ratio: 1 / 1;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  --: ;
  transition: var(--transition-all-normal);
  &:before, &:after, >* {
    content: '';
    display: block;
    height: var(--deform-height-line);
    width: var(--deform-width-line);
    background-color: currentColor;
    border-radius: var(--deform-height-line);
    transition: all 200ms ease;
    position: absolute;
    left: calc((100% - var(--deform-width-line))/2);
    top: calc((100% - var(--deform-height-line))/2);
  }
}
.bookmark {
  --bookmark-height: calc(var(--spacing)*8);
  --bookmark-font-size: 0.875rem;
  --bookmark-color: inherit;
  --bookmark-color-selected: var(--color-primary);
  --bookmark-color-hover: var(--bookmark-color-selected);
  --bookmark-padding-x: calc(var(--bookmark-height)/3);
  --bookmark-border-width: 1px;
  --bookmark-border-color: var(--color-title-bd);
  --bookmark-outline-color: var(--bookmark-color-selected);
  --bookmark-item-background: var(--color-title-bg);
  --bookmark-item-background-selected: var(--color-stage);
  --bookmark-shadow-width: var(--bookmark-border-width);
  --bookmark-shadow: var(--bookmark-border-color);
  font-size: var(--bookmark-font-size);
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-end;
  position: relative;
  z-index: 2;
  &:after {
    content: "";
    display: block;
    height: var(--bookmark-shadow-width);
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: var(--bookmark-shadow);
    z-index: 1;
  }
  input {
    appearance: none;
    outline: none;
    position: absolute;
    opacity: 0;
  }
  >* {
    color: var(--bookmark-color);
    display: inline-flex;
    align-items: center;
    background-color: var(--bookmark-item-background);
    height: var(--bookmark-height);
    line-height: var(--bookmark-height);
    padding: 0 var(--bookmark-padding-x);
    position: relative;
    z-index: 2;
    border-block-start: var(--bookmark-border-width) solid var(--bookmark-border-color);
    border-inline-start: var(--bookmark-border-width) solid var(--bookmark-border-color);
    border-block-end: var(--bookmark-border-width) solid var(--bookmark-border-color);
    cursor: pointer;
    --: ;
    transition: var(--transition-all-normal);
    &:has(:focus-visible) {
      outline: var(--default-outline-width) solid var(--bookmark-outline-color);
      outline-offset: var(--default-outline-offset);
      z-index: 2;
    }
    &:last-child {
      border-inline-end: var(--bookmark-border-width) solid var(--bookmark-border-color);
    }
    &:where([data-selected=true], :has(:checked)) {
      color: var(--bookmark-color-selected);
      background-color: var(--bookmark-item-background-selected);
      border-block-end-color: transparent;
    }
    &:where([data-disabled=true]) {
      cursor: not-allowed;
      opacity: var(--default-opacity-disabled, 0.5);
    }
    &:where(:not([data-disabled=true], [data-selected=true], :has(:checked))):hover {
      color: var(--bookmark-color-hover);
    }
  }
}
.pagination {
  --pagination-color: var(--color-title);
  --pagination-color-hover: var(--color-primary);
  --pagination-color-selected: var(--color-primary-contrast);
  --pagination-height: calc(var(--spacing)*8);
  --pagination-font-size: 0.875rem;
  --pagination-padding-x: calc(var(--pagination-height)/3);
  --pagination-margin-x: 2px;
  --pagination-border-color: var(--color-title-bd);
  --pagination-border-width: 1px;
  --pagination-border-radius: var(--default-border-radius);
  --pagination-background: var(--color-stage);
  --pagination-background-hover: var(--color-primary-bg);
  --pagination-align: center;
  color: var(--pagination-color);
  font-size: var(--pagination-font-size);
  line-height: var(--leading-tight);
  display: flex;
  align-items: center;
  justify-content: var(--pagination-align);
  flex-wrap: wrap;
  [data-role=pages], [data-role=main], [data-role=other] {
    display: inline-flex;
    align-items: center;
  }
  [data-role=pages]:empty, [data-role=main]:empty {
    display: none;
  }
  &[flexible] [data-role=main] {
    flex: auto;
    &:first-child {
      justify-content: flex-start;
    }
    &:last-child {
      justify-content: flex-end;
    }
  }
  [data-role=page], [data-role=previous], [data-role=next], [data-role=first], [data-role=last] {
    color: var(--pagination-color);
    height: var(--pagination-height);
    min-width: var(--pagination-height);
    border: var(--pagination-border-width) solid var(--pagination-border-color);
    border-radius: var(--pagination-border-radius);
    background-image: none;
    padding-inline: var(--pagination-padding-x);
    margin-inline: var(--pagination-margin-x);
    background-color: var(--pagination-background);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --: ;
    transition: var(--transition-all-normal);
    &:where(:not([data-selected=true], [data-disabled=true])):hover {
      color: oklch(from var(--pagination-color-hover) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      border-color: var(--pagination-color-hover);
      background-color: var(--pagination-background-hover);
      z-index: 2;
      cursor: pointer;
    }
    &:where([data-selected=true]) {
      z-index: 2;
    }
  }
  [data-role=ellipsis], [data-role=total],  [data-role=goto], [data-role=size],  [data-role=custom] {
    display: inline-flex;
    align-items: center;
    margin-inline: var(--pagination-margin-x);
  }
  [data-role=goto], [data-role=size] {
    gap: 0.25em;
    input, select {
      width: 4em;
      font-size: var(--pagination-font-size);
    }
    input {
      text-align: center;
    }
  }
  [data-selected=true] {
    color: var(--pagination-color-selected);
    border-color: var(--pagination-color-hover);
    background-color: var(--pagination-color-hover);
  }
  [data-disabled=true] {
    cursor: not-allowed;
    opacity: var(--default-opacity-disabled, 0.5);
  }
  [data-role=pages] {
    margin-inline: var(--pagination-margin-x);
    [data-role=ellipsis] {
      border: var(--pagination-border-width) solid var(--pagination-border-color);
      height: var(--pagination-height);
      padding-inline: var(--pagination-padding-x);
    }
    >* {
      border-radius: 0;
      margin-inline: 0;
      &:not(:last-child) {
        margin-inline-end: -1px;
      }
      &:first-child {
        border-start-start-radius: var(--pagination-border-radius);
        border-end-start-radius: var(--pagination-border-radius);
      }
      &:last-child {
        border-start-end-radius: var(--pagination-border-radius);
        border-end-end-radius: var(--pagination-border-radius);
      }
    }
  }
}
.btns {
  display: inline-flex;
  position: relative;
  >* {
    --btn-background-color: var(--color-stage);
    &:where(:not(:first-child, :last-child)) {
      border-radius: 0;
    }
    &:where([disabled]) {
      opacity: var(--default-opacity-disabled);
      cursor: not-allowed;
    }
    &:where(:not([disabled])):hover {
      z-index: 2;
    }
    &:focus-visible, &:active {
      z-index: 3;
    }
    &:where([data-selected=true]) {
      color: var(--color-primary-contrast);
      background-color: var(--color-primary);
      border-color: var(--color-primary);
      z-index: 3;
    }
  }
  &:where(:not(.btns-start, .btns-end)) {
    >* {
      &:where(:first-child) {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
      }
      &:where(:last-child) {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
      }
      &:where(:not(:first-of-type)) {
        margin-inline-start: -1px;
      }
    }
  }
}
.otp-group {
  --otp-gap: 0;
  input {
    position: relative;
    &:where(:not(.input-ghost, .input-underline, .input-subtle)) {
      &:not(:first-child) {
        margin-inline-start: -1px;
      }
    }
    &:not(:first-child, :last-child) {
      --input-border-radius: 0;
    }
    &:first-child {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
    &:last-child {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }
    &:hover, &:focus-visible {
      z-index: 2;
    }
  }
}
.segment {
  :where(&) {
    --segment-font-size: 0.875rem;
    --segment-height: calc(var(--spacing)*8);
    --segment-border-radius: var(--default-border-radius);
    --segment-border-width: 2px;
    --segment-background: var(--color-title-bg-hover);
    --segment-item-color-selected: var(--color-title);
    --segment-item-background-selected: var(--color-stage);
    --segment-item-color: var(--color-title);
    --segment-item-background-hover: var(--color-title-bg);
    --segment-item-padding-x: calc(var(--segment-height)/3);
    --segment-outline-color: var(--default-outline-color);
    --segment-item-border-color-selected: var(--color-title-bd-hover);
    font-size: var(--segment-font-size);
    text-align: center;
    height: var(--segment-height);
    padding: var(--segment-border-width);
    border-radius: var(--segment-border-radius);
    background-color: var(--segment-background);
    display: inline-flex;
    gap: var(--segment-border-width);
    max-width: 100%;
    --: ;
    transition: var(--transition-all-normal);
    input {
      appearance: none;
      outline: none;
      position: absolute;
      opacity: 0;
    }
    >* {
      color: var(--segment-item-color);
      height: calc(var(--segment-height) - var(--segment-border-width)*2);
      line-height: var(--leading-tight);
      padding-inline: var(--segment-item-padding-x);
      border-radius: calc(var(--segment-border-radius) - var(--segment-border-width)/2);
      cursor: pointer;
      text-align: center;
      gap: calc(1em/3);
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      --: ;
      transition: var(--transition-all-normal);
      &:where([data-selected=true], :has(:checked)) {
        color: var(--segment-item-color-selected);
        background-color: var(--segment-item-background-selected);
        border: 1px solid var(--segment-item-border-color-selected);
      }
      &:has(:focus-visible) {
        outline: var(--default-outline-width) solid var(--segment-outline-color);
        outline-offset: var(--default-outline-offset);
      }
      &:where([data-disabled=true]) {
        cursor: not-allowed;
        opacity: var(--default-opacity-disabled, 0.5);
      }
      &:where(:not([data-selected=true], :has(:checked), [data-disabled=true])):hover {
        background-color: var(--segment-item-background-hover);
      }
    }
  }
}
.poster-marker-center {
  max-width: 80%;
  position: absolute;
  z-index: 3;
  display: flex;
  gap: calc(var(--spacing) * 1);
}
.avatar {
  :where(&) {
    --avatar-border-radius: var(--default-border-radius);
    --avatar-color: var(--color-caption);
    --avatar-background: var(--color-title-bg-hover);
    --avatar-border-width: 0;
    --avatar-border-color: var(--color-title-bd);
    --avatar-height: var(--default-height-input);
    --avatar-font-size: 0.875rem;
    color: var(--avatar-color);
    font-size: var(--avatar-font-size);
    background-color: var(--avatar-background);
    border-radius: var(--avatar-border-radius);
    border: var(--avatar-border-width) solid var(--avatar-border-color);
    text-align: center;
    height: var(--avatar-height);
    aspect-ratio: 1/1;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    --: ;
    transition: var(--transition-all-normal);
    >*, img {
      corner-shape: inherit;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      object-fit: cover;
      --: ;
      transition: var(--transition-all-normal);
    }
    picture:has(img[src=""]), picture:has(img:not([src])), img[src=""], img:where(:not([src])) {
      display: none;
    }
    &:where(:has(img[src=""])):before, &:where(:has(img:not([src]))):before {
      content: var(--i18n-no-avatar);
    }
  }
}
.entry {
  --entry-height: var(--default-height-input);
  --entry-gap: calc(var(--spacing)*2);
  --entry-leading: var(--leading-tight);
  --entry-color: currentColor;
  --entry-color-hover: var(--color-primary);
  --entry-color-disabled: var(--color-placeholder);
  --entry-color-checked-disabled: var(--color-primary-bd);
  --entry-align-items: center;
  --entry-padding-x: 0;
  --entry-padding-y: calc(var(--entry-padding-x)/2);
  --entry-border-radius: 0;
  --entry-font-size: 0.875rem;
  font-size: var(--entry-font-size);
  color: var(--entry-color);
  height: var(--entry-height);
  line-height: var(--entry-leading);
  padding-inline: var(--entry-padding-x);
  padding-block: var(--entry-padding-y);
  border-radius: var(--entry-border-radius, 0);
  display: flex;
  align-items: var(--entry-align-items);
  gap: var(--entry-gap);
  --: ;
  transition: var(--transition-all-normal);
  position: relative;
  >.entry-body {
    flex: auto;
    display: flex;
    align-items: var(--entry-align-items);
    &:has(>.entry-label) {
      width: 0;
    }
  }
  >.entry-label, >.entry-body>.entry-label {
    flex: auto;
    width: 0;
    max-width: 100%;
    --: ;
    transition: var(--transition-all-normal);
  }
  &:where(:has(:checked)) {
    >.entry-label, >.entry-body>.entry-label {
      color: var(--entry-color-hover);
    }
  }
  &:where(:has(:disabled)) {
    >.entry-label, >.entry-body>.entry-label {
      color: var(--entry-color-disabled);
    }
  }
  &:where(:has(:checked:disabled)) {
    >.entry-label, >.entry-body>.entry-label {
      color: var(--entry-color-checked-disabled);
    }
  }
}
.progress-spinner {
  &:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: var(--progress-background-bar);
    border-radius: inherit;
    will-change: left, right;
    animation: progress-spinner 1.5s cubic-bezier(0, .4, 1, .6) infinite;
  }
  >[data-role=bar] {
    display: none;
  }
}
.rating {
  --rating-font-size: 0.875rem;
  --rating-height: calc(var(--spacing) * 8);
  --rating-item-height: max(calc(var(--spacing) * 4), calc(var(--rating-height)*0.625));
  --rating-item-width: var(--rating-item-height);
  --rating-item-color-checked: var(--color-warning);
  --rating-item-color: var(--color-warning-bg-active);
  --rating-gap: 0.4em;
  --rating-item-gap: 0.4em;
  --rating-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z' /%3E%3C/svg%3E");
  font-size: var(--rating-font-size);
  display: inline-flex;
  align-items: center;
  gap: var(--rating-gap);
  >*:where(:has(input[type=radio]), :has([data-role=item])) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rating-item-gap);
  }
  &:where(:has(> * > input[type=radio] + input[type=radio]), :has(> * > [data-role=item] + [data-role=item])) {
    --rating-item-width: calc(var(--rating-item-height)/2);
    --rating-item-gap: 0;
    >* input[type=radio]:last-child, >* [data-role=item]:last-child {
      mask-position: calc(100% * var(--direction-factor-3)) center;
    }
    input[type=radio]:checked+input[type=radio] {
      color: var(--custom-item-color, var(--rating-item-color));
    }
  }
  input[type=radio], [data-role=item] {
    font-size: inherit;
    position: relative;
    width: var(--rating-item-width);
    height: var(--rating-item-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: currentColor;
    mask-image: var(--rating-mask-image);
    mask-size: var(--rating-item-height) var(--rating-item-height);
    mask-position: calc(100% * var(--direction-factor-2)) center;
    mask-repeat: no-repeat;
  }
  input[type=radio] {
    --input-border-radius: 0;
    appearance: none;
    outline-offset: 0;
    animation-name: none;
    --: ;
    transition: var(--transition-all-normal);
    &:hover {
      cursor: pointer;
    }
  }
  &:where(:not(.rating-radio)) {
    input[type=radio], [data-role=item] {
      color: var(--rating-item-color-checked);
    }
    &:where(:not(:has(input[type=radio]:checked))) {
      input[type=radio] {
        color: var(--custom-item-color, var(--rating-item-color));
      }
    }
    &:where(:has([data-role=item][data-checked=true])) {
      input[type=radio] {
        color: var(--custom-item-color, var(--rating-item-color));
      }
    }
    >*:where(:has(input[type=radio]:checked))~* input[type=radio], >*:where(input[type=radio]:checked)~input[type=radio] {
      color: var(--custom-item-color, var(--rating-item-color));
    }
    >*:where(:has([data-role=item][data-checked=true]))~* [data-role=item], >*:where([data-role=item][data-checked=true])~[data-role=item] {
      color: var(--custom-item-color, var(--rating-item-color));
    }
    &:where(:has(input[type=radio]:hover)) {
      input[type=radio],  >* input[type=radio]:checked+input[type=radio] {
        color: var(--rating-item-color-checked);
      }
    }
    >*:where(:has(input[type=radio]:hover))~* input[type=radio], >*:where(input[type=radio]:hover)~input[type=radio],  >*:where(:has(input[type=radio]:hover))~* input[type=radio]:checked+input[type=radio] {
      color: var(--custom-item-color, var(--rating-item-color));
    }
    &:where(:has(> * > input[type=radio] + input[type=radio]), :has(> * > [data-role=item] + [data-role=item])) {
      input[type=radio]:hover+input[type=radio] {
        color: var(--custom-item-color, var(--rating-item-color));
      }
    }
  }
}
.buoy {
  :where(&) {
    --buoy-height: calc(var(--spacing)*6);
    --buoy-color-label: var(--color-title-fg);
    --buoy-color-value: var(--color-title-fg);
    --buoy-border-color: var(--color-title-bd);
    --buoy-divider-color: var(--buoy-border-color);
    --buoy-border-radius: var(--spacing);
    --buoy-background-label: var(--color-caption-bg);
    --buoy-background-value: var(--color-stage);
    --buoy-font-size: max(0.75rem, 12px);
    --buoy-gap: calc(var(--buoy-font-size)/3);
    --buoy-padding-x: calc(var(--buoy-height)/4);
    --buoy-divider-width: 1px;
    --buoy-border-width: 1px;
    font-size: max(var(--buoy-font-size), 8px);
    overflow: hidden;
    border: var(--buoy-border-width) solid var(--buoy-border-color);
    border-radius: var(--buoy-border-radius);
    height: var(--buoy-height);
    line-height: 1em;
    background-color: var(--color-stage);
    text-align: center;
    display: inline-flex;
    --: ;
    transition: var(--transition-all-normal);
    >* {
      padding: 0 var(--buoy-padding-x);
    }
    [data-role=label] {
      color: var(--buoy-color-label);
      background-color: var(--buoy-background-label);
      border-inline-end: var(--buoy-divider-width) solid var(--buoy-divider-color);
      position: relative;
      gap: var(--buoy-gap);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      --: ;
      transition: var(--transition-all-normal);
      &:empty {
        display: none;
      }
    }
    [data-role=value] {
      color: var(--buoy-color-value);
      background-color: var(--buoy-background-value);
      gap: var(--buoy-gap);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      --: ;
      transition: var(--transition-all-normal);
    }
  }
}
.tag {
  :where(&) {
    --tag-padding-x: calc(var(--tag-height)/4);
    --tag-height: var(--default-height-input);
    --tag-color: var(--color-title-fg);
    --tag-border-color: var(--color-title-bd);
    --tag-background: transparent;
    --tag-background-hover: var(--color-title-bg);
    --tag-border-radius: var(--default-border-radius);
    --tag-border-width: 1px;
    --tag-gap: 0.4em;
    --tag-font-size: 0.875rem;
    font-size: var(--tag-font-size);
    color: var(--tag-color);
    height: var(--tag-height);
    line-height: var(--tag-height);
    padding: 0 var(--tag-padding-x);
    border: var(--tag-border-width) solid var(--tag-border-color);
    background-color: var(--tag-background);
    border-radius: var(--tag-border-radius);
    gap: var(--tag-gap);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --: ;
    transition: var(--transition-all-normal);
    &:hover {
      background-color: var(--tag-background-hover);
    }
  }
}
.table-wrapper {
  --table-wrapper-border-color: var(--color-title-bd);
  --table-wrapper-height: fit-content;
  --table-wrapper-width: auto;
  height: var(--table-wrapper-height);
  width: var(--table-wrapper-width);
  overflow: auto;
  position: relative;
  table {
    border-block-start: none;
    border-block-end: none;
  }
  &:where(:not(:has(.table-borderless))) {
    border-block: 1px solid var(--table-wrapper-border-color);
  }
  &:where(:has(.table-grid)) {
    border-inline-start: 1px solid var(--table-wrapper-border-color);
    box-shadow: inset calc(-1px*var(--direction-factor-1)) 0 0 0 var(--table-wrapper-border-color);
    table {
      border-inline-start: 0;
    }
  }
  &:where(:has(.table-bordered)) {
    border-inline: 1px solid var(--table-wrapper-border-color);
    table {
      border-inline-start: 0;
      border-inline-end: 0;
    }
  }
}
.hidden-appearance {
  appearance: none;
  outline: none;
  position: absolute;
  opacity: 0;
}
.comment-start {
  position: relative;
}
.fixed {
  position: fixed;
}
.static {
  position: static;
}
.sticky {
  position: sticky;
}
.bubble-end {
  margin-bottom: auto;
  margin-inline-end: var(--bubble-margin-bridge);
  &:after {
    inset: auto;
    inset-block-start: calc(50% - var(--bubble-arrow-size)/2);
    inset-inline-end: calc(var(--bubble-arrow-size)/-2);
    box-shadow: var(--bubble-border-width) var(--bubble-border-width) 0 var(--bubble-border-color);
    rotate: -45deg;
    border-bottom-right-radius: var(--bubble-arrow-radius);
  }
  &:before {
    height: 100%;
    width: var(--bubble-bridge-size);
    bottom: 0;
    inset-inline-start: auto;
    inset-inline-end: calc(var(--bubble-bridge-size)*-1);
  }
}
.bubble-end-top {
  margin-bottom: auto;
  margin-inline-end: var(--bubble-margin-bridge);
  &:after {
    inset: auto;
    inset-block-start: var(--bubble-arrow-offset);
    inset-inline-end: calc(var(--bubble-arrow-size)/-2);
    box-shadow: var(--bubble-border-width) var(--bubble-border-width) 0 var(--bubble-border-color);
    rotate: -45deg;
    border-bottom-right-radius: var(--bubble-arrow-radius);
  }
  &:before {
    height: 100%;
    width: var(--bubble-bridge-size);
    bottom: 0;
    inset-inline-start: auto;
    inset-inline-end: calc(var(--bubble-bridge-size)*-1);
  }
}
.bubble-end-bottom {
  margin-bottom: auto;
  margin-inline-end: var(--bubble-margin-bridge);
  &:after {
    inset: auto;
    inset-block-end: var(--bubble-arrow-offset);
    inset-inline-end: calc(var(--bubble-arrow-size)/-2);
    box-shadow: var(--bubble-border-width) var(--bubble-border-width) 0 var(--bubble-border-color);
    rotate: -45deg;
    border-bottom-right-radius: var(--bubble-arrow-radius);
  }
  &:before {
    height: 100%;
    width: var(--bubble-bridge-size);
    bottom: 0;
    inset-inline-start: auto;
    inset-inline-end: calc(var(--bubble-bridge-size)*-1);
  }
}
.bubble-top {
  margin-bottom: auto;
  margin-top: var(--bubble-margin-bridge);
  &:after {
    inset: auto;
    inset-inline-start: calc(50% - var(--bubble-arrow-size)/2);
    inset-block-start: calc(var(--bubble-arrow-size)/-2);
    box-shadow: calc(-1*var(--bubble-border-width)) calc(-1*var(--bubble-border-width)) 0 var(--bubble-border-color);
    border-top-left-radius: var(--bubble-arrow-radius);
  }
  &:before {
    bottom: auto;
    top: calc(var(--bubble-bridge-size)*-1);
  }
}
.bubble-top-start {
  margin-bottom: auto;
  margin-top: var(--bubble-margin-bridge);
  &:after {
    inset: auto;
    inset-inline-start: var(--bubble-arrow-offset);
    inset-block-start: calc(var(--bubble-arrow-size)/-2);
    box-shadow: calc(-1*var(--bubble-border-width)) calc(-1*var(--bubble-border-width)) 0 var(--bubble-border-color);
    border-top-left-radius: var(--bubble-arrow-radius);
  }
  &:before {
    bottom: auto;
    top: calc(var(--bubble-bridge-size)*-1);
  }
}
.bubble-start {
  margin-bottom: auto;
  margin-inline-start: var(--bubble-margin-bridge);
  &:after {
    inset: auto;
    inset-block-start: calc(50% - var(--bubble-arrow-size)/2);
    inset-inline-start: calc(var(--bubble-arrow-size)/-2);
    box-shadow: calc(-1*var(--bubble-border-width)) calc(-1*var(--bubble-border-width)) 0 var(--bubble-border-color);
    rotate: -45deg;
    border-top-left-radius: var(--bubble-arrow-radius);
  }
  &:before {
    height: 100%;
    width: var(--bubble-bridge-size);
    bottom: 0;
    inset-inline-start: calc(var(--bubble-bridge-size)*-1);
  }
}
.bubble-start-top {
  margin-bottom: auto;
  margin-inline-start: var(--bubble-margin-bridge);
  &:after {
    inset: auto;
    inset-block-start: var(--bubble-arrow-offset);
    inset-inline-start: calc(var(--bubble-arrow-size)/-2);
    box-shadow: calc(-1*var(--bubble-border-width)) calc(-1*var(--bubble-border-width)) 0 var(--bubble-border-color);
    rotate: -45deg;
    border-top-left-radius: var(--bubble-arrow-radius);
  }
  &:before {
    height: 100%;
    width: var(--bubble-bridge-size);
    bottom: 0;
    inset-inline-start: calc(var(--bubble-bridge-size)*-1);
  }
}
.bubble-start-bottom {
  margin-bottom: auto;
  margin-inline-start: var(--bubble-margin-bridge);
  &:after {
    inset: auto;
    inset-block-end: var(--bubble-arrow-offset);
    inset-inline-start: calc(var(--bubble-arrow-size)/-2);
    box-shadow: calc(-1*var(--bubble-border-width)) calc(-1*var(--bubble-border-width)) 0 var(--bubble-border-color);
    rotate: -45deg;
    border-top-left-radius: var(--bubble-arrow-radius);
  }
  &:before {
    height: 100%;
    width: var(--bubble-bridge-size);
    bottom: 0;
    inset-inline-start: calc(var(--bubble-bridge-size)*-1);
  }
}
.bubble-bottom {
  &:after {
    inset: auto;
    inset-inline-start: calc(50% - var(--bubble-arrow-size)/2);
    inset-block-end: calc(var(--bubble-arrow-size)/-2);
    box-shadow: var(--bubble-border-width) var(--bubble-border-width) 0 var(--bubble-border-color);
    border-bottom-right-radius: var(--bubble-arrow-radius);
  }
}
.bubble-bottom-start {
  &:after {
    inset: auto;
    inset-inline-start: var(--bubble-arrow-offset);
    inset-block-end: calc(var(--bubble-arrow-size)/-2);
    box-shadow: var(--bubble-border-width) var(--bubble-border-width) 0 var(--bubble-border-color);
    border-bottom-right-radius: var(--bubble-arrow-radius);
  }
}
.bookmark-start {
  display: flex;
  flex-direction: column;
  &:after {
    width: var(--bookmark-shadow-width);
    height: 100%;
    inset: auto;
    top: 0;
    inset-inline-start: 0;
  }
  >* {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    border-block-start: var(--bookmark-border-width) solid var(--bookmark-border-color);
    border-inline-start: var(--bookmark-border-width) solid var(--bookmark-border-color);
    border-inline-end: var(--bookmark-border-width) solid var(--bookmark-border-color);
    border-block-end: none;
    &:last-child {
      border-block-end: var(--bookmark-border-width) solid var(--bookmark-border-color);
    }
    &:where([data-selected=true], :has(:checked)) {
      border-inline-start-color: transparent;
    }
  }
}
.lamp-start {
  flex-direction: column;
  >*:where(:not(:has(.lamp-label))), .lamp-label {
    justify-content: flex-start;
    padding-inline-start: 1em;
    &:after {
      width: var(--lamp-item-height);
      height: 1lh;
      translate: 0 -50%;
      inset: auto;
      top: 50%;
      inset-inline-start: 0;
    }
  }
  >* {
    &:where(:not(:has(:checked), [data-selected=true])) {
      &:where(:not(:has(.lamp-label))), .lamp-label {
        &:after {
          scale: 1 0;
        }
      }
    }
  }
}
.bubble-top-end {
  margin-bottom: auto;
  margin-top: var(--bubble-margin-bridge);
  &:after {
    inset: auto;
    inset-inline-end: var(--bubble-arrow-offset);
    inset-block-start: calc(var(--bubble-arrow-size)/-2);
    box-shadow: calc(-1*var(--bubble-border-width)) calc(-1*var(--bubble-border-width)) 0 var(--bubble-border-color);
    border-top-left-radius: var(--bubble-arrow-radius);
  }
  &:before {
    bottom: auto;
    top: calc(var(--bubble-bridge-size)*-1);
  }
}
.bubble-bottom-end {
  &:after {
    inset: auto;
    inset-inline-end: var(--bubble-arrow-offset);
    inset-block-end: calc(var(--bubble-arrow-size)/-2);
    box-shadow: var(--bubble-border-width) var(--bubble-border-width) 0 var(--bubble-border-color);
    border-bottom-right-radius: var(--bubble-arrow-radius);
  }
}
.bookmark-end {
  display: flex;
  flex-direction: column;
  &:after {
    width: var(--bookmark-shadow-width);
    height: 100%;
    inset: auto;
    top: 0;
    inset-inline-end: 0;
  }
  >* {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    border-block-start: var(--bookmark-border-width) solid var(--bookmark-border-color);
    border-inline-start: var(--bookmark-border-width) solid var(--bookmark-border-color);
    border-inline-end: var(--bookmark-border-width) solid var(--bookmark-border-color);
    border-block-end: none;
    &:last-child {
      border-block-end: var(--bookmark-border-width) solid var(--bookmark-border-color);
    }
    &:where([data-selected=true], :has(:checked)) {
      border-inline-end-color: transparent;
    }
  }
}
.lamp-end {
  flex-direction: column;
  >*:where(:not(:has(.lamp-label))), .lamp-label {
    justify-content: flex-end;
    padding-inline-end: 1em;
    &:after {
      width: var(--lamp-item-height);
      height: 1lh;
      translate: 0 -50%;
      inset: auto;
      top: 50%;
      inset-inline-end: 0;
    }
  }
  >* {
    &:where(:not(:has(:checked), [data-selected=true])) {
      &:where(:not(:has(.lamp-label))), .lamp-label {
        &:after {
          scale: 1 0;
        }
      }
    }
  }
}
.flag-end-bottom {
  &.flag-triangle {
    inset-inline-start: auto;
    inset-inline-end: 0;
    inset-block-start: auto;
    inset-block-end: 0;
    >*:first-child {
      line-height: calc(var(--flag-height-in)/2 - var(--flag-lh-offset));
      inset-inline-start: auto;
      inset-inline-end: calc(var(--flag-height-in) / -2);
      inset-block-start: auto;
      inset-block-end: calc(var(--flag-height-in) / -2);
    }
  }
  &.flag-circle {
    inset-inline-start: auto;
    inset-block-start: auto;
    inset-inline-end: var(--flag-inset-inline);
    inset-block-end: var(--flag-inset-block);
  }
  &.flag-horn {
    --flag-x-factor: -1;
    inset-inline-start: auto;
    inset-block-start: auto;
    inset-inline-end: 0;
    inset-block-end: var(--flag-inset-block);
    justify-content: flex-end;
    &:before, &:after {
      inset-inline-end: auto;
      inset-inline-start: 0;
    }
  }
  &.flag-ribbon {
    --flag-y-factor: -1;
    --flag-x-factor: -1;
    inset-inline-start: auto;
    inset-block-start: auto;
    inset-inline-end: 0;
    inset-block-end: 0;
  }
  &.flag-diamond {
    --flag-padding-start: calc(var(--flag-height)*1.5/2);
    --flag-padding-end: calc(var(--flag-height)/2);
    inset-inline-start: auto;
    inset-block-start: auto;
    inset-inline-end: 0;
    inset-block-end: 0;
    &:before {
      transform-origin: 0 100%;
      border-radius: 0;
      border-start-start-radius: calc(var(--flag-height)/2);
    }
  }
}
.dropmenu-end-bottom {
  &:where(:not(.dropmenu-list)) {
    >ul {
      translate: calc(100% * var(--direction-factor-1)) 0;
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline-start: auto;
      inset-inline-end: 0;
    }
  }
}
.droppanel-end-bottom {
  &:where(:not(.droppanel-inline)) {
    >[data-role=panel] {
      translate: calc(100% * var(--direction-factor-1)) 0;
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline-start: auto;
      inset-inline-end: 0;
    }
  }
}
.dropmenu-bottom-end {
  &:where(:not(.dropmenu-list)) {
    >ul {
      translate: 0 0;
      inset-block-start: 100%;
      inset-inline-start: auto;
      inset-inline-end: 0;
    }
  }
}
.dropmenu-end {
  &:where(:not(.dropmenu-list)) {
    >ul {
      translate: calc(100% * var(--direction-factor-1)) -50%;
      inset-block-start: 50%;
      inset-inline-start: auto;
      inset-inline-end: 0;
    }
  }
}
.dropmenu-end-top {
  &:where(:not(.dropmenu-list)) {
    >ul {
      translate: calc(100% * var(--direction-factor-1)) 0;
      inset-block-start: 0;
      inset-inline-start: auto;
      inset-inline-end: 0;
    }
  }
}
.dropmenu-top-end {
  &:where(:not(.dropmenu-list)) {
    >ul {
      translate: 0 -100%;
      inset-block-start: 0;
      inset-inline-start: auto;
      inset-inline-end: 0;
    }
  }
}
.droppanel-bottom-end {
  &:where(:not(.droppanel-inline)) {
    >[data-role=panel] {
      translate: 0 0;
      inset-block-start: 100%;
      inset-inline-start: auto;
      inset-inline-end: 0;
    }
  }
}
.droppanel-end {
  &:where(:not(.droppanel-inline)) {
    >[data-role=panel] {
      translate: calc(100% * var(--direction-factor-1)) -50%;
      inset-block-start: 50%;
      inset-inline-start: auto;
      inset-inline-end: 0;
    }
  }
}
.droppanel-end-top {
  &:where(:not(.droppanel-inline)) {
    >[data-role=panel] {
      translate: calc(100% * var(--direction-factor-1)) 0;
      inset-block-start: 0;
      inset-inline-start: auto;
      inset-inline-end: 0;
    }
  }
}
.droppanel-top-end {
  &:where(:not(.droppanel-inline)) {
    >[data-role=panel] {
      translate: 0 -100%;
      inset-block-start: 0;
      inset-inline-start: auto;
      inset-inline-end: 0;
    }
  }
}
.dropmenu-downward-start {
  &:where(:not(.dropmenu-list)) {
    --dropmenu-arrow-item: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><polyline points="15 18 9 12 15 6"/></svg>');
    li {
      &:where(:has(>ul)) {
        &:before {
          inset-inline-end: auto;
          inset-inline-start: calc(-1 * var(--spacing)*2);
        }
      }
      >ul {
        translate: calc((-100% - var(--spacing)*2) * var(--direction-factor-1)) 0;
        inset-inline-end: auto;
        inset-inline-start: 0;
        box-shadow: var(--shadow-base);
      }
    }
  }
}
.flag-end-top {
  &.flag-triangle {
    --flag-x-factor: -1;
    inset-inline-start: auto;
    inset-inline-end: 0;
    >*:first-child {
      inset-inline-start: auto;
      inset-inline-end: calc(var(--flag-height-in) / -2);
    }
  }
  &.flag-circle {
    inset-inline-start: auto;
    inset-inline-end: var(--flag-inset-inline);
  }
  &.flag-horn {
    --flag-x-factor: -1;
    inset-inline-start: auto;
    inset-inline-end: 0;
    justify-content: flex-end;
    &:before, &:after {
      inset-inline-end: auto;
      inset-inline-start: 0;
    }
  }
  &.flag-ribbon {
    --flag-x-factor: -1;
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
  &.flag-diamond {
    --flag-x-factor: -1;
    --flag-padding-start: calc(var(--flag-height)*1.5/2);
    --flag-padding-end: calc(var(--flag-height)/2);
    inset-inline-start: auto;
    inset-inline-end: 0;
    &:before {
      border-radius: 0;
      border-end-start-radius: calc(var(--flag-height)/2);
    }
  }
}
.deform-warning {
  >* {
    opacity: 0;
  }
  &:before {
    width: calc(var(--deform-width-line) - var(--deform-height-line)*2);
    translate: 0 calc(-1*var(--deform-height-line));
    rotate: 90deg;
    inset-inline-start: var(--deform-height-line);
  }
  &:after {
    width: var(--deform-height-line);
    inset-block-start: auto;
    inset-block-end: 0;
    inset-inline-start: calc((100% - var(--deform-height-line))/2);
  }
}
.dropmenu-start-bottom {
  &:where(:not(.dropmenu-list)) {
    >ul {
      translate: calc(-100% * var(--direction-factor-1)) 0;
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline-start: 0;
    }
  }
}
.droppanel-start-bottom {
  &:where(:not(.droppanel-inline)) {
    >[data-role=panel] {
      translate: calc(-100% * var(--direction-factor-1)) 0;
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline-start: 0;
    }
  }
}
.deform-info {
  >* {
    opacity: 0;
  }
  &:before {
    width: var(--deform-height-line);
    inset-block-start: 0;
    inset-inline-start: calc((100% - var(--deform-height-line))/2);
  }
  &:after {
    width: calc(var(--deform-width-line) - var(--deform-height-line)*2);
    translate: 0 var(--deform-height-line);
    rotate: 90deg;
    inset-inline-start: var(--deform-height-line);
  }
}
.dropmenu-bottom-start {
  &:where(:not(.dropmenu-list)) {
    >ul {
      translate: 0 0;
      inset-block-start: 100%;
      inset-inline-start: 0;
    }
  }
}
.dropmenu-start {
  &:where(:not(.dropmenu-list)) {
    >ul {
      translate: calc(-100% * var(--direction-factor-1)) -50%;
      inset-block-start: 50%;
      inset-inline-start: 0;
    }
  }
}
.dropmenu-start-top {
  &:where(:not(.dropmenu-list)) {
    >ul {
      translate: calc(-100% * var(--direction-factor-1)) 0;
      inset-block-start: 0;
      inset-inline-start: 0;
    }
  }
}
.dropmenu-top-start {
  &:where(:not(.dropmenu-list)) {
    >ul {
      translate: 0 -100%;
      inset-block-start: 0;
      inset-inline-start: 0;
    }
  }
}
.droppanel-bottom-start {
  &:where(:not(.droppanel-inline)) {
    >[data-role=panel] {
      translate: 0 0;
      inset-block-start: 100%;
      inset-inline-start: 0;
    }
  }
}
.droppanel-start {
  &:where(:not(.droppanel-inline)) {
    >[data-role=panel] {
      translate: calc(-100% * var(--direction-factor-1)) -50%;
      inset-block-start: 50%;
      inset-inline-start: 0;
    }
  }
}
.droppanel-start-top {
  &:where(:not(.droppanel-inline)) {
    >[data-role=panel] {
      translate: calc(-100% * var(--direction-factor-1)) 0;
      inset-block-start: 0;
      inset-inline-start: 0;
    }
  }
}
.droppanel-top-start {
  &:where(:not(.droppanel-inline)) {
    >[data-role=panel] {
      translate: 0 -100%;
      inset-block-start: 0;
      inset-inline-start: 0;
    }
  }
}
.flag-start-bottom {
  &.flag-triangle {
    --flag-x-factor: -1;
    inset-block-start: auto;
    inset-block-end: 0;
    >*:first-child {
      line-height: calc(var(--flag-height-in)/2 - var(--flag-lh-offset));
      inset-block-start: auto;
      inset-block-end: calc(var(--flag-height-in) / -2);
    }
  }
  &.flag-circle {
    inset-block-start: auto;
    inset-block-end: var(--flag-inset-block);
  }
  &.flag-horn {
    inset-block-start: auto;
    inset-block-end: var(--flag-inset-block);
  }
  &.flag-ribbon {
    --flag-y-factor: -1;
    inset-block-start: auto;
    inset-block-end: 0;
  }
  &.flag-diamond {
    --flag-y-factor: -1;
    inset-block-start: auto;
    inset-block-end: 0;
    &:before {
      transform-origin: 0 100%;
      border-radius: 0;
      border-start-end-radius: calc(var(--flag-height)/2);
    }
  }
}
.dropmenu-bottom {
  &:where(:not(.dropmenu-list)) {
    >ul {
      translate: calc(-50% * var(--direction-factor-1)) 0;
      inset-block-start: 100%;
    }
  }
}
.dropmenu-top {
  &:where(:not(.dropmenu-list)) {
    >ul {
      translate: calc(-50% * var(--direction-factor-1)) -100%;
      inset-block-start: 0;
    }
  }
}
.droppanel-top {
  &:where(:not(.droppanel-inline)) {
    >[data-role=panel] {
      translate: calc(-50% * var(--direction-factor-1)) -100%;
      inset-block-start: 0;
    }
  }
}
.deform-menu-end {
  scale: var(--direction-factor-1) 1;
  &:before {
    top: 2px;
    left: auto;
    width: calc(var(--deform-width-line)*0.625);
    right: 0;
  }
  &:after {
    top: auto;
    bottom: 2px;
    width: calc(var(--deform-width-line)*0.875);
    left: auto;
    right: 0;
  }
}
.deform-2xs {
  --deform-height: 9px;
  --deform-height-line: 1px;
  &[class*="deform-menu"] {
    &:before {
      top: 1px;
    }
    &:after {
      bottom: 1px;
    }
  }
  &.deform-check {
    &:before {
      width: 4px;
      translate: 0px 2px;
    }
    &::after {
      width: 8px;
      translate: 2px 0px;
    }
  }
  &.deform-search {
    &:before {
      width: 8px;
      height: 8px;
    }
    &::after {
      width: 3px;
      translate: 6px 3px;
    }
  }
  &[class*="deform-arrow-"] {
    --deform-width-line: 9px;
  }
  &.deform-arrow-start, &.deform-arrow-end, &.deform-arrow-up, &.deform-arrow-down {
    &:before, &:after {
      width: 5px;
    }
  }
  &.deform-arrow-start {
    &:before {
      translate: 0px -2px;
    }
    &:after {
      translate: 0px 2px;
    }
  }
  &.deform-arrow-end {
    &:before {
      translate: 4px 2px;
    }
    &:after {
      translate: 4px -2px;
    }
  }
  &.deform-arrow-up {
    &:before {
      translate: 0px -2px;
    }
    &:after {
      translate: 4px -2px;
    }
  }
  &.deform-arrow-down {
    &:before {
      translate: 4px 2px;
    }
    &:after {
      translate: 0px 2px;
    }
  }
  &[class*="deform-chevron-"] {
    --deform-width-line: 6px;
  }
  &.deform-chevron-start {
    &:before {
      translate: 0px -2px;
    }
    &:after {
      translate: 0px 2px;
    }
  }
  &.deform-chevron-end {
    &:before {
      translate: 0px 2px;
    }
    &:after {
      translate: 0px -2px;
    }
  }
  &.deform-chevron-up {
    &:before {
      translate: -2px 0px;
    }
    &:after {
      translate: 2px 0px;
    }
  }
  &.deform-chevron-down {
    &:before {
      translate: 2px 0px;
    }
    &:after {
      translate: -2px 0px;
    }
  }
}
.deform-sm {
  --deform-height: 12px;
  &[class*="deform-menu"] {
    &:before {
      top: 1px;
    }
    &:after {
      bottom: 1px;
    }
  }
  &.deform-check {
    &:before {
      width: 6px;
      translate: 0px 1px;
    }
    &::after {
      width: 10px;
      translate: 3px 0px;
    }
  }
  &.deform-search {
    &:before {
      width: 10px;
      height: 10px;
    }
    &::after {
      width: 5px;
      translate: 7px 4px;
    }
  }
  &[class*="deform-chevron"] {
    --deform-width-line: 8px;
  }
  &.deform-chevron-start {
    &:before {
      translate: 0px -2px;
    }
    &:after {
      translate: 0px 2px;
    }
  }
  &.deform-chevron-end {
    &:before {
      translate: 0px 2px;
    }
    &:after {
      translate: 0px -2px;
    }
  }
  &.deform-chevron-up {
    &:before {
      translate: -2px 0px;
    }
    &:after {
      translate: 2px 0px;
    }
  }
  &.deform-chevron-down {
    &:before {
      translate: 2px 0px;
    }
    &:after {
      translate: -2px 0px;
    }
  }
}
.deform-menu-start {
  scale: var(--direction-factor-1) 1;
  &:before {
    top: 2px;
    width: calc(var(--deform-width-line)*0.625);
  }
  &:after {
    top: auto;
    bottom: 2px;
    width: calc(var(--deform-width-line)*0.875);
  }
}
.bookmark-top {
  &:after {
    bottom: auto;
    top: 0;
  }
  >* {
    &:where([data-selected=true], :has(:checked)) {
      border-block-end-color: var(--bookmark-border-color);
      border-block-start-color: transparent;
    }
  }
}
.deform-more-v {
  --deform-width-line: var(--deform-height-line);
  &:before {
    top: 2px;
  }
  &:after {
    top: auto;
    bottom: 2px;
  }
}
.deform-menu {
  &:before {
    top: 2px;
  }
  &:after {
    top: auto;
    bottom: 2px;
  }
}
.lamp-top {
  >*:where(:not(:has(.lamp-label))), .lamp-label {
    &:after {
      bottom: auto;
      top: 0;
    }
  }
}
.deform-spinner {
  >*, &:after {
    opacity: 0;
  }
  &:before {
    --custom-duration: 1000ms;
    aspect-ratio: 1/1;
    height: var(--deform-height);
    border-radius: 100%;
    border-width: var(--deform-height-line);
    border-style: solid;
    border-inline-start-color: transparent;
    border-block-start-color: currentColor;
    border-inline-end-color: currentColor;
    background: transparent;
    top: 0;
    --: ;
    animation: rotate-ccw-360 var(--custom-duration, 1s) linear infinite both;
  }
}
.deform-search {
  >* {
    opacity: 0;
  }
  &:before {
    height: 12px;
    width: 12px;
    border-radius: 100%;
    border: var(--deform-height-line) solid currentColor;
    background: transparent;
    top: 0;
  }
  &::after {
    width: 6px;
    translate: 8px 4px;
    rotate: 45deg;
  }
}
.deform-more-h {
  --deform-width-line: var(--deform-height-line);
  &:before {
    left: 2px;
  }
  &:after {
    left: auto;
    right: 2px;
  }
}
.bookmark-inverted {
  --bookmark-color: inherit;
  --bookmark-color-selected: var(--color-primary-contrast);
  --bookmark-color-hover: var(--color-primary);
  --bookmark-item-background: var(--color-stage);
  --bookmark-item-background-selected: var(--color-primary);
  --bookmark-shadow: var(--color-primary);
  --bookmark-shadow-width: 2px;
  &:after {
    z-index: 3;
  }
  >* {
    &:where([data-selected=true], :has(:checked)) {
      border-color: var(--bookmark-item-background-selected);
    }
  }
}
.pagination-start {
  --pagination-align: flex-start;
  justify-content: space-between;
  >[data-role=pages], >[data-role=main] {
    order: 1;
    flex: auto;
  }
  >:where(:not([data-role=pages], [data-role=main])) {
    order: 2;
  }
  >*:first-child, >[data-role=pages]:first-child>*:first-child, >[data-role=main]:first-child>*:first-child, >[data-role=main]:first-child>[data-role=pages]:first-child>*:first-child {
    margin-inline-start: 0;
  }
}
.pagination-end {
  --pagination-align: flex-end;
  justify-content: space-between;
  >[data-role=pages], >[data-role=main] {
    order: 2;
    flex: auto;
    justify-content: flex-end;
  }
  >:where(:not([data-role=pages], [data-role=main])) {
    order: 1;
  }
  >[data-role=pages]:last-child>*:last-child, >[data-role=main]:last-child>*:last-child, >[data-role=main]:last-child>[data-role=pages]:last-child>*:last-child {
    margin-inline-end: 0;
  }
}
.empty-illustrated {
  &:after {
    content: '';
    display: inline-block;
    height: 1em;
    aspect-ratio: 1/1;
    text-align: center;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1619 1024" fill="black"><path d="M170.439001 699.830899h21.127877c5.749966 0.124999 10.24994 4.750972 10.249939 10.501939 0 5.749966-4.499974 10.500938-10.249939 10.500938H170.439001v21.127877c-0.124999 5.624967-4.749972 10.24994-10.500938 10.24994-2.749984 0-5.375969-0.999994-7.375957-2.874984a9.927942 9.927942 0 0 1-3.124982-7.249957v-21.127876H128.309248c-5.749966-0.124999-10.25094-4.749972-10.25094-10.500939 0-5.750966 4.499974-10.501938 10.24994-10.501938h21.128876v-21.126877c0.124999-5.749966 4.749972-10.25094 10.499939-10.250939 5.751966 0 10.501938 4.499974 10.501938 10.249939v21.002877z m1378.784922-83.50951v-21.126876c0-2.749984-1.124993-5.375969-3.124982-7.250958s-4.625973-2.999982-7.375957-2.875983c-5.625967 0-10.375939 4.500974-10.500938 10.25194v21.001877h-21.127877c-2.749984 0-5.374969 1.124993-7.249957 3.125981s-3.000982 4.624973-2.875983 7.375957c0 5.624967 4.625973 10.499938 10.25094 10.499939h21.127876v21.127876c0 5.750966 4.624973 10.25194 10.500938 10.25194 5.749966 0 10.375939-4.499974 10.500939-10.25194v-21.126876h21.127876c5.749966 0 10.25094-4.625973 10.25094-10.500939 0-5.625967-4.499974-10.376939-10.25094-10.501938h-21.252875zM790.386369 960.986369H264.44845c-5.499968 0-10.875936-2.249987-14.750913-6.124964-3.875977-3.875977-6.125964-9.251946-6.125964-14.751913 0-11.501933 9.500944-20.877878 20.877877-20.877878h94.760445c-7.375957-12.625926-11.125935-27.002842-11.125935-41.629756V271.531409c0-22.12787 8.875948-43.379746 24.502857-59.131654 15.626908-15.626908 37.003783-24.377857 59.131653-24.377857h62.632633V167.019021c0-22.12687 8.875948-43.379746 24.502857-59.131653A83.959508 83.959508 0 0 1 577.986613 83.509511h501.183064c22.12787 0 43.504745 8.750949 59.131653 24.377857 15.751908 15.626908 24.502856 36.879784 24.502857 59.131653v606.070449c0 15.126911-3.999977 29.378828-11.125935 41.629756h115.513323c11.500933 0 20.877878 9.251946 20.877878 20.877878 0 11.500933-9.251946 20.877878-20.877878 20.877878h-250.654531v21.001877c0 15.126911-3.999977 29.378828-11.125935 41.629756h11.250934c11.501933 0 20.877878 9.250946 20.877878 20.877877 0 11.500933-9.500944 20.876878-20.877878 20.876878H906.774687c9.500944 16.001906 7.499956 37.004783-6.375963 50.881702-7.875954 7.874954-18.501892 12.250928-29.502827 12.250928-11.126935 0-21.752873-4.375974-29.503827-12.250928l-51.005701-50.756703z m76.383552-41.754755h66.382611c23.002865 0 41.629756-18.626891 41.629756-41.879755V270.531415c0-22.627867-18.001895-40.754761-40.379763-40.754761H430.09448c-22.25287 0-40.379763 18.251893-40.379763 40.754761v606.820444c0 23.127864 18.75189 41.879755 41.629756 41.879755H748.505614l-10.751937-10.750937c-10.625938-10.500938-14.750914-26.002848-10.875936-40.379764l-19.751884-19.751884c-61.38264 45.754732-147.767134 36.378787-197.898841-21.627873-50.129706-57.881661-47.004725-144.642152 7.000959-198.898835 54.256682-54.380681 141.267172-57.630662 199.273833-7.374956 58.00666 50.255706 67.382605 136.890198 21.251875 198.272838l19.752884 19.751884c14.375916-3.874977 29.877825 0.249999 40.379764 10.876936l69.88259 69.882591z m149.767123-104.512388h62.882631c23.002865-0.124999 41.629756-18.75189 41.629756-41.754755V167.144021c0-23.126864-18.626891-41.754755-41.629756-41.754756H577.611616c-23.002865 0.124999-41.504757 18.75289-41.629757 41.754756v20.877877h396.795676c22.12787 0 43.504745 8.750949 59.131653 24.377857 15.751908 15.626908 24.502856 36.879784 24.502856 59.131654v543.187817zM280.201358 47.005725h31.129818c8.749949 0 15.875907 6.999959 15.875907 15.626908s-7.125958 15.626908-15.876907 15.626908h-31.128818v31.127818c0 8.750949-6.999959 15.876907-15.625908 15.876907-4.125976 0-8.125952-1.74999-11.126935-4.749972-2.999982-2.999982-4.624973-7.000959-4.499974-11.126935V78.384541h-31.129817c-4.249975 0-8.249952-1.62599-11.249934-4.500974-2.999982-2.999982-4.625973-6.999959-4.625973-11.125935 0-8.625949 7.125958-15.626908 15.876907-15.626908h31.128817V15.876907c0-8.750949 6.999959-15.876907 15.626909-15.876907s15.625908 7.125958 15.625908 15.876907v31.128818zM34.672797 940.109492c0-11.501933 9.501944-20.877878 20.877878-20.877878h125.514264c11.501933 0 20.877878 9.250946 20.877878 20.877878 0 11.500933-9.500944 20.876878-20.877878 20.876877H55.550675c-5.499968 0-10.875936-2.249987-14.751914-6.124964-3.999977-3.875977-6.124964-9.251946-6.124964-14.751913z m658.82614-135.016209c40.755761-40.754761 40.755761-106.887374 0-147.767135-40.753761-40.754761-106.886374-40.754761-147.766135 0-40.754761 40.754761-40.754761 106.887374 0 147.767135 40.87976 40.754761 107.012373 40.754761 147.767135 0z m-220.148711-491.682119c0-11.500933 9.374945-20.876878 20.876878-20.876878h229.776654c11.500933 0 20.876878 9.375945 20.876877 20.876878s-9.375945 20.877878-20.876877 20.877877H494.227104c-5.500968 0-10.876936-2.124988-14.751913-6.125964-3.875977-3.874977-6.125964-9.250946-6.125965-14.751913z m0 104.387388c0-11.500933 9.249946-20.877878 20.751879-20.877878h334.53804c11.501933 0 20.752878 9.251946 20.752878 20.877878 0 11.500933-9.250946 20.877878-20.752878 20.877878h-334.53804c-5.500968 0-10.876936-2.249987-14.751914-6.125964-3.875977-3.875977-5.999965-9.250946-5.999965-14.751914z m0 104.512388c0-11.501933 9.374945-20.877878 20.876878-20.877878h146.266143c11.501933 0 20.877878 9.250946 20.877878 20.877878 0 11.500933-9.375945 20.876878-20.877878 20.876877H494.227104c-5.500968 0-10.876936-2.124988-14.751913-6.124964-3.875977-3.875977-6.125964-9.251946-6.125965-14.751913zM76.427552 396.921674c-22.377869 0-43.129747-12.00193-54.256682-31.379816-11.250934-19.376886-11.250934-43.254747 0-62.631633s31.878813-31.378816 54.256682-31.378816c34.628797 0 62.631633 28.003836 62.631633 62.632633 0.124999 34.753796-28.002836 62.756632-62.631633 62.756632z m0-31.379816c11.250934 0 21.501874-5.999965 27.127841-15.625908 5.625967-9.750943 5.625967-21.627873 0-31.379816-5.625967-9.749943-16.001906-15.625908-27.127841-15.625909-17.251899 0-31.379816 14.001918-31.379816 31.378816 0.125999 17.251899 14.127917 31.253817 31.379816 31.253817z m1295.275411-94.009449c-22.377869 0-43.129747-12.00193-54.256682-31.379816-11.250934-19.376886-11.250934-43.254747 0-62.631633s31.878813-31.379816 54.256682-31.379816c34.628797 0 62.631633 28.003836 62.631633 62.632633 0 34.754796-28.002836 62.757632-62.631633 62.757632z m0-31.254817c11.250934 0 21.501874-5.999965 27.127841-15.626908 5.625967-9.749943 5.625967-21.626873 0-31.377816-5.625967-9.751943-16.001906-15.626908-27.127841-15.626909-17.251899 0-31.379816 14.000918-31.379816 31.378816 0 17.1269 14.127917 31.252817 31.379816 31.252817z m0 0"></path></svg>');
    height: 6rem;
    margin-bottom: -1rem;
    order: -1;
  }
}
.container {
  width: 100%;
  @media (width >= 40rem) {
    max-width: 40rem;
  }
  @media (width >= 48rem) {
    max-width: 48rem;
  }
  @media (width >= 64rem) {
    max-width: 64rem;
  }
  @media (width >= 80rem) {
    max-width: 80rem;
  }
  @media (width >= 96rem) {
    max-width: 96rem;
  }
}
.divider-v {
  --divider-size: 1px;
  --divider-background: var(--color-title-bd);
  --divider-color: var(--color-caption);
  --divider-offset: 2em;
  --divider-font-size: inherit;
  --divider-deg-start: 180deg;
  --divider-deg-end: 0deg;
  font-size: var(--divider-font-size);
  color: var(--divider-color);
  line-height: 1.5em;
  overflow: hidden;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--divider-size);
  height: 100%;
  flex-direction: column;
  &:before, &:after {
    width: var(--divider-size);
    height: auto;
  }
  >:first-child {
    writing-mode: vertical-rl;
  }
  &:before, &:after {
    content: '';
    display: block;
    background-color: var(--divider-background);
    flex: auto;
  }
  >:first-child {
    margin-block: auto;
    margin-inline: 1em;
    line-height: inherit;
  }
  &:has(>:first-child:empty) {
    *:first-child, &:after {
      display: none;
    }
  }
  &:empty {
    &:after {
      display: none;
    }
  }
  &:where(:not(:empty):not(:has(>:first-child:empty))) {
    width: 1.5em;
  }
  &:where(.divider-start:not(:empty):not(:has(>:first-child:empty))):before, &:where(.divider-end:not(:empty):not(:has(>:first-child:empty))):after {
    height: var(--divider-offset);
    flex: none;
  }
}
.divider {
  --divider-size: 1px;
  --divider-background: var(--color-title-bd);
  --divider-color: var(--color-caption);
  --divider-offset: 2em;
  --divider-font-size: inherit;
  --divider-deg-start: 90deg;
  --divider-deg-end: 270deg;
  font-size: var(--divider-font-size);
  color: var(--divider-color);
  line-height: 1.5em;
  overflow: hidden;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.5em;
  &:before, &:after {
    height: var(--divider-size);
  }
  &:before, &:after {
    content: '';
    display: block;
    background-color: var(--divider-background);
    flex: auto;
  }
  >:first-child {
    margin-block: auto;
    margin-inline: 1em;
    line-height: inherit;
  }
  &:has(>:first-child:empty) {
    *:first-child, &:after {
      display: none;
    }
  }
  &:empty {
    &:after {
      display: none;
    }
  }
}
.divider-h {
  --divider-size: 1px;
  --divider-background: var(--color-title-bd);
  --divider-color: var(--color-caption);
  --divider-offset: 2em;
  --divider-font-size: inherit;
  --divider-deg-start: 90deg;
  --divider-deg-end: 270deg;
  font-size: var(--divider-font-size);
  color: var(--divider-color);
  line-height: 1.5em;
  overflow: hidden;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.5em;
  &:before, &:after {
    height: var(--divider-size);
  }
  &:before, &:after {
    content: '';
    display: block;
    background-color: var(--divider-background);
    flex: auto;
  }
  >:first-child {
    margin-block: auto;
    margin-inline: 1em;
    line-height: inherit;
  }
  &:has(>:first-child:empty) {
    *:first-child, &:after {
      display: none;
    }
  }
  &:empty {
    &:after {
      display: none;
    }
  }
}
.dropmenu-ghost {
  &:where(:not(.dropmenu-list)) {
    li {
      >:first-child {
        border: none;
        border-radius: calc(var(--dropmenu-border-radius) * 0.75);
        padding: 0.5em 0.75em;
        margin: 0.25em;
      }
      &:where(:has(>ul)) {
        >:first-child:after {
          margin-inline-end: 0;
        }
      }
      &:where([data-role=divider]) {
        border-bottom: 1px solid var(--color-title-bd);
      }
    }
  }
}
.bubble-center {
  margin: auto;
  &::after, &::before {
    display: none;
  }
}
.m-4 {
  margin: calc(var(--spacing) * 4);
}
.pagination-plain {
  --pagination-background-hover: var(--color-primary-bg-hover);
  [data-role=page], [data-role=previous], [data-role=next], [data-role=first], [data-role=last] {
    border: none;
  }
  [data-role=pages] {
    margin-inline: 0;
    [data-role=ellipsis] {
      border: none;
    }
    >* {
      border-radius: var(--pagination-border-radius);
      margin-inline: var(--pagination-margin-x);
      &:not(:last-child) {
        margin-inline-end: var(--pagination-margin-x);
      }
    }
  }
}
.input-underline {
  :where(&) {
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-background: transparent;
    --input-background-invalid: transparent;
    --input-padding-x: 0;
    --input-border-color-hover: var(--color-caption);
    --input-shadow-color: var(--input-border-color);
    --input-border-radius: 0;
    --input-border-width: 0;
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
      border-color: transparent;
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
    }
    &:user-invalid {
      --input-shadow-color: var(--input-color-invalid);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
}
.input-caption {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from var(--color-caption) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color: var(--color-caption-bd);
    --input-border-color-hover: oklch(from var(--color-caption-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-background: var(--color-caption-surface);
    --input-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: var(--color-caption);
    --input-option-bg-checked: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-caption-bg-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from var(--color-caption-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-caption-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background: var(--color-caption-bg-hover);
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from var(--color-caption) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-shadow-color: var(--color-caption-bd);
    --input-padding-x: 0;
    --input-border-color-hover: var(--color-caption);
    --input-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-caption-fg);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-caption-bg-hover);
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from var(--color-caption-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-caption-fg);
    --input-background-hover: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-caption-bg-hover);
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from var(--color-caption-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-caption) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background: var(--color-caption-surface);
    --input-background-hover: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-caption-bg-hover);
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-caption-fg);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-caution {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from var(--color-caution) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color: var(--color-caution-bd);
    --input-border-color-hover: oklch(from var(--color-caution-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-background: var(--color-caution-surface);
    --input-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: var(--color-caution);
    --input-option-bg-checked: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-caution-bg-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from var(--color-caution-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-caution-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background: var(--color-caution-bg-hover);
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from var(--color-caution) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-shadow-color: var(--color-caution-bd);
    --input-padding-x: 0;
    --input-border-color-hover: var(--color-caution);
    --input-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-caution-fg);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-caution-bg-hover);
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from var(--color-caution-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-caution-fg);
    --input-background-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-caution-bg-hover);
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from var(--color-caution-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-caution) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background: var(--color-caution-surface);
    --input-background-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-caution-bg-hover);
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-caution-fg);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-description {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from var(--color-description) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color: var(--color-description-bd);
    --input-border-color-hover: oklch(from var(--color-description-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-background: var(--color-description-surface);
    --input-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: var(--color-description);
    --input-option-bg-checked: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-description-bg-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from var(--color-description-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-description-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background: var(--color-description-bg-hover);
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from var(--color-description) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-shadow-color: var(--color-description-bd);
    --input-padding-x: 0;
    --input-border-color-hover: var(--color-description);
    --input-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-description-fg);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-description-bg-hover);
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from var(--color-description-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-description-fg);
    --input-background-hover: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-description-bg-hover);
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from var(--color-description-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-description) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background: var(--color-description-surface);
    --input-background-hover: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-description-bg-hover);
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-description-fg);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-error {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from var(--color-error) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color: var(--color-error-bd);
    --input-border-color-hover: oklch(from var(--color-error-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-background: var(--color-error-surface);
    --input-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: var(--color-error);
    --input-option-bg-checked: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-error-bg-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from var(--color-error-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-error-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background: var(--color-error-bg-hover);
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-shadow-color: var(--color-error-bd);
    --input-padding-x: 0;
    --input-border-color-hover: var(--color-error);
    --input-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-error-fg);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-error-bg-hover);
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from var(--color-error-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-error-fg);
    --input-background-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-error-bg-hover);
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from var(--color-error-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background: var(--color-error-surface);
    --input-background-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-error-bg-hover);
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-error-fg);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-highlight {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from var(--color-highlight) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color: var(--color-highlight-bd);
    --input-border-color-hover: oklch(from var(--color-highlight-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-background: var(--color-highlight-surface);
    --input-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: var(--color-highlight);
    --input-option-bg-checked: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-highlight-bg-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from var(--color-highlight-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-highlight-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background: var(--color-highlight-bg-hover);
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from var(--color-highlight) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-shadow-color: var(--color-highlight-bd);
    --input-padding-x: 0;
    --input-border-color-hover: var(--color-highlight);
    --input-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-highlight-fg);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-highlight-bg-hover);
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from var(--color-highlight-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-highlight-fg);
    --input-background-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-highlight-bg-hover);
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from var(--color-highlight-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-highlight) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background: var(--color-highlight-surface);
    --input-background-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-highlight-bg-hover);
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-highlight-fg);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-info {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from var(--color-info) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color: var(--color-info-bd);
    --input-border-color-hover: oklch(from var(--color-info-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-background: var(--color-info-surface);
    --input-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: var(--color-info);
    --input-option-bg-checked: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-info-bg-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from var(--color-info-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-info-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background: var(--color-info-bg-hover);
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from var(--color-info) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-shadow-color: var(--color-info-bd);
    --input-padding-x: 0;
    --input-border-color-hover: var(--color-info);
    --input-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-info-fg);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-info-bg-hover);
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from var(--color-info-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-info-fg);
    --input-background-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-info-bg-hover);
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from var(--color-info-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-info) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background: var(--color-info-surface);
    --input-background-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-info-bg-hover);
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-info-fg);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-ink {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from var(--color-ink) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color: var(--color-ink-bd);
    --input-border-color-hover: oklch(from var(--color-ink-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-background: var(--color-ink-surface);
    --input-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: var(--color-ink);
    --input-option-bg-checked: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-ink-bg-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from var(--color-ink-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-ink-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background: var(--color-ink-bg-hover);
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from var(--color-ink) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-shadow-color: var(--color-ink-bd);
    --input-padding-x: 0;
    --input-border-color-hover: var(--color-ink);
    --input-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-ink-fg);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-ink-bg-hover);
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from var(--color-ink-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-ink-fg);
    --input-background-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-ink-bg-hover);
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from var(--color-ink-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-ink) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background: var(--color-ink-surface);
    --input-background-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-ink-bg-hover);
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-ink-fg);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-placeholder {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from var(--color-placeholder) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color: var(--color-placeholder-bd);
    --input-border-color-hover: oklch(from var(--color-placeholder-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-background: var(--color-placeholder-surface);
    --input-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: var(--color-placeholder);
    --input-option-bg-checked: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-placeholder-bg-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from var(--color-placeholder-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-placeholder-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background: var(--color-placeholder-bg-hover);
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from var(--color-placeholder) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-shadow-color: var(--color-placeholder-bd);
    --input-padding-x: 0;
    --input-border-color-hover: var(--color-placeholder);
    --input-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-placeholder-fg);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-placeholder-bg-hover);
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from var(--color-placeholder-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-placeholder-fg);
    --input-background-hover: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-placeholder-bg-hover);
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from var(--color-placeholder-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-placeholder) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background: var(--color-placeholder-surface);
    --input-background-hover: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-placeholder-bg-hover);
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-placeholder-fg);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-primary {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from var(--color-primary) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color: var(--color-primary-bd);
    --input-border-color-hover: oklch(from var(--color-primary-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-background: var(--color-primary-surface);
    --input-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: var(--color-primary);
    --input-option-bg-checked: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-primary-bg-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from var(--color-primary-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-primary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background: var(--color-primary-bg-hover);
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-shadow-color: var(--color-primary-bd);
    --input-padding-x: 0;
    --input-border-color-hover: var(--color-primary);
    --input-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-primary-fg);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-primary-bg-hover);
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from var(--color-primary-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-primary-fg);
    --input-background-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-primary-bg-hover);
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from var(--color-primary-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background: var(--color-primary-surface);
    --input-background-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-primary-bg-hover);
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-primary-fg);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-secondary {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from var(--color-secondary) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color: var(--color-secondary-bd);
    --input-border-color-hover: oklch(from var(--color-secondary-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-background: var(--color-secondary-surface);
    --input-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: var(--color-secondary);
    --input-option-bg-checked: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-secondary-bg-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from var(--color-secondary-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-secondary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background: var(--color-secondary-bg-hover);
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from var(--color-secondary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-shadow-color: var(--color-secondary-bd);
    --input-padding-x: 0;
    --input-border-color-hover: var(--color-secondary);
    --input-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-secondary-fg);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-secondary-bg-hover);
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from var(--color-secondary-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-secondary-fg);
    --input-background-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-secondary-bg-hover);
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from var(--color-secondary-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-secondary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background: var(--color-secondary-surface);
    --input-background-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-secondary-bg-hover);
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-secondary-fg);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-success {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from var(--color-success) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color: var(--color-success-bd);
    --input-border-color-hover: oklch(from var(--color-success-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-background: var(--color-success-surface);
    --input-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: var(--color-success);
    --input-option-bg-checked: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-success-bg-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from var(--color-success-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-success-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background: var(--color-success-bg-hover);
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-shadow-color: var(--color-success-bd);
    --input-padding-x: 0;
    --input-border-color-hover: var(--color-success);
    --input-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-success-fg);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-success-bg-hover);
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from var(--color-success-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-success-fg);
    --input-background-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-success-bg-hover);
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from var(--color-success-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background: var(--color-success-surface);
    --input-background-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-success-bg-hover);
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-success-fg);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-tertiary {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from var(--color-tertiary) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color: var(--color-tertiary-bd);
    --input-border-color-hover: oklch(from var(--color-tertiary-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-background: var(--color-tertiary-surface);
    --input-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: var(--color-tertiary);
    --input-option-bg-checked: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-tertiary-bg-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from var(--color-tertiary-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-tertiary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background: var(--color-tertiary-bg-hover);
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from var(--color-tertiary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-shadow-color: var(--color-tertiary-bd);
    --input-padding-x: 0;
    --input-border-color-hover: var(--color-tertiary);
    --input-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-tertiary-fg);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-tertiary-bg-hover);
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from var(--color-tertiary-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-tertiary-fg);
    --input-background-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-tertiary-bg-hover);
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from var(--color-tertiary-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-tertiary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background: var(--color-tertiary-surface);
    --input-background-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-tertiary-bg-hover);
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-tertiary-fg);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-title {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from var(--color-title) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: oklch(from var(--color-title-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-background: var(--color-title-surface);
    --input-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: var(--color-title);
    --input-option-bg-checked: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-title-bg-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from var(--color-title-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-title-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background: var(--color-title-bg-hover);
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from var(--color-title) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-shadow-color: var(--color-title-bd);
    --input-padding-x: 0;
    --input-border-color-hover: var(--color-title);
    --input-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-title-fg);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-title-bg-hover);
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from var(--color-title-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-title-fg);
    --input-background-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-title-bg-hover);
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from var(--color-title-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-title) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background: var(--color-title-surface);
    --input-background-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-title-bg-hover);
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-title-fg);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-warning {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from var(--color-warning) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color: var(--color-warning-bd);
    --input-border-color-hover: oklch(from var(--color-warning-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-background: var(--color-warning-surface);
    --input-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: var(--color-warning);
    --input-option-bg-checked: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-warning-bg-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from var(--color-warning-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-warning-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background: var(--color-warning-bg-hover);
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from var(--color-warning) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-shadow-color: var(--color-warning-bd);
    --input-padding-x: 0;
    --input-border-color-hover: var(--color-warning);
    --input-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-warning-fg);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--color-warning-bg-hover);
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from var(--color-warning-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-warning-fg);
    --input-background-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-warning-bg-hover);
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from var(--color-warning-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-warning) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background: var(--color-warning-surface);
    --input-background-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-hover: var(--color-warning-bg-hover);
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-warning-fg);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-\[\#ff0000\] {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from #ff0000 min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-hover: oklch(from #ff0000 min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-background: oklch(from #ff0000 var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-color: oklch(from #ff0000 clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: #ff0000;
    --input-option-bg-checked: oklch(from #ff0000 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from #ff0000 min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from #ff0000 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from #ff0000 var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-padding-x: 0;
    --input-border-color-hover: #ff0000;
    --input-color: oklch(from #ff0000 clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from #ff0000 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from #ff0000 min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background-hover: oklch(from #ff0000 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from #ff0000 min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from #ff0000 var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background-hover: oklch(from #ff0000 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-\[blue\] {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from blue min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-hover: oklch(from blue min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-background: oklch(from blue var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-color: oklch(from blue clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: blue;
    --input-option-bg-checked: oklch(from blue var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from blue min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from blue var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from blue var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-padding-x: 0;
    --input-border-color-hover: blue;
    --input-color: oklch(from blue clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from blue var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from blue min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background-hover: oklch(from blue var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from blue min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from blue var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background-hover: oklch(from blue var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-fuchsia-200 {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from var(--color-fuchsia-200) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-hover: oklch(from var(--color-fuchsia-200) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-fuchsia-200) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: var(--color-fuchsia-200);
    --input-option-bg-checked: oklch(from var(--color-fuchsia-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from var(--color-fuchsia-200) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-fuchsia-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-fuchsia-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from var(--color-fuchsia-200) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-padding-x: 0;
    --input-border-color-hover: var(--color-fuchsia-200);
    --input-color: oklch(from var(--color-fuchsia-200) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from var(--color-fuchsia-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from var(--color-fuchsia-200) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from var(--color-fuchsia-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background-hover: oklch(from var(--color-fuchsia-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from var(--color-fuchsia-200) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-fuchsia-200) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background-hover: oklch(from var(--color-fuchsia-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from var(--color-fuchsia-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-fuchsia-800 {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from var(--color-fuchsia-800) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-hover: oklch(from var(--color-fuchsia-800) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-fuchsia-800) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: var(--color-fuchsia-800);
    --input-option-bg-checked: oklch(from var(--color-fuchsia-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from var(--color-fuchsia-800) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-fuchsia-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-fuchsia-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from var(--color-fuchsia-800) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-padding-x: 0;
    --input-border-color-hover: var(--color-fuchsia-800);
    --input-color: oklch(from var(--color-fuchsia-800) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from var(--color-fuchsia-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from var(--color-fuchsia-800) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from var(--color-fuchsia-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background-hover: oklch(from var(--color-fuchsia-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from var(--color-fuchsia-800) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-fuchsia-800) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background-hover: oklch(from var(--color-fuchsia-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from var(--color-fuchsia-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-green-500 {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from var(--color-green-500) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-hover: oklch(from var(--color-green-500) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: var(--color-green-500);
    --input-option-bg-checked: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from var(--color-green-500) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from var(--color-green-500) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-padding-x: 0;
    --input-border-color-hover: var(--color-green-500);
    --input-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from var(--color-green-500) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background-hover: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from var(--color-green-500) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-green-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background-hover: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-indigo-500 {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from var(--color-indigo-500) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-hover: oklch(from var(--color-indigo-500) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-indigo-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: var(--color-indigo-500);
    --input-option-bg-checked: oklch(from var(--color-indigo-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from var(--color-indigo-500) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-indigo-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-indigo-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from var(--color-indigo-500) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-padding-x: 0;
    --input-border-color-hover: var(--color-indigo-500);
    --input-color: oklch(from var(--color-indigo-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from var(--color-indigo-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from var(--color-indigo-500) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from var(--color-indigo-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background-hover: oklch(from var(--color-indigo-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from var(--color-indigo-500) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-indigo-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background-hover: oklch(from var(--color-indigo-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from var(--color-indigo-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-teal-500 {
  &:where(:not(.input-subtle, .input-ghost, .input-underline, .input-outline)) {
    --input-border-color: oklch(from var(--color-teal-500) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-hover: oklch(from var(--color-teal-500) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-teal-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-color: var(--color-*-fg);
    --input-border-color-focus: var(--color-teal-500);
    --input-option-bg-checked: oklch(from var(--color-teal-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-subtle) {
    --input-border-color: transparent;
    --input-border-color-hover: oklch(from var(--color-teal-500) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-color-focus: var(--input-border-color-hover);
    --input-color: oklch(from var(--color-teal-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-teal-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-option-bg-checked: var(--input-background);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
  }
  &:where(.input-underline) {
    --input-background: transparent;
    --input-shadow-width: 1px;
    --input-shadow-width-offset: 0px;
    --input-shadow-color: oklch(from var(--color-teal-500) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --input-padding-x: 0;
    --input-border-color-hover: var(--color-teal-500);
    --input-color: oklch(from var(--color-teal-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-border-width: 0;
    --input-border-radius: 0;
    --input-option-bg-checked: oklch(from var(--color-teal-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-shadow-color: var(--input-border-color-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-shadow-color: var(--input-border-color-hover);
      --input-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:user-invalid) {
      --input-shadow-color: var(--color-error);
    }
    &:where(select) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          --input-padding-x: 0.5em;
        }
      }
      &:where([multiple]) {
        @supports (appearance: base-select) {
          >option, >optgroup {
            margin-inline: 0;
          }
        }
      }
    }
  }
  &:where(.input-ghost) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-border-color-focus: oklch(from var(--color-teal-500) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background: transparent;
    --input-color: oklch(from var(--color-teal-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-background-hover: oklch(from var(--color-teal-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-bg-hover);
    --input-border-width: 0;
    --input-outline-width: 2px;
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([readonly]) {
      --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.input-outline) {
    --input-border-color: oklch(from var(--color-teal-500) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --input-background: oklch(from var(--color-teal-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --input-background-hover: oklch(from var(--color-teal-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --input-border-color-hover: var(--input-border-color);
    --input-border-color-focus: var(--input-border-color);
    --input-color: oklch(from var(--color-teal-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --input-option-bg-checked: var(--input-background-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
      --input-background: var(--input-background-hover);
    }
  }
}
.input-underline-caption {
  --input-background: transparent;
  --input-shadow-width: 1px;
  --input-shadow-width-offset: 0px;
  --input-shadow-color: oklch(from var(--color-caption) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --input-shadow-color: var(--color-caption-bd);
  --input-padding-x: 0;
  --input-border-color-hover: var(--color-caption);
  --input-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-caption-fg);
  --input-border-width: 0;
  --input-border-radius: 0;
  --input-option-bg-checked: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-caption-bg-hover);
  box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
    --input-shadow-color: var(--input-border-color-hover);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-shadow-color: var(--input-border-color-hover);
    --input-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:user-invalid) {
    --input-shadow-color: var(--color-error);
  }
  &:where(select) {
    @supports (appearance: base-select) {
      >option, >optgroup {
        --input-padding-x: 0.5em;
      }
    }
    &:where([multiple]) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          margin-inline: 0;
        }
      }
    }
  }
}
.input-underline-caution {
  --input-background: transparent;
  --input-shadow-width: 1px;
  --input-shadow-width-offset: 0px;
  --input-shadow-color: oklch(from var(--color-caution) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --input-shadow-color: var(--color-caution-bd);
  --input-padding-x: 0;
  --input-border-color-hover: var(--color-caution);
  --input-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-caution-fg);
  --input-border-width: 0;
  --input-border-radius: 0;
  --input-option-bg-checked: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-caution-bg-hover);
  box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
    --input-shadow-color: var(--input-border-color-hover);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-shadow-color: var(--input-border-color-hover);
    --input-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:user-invalid) {
    --input-shadow-color: var(--color-error);
  }
  &:where(select) {
    @supports (appearance: base-select) {
      >option, >optgroup {
        --input-padding-x: 0.5em;
      }
    }
    &:where([multiple]) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          margin-inline: 0;
        }
      }
    }
  }
}
.input-underline-description {
  --input-background: transparent;
  --input-shadow-width: 1px;
  --input-shadow-width-offset: 0px;
  --input-shadow-color: oklch(from var(--color-description) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --input-shadow-color: var(--color-description-bd);
  --input-padding-x: 0;
  --input-border-color-hover: var(--color-description);
  --input-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-description-fg);
  --input-border-width: 0;
  --input-border-radius: 0;
  --input-option-bg-checked: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-description-bg-hover);
  box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
    --input-shadow-color: var(--input-border-color-hover);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-shadow-color: var(--input-border-color-hover);
    --input-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:user-invalid) {
    --input-shadow-color: var(--color-error);
  }
  &:where(select) {
    @supports (appearance: base-select) {
      >option, >optgroup {
        --input-padding-x: 0.5em;
      }
    }
    &:where([multiple]) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          margin-inline: 0;
        }
      }
    }
  }
}
.input-underline-error {
  --input-background: transparent;
  --input-shadow-width: 1px;
  --input-shadow-width-offset: 0px;
  --input-shadow-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --input-shadow-color: var(--color-error-bd);
  --input-padding-x: 0;
  --input-border-color-hover: var(--color-error);
  --input-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-error-fg);
  --input-border-width: 0;
  --input-border-radius: 0;
  --input-option-bg-checked: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-error-bg-hover);
  box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
    --input-shadow-color: var(--input-border-color-hover);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-shadow-color: var(--input-border-color-hover);
    --input-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:user-invalid) {
    --input-shadow-color: var(--color-error);
  }
  &:where(select) {
    @supports (appearance: base-select) {
      >option, >optgroup {
        --input-padding-x: 0.5em;
      }
    }
    &:where([multiple]) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          margin-inline: 0;
        }
      }
    }
  }
}
.input-underline-highlight {
  --input-background: transparent;
  --input-shadow-width: 1px;
  --input-shadow-width-offset: 0px;
  --input-shadow-color: oklch(from var(--color-highlight) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --input-shadow-color: var(--color-highlight-bd);
  --input-padding-x: 0;
  --input-border-color-hover: var(--color-highlight);
  --input-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-highlight-fg);
  --input-border-width: 0;
  --input-border-radius: 0;
  --input-option-bg-checked: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-highlight-bg-hover);
  box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
    --input-shadow-color: var(--input-border-color-hover);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-shadow-color: var(--input-border-color-hover);
    --input-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:user-invalid) {
    --input-shadow-color: var(--color-error);
  }
  &:where(select) {
    @supports (appearance: base-select) {
      >option, >optgroup {
        --input-padding-x: 0.5em;
      }
    }
    &:where([multiple]) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          margin-inline: 0;
        }
      }
    }
  }
}
.input-underline-info {
  --input-background: transparent;
  --input-shadow-width: 1px;
  --input-shadow-width-offset: 0px;
  --input-shadow-color: oklch(from var(--color-info) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --input-shadow-color: var(--color-info-bd);
  --input-padding-x: 0;
  --input-border-color-hover: var(--color-info);
  --input-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-info-fg);
  --input-border-width: 0;
  --input-border-radius: 0;
  --input-option-bg-checked: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-info-bg-hover);
  box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
    --input-shadow-color: var(--input-border-color-hover);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-shadow-color: var(--input-border-color-hover);
    --input-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:user-invalid) {
    --input-shadow-color: var(--color-error);
  }
  &:where(select) {
    @supports (appearance: base-select) {
      >option, >optgroup {
        --input-padding-x: 0.5em;
      }
    }
    &:where([multiple]) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          margin-inline: 0;
        }
      }
    }
  }
}
.input-underline-ink {
  --input-background: transparent;
  --input-shadow-width: 1px;
  --input-shadow-width-offset: 0px;
  --input-shadow-color: oklch(from var(--color-ink) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --input-shadow-color: var(--color-ink-bd);
  --input-padding-x: 0;
  --input-border-color-hover: var(--color-ink);
  --input-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-ink-fg);
  --input-border-width: 0;
  --input-border-radius: 0;
  --input-option-bg-checked: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-ink-bg-hover);
  box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
    --input-shadow-color: var(--input-border-color-hover);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-shadow-color: var(--input-border-color-hover);
    --input-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:user-invalid) {
    --input-shadow-color: var(--color-error);
  }
  &:where(select) {
    @supports (appearance: base-select) {
      >option, >optgroup {
        --input-padding-x: 0.5em;
      }
    }
    &:where([multiple]) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          margin-inline: 0;
        }
      }
    }
  }
}
.input-underline-placeholder {
  --input-background: transparent;
  --input-shadow-width: 1px;
  --input-shadow-width-offset: 0px;
  --input-shadow-color: oklch(from var(--color-placeholder) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --input-shadow-color: var(--color-placeholder-bd);
  --input-padding-x: 0;
  --input-border-color-hover: var(--color-placeholder);
  --input-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-placeholder-fg);
  --input-border-width: 0;
  --input-border-radius: 0;
  --input-option-bg-checked: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-placeholder-bg-hover);
  box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
    --input-shadow-color: var(--input-border-color-hover);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-shadow-color: var(--input-border-color-hover);
    --input-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:user-invalid) {
    --input-shadow-color: var(--color-error);
  }
  &:where(select) {
    @supports (appearance: base-select) {
      >option, >optgroup {
        --input-padding-x: 0.5em;
      }
    }
    &:where([multiple]) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          margin-inline: 0;
        }
      }
    }
  }
}
.input-underline-primary {
  --input-background: transparent;
  --input-shadow-width: 1px;
  --input-shadow-width-offset: 0px;
  --input-shadow-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --input-shadow-color: var(--color-primary-bd);
  --input-padding-x: 0;
  --input-border-color-hover: var(--color-primary);
  --input-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-primary-fg);
  --input-border-width: 0;
  --input-border-radius: 0;
  --input-option-bg-checked: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-primary-bg-hover);
  box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
    --input-shadow-color: var(--input-border-color-hover);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-shadow-color: var(--input-border-color-hover);
    --input-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:user-invalid) {
    --input-shadow-color: var(--color-error);
  }
  &:where(select) {
    @supports (appearance: base-select) {
      >option, >optgroup {
        --input-padding-x: 0.5em;
      }
    }
    &:where([multiple]) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          margin-inline: 0;
        }
      }
    }
  }
}
.input-underline-secondary {
  --input-background: transparent;
  --input-shadow-width: 1px;
  --input-shadow-width-offset: 0px;
  --input-shadow-color: oklch(from var(--color-secondary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --input-shadow-color: var(--color-secondary-bd);
  --input-padding-x: 0;
  --input-border-color-hover: var(--color-secondary);
  --input-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-secondary-fg);
  --input-border-width: 0;
  --input-border-radius: 0;
  --input-option-bg-checked: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-secondary-bg-hover);
  box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
    --input-shadow-color: var(--input-border-color-hover);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-shadow-color: var(--input-border-color-hover);
    --input-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:user-invalid) {
    --input-shadow-color: var(--color-error);
  }
  &:where(select) {
    @supports (appearance: base-select) {
      >option, >optgroup {
        --input-padding-x: 0.5em;
      }
    }
    &:where([multiple]) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          margin-inline: 0;
        }
      }
    }
  }
}
.input-underline-success {
  --input-background: transparent;
  --input-shadow-width: 1px;
  --input-shadow-width-offset: 0px;
  --input-shadow-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --input-shadow-color: var(--color-success-bd);
  --input-padding-x: 0;
  --input-border-color-hover: var(--color-success);
  --input-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-success-fg);
  --input-border-width: 0;
  --input-border-radius: 0;
  --input-option-bg-checked: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-success-bg-hover);
  box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
    --input-shadow-color: var(--input-border-color-hover);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-shadow-color: var(--input-border-color-hover);
    --input-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:user-invalid) {
    --input-shadow-color: var(--color-error);
  }
  &:where(select) {
    @supports (appearance: base-select) {
      >option, >optgroup {
        --input-padding-x: 0.5em;
      }
    }
    &:where([multiple]) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          margin-inline: 0;
        }
      }
    }
  }
}
.input-underline-tertiary {
  --input-background: transparent;
  --input-shadow-width: 1px;
  --input-shadow-width-offset: 0px;
  --input-shadow-color: oklch(from var(--color-tertiary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --input-shadow-color: var(--color-tertiary-bd);
  --input-padding-x: 0;
  --input-border-color-hover: var(--color-tertiary);
  --input-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-tertiary-fg);
  --input-border-width: 0;
  --input-border-radius: 0;
  --input-option-bg-checked: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-tertiary-bg-hover);
  box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
    --input-shadow-color: var(--input-border-color-hover);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-shadow-color: var(--input-border-color-hover);
    --input-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:user-invalid) {
    --input-shadow-color: var(--color-error);
  }
  &:where(select) {
    @supports (appearance: base-select) {
      >option, >optgroup {
        --input-padding-x: 0.5em;
      }
    }
    &:where([multiple]) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          margin-inline: 0;
        }
      }
    }
  }
}
.input-underline-title {
  --input-background: transparent;
  --input-shadow-width: 1px;
  --input-shadow-width-offset: 0px;
  --input-shadow-color: oklch(from var(--color-title) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --input-shadow-color: var(--color-title-bd);
  --input-padding-x: 0;
  --input-border-color-hover: var(--color-title);
  --input-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-title-fg);
  --input-border-width: 0;
  --input-border-radius: 0;
  --input-option-bg-checked: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-title-bg-hover);
  box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
    --input-shadow-color: var(--input-border-color-hover);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-shadow-color: var(--input-border-color-hover);
    --input-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:user-invalid) {
    --input-shadow-color: var(--color-error);
  }
  &:where(select) {
    @supports (appearance: base-select) {
      >option, >optgroup {
        --input-padding-x: 0.5em;
      }
    }
    &:where([multiple]) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          margin-inline: 0;
        }
      }
    }
  }
}
.input-underline-warning {
  --input-background: transparent;
  --input-shadow-width: 1px;
  --input-shadow-width-offset: 0px;
  --input-shadow-color: oklch(from var(--color-warning) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --input-shadow-color: var(--color-warning-bd);
  --input-padding-x: 0;
  --input-border-color-hover: var(--color-warning);
  --input-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-warning-fg);
  --input-border-width: 0;
  --input-border-radius: 0;
  --input-option-bg-checked: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-warning-bg-hover);
  box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
    --input-shadow-color: var(--input-border-color-hover);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-shadow-color: var(--input-border-color-hover);
    --input-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:user-invalid) {
    --input-shadow-color: var(--color-error);
  }
  &:where(select) {
    @supports (appearance: base-select) {
      >option, >optgroup {
        --input-padding-x: 0.5em;
      }
    }
    &:where([multiple]) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          margin-inline: 0;
        }
      }
    }
  }
}
.input-underline-\[\#ff0000\] {
  --input-background: transparent;
  --input-shadow-width: 1px;
  --input-shadow-width-offset: 0px;
  --input-shadow-color: oklch(from #ff0000 var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --input-padding-x: 0;
  --input-border-color-hover: #ff0000;
  --input-color: oklch(from #ff0000 clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-width: 0;
  --input-border-radius: 0;
  --input-option-bg-checked: oklch(from #ff0000 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
    --input-shadow-color: var(--input-border-color-hover);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-shadow-color: var(--input-border-color-hover);
    --input-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:user-invalid) {
    --input-shadow-color: var(--color-error);
  }
  &:where(select) {
    @supports (appearance: base-select) {
      >option, >optgroup {
        --input-padding-x: 0.5em;
      }
    }
    &:where([multiple]) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          margin-inline: 0;
        }
      }
    }
  }
}
.input-underline-teal-500 {
  --input-background: transparent;
  --input-shadow-width: 1px;
  --input-shadow-width-offset: 0px;
  --input-shadow-color: oklch(from var(--color-teal-500) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --input-padding-x: 0;
  --input-border-color-hover: var(--color-teal-500);
  --input-color: oklch(from var(--color-teal-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-width: 0;
  --input-border-radius: 0;
  --input-option-bg-checked: oklch(from var(--color-teal-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  box-shadow: 0 calc(var(--input-shadow-width) + var(--input-shadow-width-offset)) 0 0 var(--input-shadow-color);
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
    --input-shadow-color: var(--input-border-color-hover);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-shadow-color: var(--input-border-color-hover);
    --input-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:user-invalid) {
    --input-shadow-color: var(--color-error);
  }
  &:where(select) {
    @supports (appearance: base-select) {
      >option, >optgroup {
        --input-padding-x: 0.5em;
      }
    }
    &:where([multiple]) {
      @supports (appearance: base-select) {
        >option, >optgroup {
          margin-inline: 0;
        }
      }
    }
  }
}
.blockquote-plain {
  background-color: transparent;
  padding-inline-end: 0;
  >p {
    margin-block: 0;
  }
}
.reset-heading {
  margin-block: 0;
  font-weight: normal;
}
.my-2 {
  margin-block: calc(var(--spacing) * 2);
}
.my-3 {
  margin-block: calc(var(--spacing) * 3);
}
.step-between {
  >*:first-child [data-role=track]>:first-child, >*:last-child [data-role=track]>:last-child {
    display: none;
  }
  &:where(:not(.step-v)) {
    >*:first-child {
      text-align: start;
    }
    >*:first-child [data-role=description] {
      margin-inline-start: 0;
    }
    >*:last-child {
      text-align: end;
    }
    >*:last-child [data-role=description] {
      margin-inline-end: 0;
    }
    >*:first-child [data-role=track]>:last-child, >*:last-child [data-role=track]>:first-child {
      width: 100%;
    }
    >*[data-selected=true] [data-role=track]>:last-child {
      background-color: var(--step-color-deselected);
    }
    >*:first-child:not([data-selected=true]) [data-role=header] {
      padding-inline-start: 0;
    }
    >*:last-child:not([data-selected=true]) [data-role=header] {
      padding-inline-end: 0;
    }
    >*:first-child[data-selected=true] [data-role=header]:before, >*:last-child[data-selected=true] [data-role=header]:before {
      display: none;
    }
  }
  &:where(.step-v) {
    >* [data-role=label] {
      margin-top: 0;
    }
    >*:where(:first-child) [data-role=body] {
      justify-content: flex-start;
    }
    >*:where(:last-child) [data-role=body] {
      justify-content: flex-end;
    }
    >*:where(:not(:first-child, :last-child)) [data-role=body] {
      justify-content: center;
    }
  }
}
.reset-dl {
  margin-block-start: 0;
  margin-block-end: 0;
  dt>dd, >dd {
    margin-inline-start: 0;
  }
}
.tree-btns {
  li>[data-role=note] {
    padding-inline-start: var(--tree-node-padding-x);
  }
  li:where(:not(:has(>ul))) {
    display: inline-flex;
  }
  ul:where(:not(:has(>li>ul))) {
    display: flex;
    flex-wrap: wrap;
  }
  li>:first-child {
    display: inline-flex;
    border: 1px solid var(--color-title-bd);
    margin-bottom: 0.5em;
    margin-top: 0;
    margin-inline-end: 0.5em;
    >[data-role=content] {
      width: auto;
    }
    &:where(.tree-selected) {
      border-color: transparent;
    }
    +[data-role=note] {
      margin-bottom: 0.5em;
    }
  }
}
.tree-indent-dedicated {
  &:where(:not(.tree-btns)) {
    [data-role=indent] {
      display: block;
      margin-inline-end: calc(-1*var(--tree-node-gap));
      width: calc(var(--tree-level, 0)*var(--tree-leading));
    }
  }
  li li {
    padding-inline-start: 0;
  }
}
.reset-ol {
  list-style: none;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  >li {
    list-style-type: none;
  }
}
.reset-ul {
  list-style: none;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  >li {
    list-style-type: none;
  }
}
.comment-end {
  flex: auto;
  display: flex;
  flex-direction: column;
  >.comments {
    margin-top: 1em;
  }
  >hr {
    width: 100%;
    margin-top: 1em;
    margin-bottom: 0;
  }
}
.comment-footer {
  color: var(--color-caption);
  font-size: max(0.75rem, 12px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.25em;
  >[data-role="start"] {
    flex: auto;
    display: flex;
    align-items: center;
    gap: var(--comment-gap);
  }
  >[data-role="end"] {
    display: flex;
    align-items: center;
    gap: var(--comment-gap);
  }
}
.callout {
  --callout-font-size: min(0.875rem, 18px);
  --callout-color: var(--color-title);
  --callout-gap: 0.4em;
  --callout-padding-x: 1em;
  --callout-padding-y: calc(var(--callout-padding-x)*0.75);
  --callout-leading: var(--leading-normal);
  font-size: var(--callout-font-size);
  color: var(--callout-color);
  line-height: var(--callout-leading);
  display: flex;
  gap: var(--callout-gap);
  align-items: center;
  [data-role=title] {
    font-size: calc(var(--callout-font-size)*16/14);
    font-weight: bolder;
  }
  [data-role=icon] {
    font-size: calc(var(--callout-font-size)*16/14);
  }
  &:has([data-role=title]) {
    align-items: flex-start;
    *:where(:has(> [data-role=title])) {
      display: flex;
      flex-direction: column;
      gap: calc(var(--callout-padding-x)*0.25);
    }
    [data-role=icon] {
      margin-top: calc(1em*(var(--leading-normal) - 1)/2);
    }
  }
  &:has([data-role=icon]) {
    --callout-gap: var(--callout-padding-x);
  }
}
.step-trim {
  &:where(.step-v) {
    >* [data-role=track]>:first-child, >:last-child [data-role=track]>:last-child {
      display: none;
    }
    [data-role=header] {
      margin-top: calc((var(--step-height-node) - 1lh - 6px)/2);
    }
    [data-role=label] {
      margin-top: calc((var(--step-height-node) - 1lh)/2);
    }
  }
  &:where(:not(.step-v)) {
    >:first-child [data-role=track]>:first-child, >:last-child [data-role=track]>:last-child {
      opacity: 0;
    }
  }
}
.stats-4 {
  --stats-font-size: calc(var(--spacing)*4);
  [data-role=prefix] {
    margin-top: calc(var(--stats-font-size) * (var(--stats-leading) - 1));
  }
}
.stats-5 {
  --stats-font-size: calc(var(--spacing)*5);
  [data-role=prefix] {
    margin-top: calc(var(--stats-font-size) * (var(--stats-leading) - 1));
  }
}
.stats-6 {
  --stats-font-size: calc(var(--spacing)*6);
  [data-role=prefix] {
    margin-top: calc(var(--stats-font-size) * (var(--stats-leading) - 1));
  }
}
.mr-4 {
  margin-right: calc(var(--spacing) * 4);
}
.mr-6 {
  margin-right: calc(var(--spacing) * 6);
}
.mb-3 {
  margin-bottom: calc(var(--spacing) * 3);
}
.mb-4 {
  margin-bottom: calc(var(--spacing) * 4);
}
.tools-v {
  --tools-font-size: 0.875rem;
  --tools-gap: 0;
  --tools-item-gap: max(0.5em, 4px);
  --tools-height: calc(var(--spacing)*8);
  --tools-padding-x: calc(var(--tools-height)/4);
  --tools-item-width: auto;
  --tools-border-radius: var(--default-border-radius);
  --tools-background: transparent;
  font-size: var(--tools-font-size);
  display: inline-flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  gap: var(--tools-gap);
  >* {
    color: currentColor;
    background-color: var(--tools-background);
    width: var(--tools-item-width);
    min-width: var(--tools-height);
    height: var(--tools-height);
    line-height: var(--tools-height);
    padding-inline: var(--tools-padding-x);
    border-radius: var(--tools-border-radius);
    gap: var(--tools-item-gap);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --: ;
    transition: var(--transition-all-normal);
    &:where([data-disabled=true]) {
      cursor: not-allowed;
      opacity: var(--default-opacity-disabled, 0.5);
    }
    &:where([data-more=true]):after {
      content: '';
      opacity: 0.5;
      height: 0.875em;
      mask-image: var(--icon-mask-image);
      display: inline-block;
      height: 1em;
      aspect-ratio: 1/1;
      text-align: center;
      background-color: currentColor;
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
      --: ;
      transition: var(--transition-all-normal);
      --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>');
    }
    &:where([data-more=true][data-open=true]):after {
      --: ;
      rotate: 180deg;
    }
    &:where([data-risk=extreme]) {
      color: var(--color-error);
      &:where(:not([data-disabled=true])):hover {
        background-color: var(--color-error-bg-hover);
        color: var(--color-error);
      }
      &:focus-visible {
        outline-color: var(--color-error);
      }
    }
    &:where([data-risk=high]) {
      color: var(--color-warning);
      &:where(:not([data-disabled=true])):hover {
        background-color: var(--color-warning-bg-hover);
      }
      &:focus-visible {
        outline-color: var(--color-warning);
      }
    }
    &:where([data-risk=medium]) {
      color: var(--color-caution);
      &:where(:not([data-disabled=true])):hover {
        background-color: var(--color-caution-bg-hover);
      }
      &:focus-visible {
        outline-color: var(--color-caution);
      }
    }
    &:where([data-risk=low]) {
      color: var(--color-success);
      &:where(:not([data-disabled=true])):hover {
        background-color: var(--color-success-bg-hover);
      }
      &:focus-visible {
        outline-color: var(--color-success);
      }
    }
    &:where([data-risk=neutral]) {
      color: var(--color-description);
      &:where(:not([data-disabled=true])):hover {
        background-color: var(--color-description-bg-hover);
      }
      &:focus-visible {
        outline-color: var(--color-description);
      }
    }
    &:where(:not([data-risk])) {
      color: currentColor;
      background-color: var(--tools-background);
      &:where(:not([data-disabled=true])):hover {
        background-color: oklch(from currentColor var(--light-threshold-bg-hover) min(c, var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      }
    }
  }
  flex-direction: column;
  >* {
    justify-content: flex-start;
  }
}
.tools {
  --tools-font-size: 0.875rem;
  --tools-gap: 0;
  --tools-item-gap: max(0.5em, 4px);
  --tools-height: calc(var(--spacing)*8);
  --tools-padding-x: calc(var(--tools-height)/4);
  --tools-item-width: auto;
  --tools-border-radius: var(--default-border-radius);
  --tools-background: transparent;
  font-size: var(--tools-font-size);
  display: inline-flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  gap: var(--tools-gap);
  >* {
    color: currentColor;
    background-color: var(--tools-background);
    width: var(--tools-item-width);
    min-width: var(--tools-height);
    height: var(--tools-height);
    line-height: var(--tools-height);
    padding-inline: var(--tools-padding-x);
    border-radius: var(--tools-border-radius);
    gap: var(--tools-item-gap);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --: ;
    transition: var(--transition-all-normal);
    &:where([data-disabled=true]) {
      cursor: not-allowed;
      opacity: var(--default-opacity-disabled, 0.5);
    }
    &:where([data-more=true]):after {
      content: '';
      opacity: 0.5;
      height: 0.875em;
      mask-image: var(--icon-mask-image);
      display: inline-block;
      height: 1em;
      aspect-ratio: 1/1;
      text-align: center;
      background-color: currentColor;
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
      --: ;
      transition: var(--transition-all-normal);
      --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>');
    }
    &:where([data-more=true][data-open=true]):after {
      --: ;
      rotate: 180deg;
    }
    &:where([data-risk=extreme]) {
      color: var(--color-error);
      &:where(:not([data-disabled=true])):hover {
        background-color: var(--color-error-bg-hover);
        color: var(--color-error);
      }
      &:focus-visible {
        outline-color: var(--color-error);
      }
    }
    &:where([data-risk=high]) {
      color: var(--color-warning);
      &:where(:not([data-disabled=true])):hover {
        background-color: var(--color-warning-bg-hover);
      }
      &:focus-visible {
        outline-color: var(--color-warning);
      }
    }
    &:where([data-risk=medium]) {
      color: var(--color-caution);
      &:where(:not([data-disabled=true])):hover {
        background-color: var(--color-caution-bg-hover);
      }
      &:focus-visible {
        outline-color: var(--color-caution);
      }
    }
    &:where([data-risk=low]) {
      color: var(--color-success);
      &:where(:not([data-disabled=true])):hover {
        background-color: var(--color-success-bg-hover);
      }
      &:focus-visible {
        outline-color: var(--color-success);
      }
    }
    &:where([data-risk=neutral]) {
      color: var(--color-description);
      &:where(:not([data-disabled=true])):hover {
        background-color: var(--color-description-bg-hover);
      }
      &:focus-visible {
        outline-color: var(--color-description);
      }
    }
    &:where(:not([data-risk])) {
      color: currentColor;
      background-color: var(--tools-background);
      &:where(:not([data-disabled=true])):hover {
        background-color: oklch(from currentColor var(--light-threshold-bg-hover) min(c, var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      }
    }
  }
}
.tools-h {
  --tools-font-size: 0.875rem;
  --tools-gap: 0;
  --tools-item-gap: max(0.5em, 4px);
  --tools-height: calc(var(--spacing)*8);
  --tools-padding-x: calc(var(--tools-height)/4);
  --tools-item-width: auto;
  --tools-border-radius: var(--default-border-radius);
  --tools-background: transparent;
  font-size: var(--tools-font-size);
  display: inline-flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  gap: var(--tools-gap);
  >* {
    color: currentColor;
    background-color: var(--tools-background);
    width: var(--tools-item-width);
    min-width: var(--tools-height);
    height: var(--tools-height);
    line-height: var(--tools-height);
    padding-inline: var(--tools-padding-x);
    border-radius: var(--tools-border-radius);
    gap: var(--tools-item-gap);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --: ;
    transition: var(--transition-all-normal);
    &:where([data-disabled=true]) {
      cursor: not-allowed;
      opacity: var(--default-opacity-disabled, 0.5);
    }
    &:where([data-more=true]):after {
      content: '';
      opacity: 0.5;
      height: 0.875em;
      mask-image: var(--icon-mask-image);
      display: inline-block;
      height: 1em;
      aspect-ratio: 1/1;
      text-align: center;
      background-color: currentColor;
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
      --: ;
      transition: var(--transition-all-normal);
      --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>');
    }
    &:where([data-more=true][data-open=true]):after {
      --: ;
      rotate: 180deg;
    }
    &:where([data-risk=extreme]) {
      color: var(--color-error);
      &:where(:not([data-disabled=true])):hover {
        background-color: var(--color-error-bg-hover);
        color: var(--color-error);
      }
      &:focus-visible {
        outline-color: var(--color-error);
      }
    }
    &:where([data-risk=high]) {
      color: var(--color-warning);
      &:where(:not([data-disabled=true])):hover {
        background-color: var(--color-warning-bg-hover);
      }
      &:focus-visible {
        outline-color: var(--color-warning);
      }
    }
    &:where([data-risk=medium]) {
      color: var(--color-caution);
      &:where(:not([data-disabled=true])):hover {
        background-color: var(--color-caution-bg-hover);
      }
      &:focus-visible {
        outline-color: var(--color-caution);
      }
    }
    &:where([data-risk=low]) {
      color: var(--color-success);
      &:where(:not([data-disabled=true])):hover {
        background-color: var(--color-success-bg-hover);
      }
      &:focus-visible {
        outline-color: var(--color-success);
      }
    }
    &:where([data-risk=neutral]) {
      color: var(--color-description);
      &:where(:not([data-disabled=true])):hover {
        background-color: var(--color-description-bg-hover);
      }
      &:focus-visible {
        outline-color: var(--color-description);
      }
    }
    &:where(:not([data-risk])) {
      color: currentColor;
      background-color: var(--tools-background);
      &:where(:not([data-disabled=true])):hover {
        background-color: oklch(from currentColor var(--light-threshold-bg-hover) min(c, var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      }
    }
  }
}
.validate {
  ~[class*="validate-user-valid"], ~[class*="validate-user-invalid"], ~[class*="validate-valid"], ~[class*="validate-invalid"], ~[class*="validate-out-of-range"], ~[class*="validate-required"] {
    --validate-color: var(--color-description);
    --validate-display: none;
    display: var(--validate-display);
    width: 100%;
    max-width: 100%;
    font-size: 0.875rem;
    line-height: var(--leading-tight);
    color: var(--validate-color);
    gap: calc(var(--spacing) * 1);
  }
  &:where(:user-valid, :has(:user-valid))~[class*="validate-user-valid"], &:where(:valid, :has(:valid))~[class*="validate-valid"] {
    --validate-color: var(--color-success);
    --validate-display: flex;
    &:empty {
      &:before {
        content: '';
        mask-image: var(--icon-mask-image);
        display: inline-block;
        height: 1em;
        aspect-ratio: 1/1;
        text-align: center;
        background-color: currentColor;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round"><path fill-rule="evenodd" fill="black" d="M12 1 C5.93 1 1 5.93 1 12 s4.93 11 11 11 11-4.93 11-11 S18.07 1 12 1Z M 16 9 A 1 1 0 0 0 15.292969 9.2929688 L 11 13.585938 L 8.7070312 11.292969 A 1 1 0 0 0 7.2929688 11.292969 A 1 1 0 0 0 7.2929688 12.707031 L 10.292969 15.707031 A 1.0001 1.0001 0 0 0 11.707031 15.707031 L 16.707031 10.707031 A 1 1 0 0 0 16.707031 9.2929688 A 1 1 0 0 0 16 9 z " /></svg>');
      }
      &:after {
        content: var(--i18n-valid);
      }
    }
  }
  &:where(:user-invalid, :has(:user-invalid))~[class*="validate-user-invalid"], &:where(:invalid, :has(:invalid))~[class*="validate-invalid"], &:where(:user-invalid, :has(:user-invalid))~[class*="validate-out-of-range"], &:where(:invalid, :has(:invalid))~[class*="validate-out-of-range"], &:where(:user-invalid, :has(:user-invalid))~[class*="validate-required"], &:where(:invalid, :has(:invalid))~[class*="validate-required"] {
    --validate-color: var(--color-error);
    --validate-display: flex;
    &:empty::before {
      content: '';
      mask-image: var(--icon-mask-image);
      display: inline-block;
      height: 1em;
      aspect-ratio: 1/1;
      text-align: center;
      background-color: currentColor;
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
      --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round"><path fill-rule="evenodd" fill="black" d="M12 1 C5.93 1 1 5.93 1 12 s4.93 11 11 11 11-4.93 11-11 S18.07 1 12 1Z M 9 8 A 1 1 0 0 0 8.2929688 8.2929688 A 1 1 0 0 0 8.2929688 9.7070312 L 10.585938 12 L 8.2929688 14.292969 A 1 1 0 0 0 8.2929688 15.707031 A 1 1 0 0 0 9.7070312 15.707031 L 12 13.414062 L 14.292969 15.707031 A 1 1 0 0 0 15.707031 15.707031 A 1 1 0 0 0 15.707031 14.292969 L 13.414062 12 L 15.707031 9.7070312 A 1 1 0 0 0 15.707031 8.2929688 A 1 1 0 0 0 15 8 A 1 1 0 0 0 14.292969 8.2929688 L 12 10.585938 L 9.7070312 8.2929688 A 1 1 0 0 0 9 8 z " /></svg>');
    }
  }
  &:where(:user-invalid, :has(:user-invalid))~[class*="validate-user-invalid"], &:where(:invalid, :has(:invalid))~[class*="validate-invalid"] {
    --validate-color: var(--color-error);
    --validate-display: flex;
    &:empty:after {
      content: var(--i18n-invalid);
    }
  }
  &:where([type=email]:user-invalid, :has([type=email]:user-invalid))~[class*="validate-user-invalid"], &:where([type=email]:invalid, :has([type=email]:invalid))~[class*="validate-invalid"] {
    &:empty:after {
      content: var(--i18n-wrongemail);
    }
  }
  &:where([type=url]:user-invalid, :has([type=url]:user-invalid))~[class*="validate-user-invalid"], &:where([type=url]:invalid, :has([type=url]:invalid))~[class*="validate-invalid"] {
    &:empty:after {
      content: var(--i18n-wrongurl);
    }
  }
  &:where([pattern]:user-invalid, :has([pattern]:user-invalid))~[class*="validate-user-invalid"], &:where([pattern]:invalid, :has([pattern]:invalid))~[class*="validate-invalid"] {
    &:empty:after {
      content: var(--i18n-wrongformat);
    }
  }
  &:where(:user-invalid, :has(:user-invalid))~[class*="validate-out-of-range"], &:where(:invalid, :has(:invalid))~[class*="validate-out-of-range"] {
    &:empty:after {
      content: var(--i18n-outofrange);
    }
  }
  &:where(:user-invalid, :has(:user-invalid))~[class*="validate-required"], &:where(:invalid, :has(:invalid))~[class*="validate-required"] {
    &:empty:after {
      content: var(--i18n-required);
    }
  }
}
.tree-entries {
  --tree-node-color-selected: currentColor;
  --tree-node-background-selected: var(--color-primary-bg);
  li>:where(ul) {
    display: block;
  }
  li>:first-child {
    align-items: flex-start;
    padding-inline: var(--tree-node-padding-x);
    [data-role=content] {
      flex-wrap: wrap;
      >[data-role=custom] {
        width: 100%;
        line-height: var(--leading-compact);
      }
    }
    >[data-role=arrow] {
      display: none;
    }
    &:where(.tree-selected) {
      &:after {
        color: var(--color-primary);
        display: inline-block;
        height: 1em;
        aspect-ratio: 1/1;
        text-align: center;
        background-color: currentColor;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        content: '';
        font-size: 1lh;
        mask-size: 60%;
        mask-image: var(--icon-mask-image);
        --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>');
      }
      &>[data-role=content]>[data-role=label] {
        color: var(--color-primary);
      }
    }
  }
}
.rank {
  :where(&) {
    --rank-height: 1rem;
    --rank-font-size: 0.875rem;
    --rank-border-radius: var(--spacing);
    --rank-color: currentColor;
    --rank-background: transparent;
    --rank-border-width: 0;
    --rank-border-color: var(--rank-color);
    --rank-font-weight: bolder;
    color: var(--rank-color);
    height: var(--rank-height);
    aspect-ratio: 1/1;
    font-weight: var(--rank-font-weight);
    font-size: var(--rank-font-size);
    border-radius: var(--rank-border-radius);
    background-color: var(--rank-background);
    border: var(--rank-border-width) solid var(--rank-border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    img, svg {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}
.spinner {
  --spinner-height: calc(var(--spacing)*6);
  --spinner-thumb-color: var(--color-primary);
  --spinner-track-color: color-mix(in srgb, oklch(from var(--color-primary-base) l calc(c * var(--color-c-factor,1)) h) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --spinner-track-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
  }
  --spinner-track-width: 3px;
  height: var(--spinner-height);
  aspect-ratio: 1/1;
  border-radius: calc(infinity * 1px);
  border: var(--spinner-track-width) solid var(--spinner-track-color);
  border-block-end-color: var(--spinner-thumb-color);
  display: inline-flex;
  --: ;
  animation: rotate-cw-360 var(--custom-duration, 1s) linear infinite both;
}
.status {
  --status-font-size: max(0.875rem, 12px);
  --status-color-dot: var(--color-info);
  --status-height: var(--text-3xs);
  --status-border-radius: calc(infinity * 1px);
  display: inline-flex;
  align-items: center;
  gap: max(calc(var(--spacing)*2), 4px);
  &:before {
    content: '';
    display: inline-block;
    height: var(--status-height);
    aspect-ratio: 1/1;
    border-radius: var(--status-border-radius);
    background: var(--status-color-dot);
  }
  >*:first-child {
    font-size: var(--status-font-size);
  }
}
.entry-checked {
  &:after {
    content: '';
    color: var(--entry-color-hover);
    mask-image: var(--icon-mask-image);
    display: inline-block;
    height: 1em;
    aspect-ratio: 1/1;
    text-align: center;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>');
  }
  &:where(:not(.entry-disabled))>.entry-label, &:where(:not(.entry-disabled))>.entry-body>.entry-label {
    color: var(--entry-color-hover);
  }
}
.icon {
  --icon-mask-image: none;
  display: inline-block;
  height: var(--icon-size, 1em);
  aspect-ratio: 1/1;
  text-align: center;
  background-color: var(--icon-color, currentColor);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--icon-mask-image);
  --: ;
  transition: var(--transition-all-normal);
}
.icon-mask {
  display: inline-block;
  height: 1em;
  aspect-ratio: 1/1;
  text-align: center;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.badge {
  :where(&) {
    --badge-opacity: 100%;
    --badge-background: var(--color-error);
    --badge-border-color: var(--color-error);
    --badge-color: var(--color-white);
    --badge-shadow: transparent;
    --badge-border-radius: calc(infinity * 1px);
    --badge-font-size: 12px;
    --badge-height: 20px;
    --badge-padding-x: calc(var(--badge-height)/3);
    font-size: var(--badge-font-size);
    color: var(--badge-color);
    line-height: 1em;
    height: var(--badge-height);
    min-width: var(--badge-height);
    padding-inline: var(--badge-padding-x);
    border-radius: var(--badge-border-radius);
    background-color: var(--badge-background);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--badge-background) var(--badge-opacity), transparent);
    }
    box-shadow: 0 0 0 2px var(--badge-shadow);
    gap: 0.2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    &:empty {
      --badge-height: 8px;
      padding: 0;
      border-radius: 100%;
    }
    >svg, >img {
      max-height: 100%;
      min-height: 50%;
    }
  }
}
.stats-between {
  height: 100%;
  display: flex;
  justify-content: space-between;
  &:where(.stats-h) {
    width: 100%;
  }
}
.sketch-divider-v {
  --sketch-divider-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' fill='none' stroke-linecap='round' stroke='black' stroke-width='2px' preserveAspectRatio='none'%3E%3Cpath d='M5.92,98.92c-1.07-3-3-8-3-15,0-9,2.89-14.76,4-27,1-11-3-28-2.93-40.69.03-6.43.57-11.73,1-15.31'/%3E%3C/svg%3E");
  width: 10px;
  height: 100%;
  display: block;
  &:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    background-color: var(--sketch-divider-color, currentColor);
    mask-image: var(--sketch-divider-image);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
  }
}
.bookmark-grid {
  &:where(:not(.bookmark-start, .bookmark-end)) {
    display: flex;
    padding-inline: var(--default-gap);
  }
  &:where(.bookmark-start, .bookmark-end) {
    padding-block: var(--default-gap);
    height: 100%;
  }
  >* {
    flex: 1;
    justify-content: center;
  }
}
.btn {
  :where(&) {
    --btn-border-radius: var(--default-border-radius);
    --btn-font-size: 0.875rem;
    --btn-color: var(--color-title);
    --btn-leading: var(--leading-normal);
    --btn-height: calc(var(--spacing)*8);
    --btn-padding-x: calc(var(--btn-height)/3);
    --btn-border-width: 1px;
    --btn-border-color: var(--color-title-bd);
    --btn-background: var(--color-title-surface);
    --btn-outline-color: var(--color-primary);
    --btn-gap: 0.4em;
    border-radius: var(--btn-border-radius);
    font-size: var(--btn-font-size);
    color: var(--btn-color);
    line-height: var(--btn-leading);
    border: var(--btn-border-width) solid var(--btn-border-color);
    height: var(--btn-height);
    padding-inline: var(--btn-padding-x);
    background-color: var(--btn-background);
    opacity: inherit;
    cursor: pointer;
    gap: var(--btn-gap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --: ;
    transition: var(--transition-all-normal);
    &:where([disabled]) {
      cursor: not-allowed;
      opacity: var(--default-opacity-disabled, 0.5);
    }
    &:where(:not([disabled]):hover) {
      --btn-border-color: var(--color-primary);
      --btn-color: var(--color-primary);
    }
    &:where(:not([disabled]):active) {
      --btn-color: var(--color-primary-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --btn-border-color: var(--color-primary);
      outline-color: var(--btn-outline-color);
    }
  }
}
.ellipsis-1 {
  display: -webkit-box;
  white-space: normal;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-align: start;
  overflow: hidden;
  &:where(.ellipsis-reserve) {
    height: calc(1lh * 1);
  }
}
.ellipsis-2 {
  display: -webkit-box;
  white-space: normal;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-align: start;
  overflow: hidden;
  &:where(.ellipsis-reserve) {
    height: calc(1lh * 2);
  }
}
.ellipsis-3 {
  display: -webkit-box;
  white-space: normal;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-align: start;
  overflow: hidden;
  &:where(.ellipsis-reserve) {
    height: calc(1lh * 3);
  }
}
.ellipsis-4 {
  display: -webkit-box;
  white-space: normal;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  text-align: start;
  overflow: hidden;
  &:where(.ellipsis-reserve) {
    height: calc(1lh * 4);
  }
}
.ellipsis-8 {
  display: -webkit-box;
  white-space: normal;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  text-align: start;
  overflow: hidden;
  &:where(.ellipsis-reserve) {
    height: calc(1lh * 8);
  }
}
.ellipsis-10 {
  display: -webkit-box;
  white-space: normal;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  text-align: start;
  overflow: hidden;
  &:where(.ellipsis-reserve) {
    height: calc(1lh * 10);
  }
}
.sketch-divider {
  --sketch-divider-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' fill='none' stroke-linecap='round' stroke='black' stroke-width='2px' preserveAspectRatio='none'%3E%3Cpath d='M1,4.93c3,1.07,8,2.07,15,2.07,9,0,14.76-3.89,27-5,11-1,28,4,40.69,3.93,6.43-.03,10.31.07,15.31-1'/%3E%3C/svg%3E");
  height: 10px;
  display: block;
  &:after {
    content: "";
    display: block;
    height: 100%;
    background-color: var(--sketch-divider-color, currentColor);
    mask-image: var(--sketch-divider-image);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
  }
}
.bookmark-flex {
  &:where(:not(.bookmark-start, .bookmark-end)) {
    display: flex;
    padding-inline: var(--default-gap);
  }
  &:where(.bookmark-start, .bookmark-end) {
    padding-block: var(--default-gap);
    height: 100%;
  }
}
.rating-full {
  width: 100%;
  max-width: 100%;
  display: flex;
  >*:where(:has(input[type=radio])) {
    flex: auto;
  }
}
.rating-ratio-8 {
  width: calc(var(--default-height-input) * 8);
  max-width: 100%;
  display: flex;
  >*:where(:has(input[type=radio])) {
    flex: auto;
  }
}
.rating-scale {
  width: var(--default-width-input);
  max-width: 100%;
  display: flex;
  >*:where(:has(input[type=radio])) {
    flex: auto;
  }
}
.btns-scale {
  &:where(:not(.btns-start, .btns-end)) {
    &:where(:not(.btns-start, .btns-end)) {
      display: flex;
      >* {
        flex: 1;
      }
    }
    width: var(--default-width-input);
  }
}
.btns-scale-2 {
  &:where(:not(.btns-start, .btns-end)) {
    &:where(:not(.btns-start, .btns-end)) {
      display: flex;
      >* {
        flex: 1;
      }
    }
    width: calc(var(--default-width-input) * 2);
  }
}
.btns-scale-\[3\] {
  &:where(:not(.btns-start, .btns-end)) {
    &:where(:not(.btns-start, .btns-end)) {
      display: flex;
      >* {
        flex: 1;
      }
    }
    width: calc(var(--default-width-input) * 3);
  }
}
.lamp-full {
  display: flex;
  width: 100%;
  >* {
    flex: 1;
  }
}
.segment-grid {
  display: flex;
  width: 100%;
  >* {
    flex: 1;
  }
}
.btn-full {
  --btn-padding-x: 0;
  width: 100%;
  display: flex;
}
.check-full {
  display: flex;
  min-width: 0;
  max-width: 100%;
}
.ellipsis {
  display: inline-block;
  max-width: var(--default-ellipsis-width, 100%);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  >[data-role="start"] {
    flex: auto;
    display: flex;
    align-items: center;
    gap: var(--comment-gap);
  }
  >[data-role="end"] {
    color: var(--color-caption);
    display: flex;
    align-items: center;
    gap: var(--comment-gap);
  }
}
.btns-full {
  &:where(:not(.btns-start, .btns-end)) {
    display: flex;
    >* {
      flex: 1;
    }
  }
}
.tree-expanded-10 {
  >:where(ul)>:where(li) {
    >:where(ul) {
      display: block;
    }
    >:first-child>[data-role=arrow]>* {
      rotate: var(--tree-arrow-rotate);
    }
  }
  >:where(ul)>:where(li)>:where(ul)>:where(li) {
    >:where(ul) {
      display: block;
    }
    >:first-child>[data-role=arrow]>* {
      rotate: var(--tree-arrow-rotate);
    }
  }
  >:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li) {
    >:where(ul) {
      display: block;
    }
    >:first-child>[data-role=arrow]>* {
      rotate: var(--tree-arrow-rotate);
    }
  }
  >:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li) {
    >:where(ul) {
      display: block;
    }
    >:first-child>[data-role=arrow]>* {
      rotate: var(--tree-arrow-rotate);
    }
  }
  >:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li) {
    >:where(ul) {
      display: block;
    }
    >:first-child>[data-role=arrow]>* {
      rotate: var(--tree-arrow-rotate);
    }
  }
  >:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li) {
    >:where(ul) {
      display: block;
    }
    >:first-child>[data-role=arrow]>* {
      rotate: var(--tree-arrow-rotate);
    }
  }
  >:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li) {
    >:where(ul) {
      display: block;
    }
    >:first-child>[data-role=arrow]>* {
      rotate: var(--tree-arrow-rotate);
    }
  }
  >:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li) {
    >:where(ul) {
      display: block;
    }
    >:first-child>[data-role=arrow]>* {
      rotate: var(--tree-arrow-rotate);
    }
  }
  >:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li) {
    >:where(ul) {
      display: block;
    }
    >:first-child>[data-role=arrow]>* {
      rotate: var(--tree-arrow-rotate);
    }
  }
  >:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li) {
    >:where(ul) {
      display: block;
    }
    >:first-child>[data-role=arrow]>* {
      rotate: var(--tree-arrow-rotate);
    }
  }
}
.tree-expanded-3 {
  >:where(ul)>:where(li) {
    >:where(ul) {
      display: block;
    }
    >:first-child>[data-role=arrow]>* {
      rotate: var(--tree-arrow-rotate);
    }
  }
  >:where(ul)>:where(li)>:where(ul)>:where(li) {
    >:where(ul) {
      display: block;
    }
    >:first-child>[data-role=arrow]>* {
      rotate: var(--tree-arrow-rotate);
    }
  }
  >:where(ul)>:where(li)>:where(ul)>:where(li)>:where(ul)>:where(li) {
    >:where(ul) {
      display: block;
    }
    >:first-child>[data-role=arrow]>* {
      rotate: var(--tree-arrow-rotate);
    }
  }
}
.tree-expanded-2 {
  >:where(ul)>:where(li) {
    >:where(ul) {
      display: block;
    }
    >:first-child>[data-role=arrow]>* {
      rotate: var(--tree-arrow-rotate);
    }
  }
  >:where(ul)>:where(li)>:where(ul)>:where(li) {
    >:where(ul) {
      display: block;
    }
    >:first-child>[data-role=arrow]>* {
      rotate: var(--tree-arrow-rotate);
    }
  }
}
.tree-expanded {
  &:where(.tree)> :where(ul)> :where(li)> :where(ul), &:where(:not(.tree))~ul {
    display: block;
  }
  &:where(.tree)> :where(ul)> :where(li)>:first-child>[data-role=arrow]>*, &:where(:not(.tree))>[data-role=arrow]>* {
    rotate: var(--tree-arrow-rotate);
  }
}
.tree-expanded-1 {
  >:where(ul)>:where(li) {
    >:where(ul) {
      display: block;
    }
    >:first-child>[data-role=arrow]>* {
      rotate: var(--tree-arrow-rotate);
    }
  }
}
.tree-expanded-all {
  &:where(.tree) :where(li)>:where(ul), &:where(:not(.tree))~ :where(ul), &:where(:not(.tree))~ :where(ul) :where(ul) {
    display: block;
  }
  &:where(.tree) :where(li)>:first-child>[data-role=arrow]>*, &:where(:not(.tree))>[data-role=arrow]>*, &:where(:not(.tree))~ :where(ul) :where(li):first-child>[data-role=arrow]>* {
    rotate: var(--tree-arrow-rotate);
  }
}
.skeleton-pulse {
  animation: skeleton-pulse 1s ease-in-out infinite;
  &::after {
    display: none;
  }
}
.empty {
  color: var(--color-caption);
  font-size: 0.85rem;
  flex-direction: column;
  gap: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  &:before {
    content: attr(data-empty, var(--i18n-no-data));
  }
}
.comments {
  font-size: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.breadcrumb {
  --breadcrumb-font-size: 0.875rem;
  --breadcrumb-gap: 0.4em;
  --breadcrumb-color: var(--color-description);
  --breadcrumb-color-hyphen: var(--color-description);
  --breadcrumb-color-selected: var(--color-title);
  --breadcrumb-color-hover: var(--color-primary);
  color: var(--breadcrumb-color);
  font-size: var(--breadcrumb-font-size);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--breadcrumb-gap);
  [data-role=header] {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
  }
  a {
    --: ;
    transition: var(--transition-all-normal);
  }
  a:hover {
    color: var(--breadcrumb-color-hover);
  }
  [data-selected=true] {
    color: var(--breadcrumb-color-selected);
  }
  [data-role=label] {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
  }
  [data-role=hyphen] {
    color: var(--breadcrumb-color-hyphen);
    text-align: center;
  }
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.inline-flex-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
}
.flex-start {
  display: flex;
  justify-content: flex-start;
}
.otp {
  :where(&) {
    --otp-gap: calc(var(--spacing) * 2);
    display: inline-flex;
    gap: var(--otp-gap);
    input {
      --input-width: var(--input-row-height);
      --input-padding-x: 0;
      --input-font-size: calc(var(--input-row-height)/2);
      text-align: center;
      font-family: var(--font-mono);
    }
  }
}
.comment {
  --comment-gap: 0.4em;
  --comment-radius-media: var(--default-border-radius);
  font-size: 0.875rem;
  display: flex;
  gap: var(--comment-gap);
}
.bookmark-gapped {
  background-color: var(--bookmark-item-background);
  &:where(:not(.bookmark-start, .bookmark-end)) {
    display: flex;
    padding-inline-start: 0.5em;
    padding-block-start: 0.5em;
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
  }
  &:where(.bookmark-start) {
    padding-block-start: var(--default-gap);
    padding-inline-end: var(--default-gap);
    border-start-end-radius: inherit;
    border-end-end-radius: inherit;
  }
  &:where(.bookmark-end) {
    padding-block-start: var(--default-gap);
    padding-inline-start: var(--default-gap);
    border-start-start-radius: inherit;
    border-end-start-radius: inherit;
  }
  >*:where(:not([data-selected=true], :has(:checked))) {
    background-color: transparent;
  }
}
.bookmark-flush {
  background-color: var(--bookmark-item-background);
  >*:where(:not([data-selected=true], :has(:checked))) {
    background-color: transparent;
  }
  &:where(:not(.bookmark-start, .bookmark-end)) {
    display: flex;
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
    >* {
      border-block-start: none;
      &:first-child {
        border-start-start-radius: inherit;
        border-inline-start: none;
      }
    }
  }
  &:where(.bookmark-start) {
    border-start-end-radius: inherit;
    border-end-end-radius: inherit;
    >* {
      border-inline-end: none;
      &:first-child {
        border-start-end-radius: inherit;
        border-block-start: none;
      }
      &:last-child {
        border-inline-end: none;
      }
    }
  }
  &:where(.bookmark-end) {
    border-start-start-radius: inherit;
    border-end-start-radius: inherit;
    >* {
      border-inline-start: none;
      &:first-child {
        border-start-start-radius: inherit;
        border-block-start: none;
      }
      &:last-child {
        border-inline-start: none;
      }
    }
  }
}
.check-tick-error {
  --check-input-radius: 0;
  --check-input-border-width: 0;
  --check-border-width: 1px;
  --check-border-radius: var(--default-border-radius);
  &:where(.check-multiline) {
    --check-padding-x: 1em;
    --check-padding-y: 1em;
  }
  &:where(:not(.check-multiline)) {
    --check-padding-x: calc(var(--check-height)/3);
    --check-height: var(--default-height-input);
  }
  input:before, input:after {
    display: none;
  }
  input {
    --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>');
    background-color: var(--color-title-bd);
    mask-size: 80%;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-image: var(--icon-mask-image);
  }
  &:where(:has(:focus-visible)) {
    outline: var(--default-outline-width) solid var(--check-outline-color);
    outline-offset: var(--default-outline-offset);
  }
  &:where(:has(:checked)) {
    input {
      background-color: var(--check-color);
    }
  }
  --check-input-border-color: oklch(from var(--color-error) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-error-bd-hover);
  --check-input-border-color-hover: var(--color-error);
  --check-input-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-error-surface);
  --check-input-fill: var(--color-error);
  --check-outline-color: var(--color-error);
  --check-halo-color: var(--color-error);
  --check-indeterminate-bg: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-error-bd);
  --check-indeterminate-bd: var(--color-error);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-error-contrast);
    --check-input-background: var(--color-error);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  --check-border-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-border-color: var(--color-error-bd);
  &:where(:not(:has(:checked))) {
    input {
      background-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
      background-color: var(--color-error-bd);
    }
  }
  &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
    --check-border-color: oklch(from var(--color-error) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    --check-border-color: var(--color-error-bd-hover);
    --check-background: oklch(from var(--color-error) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-error-bg);
  }
  &:where(:has(:checked)) {
    --check-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-color: var(--color-error-contrast);
    --check-border-color: var(--color-error);
    --check-background: var(--color-error);
  }
}
.check-tick-primary {
  --check-input-radius: 0;
  --check-input-border-width: 0;
  --check-border-width: 1px;
  --check-border-radius: var(--default-border-radius);
  &:where(.check-multiline) {
    --check-padding-x: 1em;
    --check-padding-y: 1em;
  }
  &:where(:not(.check-multiline)) {
    --check-padding-x: calc(var(--check-height)/3);
    --check-height: var(--default-height-input);
  }
  input:before, input:after {
    display: none;
  }
  input {
    --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>');
    background-color: var(--color-title-bd);
    mask-size: 80%;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-image: var(--icon-mask-image);
  }
  &:where(:has(:focus-visible)) {
    outline: var(--default-outline-width) solid var(--check-outline-color);
    outline-offset: var(--default-outline-offset);
  }
  &:where(:has(:checked)) {
    input {
      background-color: var(--check-color);
    }
  }
  --check-input-border-color: oklch(from var(--color-primary) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-primary-bd-hover);
  --check-input-border-color-hover: var(--color-primary);
  --check-input-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-primary-surface);
  --check-input-fill: var(--color-primary);
  --check-outline-color: var(--color-primary);
  --check-halo-color: var(--color-primary);
  --check-indeterminate-bg: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-primary-bd);
  --check-indeterminate-bd: var(--color-primary);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-primary-contrast);
    --check-input-background: var(--color-primary);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  --check-border-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-border-color: var(--color-primary-bd);
  &:where(:not(:has(:checked))) {
    input {
      background-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
      background-color: var(--color-primary-bd);
    }
  }
  &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
    --check-border-color: oklch(from var(--color-primary) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    --check-border-color: var(--color-primary-bd-hover);
    --check-background: oklch(from var(--color-primary) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-primary-bg);
  }
  &:where(:has(:checked)) {
    --check-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-color: var(--color-primary-contrast);
    --check-border-color: var(--color-primary);
    --check-background: var(--color-primary);
  }
}
.check-tick-success {
  --check-input-radius: 0;
  --check-input-border-width: 0;
  --check-border-width: 1px;
  --check-border-radius: var(--default-border-radius);
  &:where(.check-multiline) {
    --check-padding-x: 1em;
    --check-padding-y: 1em;
  }
  &:where(:not(.check-multiline)) {
    --check-padding-x: calc(var(--check-height)/3);
    --check-height: var(--default-height-input);
  }
  input:before, input:after {
    display: none;
  }
  input {
    --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>');
    background-color: var(--color-title-bd);
    mask-size: 80%;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-image: var(--icon-mask-image);
  }
  &:where(:has(:focus-visible)) {
    outline: var(--default-outline-width) solid var(--check-outline-color);
    outline-offset: var(--default-outline-offset);
  }
  &:where(:has(:checked)) {
    input {
      background-color: var(--check-color);
    }
  }
  --check-input-border-color: oklch(from var(--color-success) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-success-bd-hover);
  --check-input-border-color-hover: var(--color-success);
  --check-input-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-success-surface);
  --check-input-fill: var(--color-success);
  --check-outline-color: var(--color-success);
  --check-halo-color: var(--color-success);
  --check-indeterminate-bg: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-success-bd);
  --check-indeterminate-bd: var(--color-success);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-success-contrast);
    --check-input-background: var(--color-success);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  --check-border-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-border-color: var(--color-success-bd);
  &:where(:not(:has(:checked))) {
    input {
      background-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
      background-color: var(--color-success-bd);
    }
  }
  &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
    --check-border-color: oklch(from var(--color-success) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    --check-border-color: var(--color-success-bd-hover);
    --check-background: oklch(from var(--color-success) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-success-bg);
  }
  &:where(:has(:checked)) {
    --check-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-color: var(--color-success-contrast);
    --check-border-color: var(--color-success);
    --check-background: var(--color-success);
  }
}
.check-tick {
  :where(&) {
    --check-border-color: var(--color-title-bd);
    --check-input-radius: 0;
    --check-input-border-width: 0;
    --check-border-width: 1px;
    --check-border-radius: var(--default-border-radius);
    &:where(.check-multiline) {
      --check-padding-x: 1em;
      --check-padding-y: 1em;
    }
    &:where(:not(.check-multiline)) {
      --check-padding-x: calc(var(--check-height)/3);
      --check-height: var(--default-height-input);
    }
    input:before, input:after {
      display: none;
    }
    input {
      --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>');
      background-color: var(--color-title-bd);
      mask-size: 80%;
      mask-position: center;
      mask-repeat: no-repeat;
      mask-image: var(--icon-mask-image);
    }
    &:where(:has(:focus-visible)) {
      outline: var(--default-outline-width) solid var(--check-outline-color);
      outline-offset: var(--default-outline-offset);
    }
    &:where(:has(:checked)) {
      input {
        background-color: var(--check-color);
      }
    }
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-border-color: var(--color-primary-bd-hover);
      --check-background: var(--color-primary-bg);
    }
    &:where(:has(:checked)) {
      --check-color: var(--color-primary-contrast);
      --check-border-color: var(--color-primary);
      --check-background: var(--color-primary);
    }
  }
}
.tree-indent-cascading {
  [data-role=indent] {
    display: none;
  }
  li li {
    padding-inline-start: var(--tree-leading);
  }
  &:where(.tree-btns) {
    li li:where(:not(:has(>ul))) {
      padding-inline-start: 0;
    }
  }
}
.input-inline {
  --input-width: auto;
  display: inline-flex;
}
.block {
  display: block;
}
.contents {
  display: contents;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.inline {
  display: inline;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.poster-flush {
  --poster-border-radius: inherit;
  aspect-ratio: auto;
  height: 100%;
  width: 100%;
}
.btn-icon {
  --btn-icon-size: max(calc(var(--btn-height)/3), 0.75rem);
  --btn-padding-x: 0;
  aspect-ratio: 1 / 1;
  >svg, >img {
    height: var(--btn-icon-size);
  }
}
.btn-ratio {
  --btn-padding-x: 0;
  aspect-ratio: 1 / 1;
  max-width: 100%;
}
.btn-ratio-2 {
  --btn-padding-x: 0;
  aspect-ratio: 2 / 1;
  max-width: 100%;
}
.btn-ratio-3 {
  --btn-padding-x: 0;
  aspect-ratio: 3 / 1;
  max-width: 100%;
}
.btn-ratio-4 {
  --btn-padding-x: 0;
  aspect-ratio: 4 / 1;
  max-width: 100%;
}
.btn-ratio-5 {
  --btn-padding-x: 0;
  aspect-ratio: 5 / 1;
  max-width: 100%;
}
.aspect-1\/1 {
  aspect-ratio: 1/1;
}
.aspect-4\/1 {
  aspect-ratio: 4/1;
}
.aspect-16\/9 {
  aspect-ratio: 16/9;
}
.deform-4xl {
  --deform-height: 25px;
  --deform-height-line: 3px;
  &.deform-check {
    &:before {
      width: 13px;
      translate: -1px 2px;
    }
    &::after {
      width: 20px;
      translate: 6px 0px;
    }
  }
  &.deform-search {
    &:before {
      width: 22px;
      height: 22px;
    }
    &::after {
      width: 9px;
      translate: 16px 8px;
    }
  }
  &.deform-arrow-start, &.deform-arrow-end, &.deform-arrow-up, &.deform-arrow-down {
    --deform-width-line: 23px;
    &:before, &:after {
      width: 16px;
    }
  }
  &.deform-arrow-start {
    &:before {
      translate: -2px -5px;
    }
    &:after {
      translate: -2px 5px;
    }
  }
  &.deform-arrow-end {
    &:before {
      translate: 9px 5px;
    }
    &:after {
      translate: 9px -5px;
    }
  }
  &.deform-arrow-up {
    &:before {
      translate: -2px -5px;
    }
    &:after {
      translate: 9px -5px;
    }
  }
  &.deform-arrow-down {
    &:before {
      translate: 9px 5px;
    }
    &:after {
      translate: -2px 5px;
    }
  }
  &[class*="deform-chevron"] {
    --deform-width-line: 17px;
  }
  &.deform-chevron-start {
    &:before {
      translate: 0px -5px;
    }
    &:after {
      translate: 0px 5px;
    }
  }
  &.deform-chevron-end {
    &:before {
      translate: 0px 5px;
    }
    &:after {
      translate: 0px -5px;
    }
  }
  &.deform-chevron-up {
    &:before {
      translate: -5px 0px;
    }
    &:after {
      translate: 5px 0px;
    }
  }
  &.deform-chevron-down {
    &:before {
      translate: 5px 0px;
    }
    &:after {
      translate: -5px 0px;
    }
  }
}
.deform-5xl {
  --deform-height: 26px;
  --deform-height-line: 4px;
  &.deform-check {
    &:before {
      width: 13px;
      translate: 0px 3px;
    }
    &::after {
      width: 20px;
      translate: 6px 0px;
    }
  }
  &.deform-search {
    &:before {
      width: 22px;
      height: 22px;
    }
    &::after {
      width: 9px;
      translate: 16px 8px;
    }
  }
  &.deform-arrow-start, &.deform-arrow-end, &.deform-arrow-up, &.deform-arrow-down {
    --deform-width-line: 24px;
    &:before, &:after {
      width: 16px;
    }
  }
  &.deform-arrow-start {
    &:before {
      translate: -2px -5px;
    }
    &:after {
      translate: -2px 5px;
    }
  }
  &.deform-arrow-end {
    &:before {
      translate: 9px 5px;
    }
    &:after {
      translate: 9px -5px;
    }
  }
  &.deform-arrow-up {
    &:before {
      translate: -2px -5px;
    }
    &:after {
      translate: 10px -5px;
    }
  }
  &.deform-arrow-down {
    &:before {
      translate: 10px 5px;
    }
    &:after {
      translate: -2px 5px;
    }
  }
  &[class*="deform-chevron"] {
    --deform-width-line: 17px;
  }
  &.deform-chevron-start {
    &:before {
      translate: 0px -5px;
    }
    &:after {
      translate: 0px 5px;
    }
  }
  &.deform-chevron-end {
    &:before {
      translate: 0px 5px;
    }
    &:after {
      translate: 0px -5px;
    }
  }
  &.deform-chevron-up {
    &:before {
      translate: -5px 0px;
    }
    &:after {
      translate: 5px 0px;
    }
  }
  &.deform-chevron-down {
    &:before {
      translate: 5px 0px;
    }
    &:after {
      translate: -5px 0px;
    }
  }
}
.deform-xs {
  --deform-height: 11px;
  --deform-height-line: 1px;
  &.deform-check {
    &:before {
      width: 5px;
      translate: 0px 1px;
    }
    &::after {
      width: 8px;
      translate: 3px 0px;
    }
  }
  &.deform-search {
    &:before {
      width: 10px;
      height: 10px;
    }
    &::after {
      width: 4px;
      translate: 7px 4px;
    }
  }
  &[class*="deform-arrow-"] {
    --deform-width-line: 11px;
  }
  &.deform-arrow-start, &.deform-arrow-end, &.deform-arrow-up, &.deform-arrow-down {
    &:before, &:after {
      width: 7px;
    }
  }
  &.deform-arrow-start {
    &:before {
      translate: -1px -2px;
    }
    &:after {
      translate: -1px 2px;
    }
  }
  &.deform-arrow-end {
    &:before {
      translate: 5px 2px;
    }
    &:after {
      translate: 5px -2px;
    }
  }
  &.deform-arrow-up {
    &:before {
      translate: 0px -3px;
    }
    &:after {
      translate: 4px -3px;
    }
  }
  &.deform-arrow-down {
    &:before {
      translate: 4px 3px;
    }
    &:after {
      translate: 0px 3px;
    }
  }
  &[class*="deform-chevron"] {
    --deform-width-line: 7px;
  }
  &.deform-chevron-start {
    &:before {
      translate: 0px -2px;
    }
    &:after {
      translate: 0px 2px;
    }
  }
  &.deform-chevron-end {
    &:before {
      translate: 0px 2px;
    }
    &:after {
      translate: 0px -2px;
    }
  }
  &.deform-chevron-up {
    &:before {
      translate: -2px 0px;
    }
    &:after {
      translate: 2px 0px;
    }
  }
  &.deform-chevron-down {
    &:before {
      translate: 2px 0px;
    }
    &:after {
      translate: -2px 0px;
    }
  }
}
.deform-2xl {
  --deform-height: 20px;
  &.deform-check {
    &:before {
      width: 10px;
      translate: 0px 2px;
    }
    &::after {
      width: 16px;
      translate: 5px 0px;
    }
  }
  &.deform-search {
    &:before {
      width: 18px;
      height: 18px;
    }
    &::after {
      width: 6px;
      translate: 14px 7px;
    }
  }
  &.deform-arrow-start, &.deform-arrow-end, &.deform-arrow-up, &.deform-arrow-down {
    --deform-width-line: 18px;
    &:before, &:after {
      width: 13px;
    }
  }
  &.deform-arrow-start {
    &:before {
      translate: -2px -4px;
    }
    &:after {
      translate: -2px 4px;
    }
  }
  &.deform-arrow-end {
    &:before {
      translate: 7px 4px;
    }
    &:after {
      translate: 7px -4px;
    }
  }
  &.deform-arrow-up {
    &:before {
      translate: -2px -4px;
    }
    &:after {
      translate: 7px -4px;
    }
  }
  &.deform-arrow-down {
    &:before {
      translate: 7px 4px;
    }
    &:after {
      translate: -2px 4px;
    }
  }
  &[class*="deform-chevron"] {
    --deform-width-line: 13px;
  }
  &.deform-chevron-start {
    &:before {
      translate: 0px -4px;
    }
    &:after {
      translate: 0px 4px;
    }
  }
  &.deform-chevron-end {
    &:before {
      translate: 0px 4px;
    }
    &:after {
      translate: 0px -4px;
    }
  }
  &.deform-chevron-up {
    &:before {
      translate: -4px 0px;
    }
    &:after {
      translate: 4px 0px;
    }
  }
  &.deform-chevron-down {
    &:before {
      translate: 4px 0px;
    }
    &:after {
      translate: -4px 0px;
    }
  }
}
.deform-3xl {
  --deform-height: 22px;
  &.deform-check {
    &:before {
      width: 12px;
      translate: -1px 2px;
    }
    &::after {
      width: 18px;
      translate: 6px 0px;
    }
  }
  &.deform-search {
    &:before {
      width: 20px;
      height: 20px;
    }
    &::after {
      width: 6px;
      translate: 16px 8px;
    }
  }
  &.deform-arrow-start, &.deform-arrow-end, &.deform-arrow-up, &.deform-arrow-down {
    --deform-width-line: 20px;
    &:before, &:after {
      width: 15px;
    }
  }
  &.deform-arrow-start {
    &:before {
      translate: -2px -5px;
    }
    &:after {
      translate: -2px 5px;
    }
  }
  &.deform-arrow-end {
    &:before {
      translate: 7px 5px;
    }
    &:after {
      translate: 7px -5px;
    }
  }
  &.deform-arrow-up {
    &:before {
      translate: -2px -5px;
    }
    &:after {
      translate: 7px -5px;
    }
  }
  &.deform-arrow-down {
    &:before {
      translate: 7px 5px;
    }
    &:after {
      translate: -2px 5px;
    }
  }
  &[class*="deform-chevron"] {
    --deform-width-line: 15px;
  }
  &.deform-chevron-start {
    &:before {
      translate: 0px -5px;
    }
    &:after {
      translate: 0px 5px;
    }
  }
  &.deform-chevron-end {
    &:before {
      translate: 0px 5px;
    }
    &:after {
      translate: 0px -5px;
    }
  }
  &.deform-chevron-up {
    &:before {
      translate: -5px 0px;
    }
    &:after {
      translate: 5px 0px;
    }
  }
  &.deform-chevron-down {
    &:before {
      translate: 5px 0px;
    }
    &:after {
      translate: -5px 0px;
    }
  }
}
.deform-xl {
  --deform-height: 18px;
  &.deform-check {
    &:before {
      width: 9px;
      translate: -1px 2px;
    }
    &::after {
      width: 15px;
      translate: 4px 0px;
    }
  }
  &.deform-search {
    &:before {
      width: 16px;
      height: 16px;
    }
    &::after {
      width: 6px;
      translate: 12px 6px;
    }
  }
  &.deform-arrow-start, &.deform-arrow-end, &.deform-arrow-up, &.deform-arrow-down {
    --deform-width-line: 16px;
    &:before, &:after {
      width: 12px;
    }
  }
  &.deform-arrow-start {
    &:before {
      translate: -2px -4px;
    }
    &:after {
      translate: -2px 4px;
    }
  }
  &.deform-arrow-end {
    &:before {
      translate: 6px 4px;
    }
    &:after {
      translate: 6px -4px;
    }
  }
  &.deform-arrow-up {
    &:before {
      translate: -2px -4px;
    }
    &:after {
      translate: 6px -4px;
    }
  }
  &.deform-arrow-down {
    &:before {
      translate: 6px 4px;
    }
    &:after {
      translate: -2px 4px;
    }
  }
  &[class*="deform-chevron"] {
    --deform-width-line: 12px;
  }
  &.deform-chevron-start {
    &:before {
      translate: 0px -4px;
    }
    &:after {
      translate: 0px 4px;
    }
  }
  &.deform-chevron-end {
    &:before {
      translate: 0px 4px;
    }
    &:after {
      translate: 0px -4px;
    }
  }
  &.deform-chevron-up {
    &:before {
      translate: -4px 0px;
    }
    &:after {
      translate: 4px 0px;
    }
  }
  &.deform-chevron-down {
    &:before {
      translate: 4px 0px;
    }
    &:after {
      translate: -4px 0px;
    }
  }
}
.deform-lg {
  --deform-height: 16px;
  &.deform-check {
    &:before {
      width: 8px;
      translate: 0px 2px;
    }
    &::after {
      width: 13px;
      translate: 4px 0px;
    }
  }
  &.deform-search {
    &:before {
      width: 14px;
      height: 14px;
    }
    &::after {
      width: 6px;
      translate: 10px 5px;
    }
  }
  &.deform-arrow-start, &.deform-arrow-end, &.deform-arrow-up, &.deform-arrow-down {
    --deform-width-line: 14px;
    &:before, &:after {
      width: 10px;
    }
  }
  &.deform-arrow-start {
    &:before {
      translate: -1px -3px;
    }
    &:after {
      translate: -1px 3px;
    }
  }
  &.deform-arrow-end {
    &:before {
      translate: 5px 3px;
    }
    &:after {
      translate: 5px -3px;
    }
  }
  &.deform-arrow-up {
    &:before {
      translate: -1px -3px;
    }
    &:after {
      translate: 5px -3px;
    }
  }
  &.deform-arrow-down {
    &:before {
      translate: 5px 3px;
    }
    &:after {
      translate: -1px 3px;
    }
  }
}
.object-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.link {
  --link-color: currentColor;
  --link-hover: var(--color-primary);
  --link-active: var(--color-primary-hover);
  --link-outline-color: var(--link-color);
  color: var(--link-color);
  text-decoration: underline;
  padding: 0;
  border-width: 0;
  background-color: transparent;
  line-height: inherit;
  height: auto;
  font-size: inherit;
  cursor: pointer;
  --: ;
  transition: var(--transition-all-normal);
  &:where([disabled]) {
    cursor: not-allowed;
    opacity: var(--default-opacity-disabled, 0.5);
  }
  &:where(:not([disabled]):hover) {
    color: var(--link-hover);
  }
  &:where(:not([disabled]):active) {
    color: var(--link-active);
  }
  &:where(:focus-visible) {
    outline-color: var(--link-outline-color);
  }
}
.segment-flush {
  :where(&) {
    --segment-item-background-selected: var(--segment-background);
    --segment-item-background-hover: var(--color-title-bg);
    border: 1px solid var(--segment-item-background-selected);
    background-color: transparent;
    padding: 0;
    gap: 0;
    >* {
      height: calc(var(--segment-height) - 2px);
      border-radius: 0;
      &:first-child {
        border-start-start-radius: calc(var(--segment-border-radius) - 2px);
        border-end-start-radius: calc(var(--segment-border-radius) - 2px);
      }
      &:last-child {
        border-start-end-radius: calc(var(--segment-border-radius) - 2px);
        border-end-end-radius: calc(var(--segment-border-radius) - 2px);
      }
    }
  }
}
.segment-inverted {
  :where(&) {
    --segment-item-background-selected: var(--segment-background);
    --segment-item-background-hover: var(--color-title-bg);
    border: 1px solid var(--color-title-bg-hover);
    background-color: transparent;
    >* {
      height: calc(var(--segment-height) - var(--segment-border-width)*2 - 2px);
      border-radius: max(calc(var(--segment-border-radius) - var(--segment-border-width)), calc(var(--segment-border-width)/2));
    }
  }
}
.h-8 {
  height: calc(var(--spacing) * 8);
}
.h-12 {
  height: calc(var(--spacing) * 12);
}
.h-16 {
  height: calc(var(--spacing) * 16);
}
.h-20 {
  height: calc(var(--spacing) * 20);
}
.h-28 {
  height: calc(var(--spacing) * 28);
}
.h-36 {
  height: calc(var(--spacing) * 36);
}
.h-40 {
  height: calc(var(--spacing) * 40);
}
.h-50 {
  height: calc(var(--spacing) * 50);
}
.h-full {
  height: 100%;
}
.flex-col-fluid {
  flex: 1;
  min-height: 0;
}
.btn-scale {
  --btn-padding-x: 0;
  width: var(--default-width-input);
  max-width: 100%;
}
.btn-scale-2 {
  --btn-padding-x: 0;
  width: calc(var(--default-width-input) * 2);
  max-width: 100%;
}
.btn-scale-\[3\] {
  --btn-padding-x: 0;
  width: calc(var(--default-width-input) * 3);
  max-width: 100%;
}
.btns-flush {
  >* {
    &:where(:not([disabled])):hover, &:where(:not([disabled])):focus-visible {
      --btn-border-color: var(--color-title-bd);
    }
  }
  &:where(:not(.btns-start, .btns-end)) {
    width: 100%;
    >* {
      flex: 1;
    }
  }
  &:where(:not(.btns-top, .btns-start, .btns-end)) {
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
    >* {
      border-bottom: none;
      &:where(:first-child) {
        border-inline-start: none;
        border-start-start-radius: 0;
        border-end-start-radius: inherit;
      }
      &:where(:last-child) {
        border-inline-end: none;
        border-start-end-radius: 0;
        border-end-end-radius: inherit;
      }
    }
  }
}
.divider-end {
  &:where(:not(:empty):not(:has(>:first-child:empty)):not(.divider-v)):after {
    flex: none;
    width: var(--divider-offset);
  }
}
.divider-start {
  &:where(:not(:empty):not(:has(>:first-child:empty)):not(.divider-v)):before {
    flex: none;
    width: var(--divider-offset);
  }
}
.deform-arrow-end {
  --deform-width-line: 12px;
  scale: var(--direction-factor-1) 1;
  &:before, &:after {
    width: 8px;
  }
  &:before {
    translate: 5px 2px;
    rotate: -45deg;
  }
  &:after {
    translate: 5px -2px;
    rotate: 45deg;
  }
}
.deform-arrow-start {
  --deform-width-line: 12px;
  scale: var(--direction-factor-1) 1;
  &:before, &:after {
    width: 8px;
  }
  &:before {
    translate: -1px -2px;
    rotate: -45deg;
  }
  &:after {
    translate: -1px 2px;
    rotate: 45deg;
  }
}
.deform-check {
  >* {
    opacity: 0;
  }
  &:before {
    width: 7px;
    translate: 0px 2px;
    rotate: 45deg;
  }
  &::after {
    width: 12px;
    translate: 3px 0px;
    rotate: -45deg;
  }
}
.deform-arrow-down {
  --deform-width-line: 12px;
  >* {
    rotate: 90deg;
  }
  &:before, &:after {
    width: 8px;
  }
  &:before {
    translate: 4px 3px;
    rotate: -45deg;
  }
  &:after {
    translate: 0px 3px;
    rotate: 45deg;
  }
}
.deform-arrow-up {
  --deform-width-line: 12px;
  >* {
    rotate: 90deg;
  }
  &:before, &:after {
    width: 8px;
  }
  &:before {
    translate: 0px -3px;
    rotate: -45deg;
  }
  &:after {
    translate: 4px -3px;
    rotate: 45deg;
  }
}
.step-plain {
  --step-font-size-node: 1.25rem;
  >* [data-role=node] {
    width: auto;
    border-radius: 0;
    border: none;
    padding-inline: 0.5em;
  }
}
.poster-full {
  --: ;
  width: 100%;
}
.w-8 {
  width: calc(var(--spacing) * 8);
}
.w-12 {
  width: calc(var(--spacing) * 12);
}
.w-16 {
  width: calc(var(--spacing) * 16);
}
.w-20 {
  width: calc(var(--spacing) * 20);
}
.w-28 {
  width: calc(var(--spacing) * 28);
}
.w-30 {
  width: calc(var(--spacing) * 30);
}
.w-36 {
  width: calc(var(--spacing) * 36);
}
.w-40 {
  width: calc(var(--spacing) * 40);
}
.w-50 {
  width: calc(var(--spacing) * 50);
}
.w-60 {
  width: calc(var(--spacing) * 60);
}
.w-70 {
  width: calc(var(--spacing) * 70);
}
.w-full {
  width: 100%;
}
.btn-gutter {
  --btn-padding-x: 1em;
  max-width: 100%;
}
.btn-gutter-2 {
  --btn-padding-x: calc(1em * 2);
  max-width: 100%;
}
.flex-fluid {
  flex: 1;
  min-width: 0;
}
.field-borderless {
  --field-padding-y: var(--field-gap);
  --field-padding-x: var(--default-gap);
  [data-role=input] {
    --input-border-width: 0px;
    --input-border-color-focus: transparent;
    --input-padding-x: 0;
    flex: auto;
    background-color: transparent;
  }
  .shell, .shell-h, .shell-v {
    --shell-border-width: 0;
    --shell-border-color-focus: transparent;
    padding-inline: 0;
  }
}
.field-full {
  --field-width: 100%;
  &:where(.field-h) {
    [data-role=content] {
      flex: 1;
    }
  }
}
.field-ratio-3 {
  --field-width: calc(var(--default-height-input) * 3);
  &:where(.field-h) {
    [data-role=content] {
      flex: 1;
    }
  }
}
.field-scale {
  --field-width: var(--default-width-input);
  &:where(.field-h) {
    [data-role=content] {
      flex: 1;
    }
  }
}
.field-scale-2 {
  --field-width: calc(var(--default-width-input) * 2);
  &:where(.field-h) {
    [data-role=content] {
      flex: 1;
    }
  }
}
.field-scale-3 {
  --field-width: calc(var(--default-width-input) * 3);
  &:where(.field-h) {
    [data-role=content] {
      flex: 1;
    }
  }
}
.flex-1 {
  flex: 1;
}
.flex-shrink {
  flex-shrink: 1;
}
.spacer-fill {
  flex-grow: 1;
  align-self: stretch;
}
.border-collapse {
  border-collapse: collapse;
}
.deform-chevron-end {
  --deform-width-line: 10px;
  scale: var(--direction-factor-1) 1;
  >* {
    opacity: 0;
  }
  &:before {
    translate: 0px 3px;
    rotate: -45deg;
  }
  &:after {
    translate: 0px -3px;
    rotate: 45deg;
  }
}
.deform-chevron-start {
  --deform-width-line: 10px;
  scale: var(--direction-factor-1) 1;
  >* {
    opacity: 0;
  }
  &:before {
    translate: 0px -3px;
    rotate: -45deg;
  }
  &:after {
    translate: 0px 3px;
    rotate: 45deg;
  }
}
.deform-chevron-down {
  --deform-width-line: 10px;
  >* {
    opacity: 0;
  }
  &:before {
    translate: 3px 0px;
    rotate: -45deg;
  }
  &:after {
    translate: -3px 0px;
    rotate: 45deg;
  }
}
.deform-chevron-up {
  --deform-width-line: 10px;
  >* {
    opacity: 0;
  }
  &:before {
    translate: -3px 0px;
    rotate: -45deg;
  }
  &:after {
    translate: 3px 0px;
    rotate: 45deg;
  }
}
.poster-caption-hidden {
  &:where(:not(.poster-caption-top, .poster-caption-center)) {
    translate: 0 100%;
  }
  &:where(.poster-caption-top) {
    translate: 0 -100%;
  }
  &:where(.poster-caption-center) {
    opacity: 0;
  }
}
.translate-down {
  --: ;
  translate: 0 8px;
}
.translate-end {
  --: ;
  translate: calc(8px * var(--direction-factor-1)) 0;
}
.translate-start {
  --: ;
  translate: calc(-8px * var(--direction-factor-1)) 0;
}
.translate-up {
  --: ;
  translate: 0 -8px;
}
.deform-flip {
  &:where(.deform-arrow-start, .deform-arrow-end, .deform-chevron-start, .deform-chevron-end) {
    scale: calc(-1*var(--direction-factor-1)) 1;
  }
  &:where(.deform-arrow-up, .deform-arrow-down, .deform-chevron-up, .deform-chevron-down) {
    scale: 1 -1;
  }
}
.icon-chevron-end {
  &:dir(rtl) {
    scale: var(--custom-flip-x, -1) 1;
  }
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg>');
}
.icon-chevron-start {
  &:dir(rtl) {
    scale: var(--custom-flip-x, -1) 1;
  }
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><polyline points="15 18 9 12 15 6"/></svg>');
}
.scale-down {
  --: ;
  scale: 0.95;
}
.scale-in {
  --: ;
  scale: 1;
}
.scale-up {
  --: ;
  scale: 1.05;
}
.deform-close {
  >* {
    opacity: 0;
  }
  &:before {
    rotate: -45deg;
  }
  &:after {
    rotate: 45deg;
  }
}
.deform-plus {
  >* {
    opacity: 0;
  }
  &:after {
    rotate: 90deg;
  }
}
.flip-x {
  --: ;
  rotate: y 180deg;
}
.flip-y {
  --: ;
  rotate: x 180deg;
}
.rotate-collapse {
  --: ;
  rotate: -90deg;
}
.rotate-cross {
  --: ;
  rotate: 45deg;
}
.rotate-expand {
  --: ;
  rotate: 90deg;
}
.rotate-reverse {
  --: ;
  rotate: 180deg;
}
.check-indeterminate {
  &:where(:not(:has(:checked))) {
    input:before {
      border-color: var(--check-indeterminate-bd);
    }
    input:after {
      transform: scale(1);
      background-color: var(--check-indeterminate-bg);
    }
    [type=checkbox]:after {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' %3E%3Crect x='0' y='0' width='24' height='24' rx='2' /%3E%3C/svg%3E");
    }
  }
}
.poster-blur-out {
  &:where(:not(:has(img))) {
    background-size: 110%;
    filter: blur(5px);
  }
  &:where(:has(img)) img {
    transform: scale(1.1);
    filter: blur(5px);
  }
  &:where(:not(:has(img))):hover {
    filter: blur(0);
  }
  &:hover img {
    filter: blur(0);
  }
}
.poster-blur-in {
  &:where(:not(:has(img))) {
    background-size: 110%;
  }
  &:where(:has(img)) img {
    transform: scale(1.1);
  }
  &:where(:not(:has(img))):hover {
    filter: blur(5px);
  }
  &:hover img {
    filter: blur(5px);
  }
}
.poster-pan-bottom {
  &:where(:not(:has(img))):hover {
    background-position: calc(100% * var(--direction-factor-2)) 0;
  }
  &:where(:has(img)) img {
    transform: scale(1.2);
  }
  &:hover img {
    transform: scale(1.2) translateY(5%);
  }
}
.poster-pan-end {
  &:where(:not(:has(img))):hover {
    background-position: calc(100% * var(--direction-factor-2)) 0;
  }
  &:where(:has(img)) img {
    transform: scale(1.2);
  }
  &:hover img {
    transform: scale(1.2) translateX(calc(5%*var(--direction-factor-1)));
  }
}
.poster-pan-start {
  &:where(:not(:has(img))):hover {
    background-position: calc(100% * var(--direction-factor-3)) 100%;
  }
  &:where(:has(img)) img {
    transform: scale(1.2);
  }
  &:hover img {
    transform: scale(1.2) translateX(calc(-5%*var(--direction-factor-1)));
  }
}
.poster-pan-top {
  &:where(:not(:has(img))):hover {
    background-position: calc(100% * var(--direction-factor-3)) 100%;
  }
  &:where(:has(img)) img {
    transform: scale(1.2);
  }
  &:hover img {
    transform: scale(1.2) translateY(-5%);
  }
}
.poster-zoom-out {
  img {
    transform: scale(1.1);
  }
  &:hover img {
    transform: scale(1);
  }
}
.poster-zoom-in {
  &:hover img {
    transform: scale(1.1);
  }
}
.transform {
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.shimmer {
  --shimmer-angle: 90;
  --shimmer-duration: 2s;
  --shimmer-animation: shimmer-ltr;
  --shimmer-color: oklch(from currentColor clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) c h);
  background-image: linear-gradient(calc(1deg * var(--shimmer-angle)), currentColor 20%, var(--shimmer-color) 50%, currentColor 80%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: var(--shimmer-animation) var(--shimmer-duration) linear infinite;
  &:dir(rtl) {
    animation: shimmer-rtl 2s linear infinite;
  }
}
.progress-animated {
  &:where(.progress-stripes) {
    >[data-role=bar] {
      animation: progress-stripes 2s linear infinite;
    }
  }
  &:where(.progress-gradient) {
    --progress-image: linear-gradient(calc(90deg + var(--direction-factor-4)),
                oklch(from var(--progress-background-bar) calc(l * (1.5 - var(--scheme-factor-2))) calc(c * 0.5) h),
                var(--progress-background-bar),
                oklch(from var(--progress-background-bar) calc(l * (1.5 - var(--scheme-factor-2))) calc(c * 0.5) h));
    >[data-role=bar] {
      background-size: 200% 100%;
      animation: progress-gradient 1s linear infinite;
    }
  }
}
.progress-animated-reverse {
  &:where(.progress-stripes) {
    >[data-role=bar] {
      animation: progress-stripes-reverse 2s linear infinite;
    }
  }
  &:where(.progress-gradient) {
    --progress-image: linear-gradient(calc(90deg + var(--direction-factor-4)),
                oklch(from var(--progress-background-bar) calc(l * (1.5 - var(--scheme-factor-2))) calc(c * 0.5) h),
                var(--progress-background-bar),
                oklch(from var(--progress-background-bar) calc(l * (1.5 - var(--scheme-factor-2))) calc(c * 0.5) h));
    >[data-role=bar] {
      background-size: 200% 100%;
      animation: progress-gradient-reverse 1s linear infinite;
    }
  }
}
.alarm-lg {
  &:before {
    animation: alarm-wave-3 1s infinite;
  }
  &:after {
    animation: alarm-wave-5 1s infinite;
  }
}
.alarm-md {
  &:before {
    animation: alarm-wave-2 1s infinite;
  }
  &:after {
    animation: alarm-wave-4 1s infinite;
  }
}
.alarm-sm {
  &:before {
    animation: alarm-wave-1 1s infinite;
  }
  &:after {
    animation: alarm-wave-2 1s infinite;
  }
}
.alarm-xl {
  &:before {
    animation: alarm-wave-3 1s infinite;
  }
  &:after {
    animation: alarm-wave-6 1s infinite;
  }
}
.animate-blink {
  --: ;
  animation: blink var(--custom-duration, var(--duration-normal)) ease both;
}
.animate-blob-morph {
  --: ;
  animation: blob-morph 4s linear infinite;
}
.animate-blob-morph-2000 {
  --animate-tmp-duration: calc(1ms * 2000);
  animation: blob-morph var(--animate-tmp-duration) linear infinite;
}
.animate-blob-morph-6000 {
  --animate-tmp-duration: calc(1ms * 6000);
  animation: blob-morph var(--animate-tmp-duration) linear infinite;
}
.animate-blob-morph-\[4s\] {
  --animate-tmp-duration: 4s;
  animation: blob-morph var(--animate-tmp-duration) linear infinite;
}
.animate-blob-morph1 {
  --: ;
  animation: blob-morph1 4s linear infinite;
}
.animate-blob-morph1-3000 {
  --animate-tmp-duration: calc(1ms * 3000);
  animation: blob-morph1 var(--animate-tmp-duration) linear infinite;
}
.animate-blob-morph2 {
  --: ;
  animation: blob-morph2 4s linear infinite;
}
.animate-blob-morph2-5000 {
  --animate-tmp-duration: calc(1ms * 5000);
  animation: blob-morph2 var(--animate-tmp-duration) linear infinite;
}
.animate-blob-morph3 {
  --: ;
  animation: blob-morph3 4s linear infinite;
}
.animate-blob-morph4 {
  --: ;
  animation: blob-morph4 4s linear infinite;
}
.animate-bounce-x {
  --: ;
  animation: bounce-x var(--custom-duration, var(--duration-normal)) ease both;
}
.animate-bounce-y {
  --: ;
  animation: bounce-y var(--custom-duration, var(--duration-normal)) ease both;
}
.animate-check-halo-1000 {
  --animate-tmp-duration: calc(1ms * 1000);
  animation: check-halo var(--animate-tmp-duration) ease-out forwards;
}
.animate-check-halo-\[1000ms\] {
  --animate-tmp-duration: 1000ms;
  animation: check-halo var(--animate-tmp-duration) ease-out forwards;
}
.animate-circle-ccw-360 {
  --: ;
  animation: rotate-ccw-360 var(--custom-duration, 1s) linear infinite both;
}
.animate-circle-cw-360 {
  --: ;
  animation: rotate-cw-360 var(--custom-duration, 1s) linear infinite both;
}
.animate-circle-cw-360-500 {
  --animate-tmp-duration: calc(1ms * 500);
  animation: rotate-cw-360 var(--animate-tmp-duration) linear infinite both;
}
.animate-circle-cw-360-2000 {
  --animate-tmp-duration: calc(1ms * 2000);
  animation: rotate-cw-360 var(--animate-tmp-duration) linear infinite both;
}
.animate-ease-in {
  --: ;
  animation: ease-in var(--custom-duration, 400ms) ease-out both;
}
.animate-ease-in-bottom {
  --: ;
  animation: ease-in-bottom var(--custom-duration, 400ms) ease-out both;
}
.animate-ease-in-end {
  --: ;
  animation: ease-in-end var(--custom-duration, 400ms) ease-out both;
}
.animate-ease-in-start {
  --: ;
  animation: ease-in-start var(--custom-duration, 400ms) ease-out both;
}
.animate-ease-in-top {
  --: ;
  animation: ease-in-top var(--custom-duration, 400ms) ease-out both;
}
.animate-ease-out {
  --: ;
  animation: ease-out var(--custom-duration, 400ms) ease-out both;
}
.animate-ease-out-bottom {
  --: ;
  animation: ease-out-bottom var(--custom-duration, 400ms) ease-out both;
}
.animate-ease-out-end {
  --: ;
  animation: ease-out-end var(--custom-duration, 400ms) ease-out both;
}
.animate-ease-out-start {
  --: ;
  animation: ease-out-start var(--custom-duration, 400ms) ease-out both;
}
.animate-ease-out-top {
  --: ;
  animation: ease-out-top var(--custom-duration, 400ms) ease-out both;
}
.animate-fade-in {
  --: ;
  animation: fade-in var(--custom-duration, var(--duration-normal)) ease-out both;
}
.animate-fade-in-200 {
  --animate-tmp-duration: calc(1ms * 200);
  animation: fade-in var(--animate-tmp-duration) ease-out both;
}
.animate-fade-in-500 {
  --animate-tmp-duration: calc(1ms * 500);
  animation: fade-in var(--animate-tmp-duration) ease-out both;
}
.animate-fade-in-1000 {
  --animate-tmp-duration: calc(1ms * 1000);
  animation: fade-in var(--animate-tmp-duration) ease-out both;
}
.animate-fade-in-\[2s\] {
  --animate-tmp-duration: 2s;
  animation: fade-in var(--animate-tmp-duration) ease-out both;
}
.animate-fade-in-down {
  --: ;
  animation: fade-in-down var(--custom-duration, var(--duration-normal)) ease-out both;
}
.animate-fade-in-end {
  --: ;
  animation: fade-in-end var(--custom-duration, var(--duration-normal)) ease-out both;
}
.animate-fade-in-start {
  --: ;
  animation: fade-in-start var(--custom-duration, var(--duration-normal)) ease-out both;
}
.animate-fade-in-up {
  --: ;
  animation: fade-in-up var(--custom-duration, var(--duration-normal)) ease-out both;
}
.animate-fade-out {
  --: ;
  animation: fade-out var(--custom-duration, var(--duration-normal)) ease-out both;
}
.animate-fade-out-down {
  --: ;
  animation: fade-out-down var(--custom-duration, var(--duration-normal)) ease-out both;
}
.animate-fade-out-end {
  --: ;
  animation: fade-out-end var(--custom-duration, var(--duration-normal)) ease-out both;
}
.animate-fade-out-start {
  --: ;
  animation: fade-out-start var(--custom-duration, var(--duration-normal)) ease-out both;
}
.animate-fade-out-up {
  --: ;
  animation: fade-out-up var(--custom-duration, var(--duration-normal)) ease-out both;
}
.animate-float-x {
  --: ;
  animation: float-x var(--custom-duration, 1400ms) ease-in-out infinite both;
}
.animate-float-y {
  --: ;
  animation: float-y var(--custom-duration, 1400ms) ease-in-out infinite both;
}
.animate-fly-in-down {
  --: ;
  animation: fly-in-down var(--custom-duration, 400ms) ease-out both;
}
.animate-fly-in-end {
  --: ;
  animation: fly-in-end var(--custom-duration, 400ms) ease-out both;
}
.animate-fly-in-start {
  --: ;
  animation: fly-in-start var(--custom-duration, 400ms) ease-out both;
}
.animate-fly-in-up {
  --: ;
  animation: fly-in-up var(--custom-duration, 400ms) ease-out both;
}
.animate-fly-out-down {
  --: ;
  animation: fly-out-down var(--custom-duration, 400ms) ease-out both;
}
.animate-fly-out-end {
  --: ;
  animation: fly-out-end var(--custom-duration, 400ms) ease-out both;
}
.animate-fly-out-start {
  --: ;
  animation: fly-out-start var(--custom-duration, 400ms) ease-out both;
}
.animate-fly-out-up {
  --: ;
  animation: fly-out-up var(--custom-duration, 400ms) ease-out both;
}
.animate-heartbeat {
  --: ;
  animation: heartbeat var(--custom-duration, 900ms) ease-in-out;
}
.animate-remind-x {
  --: ;
  animation: remind-x var(--custom-duration, 100ms) linear infinite both;
}
.animate-remind-y {
  --: ;
  animation: remind-y var(--custom-duration, 100ms) linear infinite both;
}
.animate-rotate-ccw-360 {
  --: ;
  animation: rotate-ccw-360 var(--custom-duration, 1s) linear both;
}
.animate-rotate-cw-360 {
  --: ;
  animation: rotate-cw-360 var(--custom-duration, 1s) linear both;
}
.animate-rotate-in {
  --: ;
  animation: rotate-in var(--custom-duration, 400ms) ease-out both;
}
.animate-rotate-out {
  --: ;
  animation: rotate-out var(--custom-duration,400ms) ease-out both;
}
.animate-scale-in {
  --: ;
  animation: scale-in var(--custom-duration, var(--duration-normal)) ease-out both;
}
.animate-scale-out {
  --: ;
  animation: scale-out var(--custom-duration, var(--duration-normal)) ease-out both;
}
.animate-shake-x {
  --: ;
  animation: shake-x var(--custom-duration, var(--duration-normal)) ease;
}
.animate-shake-y {
  --: ;
  animation: shake-y var(--custom-duration, var(--duration-normal)) ease;
}
.animate-shake-z {
  --: ;
  animation: shake-z var(--custom-duration, var(--duration-normal)) ease;
}
.animate-shimmer-btt-2500 {
  --animate-tmp-duration: calc(1ms * 2500);
  animation: shimmer-btt var(--animate-tmp-duration) linear infinite;
}
.animate-shimmer-ltr-1000 {
  --animate-tmp-duration: calc(1ms * 1000);
  animation: shimmer-ltr var(--animate-tmp-duration) linear infinite;
}
.animate-shimmer-ltr-3000 {
  --animate-tmp-duration: calc(1ms * 3000);
  animation: shimmer-ltr var(--animate-tmp-duration) linear infinite;
}
.animate-shimmer-ltr-4000 {
  --animate-tmp-duration: calc(1ms * 4000);
  animation: shimmer-ltr var(--animate-tmp-duration) linear infinite;
}
.animate-shimmer-ltr-8000 {
  --animate-tmp-duration: calc(1ms * 8000);
  animation: shimmer-ltr var(--animate-tmp-duration) linear infinite;
}
.animate-shimmer-rtl-1000 {
  --animate-tmp-duration: calc(1ms * 1000);
  animation: shimmer-rtl var(--animate-tmp-duration) linear infinite;
}
.animate-shimmer-rtl-2500 {
  --animate-tmp-duration: calc(1ms * 2500);
  animation: shimmer-rtl var(--animate-tmp-duration) linear infinite;
}
.animate-shimmer-rtl-3000 {
  --animate-tmp-duration: calc(1ms * 3000);
  animation: shimmer-rtl var(--animate-tmp-duration) linear infinite;
}
.animate-shimmer-rtl-\[3s\] {
  --animate-tmp-duration: 3s;
  animation: shimmer-rtl var(--animate-tmp-duration) linear infinite;
}
.animate-shimmer-ttb-4000 {
  --animate-tmp-duration: calc(1ms * 4000);
  animation: shimmer-ttb var(--animate-tmp-duration) linear infinite;
}
.animate-spring-in {
  --: ;
  animation: spring-in var(--custom-duration, 400ms) ease-out both;
}
.animate-spring-out {
  --: ;
  animation: spring-out var(--custom-duration, 400ms) ease-out both;
}
.aura-spinner-1000 {
  --aura-tmp-duration: calc(1ms * 1000);
  animation: aura-angle-spin var(--aura-tmp-duration) linear infinite;
}
.aura-spinner-5000 {
  --aura-tmp-duration: calc(1ms * 5000);
  animation: aura-angle-spin var(--aura-tmp-duration) linear infinite;
}
.aura-spinner-\[2000ms\] {
  --aura-tmp-duration: 2000ms;
  animation: aura-angle-spin var(--aura-tmp-duration) linear infinite;
}
.animate-\[effect-name\] {
  animation: effect-name;
}
.animate-check-halo {
  animation: check-halo var(--custom-duration, 500ms) ease-out forwards;
}
.aura-spinner {
  :where(&) {
    animation: aura-angle-spin 3s linear infinite;
  }
}
.inactive {
  cursor: not-allowed;
  opacity: var(--default-opacity-disabled, 0.5);
}
.columns-3xs {
  columns: var(--container-3xs);
}
.flex-wrap {
  flex-wrap: wrap;
}
.entry-multiline {
  --entry-height: auto;
  --entry-padding-y: 0.5em;
  align-items: flex-start;
}
.gap-2 {
  gap: calc(var(--spacing) * 2);
}
.gap-4 {
  gap: calc(var(--spacing) * 4);
}
.entry-nowrap {
  &:where(:not(.entry-multiline)) {
    >.entry-label, >.entry-body>.entry-label {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ellipsis-none {
  &:where(.ellipsis) {
    overflow: visible;
    white-space: normal;
  }
  &:where(:not(.ellipsis)) {
    -webkit-line-clamp: none;
    -webkit-box-orient: horizontal;
  }
}
.overflow-hidden {
  overflow: hidden;
}
.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
}
.scroll-y {
  overflow-y: auto;
  overflow-x: hidden;
}
.badge-scoop-end {
  border-radius: calc(infinity * 1px);
  border-end-end-radius: 0;
}
.badge-scoop-start {
  border-radius: calc(infinity * 1px);
  border-end-start-radius: 0;
}
.breadcrumb-muted {
  --breadcrumb-padding-x: 0.5em;
  --breadcrumb-padding-y: 0.25em;
  [data-role=header], [data-role=label] {
    padding-inline: var(--breadcrumb-padding-x);
    padding-block: var(--breadcrumb-padding-y);
    border-radius: var(--default-border-radius);
    border: 1px solid var(--color-title-bd);
    &:where(a:not([data-selected=true])):hover {
      color: var(--color-primary);
      border-color: var(--color-primary);
      background-color: var(--color-primary-bg);
    }
  }
  [data-selected=true] {
    color: var(--color-primary);
    border-color: var(--color-primary-bd);
  }
}
.callout-muted-error {
  --callout-border-color: oklch(from var(--color-error) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --callout-border-color: var(--color-error-bg-active);
  --callout-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --callout-background: var(--color-error-surface);
  --callout-color: oklch(from var(--color-error) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  --callout-color: var(--color-error-body);
  --callout-border-radius: var(--default-border-radius);
  --callout-border-width: 1px;
  border-radius: var(--callout-border-radius);
  border: var(--callout-border-width) solid var(--callout-border-color);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.callout-muted-highlight {
  --callout-border-color: oklch(from var(--color-highlight) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --callout-border-color: var(--color-highlight-bg-active);
  --callout-background: oklch(from var(--color-highlight) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --callout-background: var(--color-highlight-surface);
  --callout-color: oklch(from var(--color-highlight) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  --callout-color: var(--color-highlight-body);
  --callout-border-radius: var(--default-border-radius);
  --callout-border-width: 1px;
  border-radius: var(--callout-border-radius);
  border: var(--callout-border-width) solid var(--callout-border-color);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.callout-muted-primary {
  --callout-border-color: oklch(from var(--color-primary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --callout-border-color: var(--color-primary-bg-active);
  --callout-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --callout-background: var(--color-primary-surface);
  --callout-color: oklch(from var(--color-primary) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  --callout-color: var(--color-primary-body);
  --callout-border-radius: var(--default-border-radius);
  --callout-border-width: 1px;
  border-radius: var(--callout-border-radius);
  border: var(--callout-border-width) solid var(--callout-border-color);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.callout-muted-success {
  --callout-border-color: oklch(from var(--color-success) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --callout-border-color: var(--color-success-bg-active);
  --callout-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --callout-background: var(--color-success-surface);
  --callout-color: oklch(from var(--color-success) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  --callout-color: var(--color-success-body);
  --callout-border-radius: var(--default-border-radius);
  --callout-border-width: 1px;
  border-radius: var(--callout-border-radius);
  border: var(--callout-border-width) solid var(--callout-border-color);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.callout-muted {
  --callout-border-radius: var(--default-border-radius);
  --callout-border-color: var(--color-title-bg-active);
  --callout-border-width: 1px;
  --callout-background: var(--color-title-surface);
  border-radius: var(--callout-border-radius);
  border: var(--callout-border-width) solid var(--callout-border-color);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.callout-subtle-error {
  --callout-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --callout-background: var(--color-error-bg-hover);
  --callout-color: oklch(from var(--color-error) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  --callout-color: var(--color-error-body);
  --callout-border-radius: var(--default-border-radius);
  border-radius: var(--callout-border-radius);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.callout-subtle-highlight {
  --callout-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --callout-background: var(--color-highlight-bg-hover);
  --callout-color: oklch(from var(--color-highlight) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  --callout-color: var(--color-highlight-body);
  --callout-border-radius: var(--default-border-radius);
  border-radius: var(--callout-border-radius);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.callout-subtle-primary {
  --callout-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --callout-background: var(--color-primary-bg-hover);
  --callout-color: oklch(from var(--color-primary) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  --callout-color: var(--color-primary-body);
  --callout-border-radius: var(--default-border-radius);
  border-radius: var(--callout-border-radius);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.callout-subtle-success {
  --callout-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --callout-background: var(--color-success-bg-hover);
  --callout-color: oklch(from var(--color-success) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  --callout-color: var(--color-success-body);
  --callout-border-radius: var(--default-border-radius);
  border-radius: var(--callout-border-radius);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.callout-solid-error {
  --callout-background: var(--color-error);
  --callout-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --callout-color: var(--color-error-contrast);
  --callout-border-radius: var(--default-border-radius);
  border-radius: var(--callout-border-radius);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.callout-solid-highlight {
  --callout-background: var(--color-highlight);
  --callout-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --callout-color: var(--color-highlight-contrast);
  --callout-border-radius: var(--default-border-radius);
  border-radius: var(--callout-border-radius);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.callout-solid-info {
  --callout-background: var(--color-info);
  --callout-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --callout-color: var(--color-info-contrast);
  --callout-border-radius: var(--default-border-radius);
  border-radius: var(--callout-border-radius);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.callout-solid-primary {
  --callout-background: var(--color-primary);
  --callout-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --callout-color: var(--color-primary-contrast);
  --callout-border-radius: var(--default-border-radius);
  border-radius: var(--callout-border-radius);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.callout-solid-success {
  --callout-background: var(--color-success);
  --callout-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --callout-color: var(--color-success-contrast);
  --callout-border-radius: var(--default-border-radius);
  border-radius: var(--callout-border-radius);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.callout-solid-warning {
  --callout-background: var(--color-warning);
  --callout-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --callout-color: var(--color-warning-contrast);
  --callout-border-radius: var(--default-border-radius);
  border-radius: var(--callout-border-radius);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.callout-solid {
  --callout-border-radius: var(--default-border-radius);
  --callout-background: var(--color-title);
  --callout-color: var(--color-title-contrast);
  border-radius: var(--callout-border-radius);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.callout-solid-\[\#acaa20\] {
  --callout-background: #acaa20;
  --callout-color: oklch(from #acaa20 clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --callout-border-radius: var(--default-border-radius);
  border-radius: var(--callout-border-radius);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.callout-solid-\[blue\] {
  --callout-background: blue;
  --callout-color: oklch(from blue clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --callout-border-radius: var(--default-border-radius);
  border-radius: var(--callout-border-radius);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.callout-solid-green-200 {
  --callout-background: var(--color-green-200);
  --callout-color: oklch(from var(--color-green-200) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --callout-border-radius: var(--default-border-radius);
  border-radius: var(--callout-border-radius);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.callout-solid-green-500 {
  --callout-background: var(--color-green-500);
  --callout-color: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --callout-border-radius: var(--default-border-radius);
  border-radius: var(--callout-border-radius);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.callout-subtle {
  --callout-border-radius: var(--default-border-radius);
  --callout-background: var(--color-title-bg-hover);
  --callout-color: var(--color-title-body);
  border-radius: var(--callout-border-radius);
  padding: var(--callout-padding-y) var(--callout-padding-x);
  background-color: var(--callout-background);
}
.breadcrumb-subtle {
  --breadcrumb-color: var(--color-title);
  --breadcrumb-color-selected: var(--color-primary);
  --breadcrumb-padding-x: 0.5em;
  --breadcrumb-padding-y: 0.25em;
  [data-role=header], [data-role=label] {
    padding-inline: var(--breadcrumb-padding-x);
    padding-block: var(--breadcrumb-padding-y);
    background-color: var(--color-title-bg-hover);
    border-radius: var(--default-border-radius);
    &:where(a:not([data-selected=true])):hover {
      color: var(--color-primary-contrast);
      background-color: var(--color-primary);
    }
  }
  [data-selected=true] {
    background-color: var(--color-primary-bg-hover);
  }
}
.breadcrumb-ghost {
  --breadcrumb-padding-x: 0.5em;
  --breadcrumb-padding-y: 0.25em;
  [data-role=header], [data-role=label] {
    padding-inline: var(--breadcrumb-padding-x);
    padding-block: var(--breadcrumb-padding-y);
    border-radius: var(--default-border-radius);
    &:where(a:not([data-selected=true])):hover {
      color: var(--color-title);
      background-color: var(--color-title-bg-hover);
    }
  }
}
.tree-active {
  >[data-role=content]>[data-role=label]:where(:not(:has(input))) {
    background-color: var(--tree-node-background-active);
    color: var(--tree-node-color-active);
    padding-inline: 0.5em;
    border-radius: calc(var(--spacing) * 1);
  }
}
.comment-body {
  overflow-wrap: break-word;
  hyphens: auto;
  img, video, iframe, picture {
    border-radius: var(--comment-radius-media);
  }
  iframe {
    border: 1px solid var(--color-title-bd);
    background-color: var(--color-stage);
  }
}
.poster-light-in {
  --poster-color: black;
  &:before {
    background-color: oklch(from var(--color-white) l c h / 0.8);
    opacity: 0;
    backdrop-filter: blur(10px);
    border-radius: inherit;
    --: ;
    transition: var(--transition-all-normal);
  }
  &:hover:before {
    opacity: 1;
  }
}
.poster-light-out {
  --poster-color: black;
  &:before {
    background-color: oklch(from var(--color-white) l c h / 0.8);
    opacity: 1;
    backdrop-filter: blur(10px);
    border-radius: inherit;
    --: ;
    transition: var(--transition-all-normal);
  }
  &:hover:before {
    opacity: 0;
  }
}
.poster-dark-in {
  &:before {
    background-color: oklch(from var(--color-black) l c h / 0.6);
    opacity: 0;
    backdrop-filter: blur(10px);
    border-radius: inherit;
    --: ;
    transition: var(--transition-all-normal);
  }
  &:hover:before {
    opacity: 1;
  }
}
.poster-dark-out {
  &:before {
    background-color: oklch(from var(--color-black) l c h / 0.6);
    opacity: 1;
    backdrop-filter: blur(10px);
    border-radius: inherit;
    --: ;
    transition: var(--transition-all-normal);
  }
  &:hover:before {
    opacity: 0;
  }
}
.buoy-caption {
  &:where(:not(.buoy-outline, .buoy-solid, .buoy-subtle, .buoy-muted)) {
    --buoy-color-label: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-caption-fg);
    --buoy-background-label: -oklch(from var(--color-caption) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-caption-surface);
    --buoy-border-color: oklch(from var(--color-caption) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-caption-bd);
  }
  &:where(.buoy-outline) {
    --buoy-color-label: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-caption-fg);
    --buoy-border-color: var(--color-caption);
    --buoy-background-label: -oklch(from var(--color-caption) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-caption-surface);
  }
  &:where(.buoy-solid) {
    --buoy-background-label: var(--color-caption);
    --buoy-border-color: var(--buoy-background-label);
    --buoy-color-label: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --buoy-color-label: var(--color-caption-contrast);
  }
  &:where(.buoy-subtle) {
    --buoy-color-label: oklch(from var(--color-caption) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-caption-body);
    --buoy-border-color: transparent;
    --buoy-background-label: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --buoy-background-label: var(--color-caption-bg-hover);
    --buoy-divider-width: 0;
    [data-role=label], [data-role=value] {
      border-radius: inherit;
    }
  }
  &:where(.buoy-muted) {
    --buoy-color-label: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-caption-fg);
    --buoy-border-color: oklch(from var(--color-caption) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-caption-bd);
    --buoy-background-label: -oklch(from var(--color-caption) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-caption-surface);
  }
}
.buoy-caution {
  &:where(:not(.buoy-outline, .buoy-solid, .buoy-subtle, .buoy-muted)) {
    --buoy-color-label: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-caution-fg);
    --buoy-background-label: -oklch(from var(--color-caution) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-caution-surface);
    --buoy-border-color: oklch(from var(--color-caution) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-caution-bd);
  }
  &:where(.buoy-outline) {
    --buoy-color-label: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-caution-fg);
    --buoy-border-color: var(--color-caution);
    --buoy-background-label: -oklch(from var(--color-caution) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-caution-surface);
  }
  &:where(.buoy-solid) {
    --buoy-background-label: var(--color-caution);
    --buoy-border-color: var(--buoy-background-label);
    --buoy-color-label: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --buoy-color-label: var(--color-caution-contrast);
  }
  &:where(.buoy-subtle) {
    --buoy-color-label: oklch(from var(--color-caution) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-caution-body);
    --buoy-border-color: transparent;
    --buoy-background-label: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --buoy-background-label: var(--color-caution-bg-hover);
    --buoy-divider-width: 0;
    [data-role=label], [data-role=value] {
      border-radius: inherit;
    }
  }
  &:where(.buoy-muted) {
    --buoy-color-label: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-caution-fg);
    --buoy-border-color: oklch(from var(--color-caution) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-caution-bd);
    --buoy-background-label: -oklch(from var(--color-caution) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-caution-surface);
  }
}
.buoy-description {
  &:where(:not(.buoy-outline, .buoy-solid, .buoy-subtle, .buoy-muted)) {
    --buoy-color-label: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-description-fg);
    --buoy-background-label: -oklch(from var(--color-description) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-description-surface);
    --buoy-border-color: oklch(from var(--color-description) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-description-bd);
  }
  &:where(.buoy-outline) {
    --buoy-color-label: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-description-fg);
    --buoy-border-color: var(--color-description);
    --buoy-background-label: -oklch(from var(--color-description) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-description-surface);
  }
  &:where(.buoy-solid) {
    --buoy-background-label: var(--color-description);
    --buoy-border-color: var(--buoy-background-label);
    --buoy-color-label: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --buoy-color-label: var(--color-description-contrast);
  }
  &:where(.buoy-subtle) {
    --buoy-color-label: oklch(from var(--color-description) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-description-body);
    --buoy-border-color: transparent;
    --buoy-background-label: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --buoy-background-label: var(--color-description-bg-hover);
    --buoy-divider-width: 0;
    [data-role=label], [data-role=value] {
      border-radius: inherit;
    }
  }
  &:where(.buoy-muted) {
    --buoy-color-label: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-description-fg);
    --buoy-border-color: oklch(from var(--color-description) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-description-bd);
    --buoy-background-label: -oklch(from var(--color-description) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-description-surface);
  }
}
.buoy-error {
  &:where(:not(.buoy-outline, .buoy-solid, .buoy-subtle, .buoy-muted)) {
    --buoy-color-label: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-error-fg);
    --buoy-background-label: -oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-error-surface);
    --buoy-border-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-error-bd);
  }
  &:where(.buoy-outline) {
    --buoy-color-label: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-error-fg);
    --buoy-border-color: var(--color-error);
    --buoy-background-label: -oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-error-surface);
  }
  &:where(.buoy-solid) {
    --buoy-background-label: var(--color-error);
    --buoy-border-color: var(--buoy-background-label);
    --buoy-color-label: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --buoy-color-label: var(--color-error-contrast);
  }
  &:where(.buoy-subtle) {
    --buoy-color-label: oklch(from var(--color-error) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-error-body);
    --buoy-border-color: transparent;
    --buoy-background-label: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --buoy-background-label: var(--color-error-bg-hover);
    --buoy-divider-width: 0;
    [data-role=label], [data-role=value] {
      border-radius: inherit;
    }
  }
  &:where(.buoy-muted) {
    --buoy-color-label: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-error-fg);
    --buoy-border-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-error-bd);
    --buoy-background-label: -oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-error-surface);
  }
}
.buoy-highlight {
  &:where(:not(.buoy-outline, .buoy-solid, .buoy-subtle, .buoy-muted)) {
    --buoy-color-label: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-highlight-fg);
    --buoy-background-label: -oklch(from var(--color-highlight) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-highlight-surface);
    --buoy-border-color: oklch(from var(--color-highlight) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-highlight-bd);
  }
  &:where(.buoy-outline) {
    --buoy-color-label: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-highlight-fg);
    --buoy-border-color: var(--color-highlight);
    --buoy-background-label: -oklch(from var(--color-highlight) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-highlight-surface);
  }
  &:where(.buoy-solid) {
    --buoy-background-label: var(--color-highlight);
    --buoy-border-color: var(--buoy-background-label);
    --buoy-color-label: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --buoy-color-label: var(--color-highlight-contrast);
  }
  &:where(.buoy-subtle) {
    --buoy-color-label: oklch(from var(--color-highlight) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-highlight-body);
    --buoy-border-color: transparent;
    --buoy-background-label: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --buoy-background-label: var(--color-highlight-bg-hover);
    --buoy-divider-width: 0;
    [data-role=label], [data-role=value] {
      border-radius: inherit;
    }
  }
  &:where(.buoy-muted) {
    --buoy-color-label: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-highlight-fg);
    --buoy-border-color: oklch(from var(--color-highlight) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-highlight-bd);
    --buoy-background-label: -oklch(from var(--color-highlight) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-highlight-surface);
  }
}
.buoy-info {
  &:where(:not(.buoy-outline, .buoy-solid, .buoy-subtle, .buoy-muted)) {
    --buoy-color-label: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-info-fg);
    --buoy-background-label: -oklch(from var(--color-info) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-info-surface);
    --buoy-border-color: oklch(from var(--color-info) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-info-bd);
  }
  &:where(.buoy-outline) {
    --buoy-color-label: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-info-fg);
    --buoy-border-color: var(--color-info);
    --buoy-background-label: -oklch(from var(--color-info) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-info-surface);
  }
  &:where(.buoy-solid) {
    --buoy-background-label: var(--color-info);
    --buoy-border-color: var(--buoy-background-label);
    --buoy-color-label: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --buoy-color-label: var(--color-info-contrast);
  }
  &:where(.buoy-subtle) {
    --buoy-color-label: oklch(from var(--color-info) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-info-body);
    --buoy-border-color: transparent;
    --buoy-background-label: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --buoy-background-label: var(--color-info-bg-hover);
    --buoy-divider-width: 0;
    [data-role=label], [data-role=value] {
      border-radius: inherit;
    }
  }
  &:where(.buoy-muted) {
    --buoy-color-label: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-info-fg);
    --buoy-border-color: oklch(from var(--color-info) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-info-bd);
    --buoy-background-label: -oklch(from var(--color-info) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-info-surface);
  }
}
.buoy-ink {
  &:where(:not(.buoy-outline, .buoy-solid, .buoy-subtle, .buoy-muted)) {
    --buoy-color-label: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-ink-fg);
    --buoy-background-label: -oklch(from var(--color-ink) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-ink-surface);
    --buoy-border-color: oklch(from var(--color-ink) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-ink-bd);
  }
  &:where(.buoy-outline) {
    --buoy-color-label: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-ink-fg);
    --buoy-border-color: var(--color-ink);
    --buoy-background-label: -oklch(from var(--color-ink) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-ink-surface);
  }
  &:where(.buoy-solid) {
    --buoy-background-label: var(--color-ink);
    --buoy-border-color: var(--buoy-background-label);
    --buoy-color-label: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --buoy-color-label: var(--color-ink-contrast);
  }
  &:where(.buoy-subtle) {
    --buoy-color-label: oklch(from var(--color-ink) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-ink-body);
    --buoy-border-color: transparent;
    --buoy-background-label: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --buoy-background-label: var(--color-ink-bg-hover);
    --buoy-divider-width: 0;
    [data-role=label], [data-role=value] {
      border-radius: inherit;
    }
  }
  &:where(.buoy-muted) {
    --buoy-color-label: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-ink-fg);
    --buoy-border-color: oklch(from var(--color-ink) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-ink-bd);
    --buoy-background-label: -oklch(from var(--color-ink) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-ink-surface);
  }
}
.buoy-placeholder {
  &:where(:not(.buoy-outline, .buoy-solid, .buoy-subtle, .buoy-muted)) {
    --buoy-color-label: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-placeholder-fg);
    --buoy-background-label: -oklch(from var(--color-placeholder) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-placeholder-surface);
    --buoy-border-color: oklch(from var(--color-placeholder) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-placeholder-bd);
  }
  &:where(.buoy-outline) {
    --buoy-color-label: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-placeholder-fg);
    --buoy-border-color: var(--color-placeholder);
    --buoy-background-label: -oklch(from var(--color-placeholder) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-placeholder-surface);
  }
  &:where(.buoy-solid) {
    --buoy-background-label: var(--color-placeholder);
    --buoy-border-color: var(--buoy-background-label);
    --buoy-color-label: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --buoy-color-label: var(--color-placeholder-contrast);
  }
  &:where(.buoy-subtle) {
    --buoy-color-label: oklch(from var(--color-placeholder) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-placeholder-body);
    --buoy-border-color: transparent;
    --buoy-background-label: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --buoy-background-label: var(--color-placeholder-bg-hover);
    --buoy-divider-width: 0;
    [data-role=label], [data-role=value] {
      border-radius: inherit;
    }
  }
  &:where(.buoy-muted) {
    --buoy-color-label: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-placeholder-fg);
    --buoy-border-color: oklch(from var(--color-placeholder) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-placeholder-bd);
    --buoy-background-label: -oklch(from var(--color-placeholder) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-placeholder-surface);
  }
}
.buoy-primary {
  &:where(:not(.buoy-outline, .buoy-solid, .buoy-subtle, .buoy-muted)) {
    --buoy-color-label: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-primary-fg);
    --buoy-background-label: -oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-primary-surface);
    --buoy-border-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-primary-bd);
  }
  &:where(.buoy-outline) {
    --buoy-color-label: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-primary-fg);
    --buoy-border-color: var(--color-primary);
    --buoy-background-label: -oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-primary-surface);
  }
  &:where(.buoy-solid) {
    --buoy-background-label: var(--color-primary);
    --buoy-border-color: var(--buoy-background-label);
    --buoy-color-label: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --buoy-color-label: var(--color-primary-contrast);
  }
  &:where(.buoy-subtle) {
    --buoy-color-label: oklch(from var(--color-primary) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-primary-body);
    --buoy-border-color: transparent;
    --buoy-background-label: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --buoy-background-label: var(--color-primary-bg-hover);
    --buoy-divider-width: 0;
    [data-role=label], [data-role=value] {
      border-radius: inherit;
    }
  }
  &:where(.buoy-muted) {
    --buoy-color-label: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-primary-fg);
    --buoy-border-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-primary-bd);
    --buoy-background-label: -oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-primary-surface);
  }
}
.buoy-secondary {
  &:where(:not(.buoy-outline, .buoy-solid, .buoy-subtle, .buoy-muted)) {
    --buoy-color-label: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-secondary-fg);
    --buoy-background-label: -oklch(from var(--color-secondary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-secondary-surface);
    --buoy-border-color: oklch(from var(--color-secondary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-secondary-bd);
  }
  &:where(.buoy-outline) {
    --buoy-color-label: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-secondary-fg);
    --buoy-border-color: var(--color-secondary);
    --buoy-background-label: -oklch(from var(--color-secondary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-secondary-surface);
  }
  &:where(.buoy-solid) {
    --buoy-background-label: var(--color-secondary);
    --buoy-border-color: var(--buoy-background-label);
    --buoy-color-label: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --buoy-color-label: var(--color-secondary-contrast);
  }
  &:where(.buoy-subtle) {
    --buoy-color-label: oklch(from var(--color-secondary) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-secondary-body);
    --buoy-border-color: transparent;
    --buoy-background-label: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --buoy-background-label: var(--color-secondary-bg-hover);
    --buoy-divider-width: 0;
    [data-role=label], [data-role=value] {
      border-radius: inherit;
    }
  }
  &:where(.buoy-muted) {
    --buoy-color-label: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-secondary-fg);
    --buoy-border-color: oklch(from var(--color-secondary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-secondary-bd);
    --buoy-background-label: -oklch(from var(--color-secondary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-secondary-surface);
  }
}
.buoy-success {
  &:where(:not(.buoy-outline, .buoy-solid, .buoy-subtle, .buoy-muted)) {
    --buoy-color-label: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-success-fg);
    --buoy-background-label: -oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-success-surface);
    --buoy-border-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-success-bd);
  }
  &:where(.buoy-outline) {
    --buoy-color-label: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-success-fg);
    --buoy-border-color: var(--color-success);
    --buoy-background-label: -oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-success-surface);
  }
  &:where(.buoy-solid) {
    --buoy-background-label: var(--color-success);
    --buoy-border-color: var(--buoy-background-label);
    --buoy-color-label: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --buoy-color-label: var(--color-success-contrast);
  }
  &:where(.buoy-subtle) {
    --buoy-color-label: oklch(from var(--color-success) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-success-body);
    --buoy-border-color: transparent;
    --buoy-background-label: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --buoy-background-label: var(--color-success-bg-hover);
    --buoy-divider-width: 0;
    [data-role=label], [data-role=value] {
      border-radius: inherit;
    }
  }
  &:where(.buoy-muted) {
    --buoy-color-label: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-success-fg);
    --buoy-border-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-success-bd);
    --buoy-background-label: -oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-success-surface);
  }
}
.buoy-tertiary {
  &:where(:not(.buoy-outline, .buoy-solid, .buoy-subtle, .buoy-muted)) {
    --buoy-color-label: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-tertiary-fg);
    --buoy-background-label: -oklch(from var(--color-tertiary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-tertiary-surface);
    --buoy-border-color: oklch(from var(--color-tertiary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-tertiary-bd);
  }
  &:where(.buoy-outline) {
    --buoy-color-label: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-tertiary-fg);
    --buoy-border-color: var(--color-tertiary);
    --buoy-background-label: -oklch(from var(--color-tertiary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-tertiary-surface);
  }
  &:where(.buoy-solid) {
    --buoy-background-label: var(--color-tertiary);
    --buoy-border-color: var(--buoy-background-label);
    --buoy-color-label: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --buoy-color-label: var(--color-tertiary-contrast);
  }
  &:where(.buoy-subtle) {
    --buoy-color-label: oklch(from var(--color-tertiary) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-tertiary-body);
    --buoy-border-color: transparent;
    --buoy-background-label: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --buoy-background-label: var(--color-tertiary-bg-hover);
    --buoy-divider-width: 0;
    [data-role=label], [data-role=value] {
      border-radius: inherit;
    }
  }
  &:where(.buoy-muted) {
    --buoy-color-label: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-tertiary-fg);
    --buoy-border-color: oklch(from var(--color-tertiary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-tertiary-bd);
    --buoy-background-label: -oklch(from var(--color-tertiary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-tertiary-surface);
  }
}
.buoy-title {
  &:where(:not(.buoy-outline, .buoy-solid, .buoy-subtle, .buoy-muted)) {
    --buoy-color-label: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-title-fg);
    --buoy-background-label: -oklch(from var(--color-title) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-title-surface);
    --buoy-border-color: oklch(from var(--color-title) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-title-bd);
  }
  &:where(.buoy-outline) {
    --buoy-color-label: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-title-fg);
    --buoy-border-color: var(--color-title);
    --buoy-background-label: -oklch(from var(--color-title) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-title-surface);
  }
  &:where(.buoy-solid) {
    --buoy-background-label: var(--color-title);
    --buoy-border-color: var(--buoy-background-label);
    --buoy-color-label: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --buoy-color-label: var(--color-title-contrast);
  }
  &:where(.buoy-subtle) {
    --buoy-color-label: oklch(from var(--color-title) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-title-body);
    --buoy-border-color: transparent;
    --buoy-background-label: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --buoy-background-label: var(--color-title-bg-hover);
    --buoy-divider-width: 0;
    [data-role=label], [data-role=value] {
      border-radius: inherit;
    }
  }
  &:where(.buoy-muted) {
    --buoy-color-label: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-title-fg);
    --buoy-border-color: oklch(from var(--color-title) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-title-bd);
    --buoy-background-label: -oklch(from var(--color-title) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-title-surface);
  }
}
.buoy-warning {
  &:where(:not(.buoy-outline, .buoy-solid, .buoy-subtle, .buoy-muted)) {
    --buoy-color-label: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-warning-fg);
    --buoy-background-label: -oklch(from var(--color-warning) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-warning-surface);
    --buoy-border-color: oklch(from var(--color-warning) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-warning-bd);
  }
  &:where(.buoy-outline) {
    --buoy-color-label: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-warning-fg);
    --buoy-border-color: var(--color-warning);
    --buoy-background-label: -oklch(from var(--color-warning) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-warning-surface);
  }
  &:where(.buoy-solid) {
    --buoy-background-label: var(--color-warning);
    --buoy-border-color: var(--buoy-background-label);
    --buoy-color-label: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --buoy-color-label: var(--color-warning-contrast);
  }
  &:where(.buoy-subtle) {
    --buoy-color-label: oklch(from var(--color-warning) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-warning-body);
    --buoy-border-color: transparent;
    --buoy-background-label: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --buoy-background-label: var(--color-warning-bg-hover);
    --buoy-divider-width: 0;
    [data-role=label], [data-role=value] {
      border-radius: inherit;
    }
  }
  &:where(.buoy-muted) {
    --buoy-color-label: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-color-label: var(--color-warning-fg);
    --buoy-border-color: oklch(from var(--color-warning) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-warning-bd);
    --buoy-background-label: -oklch(from var(--color-warning) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-background-label: var(--color-warning-surface);
  }
}
.buoy-\[blue\] {
  &:where(:not(.buoy-outline, .buoy-solid, .buoy-subtle, .buoy-muted)) {
    --buoy-color-label: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-background-label: -oklch(from blue var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-border-color: oklch(from blue var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  }
  &:where(.buoy-outline) {
    --buoy-color-label: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: blue;
    --buoy-background-label: -oklch(from blue var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  }
  &:where(.buoy-solid) {
    --buoy-background-label: blue;
    --buoy-border-color: var(--buoy-background-label);
    --buoy-color-label: oklch(from blue clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
  &:where(.buoy-subtle) {
    --buoy-color-label: oklch(from blue var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --buoy-border-color: transparent;
    --buoy-background-label: oklch(from blue var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --buoy-divider-width: 0;
    [data-role=label], [data-role=value] {
      border-radius: inherit;
    }
  }
  &:where(.buoy-muted) {
    --buoy-color-label: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: oklch(from blue var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-background-label: -oklch(from blue var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  }
}
.buoy-green-200 {
  &:where(:not(.buoy-outline, .buoy-solid, .buoy-subtle, .buoy-muted)) {
    --buoy-color-label: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-background-label: -oklch(from var(--color-green-200) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-border-color: oklch(from var(--color-green-200) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  }
  &:where(.buoy-outline) {
    --buoy-color-label: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-green-200);
    --buoy-background-label: -oklch(from var(--color-green-200) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  }
  &:where(.buoy-solid) {
    --buoy-background-label: var(--color-green-200);
    --buoy-border-color: var(--buoy-background-label);
    --buoy-color-label: oklch(from var(--color-green-200) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
  &:where(.buoy-subtle) {
    --buoy-color-label: oklch(from var(--color-green-200) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --buoy-border-color: transparent;
    --buoy-background-label: oklch(from var(--color-green-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --buoy-divider-width: 0;
    [data-role=label], [data-role=value] {
      border-radius: inherit;
    }
  }
  &:where(.buoy-muted) {
    --buoy-color-label: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: oklch(from var(--color-green-200) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-background-label: -oklch(from var(--color-green-200) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  }
}
.buoy-green-500 {
  &:where(:not(.buoy-outline, .buoy-solid, .buoy-subtle, .buoy-muted)) {
    --buoy-color-label: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-background-label: -oklch(from var(--color-green-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --buoy-border-color: oklch(from var(--color-green-500) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  }
  &:where(.buoy-outline) {
    --buoy-color-label: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: var(--color-green-500);
    --buoy-background-label: -oklch(from var(--color-green-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  }
  &:where(.buoy-solid) {
    --buoy-background-label: var(--color-green-500);
    --buoy-border-color: var(--buoy-background-label);
    --buoy-color-label: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
  &:where(.buoy-subtle) {
    --buoy-color-label: oklch(from var(--color-green-500) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --buoy-border-color: transparent;
    --buoy-background-label: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --buoy-divider-width: 0;
    [data-role=label], [data-role=value] {
      border-radius: inherit;
    }
  }
  &:where(.buoy-muted) {
    --buoy-color-label: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --buoy-border-color: oklch(from var(--color-green-500) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --buoy-background-label: -oklch(from var(--color-green-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  }
}
.swatch-plain-error {
  :where(&) {
    --swatch-color: var(--color-error);
    &:where(:not([type=color])) {
      --swatch-border-width: 0;
      --swatch-padding: 0;
      &:before {
        border-radius: inherit;
      }
    }
    &:where([type=color]) {
      --input-border-width: 0;
      --input-padding: 0;
    }
    &:where([type=color]) {
      --input-border-width: 0;
      --input-padding-x: 0;
    }
  }
}
.swatch-plain-info {
  :where(&) {
    --swatch-color: var(--color-info);
    &:where(:not([type=color])) {
      --swatch-border-width: 0;
      --swatch-padding: 0;
      &:before {
        border-radius: inherit;
      }
    }
    &:where([type=color]) {
      --input-border-width: 0;
      --input-padding: 0;
    }
    &:where([type=color]) {
      --input-border-width: 0;
      --input-padding-x: 0;
    }
  }
}
.swatch-plain-primary {
  :where(&) {
    --swatch-color: var(--color-primary);
    &:where(:not([type=color])) {
      --swatch-border-width: 0;
      --swatch-padding: 0;
      &:before {
        border-radius: inherit;
      }
    }
    &:where([type=color]) {
      --input-border-width: 0;
      --input-padding: 0;
    }
    &:where([type=color]) {
      --input-border-width: 0;
      --input-padding-x: 0;
    }
  }
}
.swatch-plain-success {
  :where(&) {
    --swatch-color: var(--color-success);
    &:where(:not([type=color])) {
      --swatch-border-width: 0;
      --swatch-padding: 0;
      &:before {
        border-radius: inherit;
      }
    }
    &:where([type=color]) {
      --input-border-width: 0;
      --input-padding: 0;
    }
    &:where([type=color]) {
      --input-border-width: 0;
      --input-padding-x: 0;
    }
  }
}
.buoy-subtle-error {
  --buoy-color-label: oklch(from var(--color-error) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  --buoy-color-label: var(--color-error-body);
  --buoy-border-color: transparent;
  --buoy-background-label: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --buoy-background-label: var(--color-error-bg-hover);
  --buoy-divider-width: 0;
  [data-role=label], [data-role=value] {
    border-radius: inherit;
  }
}
.buoy-subtle-primary {
  --buoy-color-label: oklch(from var(--color-primary) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  --buoy-color-label: var(--color-primary-body);
  --buoy-border-color: transparent;
  --buoy-background-label: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --buoy-background-label: var(--color-primary-bg-hover);
  --buoy-divider-width: 0;
  [data-role=label], [data-role=value] {
    border-radius: inherit;
  }
}
.buoy-subtle-success {
  --buoy-color-label: oklch(from var(--color-success) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  --buoy-color-label: var(--color-success-body);
  --buoy-border-color: transparent;
  --buoy-background-label: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --buoy-background-label: var(--color-success-bg-hover);
  --buoy-divider-width: 0;
  [data-role=label], [data-role=value] {
    border-radius: inherit;
  }
}
.swatch-plain {
  :where(&) {
    &:where(:not([type=color])) {
      --swatch-border-width: 0;
      --swatch-padding: 0;
      &:before {
        border-radius: inherit;
      }
    }
    &:where([type=color]) {
      --input-border-width: 0;
      --input-padding: 0;
    }
    &:where([type=color]) {
      --input-border-width: 0;
      --input-padding-x: 0;
    }
  }
}
.buoy-subtle-\[blue\] {
  --buoy-color-label: oklch(from blue var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  --buoy-border-color: transparent;
  --buoy-background-label: oklch(from blue var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --buoy-divider-width: 0;
  [data-role=label], [data-role=value] {
    border-radius: inherit;
  }
}
.buoy-subtle-green-500 {
  --buoy-color-label: oklch(from var(--color-green-500) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  --buoy-border-color: transparent;
  --buoy-background-label: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --buoy-divider-width: 0;
  [data-role=label], [data-role=value] {
    border-radius: inherit;
  }
}
.input-pill {
  &:where(:not(select[multiple], select[size="0"], select[size="1"])) {
    --input-padding-x: calc(var(--input-row-height)/2);
    --input-border-radius: calc(infinity * 1px);
  }
  @supports (appearance: base-select) {
    &:where(:not([multiple]), [size="0"], [size="1"]) {
      &::picker(select) {
        --input-border-radius: var(--default-border-radius);
        border-radius: var(--input-border-radius);
      }
    }
  }
}
.blob-amoeba {
  --: ;
  border-radius: 60% 40% 70% 30% / 40% 70% 30% 60%;
}
.blob-burger {
  --: ;
  border-radius: 50% 50% 20% 20% / 50% 50% 20% 20%;
}
.blob-circle {
  --: ;
  border-radius: 49% 51% 48% 52% / 57% 44% 56% 43%;
}
.blob-diamond {
  --: ;
  border-radius: 30% 70% 30% 70% / 70% 30% 70% 30%;
}
.blob-droplet {
  --: ;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.blob-ellipse {
  --: ;
  border-radius: 40% 60%;
}
.blob-kidney {
  --: ;
  border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
}
.blob-leaf {
  --: ;
  border-radius: 100% 0% 100% 18% / 100% 0% 100% 52%;
}
.blob-olive {
  --: ;
  border-radius: 100% 20% 100% 20% / 100% 20% 100% 20%;
}
.blob-oval {
  --: ;
  border-radius: 53% 47% 34% 66% / 63% 46% 54% 37%;
}
.blob-pebble {
  --: ;
  border-radius: 37% 63% 56% 44% / 49% 56% 44% 51%;
}
.blob-petal {
  --: ;
  border-radius: 21% 100% 50% 100% / 50% 100% 26% 100%;
}
.blob-shield {
  --: ;
  border-radius: 30% 70% 70% 30% / 53% 30% 70% 47%;
}
.blob-tent {
  --: ;
  border-radius: 50% 50% 46% 54% / 78% 77% 23% 22%;
}
.blob-triangle {
  --: ;
  border-radius: 63% 37% 37% 63% / 43% 37% 63% 57%;
}
.sketch-frame {
  --: ;
  border-radius: 260px 18px 230px 22px / 18px 240px 28px 255px;
}
.sketch-frame1 {
  --: ;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
.sketch-frame2 {
  --: ;
  border-radius: 125px 10px 20px 185px / 25px 205px 205px 25px;
}
.sketch-frame3 {
  --: ;
  border-radius: 15px 255px 15px 225px / 225px 15px 255px 15px;
}
.sketch-frame4 {
  --: ;
  border-radius: 15px 25px 155px 25px / 225px 150px 25px 115px;
}
.sketch-frame5 {
  --: ;
  border-radius: 250px 25px 15px 20px / 15px 80px 105px 115px;
}
.sketch-frame6 {
  --: ;
  border-radius: 28px 100px 20px 15px / 150px 30px 205px 225px;
}
.sketch-frame7 {
  --: ;
  border-radius: 15px 240px 15px 240px / 240px 15px 240px 15px;
}
.sketch-frame8 {
  --: ;
  border-radius: 200px 200px 15px 15px / 15px 15px 200px 200px;
}
.sketch-frame9 {
  --: ;
  border-radius: 15px 15px 200px 200px / 200px 200px 15px 15px;
}
.sketch-frame10 {
  --: ;
  border-radius: 235px 20px 20px 235px / 20px 235px 235px 20px;
}
.sketch-frame11 {
  --: ;
  border-radius: 60px 200px 60px 200px / 200px 60px 200px 60px;
}
.sketch-frame12 {
  --: ;
  border-radius: 40px 180px 40px 220px / 200px 40px 180px 40px;
}
.sketch-frame13 {
  --: ;
  border-radius: 50px 150px 50px 150px / 150px 50px 150px 50px;
}
.sketch-frame14 {
  --: ;
  border-radius: 120px 20px 180px 30px / 40px 160px 40px 180px;
}
.sketch-frame15 {
  --: ;
  border-radius: 60px 180px 40px 200px / 190px 50px 210px 30px;
}
.sketch-frame16 {
  --: ;
  border-radius: 30px 170px 50px 190px / 150px 40px 180px 20px;
}
.sketch-frame17 {
  --: ;
  border-radius: 80px 20px 160px 40px / 30px 140px 50px 170px;
}
.sketch-frame18 {
  --: ;
  border-radius: 45px 190px 15px 210px / 160px 35px 195px 25px;
}
.sketch-frame19 {
  --: ;
  border-radius: 40px 200px 60px 170px / 180px 50px 190px 30px;
}
.sketch-frame20 {
  --: ;
  border-radius: 15px 120px 35px 80px / 90px 25px 110px 45px;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-md {
  border-radius: var(--radius-md);
}
.rounded-xl {
  border-radius: var(--radius-xl);
}
.btns-top {
  &:where(.btns-flush) {
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
    >* {
      border-top: none;
      &:where(:first-child) {
        border-inline-start: none;
        border-end-start-radius: 0;
        border-start-start-radius: inherit;
      }
      &:where(:last-child) {
        border-inline-end: none;
        border-end-end-radius: 0;
        border-start-end-radius: inherit;
      }
    }
  }
}
.bookmark-pill {
  --bookmark-border-radius: calc(infinity * 1px);
  &:where(:not(.bookmark-flush)) {
    >* {
      &:first-child {
        border-start-start-radius: var(--bookmark-border-radius);
      }
      &:last-child {
        border-start-end-radius: var(--bookmark-border-radius);
      }
    }
    &:where(:not(.bookmark-grid)) {
      >* {
        padding-inline: var(--bookmark-height);
      }
    }
  }
}
.bookmark-rounded {
  &:where(.bookmark-4,.bookmark-5, .bookmark-6) {
    --bookmark-border-radius: var(--spacing);
  }
  &:where(:not(.bookmark-4,.bookmark-5, .bookmark-6)) {
    --bookmark-border-radius: var(--default-border-radius);
  }
  &:where(:not(.bookmark-flush)) {
    >* {
      &:first-child {
        border-start-start-radius: var(--bookmark-border-radius);
      }
      &:last-child {
        border-start-end-radius: var(--bookmark-border-radius);
      }
    }
  }
}
.bookmark-fluid {
  --bookmark-border-radius: calc(var(--bookmark-height)/6);
  &:where(:not(.bookmark-flush)) {
    >* {
      &:first-child {
        border-start-start-radius: var(--bookmark-border-radius);
      }
      &:last-child {
        border-start-end-radius: var(--bookmark-border-radius);
      }
    }
  }
}
.avatar-beveled {
  --avatar-border-radius: calc(var(--avatar-height)/6);
  corner-shape: bevel;
  border-end-start-radius: 0;
  border-start-end-radius: 0;
}
.poster-beveled {
  corner-shape: bevel;
  border-end-start-radius: 0;
  border-start-end-radius: 0;
}
.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.border-2 {
  border-style: var(--tw-border-style);
  border-width: 2px;
}
.swatch-transparent {
  &:where(:not([type=color])) {
    --swatch-background-size: 10px;
    --swatch-background-image: oklch(from var(--color-stage) clamp(0, (0.5 - l) * 100, 1) c h / 0.08);
    &:before {
      background-color: transparent;
      background-size: var(--swatch-background-size) var(--swatch-background-size);
      background-image: conic-gradient(var(--swatch-background-image) 0% 25%, transparent 25% 50%, var(--swatch-background-image) 50% 75%, transparent 75% 100%);
    }
  }
  &:where(.swatch-plain) {
    border-width: 1px;
  }
}
.step-reverse {
  [data-role=label], [data-role=description], [data-role=header] {
    color: var(--step-color-deselected);
  }
  >* [data-role=node] {
    color: var(--step-color-deselected-text);
    border-color: var(--step-color-deselected);
    background-color: var(--step-background-deselected);
  }
  >* [data-role=track]>:first-child, >* [data-role=track]>:last-child {
    background-color: var(--step-color-deselected);
  }
  >*:where([data-selected=true]), >*:where([data-selected=true])~* {
    [data-role=track]>:first-child, [data-role=track]>:last-child {
      background-color: var(--step-color-selected);
    }
    [data-role=node] {
      border-color: var(--step-color-selected);
      color: var(--step-color-selected-text);
      background-color: var(--step-background-selected);
    }
    [data-role=label] {
      color: var(--step-color-label);
    }
    [data-role=description] {
      color: var(--step-color-description);
    }
  }
  >*:where([data-selected=true]) {
    [data-role=header] {
      color: var(--step-color-header-selected);
    }
  }
  >*:where([data-selected=true])~* {
    [data-role=header] {
      color: var(--step-color-header);
    }
  }
  &:where(.step-v) {
    >*[data-selected=true] [data-role=track]>:last-child {
      background-color: var(--step-color-selected);
    }
  }
}
.code-caption {
  &:where(:not(.code-muted, .code-solid, .code-outline)) {
    --code-color: oklch(from var(--color-caption-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --code-background: var(--color-caption-bg-hover);
  }
  &:where(.code-muted) {
    --code-color: oklch(from var(--color-caption-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-caption) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --code-background: var(--color-caption-bg);
    border: 1px solid oklch(from var(--color-caption) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-caption-bd);
    line-height: calc(1lh - 2px);
  }
  &:where(.code-outline) {
    --code-color: var(--color-caption);
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
  &:where(.code-solid) {
    --code-color: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --code-color: var(--color-caption-contrast);
    --code-background: var(--color-caption);
  }
}
.code-caution {
  &:where(:not(.code-muted, .code-solid, .code-outline)) {
    --code-color: oklch(from var(--color-caution-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --code-background: var(--color-caution-bg-hover);
  }
  &:where(.code-muted) {
    --code-color: oklch(from var(--color-caution-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-caution) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --code-background: var(--color-caution-bg);
    border: 1px solid oklch(from var(--color-caution) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-caution-bd);
    line-height: calc(1lh - 2px);
  }
  &:where(.code-outline) {
    --code-color: var(--color-caution);
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
  &:where(.code-solid) {
    --code-color: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --code-color: var(--color-caution-contrast);
    --code-background: var(--color-caution);
  }
}
.code-description {
  &:where(:not(.code-muted, .code-solid, .code-outline)) {
    --code-color: oklch(from var(--color-description-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --code-background: var(--color-description-bg-hover);
  }
  &:where(.code-muted) {
    --code-color: oklch(from var(--color-description-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-description) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --code-background: var(--color-description-bg);
    border: 1px solid oklch(from var(--color-description) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-description-bd);
    line-height: calc(1lh - 2px);
  }
  &:where(.code-outline) {
    --code-color: var(--color-description);
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
  &:where(.code-solid) {
    --code-color: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --code-color: var(--color-description-contrast);
    --code-background: var(--color-description);
  }
}
.code-error {
  &:where(:not(.code-muted, .code-solid, .code-outline)) {
    --code-color: oklch(from var(--color-error-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --code-background: var(--color-error-bg-hover);
  }
  &:where(.code-muted) {
    --code-color: oklch(from var(--color-error-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-error) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --code-background: var(--color-error-bg);
    border: 1px solid oklch(from var(--color-error) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-error-bd);
    line-height: calc(1lh - 2px);
  }
  &:where(.code-outline) {
    --code-color: var(--color-error);
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
  &:where(.code-solid) {
    --code-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --code-color: var(--color-error-contrast);
    --code-background: var(--color-error);
  }
}
.code-highlight {
  &:where(:not(.code-muted, .code-solid, .code-outline)) {
    --code-color: oklch(from var(--color-highlight-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --code-background: var(--color-highlight-bg-hover);
  }
  &:where(.code-muted) {
    --code-color: oklch(from var(--color-highlight-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-highlight) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --code-background: var(--color-highlight-bg);
    border: 1px solid oklch(from var(--color-highlight) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-highlight-bd);
    line-height: calc(1lh - 2px);
  }
  &:where(.code-outline) {
    --code-color: var(--color-highlight);
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
  &:where(.code-solid) {
    --code-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --code-color: var(--color-highlight-contrast);
    --code-background: var(--color-highlight);
  }
}
.code-info {
  &:where(:not(.code-muted, .code-solid, .code-outline)) {
    --code-color: oklch(from var(--color-info-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --code-background: var(--color-info-bg-hover);
  }
  &:where(.code-muted) {
    --code-color: oklch(from var(--color-info-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-info) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --code-background: var(--color-info-bg);
    border: 1px solid oklch(from var(--color-info) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-info-bd);
    line-height: calc(1lh - 2px);
  }
  &:where(.code-outline) {
    --code-color: var(--color-info);
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
  &:where(.code-solid) {
    --code-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --code-color: var(--color-info-contrast);
    --code-background: var(--color-info);
  }
}
.code-ink {
  &:where(:not(.code-muted, .code-solid, .code-outline)) {
    --code-color: oklch(from var(--color-ink-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --code-background: var(--color-ink-bg-hover);
  }
  &:where(.code-muted) {
    --code-color: oklch(from var(--color-ink-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-ink) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --code-background: var(--color-ink-bg);
    border: 1px solid oklch(from var(--color-ink) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-ink-bd);
    line-height: calc(1lh - 2px);
  }
  &:where(.code-outline) {
    --code-color: var(--color-ink);
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
  &:where(.code-solid) {
    --code-color: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --code-color: var(--color-ink-contrast);
    --code-background: var(--color-ink);
  }
}
.code-placeholder {
  &:where(:not(.code-muted, .code-solid, .code-outline)) {
    --code-color: oklch(from var(--color-placeholder-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --code-background: var(--color-placeholder-bg-hover);
  }
  &:where(.code-muted) {
    --code-color: oklch(from var(--color-placeholder-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-placeholder) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --code-background: var(--color-placeholder-bg);
    border: 1px solid oklch(from var(--color-placeholder) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-placeholder-bd);
    line-height: calc(1lh - 2px);
  }
  &:where(.code-outline) {
    --code-color: var(--color-placeholder);
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
  &:where(.code-solid) {
    --code-color: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --code-color: var(--color-placeholder-contrast);
    --code-background: var(--color-placeholder);
  }
}
.code-primary {
  &:where(:not(.code-muted, .code-solid, .code-outline)) {
    --code-color: oklch(from var(--color-primary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --code-background: var(--color-primary-bg-hover);
  }
  &:where(.code-muted) {
    --code-color: oklch(from var(--color-primary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-primary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --code-background: var(--color-primary-bg);
    border: 1px solid oklch(from var(--color-primary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-primary-bd);
    line-height: calc(1lh - 2px);
  }
  &:where(.code-outline) {
    --code-color: var(--color-primary);
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
  &:where(.code-solid) {
    --code-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --code-color: var(--color-primary-contrast);
    --code-background: var(--color-primary);
  }
}
.code-secondary {
  &:where(:not(.code-muted, .code-solid, .code-outline)) {
    --code-color: oklch(from var(--color-secondary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --code-background: var(--color-secondary-bg-hover);
  }
  &:where(.code-muted) {
    --code-color: oklch(from var(--color-secondary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-secondary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --code-background: var(--color-secondary-bg);
    border: 1px solid oklch(from var(--color-secondary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-secondary-bd);
    line-height: calc(1lh - 2px);
  }
  &:where(.code-outline) {
    --code-color: var(--color-secondary);
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
  &:where(.code-solid) {
    --code-color: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --code-color: var(--color-secondary-contrast);
    --code-background: var(--color-secondary);
  }
}
.code-success {
  &:where(:not(.code-muted, .code-solid, .code-outline)) {
    --code-color: oklch(from var(--color-success-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --code-background: var(--color-success-bg-hover);
  }
  &:where(.code-muted) {
    --code-color: oklch(from var(--color-success-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-success) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --code-background: var(--color-success-bg);
    border: 1px solid oklch(from var(--color-success) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-success-bd);
    line-height: calc(1lh - 2px);
  }
  &:where(.code-outline) {
    --code-color: var(--color-success);
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
  &:where(.code-solid) {
    --code-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --code-color: var(--color-success-contrast);
    --code-background: var(--color-success);
  }
}
.code-tertiary {
  &:where(:not(.code-muted, .code-solid, .code-outline)) {
    --code-color: oklch(from var(--color-tertiary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --code-background: var(--color-tertiary-bg-hover);
  }
  &:where(.code-muted) {
    --code-color: oklch(from var(--color-tertiary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-tertiary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --code-background: var(--color-tertiary-bg);
    border: 1px solid oklch(from var(--color-tertiary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-tertiary-bd);
    line-height: calc(1lh - 2px);
  }
  &:where(.code-outline) {
    --code-color: var(--color-tertiary);
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
  &:where(.code-solid) {
    --code-color: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --code-color: var(--color-tertiary-contrast);
    --code-background: var(--color-tertiary);
  }
}
.code-title {
  &:where(:not(.code-muted, .code-solid, .code-outline)) {
    --code-color: oklch(from var(--color-title-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --code-background: var(--color-title-bg-hover);
  }
  &:where(.code-muted) {
    --code-color: oklch(from var(--color-title-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-title) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --code-background: var(--color-title-bg);
    border: 1px solid oklch(from var(--color-title) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-title-bd);
    line-height: calc(1lh - 2px);
  }
  &:where(.code-outline) {
    --code-color: var(--color-title);
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
  &:where(.code-solid) {
    --code-color: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --code-color: var(--color-title-contrast);
    --code-background: var(--color-title);
  }
}
.code-warning {
  &:where(:not(.code-muted, .code-solid, .code-outline)) {
    --code-color: oklch(from var(--color-warning-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --code-background: var(--color-warning-bg-hover);
  }
  &:where(.code-muted) {
    --code-color: oklch(from var(--color-warning-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-warning) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --code-background: var(--color-warning-bg);
    border: 1px solid oklch(from var(--color-warning) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-warning-bd);
    line-height: calc(1lh - 2px);
  }
  &:where(.code-outline) {
    --code-color: var(--color-warning);
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
  &:where(.code-solid) {
    --code-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --code-color: var(--color-warning-contrast);
    --code-background: var(--color-warning);
  }
}
.code-muted-error {
  --code-color: oklch(from var(--color-error-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --code-background: oklch(from var(--color-error) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --code-background: var(--color-error-bg);
  border: 1px solid oklch(from var(--color-error) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  border-color: var(--color-error-bd);
  line-height: calc(1lh - 2px);
}
.code-muted-primary {
  --code-color: oklch(from var(--color-primary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --code-background: oklch(from var(--color-primary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --code-background: var(--color-primary-bg);
  border: 1px solid oklch(from var(--color-primary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  border-color: var(--color-primary-bd);
  line-height: calc(1lh - 2px);
}
.code-muted-success {
  --code-color: oklch(from var(--color-success-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --code-background: oklch(from var(--color-success) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --code-background: var(--color-success-bg);
  border: 1px solid oklch(from var(--color-success) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  border-color: var(--color-success-bd);
  line-height: calc(1lh - 2px);
}
.code-muted-warning {
  --code-color: oklch(from var(--color-warning-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --code-background: oklch(from var(--color-warning) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --code-background: var(--color-warning-bg);
  border: 1px solid oklch(from var(--color-warning) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  border-color: var(--color-warning-bd);
  line-height: calc(1lh - 2px);
}
.pre-caption {
  &:where(:not(.pre-muted, .pre-solid, .pre-outline)) {
    --pre-color: oklch(from var(--color-caption-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pre-background: var(--color-caption-bg-hover);
  }
  &:where(.pre-muted) {
    --pre-color: oklch(from var(--color-caption-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-caption) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --pre-background: var(--color-caption-bg);
    border: 1px solid oklch(from var(--color-caption) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-caption-bd);
  }
  &:where(.pre-outline) {
    --pre-color: var(--color-caption);
    --pre-background: transparent;
    border: 1px solid var(--pre-color);
  }
  &:where(.pre-solid) {
    --pre-color: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --pre-color: var(--color-caption-contrast);
    --pre-background: var(--color-caption);
  }
}
.pre-caution {
  &:where(:not(.pre-muted, .pre-solid, .pre-outline)) {
    --pre-color: oklch(from var(--color-caution-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pre-background: var(--color-caution-bg-hover);
  }
  &:where(.pre-muted) {
    --pre-color: oklch(from var(--color-caution-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-caution) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --pre-background: var(--color-caution-bg);
    border: 1px solid oklch(from var(--color-caution) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-caution-bd);
  }
  &:where(.pre-outline) {
    --pre-color: var(--color-caution);
    --pre-background: transparent;
    border: 1px solid var(--pre-color);
  }
  &:where(.pre-solid) {
    --pre-color: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --pre-color: var(--color-caution-contrast);
    --pre-background: var(--color-caution);
  }
}
.pre-description {
  &:where(:not(.pre-muted, .pre-solid, .pre-outline)) {
    --pre-color: oklch(from var(--color-description-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pre-background: var(--color-description-bg-hover);
  }
  &:where(.pre-muted) {
    --pre-color: oklch(from var(--color-description-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-description) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --pre-background: var(--color-description-bg);
    border: 1px solid oklch(from var(--color-description) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-description-bd);
  }
  &:where(.pre-outline) {
    --pre-color: var(--color-description);
    --pre-background: transparent;
    border: 1px solid var(--pre-color);
  }
  &:where(.pre-solid) {
    --pre-color: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --pre-color: var(--color-description-contrast);
    --pre-background: var(--color-description);
  }
}
.pre-error {
  &:where(:not(.pre-muted, .pre-solid, .pre-outline)) {
    --pre-color: oklch(from var(--color-error-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pre-background: var(--color-error-bg-hover);
  }
  &:where(.pre-muted) {
    --pre-color: oklch(from var(--color-error-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-error) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --pre-background: var(--color-error-bg);
    border: 1px solid oklch(from var(--color-error) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-error-bd);
  }
  &:where(.pre-outline) {
    --pre-color: var(--color-error);
    --pre-background: transparent;
    border: 1px solid var(--pre-color);
  }
  &:where(.pre-solid) {
    --pre-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --pre-color: var(--color-error-contrast);
    --pre-background: var(--color-error);
  }
}
.pre-highlight {
  &:where(:not(.pre-muted, .pre-solid, .pre-outline)) {
    --pre-color: oklch(from var(--color-highlight-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pre-background: var(--color-highlight-bg-hover);
  }
  &:where(.pre-muted) {
    --pre-color: oklch(from var(--color-highlight-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-highlight) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --pre-background: var(--color-highlight-bg);
    border: 1px solid oklch(from var(--color-highlight) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-highlight-bd);
  }
  &:where(.pre-outline) {
    --pre-color: var(--color-highlight);
    --pre-background: transparent;
    border: 1px solid var(--pre-color);
  }
  &:where(.pre-solid) {
    --pre-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --pre-color: var(--color-highlight-contrast);
    --pre-background: var(--color-highlight);
  }
}
.pre-info {
  &:where(:not(.pre-muted, .pre-solid, .pre-outline)) {
    --pre-color: oklch(from var(--color-info-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pre-background: var(--color-info-bg-hover);
  }
  &:where(.pre-muted) {
    --pre-color: oklch(from var(--color-info-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-info) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --pre-background: var(--color-info-bg);
    border: 1px solid oklch(from var(--color-info) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-info-bd);
  }
  &:where(.pre-outline) {
    --pre-color: var(--color-info);
    --pre-background: transparent;
    border: 1px solid var(--pre-color);
  }
  &:where(.pre-solid) {
    --pre-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --pre-color: var(--color-info-contrast);
    --pre-background: var(--color-info);
  }
}
.pre-ink {
  &:where(:not(.pre-muted, .pre-solid, .pre-outline)) {
    --pre-color: oklch(from var(--color-ink-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pre-background: var(--color-ink-bg-hover);
  }
  &:where(.pre-muted) {
    --pre-color: oklch(from var(--color-ink-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-ink) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --pre-background: var(--color-ink-bg);
    border: 1px solid oklch(from var(--color-ink) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-ink-bd);
  }
  &:where(.pre-outline) {
    --pre-color: var(--color-ink);
    --pre-background: transparent;
    border: 1px solid var(--pre-color);
  }
  &:where(.pre-solid) {
    --pre-color: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --pre-color: var(--color-ink-contrast);
    --pre-background: var(--color-ink);
  }
}
.pre-placeholder {
  &:where(:not(.pre-muted, .pre-solid, .pre-outline)) {
    --pre-color: oklch(from var(--color-placeholder-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pre-background: var(--color-placeholder-bg-hover);
  }
  &:where(.pre-muted) {
    --pre-color: oklch(from var(--color-placeholder-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-placeholder) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --pre-background: var(--color-placeholder-bg);
    border: 1px solid oklch(from var(--color-placeholder) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-placeholder-bd);
  }
  &:where(.pre-outline) {
    --pre-color: var(--color-placeholder);
    --pre-background: transparent;
    border: 1px solid var(--pre-color);
  }
  &:where(.pre-solid) {
    --pre-color: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --pre-color: var(--color-placeholder-contrast);
    --pre-background: var(--color-placeholder);
  }
}
.pre-primary {
  &:where(:not(.pre-muted, .pre-solid, .pre-outline)) {
    --pre-color: oklch(from var(--color-primary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pre-background: var(--color-primary-bg-hover);
  }
  &:where(.pre-muted) {
    --pre-color: oklch(from var(--color-primary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-primary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --pre-background: var(--color-primary-bg);
    border: 1px solid oklch(from var(--color-primary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-primary-bd);
  }
  &:where(.pre-outline) {
    --pre-color: var(--color-primary);
    --pre-background: transparent;
    border: 1px solid var(--pre-color);
  }
  &:where(.pre-solid) {
    --pre-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --pre-color: var(--color-primary-contrast);
    --pre-background: var(--color-primary);
  }
}
.pre-secondary {
  &:where(:not(.pre-muted, .pre-solid, .pre-outline)) {
    --pre-color: oklch(from var(--color-secondary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pre-background: var(--color-secondary-bg-hover);
  }
  &:where(.pre-muted) {
    --pre-color: oklch(from var(--color-secondary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-secondary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --pre-background: var(--color-secondary-bg);
    border: 1px solid oklch(from var(--color-secondary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-secondary-bd);
  }
  &:where(.pre-outline) {
    --pre-color: var(--color-secondary);
    --pre-background: transparent;
    border: 1px solid var(--pre-color);
  }
  &:where(.pre-solid) {
    --pre-color: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --pre-color: var(--color-secondary-contrast);
    --pre-background: var(--color-secondary);
  }
}
.pre-success {
  &:where(:not(.pre-muted, .pre-solid, .pre-outline)) {
    --pre-color: oklch(from var(--color-success-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pre-background: var(--color-success-bg-hover);
  }
  &:where(.pre-muted) {
    --pre-color: oklch(from var(--color-success-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-success) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --pre-background: var(--color-success-bg);
    border: 1px solid oklch(from var(--color-success) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-success-bd);
  }
  &:where(.pre-outline) {
    --pre-color: var(--color-success);
    --pre-background: transparent;
    border: 1px solid var(--pre-color);
  }
  &:where(.pre-solid) {
    --pre-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --pre-color: var(--color-success-contrast);
    --pre-background: var(--color-success);
  }
}
.pre-tertiary {
  &:where(:not(.pre-muted, .pre-solid, .pre-outline)) {
    --pre-color: oklch(from var(--color-tertiary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pre-background: var(--color-tertiary-bg-hover);
  }
  &:where(.pre-muted) {
    --pre-color: oklch(from var(--color-tertiary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-tertiary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --pre-background: var(--color-tertiary-bg);
    border: 1px solid oklch(from var(--color-tertiary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-tertiary-bd);
  }
  &:where(.pre-outline) {
    --pre-color: var(--color-tertiary);
    --pre-background: transparent;
    border: 1px solid var(--pre-color);
  }
  &:where(.pre-solid) {
    --pre-color: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --pre-color: var(--color-tertiary-contrast);
    --pre-background: var(--color-tertiary);
  }
}
.pre-title {
  &:where(:not(.pre-muted, .pre-solid, .pre-outline)) {
    --pre-color: oklch(from var(--color-title-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pre-background: var(--color-title-bg-hover);
  }
  &:where(.pre-muted) {
    --pre-color: oklch(from var(--color-title-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-title) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --pre-background: var(--color-title-bg);
    border: 1px solid oklch(from var(--color-title) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-title-bd);
  }
  &:where(.pre-outline) {
    --pre-color: var(--color-title);
    --pre-background: transparent;
    border: 1px solid var(--pre-color);
  }
  &:where(.pre-solid) {
    --pre-color: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --pre-color: var(--color-title-contrast);
    --pre-background: var(--color-title);
  }
}
.pre-warning {
  &:where(:not(.pre-muted, .pre-solid, .pre-outline)) {
    --pre-color: oklch(from var(--color-warning-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pre-background: var(--color-warning-bg-hover);
  }
  &:where(.pre-muted) {
    --pre-color: oklch(from var(--color-warning-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-warning) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --pre-background: var(--color-warning-bg);
    border: 1px solid oklch(from var(--color-warning) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    border-color: var(--color-warning-bd);
  }
  &:where(.pre-outline) {
    --pre-color: var(--color-warning);
    --pre-background: transparent;
    border: 1px solid var(--pre-color);
  }
  &:where(.pre-solid) {
    --pre-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --pre-color: var(--color-warning-contrast);
    --pre-background: var(--color-warning);
  }
}
.pre-muted-error {
  --pre-color: oklch(from var(--color-error-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --pre-background: oklch(from var(--color-error) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --pre-background: var(--color-error-bg);
  border: 1px solid oklch(from var(--color-error) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  border-color: var(--color-error-bd);
}
.pre-muted-primary {
  --pre-color: oklch(from var(--color-primary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --pre-background: oklch(from var(--color-primary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --pre-background: var(--color-primary-bg);
  border: 1px solid oklch(from var(--color-primary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  border-color: var(--color-primary-bd);
}
.pre-muted-success {
  --pre-color: oklch(from var(--color-success-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --pre-background: oklch(from var(--color-success) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --pre-background: var(--color-success-bg);
  border: 1px solid oklch(from var(--color-success) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  border-color: var(--color-success-bd);
}
.pre-muted-warning {
  --pre-color: oklch(from var(--color-warning-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --pre-background: oklch(from var(--color-warning) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --pre-background: var(--color-warning-bg);
  border: 1px solid oklch(from var(--color-warning) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  border-color: var(--color-warning-bd);
}
.border-black {
  border-color: var(--color-black);
}
.border-blue-500 {
  border-color: var(--color-blue-500);
}
.border-error {
  border-color: var(--color-error);
}
.border-primary {
  border-color: var(--color-primary);
}
.border-red-500 {
  border-color: var(--color-red-500);
}
.border-secondary {
  border-color: var(--color-secondary);
}
.border-success {
  border-color: var(--color-success);
}
.spinner-broken {
  border-inline-start-color: transparent;
  border-block-start-color: var(--spinner-thumb-color);
  border-inline-end-color: transparent;
}
.spinner-gapped {
  border-inline-start-color: transparent;
  border-block-start-color: var(--spinner-thumb-color);
  border-inline-end-color: var(--spinner-thumb-color);
}
.bg-aurora {
  --bg-base: var(--color-stage);
  --bg-angle: 60;
  --bg-2-angle: var(--bg-angle);
  --bg-3-angle: calc(var(--bg-angle) * 2);
  --bg-1: var(--color-primary);
  --bg-2: oklch(from var(--bg-1) l c calc(h + var(--bg-2-angle)));
  --bg-3: oklch(from var(--bg-1) l c calc(h + var(--bg-3-angle)));
  --bg-1-a: .55;
  --bg-2-a: .42;
  --bg-3-a: .20;
  --bg-1-at: 0% 0%;
  --bg-2-at: 100% 100%;
  --bg-3-at: 0% 100%;
  --bg-size: ;
  --bg-1-size: var(--bg-size);
  --bg-2-size: var(--bg-size);
  --bg-3-size: var(--bg-size);
  background-color: var(--bg-base);
  background-image: radial-gradient(ellipse var(--bg-1-size) at var(--bg-1-at), oklch(from var(--bg-1) l c h / var(--bg-1-a)) 0%, transparent 68%), radial-gradient(ellipse var(--bg-2-size) at var(--bg-2-at), oklch(from var(--bg-2) l c h / var(--bg-2-a)) 0%, transparent 68%), radial-gradient(ellipse var(--bg-3-size) at var(--bg-3-at), oklch(from var(--bg-3) l c h / var(--bg-3-a)) 0%, transparent 68%);
  &:where(.dark, .dark *) {
    --bg-base: oklch(from var(--bg-1) 0.1 0.04 h);
    --bg-size: 65% 65%;
    --bg-1-size: 90% 90%;
    --bg-1-a: .45;
    --bg-2-a: .32;
    --bg-3-a: .16;
  }
  @media (prefers-color-scheme: dark) {
    --bg-base: oklch(from var(--bg-1) 0.1 0.04 h);
    --bg-size: 65% 65%;
    --bg-1-size: 90% 90%;
    --bg-1-a: .45;
    --bg-2-a: .32;
    --bg-3-a: .16;
  }
}
.bg-aurora-\[\#0017ff\] {
  --bg-base: var(--color-stage);
  --bg-angle: 60;
  --bg-2-angle: var(--bg-angle);
  --bg-3-angle: calc(var(--bg-angle) * 2);
  --bg-1: #0017ff;
  --bg-2: oklch(from var(--bg-1) l c calc(h + var(--bg-2-angle)));
  --bg-3: oklch(from var(--bg-1) l c calc(h + var(--bg-3-angle)));
  --bg-1-a: .55;
  --bg-2-a: .42;
  --bg-3-a: .20;
  --bg-1-at: 0% 0%;
  --bg-2-at: 100% 100%;
  --bg-3-at: 0% 100%;
  --bg-size: ;
  --bg-1-size: var(--bg-size);
  --bg-2-size: var(--bg-size);
  --bg-3-size: var(--bg-size);
  background-color: var(--bg-base);
  background-image: radial-gradient(ellipse var(--bg-1-size) at var(--bg-1-at), oklch(from var(--bg-1) l c h / var(--bg-1-a)) 0%, transparent 68%), radial-gradient(ellipse var(--bg-2-size) at var(--bg-2-at), oklch(from var(--bg-2) l c h / var(--bg-2-a)) 0%, transparent 68%), radial-gradient(ellipse var(--bg-3-size) at var(--bg-3-at), oklch(from var(--bg-3) l c h / var(--bg-3-a)) 0%, transparent 68%);
  &:where(.dark, .dark *) {
    --bg-base: oklch(from var(--bg-1) 0.1 0.04 h);
    --bg-size: 65% 65%;
    --bg-1-size: 80% 80%;
    --bg-1-a: .45;
    --bg-2-a: .32;
    --bg-3-a: .16;
  }
  @media (prefers-color-scheme: dark) {
    --bg-base: oklch(from var(--bg-1) 0.1 0.04 h);
    --bg-size: 65% 65%;
    --bg-1-size: 80% 80%;
    --bg-1-a: .45;
    --bg-2-a: .32;
    --bg-3-a: .16;
  }
}
.bg-aurora-\[\#7100ff\] {
  --bg-base: var(--color-stage);
  --bg-angle: 60;
  --bg-2-angle: var(--bg-angle);
  --bg-3-angle: calc(var(--bg-angle) * 2);
  --bg-1: #7100ff;
  --bg-2: oklch(from var(--bg-1) l c calc(h + var(--bg-2-angle)));
  --bg-3: oklch(from var(--bg-1) l c calc(h + var(--bg-3-angle)));
  --bg-1-a: .55;
  --bg-2-a: .42;
  --bg-3-a: .20;
  --bg-1-at: 0% 0%;
  --bg-2-at: 100% 100%;
  --bg-3-at: 0% 100%;
  --bg-size: ;
  --bg-1-size: var(--bg-size);
  --bg-2-size: var(--bg-size);
  --bg-3-size: var(--bg-size);
  background-color: var(--bg-base);
  background-image: radial-gradient(ellipse var(--bg-1-size) at var(--bg-1-at), oklch(from var(--bg-1) l c h / var(--bg-1-a)) 0%, transparent 68%), radial-gradient(ellipse var(--bg-2-size) at var(--bg-2-at), oklch(from var(--bg-2) l c h / var(--bg-2-a)) 0%, transparent 68%), radial-gradient(ellipse var(--bg-3-size) at var(--bg-3-at), oklch(from var(--bg-3) l c h / var(--bg-3-a)) 0%, transparent 68%);
  &:where(.dark, .dark *) {
    --bg-base: oklch(from var(--bg-1) 0.1 0.04 h);
    --bg-size: 65% 65%;
    --bg-1-size: 80% 80%;
    --bg-1-a: .45;
    --bg-2-a: .32;
    --bg-3-a: .16;
  }
  @media (prefers-color-scheme: dark) {
    --bg-base: oklch(from var(--bg-1) 0.1 0.04 h);
    --bg-size: 65% 65%;
    --bg-1-size: 80% 80%;
    --bg-1-a: .45;
    --bg-2-a: .32;
    --bg-3-a: .16;
  }
}
.bg-aurora-error {
  --bg-base: var(--color-stage);
  --bg-angle: 60;
  --bg-2-angle: var(--bg-angle);
  --bg-3-angle: calc(var(--bg-angle) * 2);
  --bg-1: var(--color-error);
  --bg-2: oklch(from var(--bg-1) l c calc(h + var(--bg-2-angle)));
  --bg-3: oklch(from var(--bg-1) l c calc(h + var(--bg-3-angle)));
  --bg-1-a: .55;
  --bg-2-a: .42;
  --bg-3-a: .20;
  --bg-1-at: 0% 0%;
  --bg-2-at: 100% 100%;
  --bg-3-at: 0% 100%;
  --bg-size: ;
  --bg-1-size: var(--bg-size);
  --bg-2-size: var(--bg-size);
  --bg-3-size: var(--bg-size);
  background-color: var(--bg-base);
  background-image: radial-gradient(ellipse var(--bg-1-size) at var(--bg-1-at), oklch(from var(--bg-1) l c h / var(--bg-1-a)) 0%, transparent 68%), radial-gradient(ellipse var(--bg-2-size) at var(--bg-2-at), oklch(from var(--bg-2) l c h / var(--bg-2-a)) 0%, transparent 68%), radial-gradient(ellipse var(--bg-3-size) at var(--bg-3-at), oklch(from var(--bg-3) l c h / var(--bg-3-a)) 0%, transparent 68%);
  &:where(.dark, .dark *) {
    --bg-base: oklch(from var(--bg-1) 0.1 0.04 h);
    --bg-size: 65% 65%;
    --bg-1-size: 80% 80%;
    --bg-1-a: .45;
    --bg-2-a: .32;
    --bg-3-a: .16;
  }
  @media (prefers-color-scheme: dark) {
    --bg-base: oklch(from var(--bg-1) 0.1 0.04 h);
    --bg-size: 65% 65%;
    --bg-1-size: 80% 80%;
    --bg-1-a: .45;
    --bg-2-a: .32;
    --bg-3-a: .16;
  }
}
.bg-aurora-success {
  --bg-base: var(--color-stage);
  --bg-angle: 60;
  --bg-2-angle: var(--bg-angle);
  --bg-3-angle: calc(var(--bg-angle) * 2);
  --bg-1: var(--color-success);
  --bg-2: oklch(from var(--bg-1) l c calc(h + var(--bg-2-angle)));
  --bg-3: oklch(from var(--bg-1) l c calc(h + var(--bg-3-angle)));
  --bg-1-a: .55;
  --bg-2-a: .42;
  --bg-3-a: .20;
  --bg-1-at: 0% 0%;
  --bg-2-at: 100% 100%;
  --bg-3-at: 0% 100%;
  --bg-size: ;
  --bg-1-size: var(--bg-size);
  --bg-2-size: var(--bg-size);
  --bg-3-size: var(--bg-size);
  background-color: var(--bg-base);
  background-image: radial-gradient(ellipse var(--bg-1-size) at var(--bg-1-at), oklch(from var(--bg-1) l c h / var(--bg-1-a)) 0%, transparent 68%), radial-gradient(ellipse var(--bg-2-size) at var(--bg-2-at), oklch(from var(--bg-2) l c h / var(--bg-2-a)) 0%, transparent 68%), radial-gradient(ellipse var(--bg-3-size) at var(--bg-3-at), oklch(from var(--bg-3) l c h / var(--bg-3-a)) 0%, transparent 68%);
  &:where(.dark, .dark *) {
    --bg-base: oklch(from var(--bg-1) 0.1 0.04 h);
    --bg-size: 65% 65%;
    --bg-1-size: 80% 80%;
    --bg-1-a: .45;
    --bg-2-a: .32;
    --bg-3-a: .16;
  }
  @media (prefers-color-scheme: dark) {
    --bg-base: oklch(from var(--bg-1) 0.1 0.04 h);
    --bg-size: 65% 65%;
    --bg-1-size: 80% 80%;
    --bg-1-a: .45;
    --bg-2-a: .32;
    --bg-3-a: .16;
  }
}
.bg-blend {
  --bg-base: oklch(from var(--bg-1) 1 0.04 h);
  --bg-angle: 40;
  --bg-2-angle: var(--bg-angle);
  --bg-3-angle: calc(var(--bg-angle) * 2);
  --bg-1: var(--color-primary);
  --bg-2: oklch(from var(--bg-1) l c calc(h + var(--bg-2-angle)));
  --bg-3: oklch(from var(--bg-1) l c calc(h + var(--bg-3-angle)));
  --bg-1-a: .42;
  --bg-2-a: .38;
  --bg-3-a: .25;
  --bg-1-at: 20% 14%;
  --bg-2-at: 90% 40%;
  --bg-3-at: 60% 140%;
  background-color: var(--bg-base);
  background-image: radial-gradient(ellipse at var(--bg-1-at), oklch(from var(--bg-1) l c h / var(--bg-1-a)) 0%, transparent 55%), radial-gradient(ellipse at var(--bg-2-at), oklch(from var(--bg-2) l c h / var(--bg-2-a)) 0%, transparent 55%), radial-gradient(ellipse at var(--bg-3-at), oklch(from var(--bg-3) l c h / var(--bg-3-a)) 0%, transparent 60%);
  &:where(.dark, .dark *) {
    --bg-base: oklch(from var(--bg-1) 0.1 0.04 h);
    --bg-1-a: .22;
    --bg-2-a: .18;
    --bg-3-a: .20;
  }
  @media (prefers-color-scheme: dark) {
    --bg-base: oklch(from var(--bg-1) 0.1 0.04 h);
    --bg-1-a: .22;
    --bg-2-a: .18;
    --bg-3-a: .20;
  }
}
.bg-blend-\[\#0017ff\] {
  --bg-base: oklch(from var(--bg-1) 1 0.04 h);
  --bg-angle: 40;
  --bg-2-angle: var(--bg-angle);
  --bg-3-angle: calc(var(--bg-angle) * 2);
  --bg-1: #0017ff;
  --bg-2: oklch(from var(--bg-1) l c calc(h + var(--bg-2-angle)));
  --bg-3: oklch(from var(--bg-1) l c calc(h + var(--bg-3-angle)));
  --bg-1-a: .42;
  --bg-2-a: .38;
  --bg-3-a: .25;
  --bg-1-at: 20% 14%;
  --bg-2-at: 90% 40%;
  --bg-3-at: 60% 140%;
  background-color: var(--bg-base);
  background-image: radial-gradient(ellipse at var(--bg-1-at), oklch(from var(--bg-1) l c h / var(--bg-1-a)) 0%, transparent 55%), radial-gradient(ellipse at var(--bg-2-at), oklch(from var(--bg-2) l c h / var(--bg-2-a)) 0%, transparent 55%), radial-gradient(ellipse at var(--bg-3-at), oklch(from var(--bg-3) l c h / var(--bg-3-a)) 0%, transparent 60%);
  &:where(.dark, .dark *) {
    --bg-base: oklch(from var(--bg-1) 0.1 0.04 h);
    --bg-1-a: .22;
    --bg-2-a: .18;
    --bg-3-a: .20;
  }
  @media (prefers-color-scheme: dark) {
    --bg-base: oklch(from var(--bg-1) 0.1 0.04 h);
    --bg-1-a: .22;
    --bg-2-a: .18;
    --bg-3-a: .20;
  }
}
.bg-blend-\[\#7100ff\] {
  --bg-base: oklch(from var(--bg-1) 1 0.04 h);
  --bg-angle: 40;
  --bg-2-angle: var(--bg-angle);
  --bg-3-angle: calc(var(--bg-angle) * 2);
  --bg-1: #7100ff;
  --bg-2: oklch(from var(--bg-1) l c calc(h + var(--bg-2-angle)));
  --bg-3: oklch(from var(--bg-1) l c calc(h + var(--bg-3-angle)));
  --bg-1-a: .42;
  --bg-2-a: .38;
  --bg-3-a: .25;
  --bg-1-at: 20% 14%;
  --bg-2-at: 90% 40%;
  --bg-3-at: 60% 140%;
  background-color: var(--bg-base);
  background-image: radial-gradient(ellipse at var(--bg-1-at), oklch(from var(--bg-1) l c h / var(--bg-1-a)) 0%, transparent 55%), radial-gradient(ellipse at var(--bg-2-at), oklch(from var(--bg-2) l c h / var(--bg-2-a)) 0%, transparent 55%), radial-gradient(ellipse at var(--bg-3-at), oklch(from var(--bg-3) l c h / var(--bg-3-a)) 0%, transparent 60%);
  &:where(.dark, .dark *) {
    --bg-base: oklch(from var(--bg-1) 0.1 0.04 h);
    --bg-1-a: .22;
    --bg-2-a: .18;
    --bg-3-a: .20;
  }
  @media (prefers-color-scheme: dark) {
    --bg-base: oklch(from var(--bg-1) 0.1 0.04 h);
    --bg-1-a: .22;
    --bg-2-a: .18;
    --bg-3-a: .20;
  }
}
.bg-blend-error {
  --bg-base: oklch(from var(--bg-1) 1 0.04 h);
  --bg-angle: 40;
  --bg-2-angle: var(--bg-angle);
  --bg-3-angle: calc(var(--bg-angle) * 2);
  --bg-1: var(--color-error);
  --bg-2: oklch(from var(--bg-1) l c calc(h + var(--bg-2-angle)));
  --bg-3: oklch(from var(--bg-1) l c calc(h + var(--bg-3-angle)));
  --bg-1-a: .42;
  --bg-2-a: .38;
  --bg-3-a: .25;
  --bg-1-at: 20% 14%;
  --bg-2-at: 90% 40%;
  --bg-3-at: 60% 140%;
  background-color: var(--bg-base);
  background-image: radial-gradient(ellipse at var(--bg-1-at), oklch(from var(--bg-1) l c h / var(--bg-1-a)) 0%, transparent 55%), radial-gradient(ellipse at var(--bg-2-at), oklch(from var(--bg-2) l c h / var(--bg-2-a)) 0%, transparent 55%), radial-gradient(ellipse at var(--bg-3-at), oklch(from var(--bg-3) l c h / var(--bg-3-a)) 0%, transparent 60%);
  &:where(.dark, .dark *) {
    --bg-base: oklch(from var(--bg-1) 0.1 0.04 h);
    --bg-1-a: .22;
    --bg-2-a: .18;
    --bg-3-a: .20;
  }
  @media (prefers-color-scheme: dark) {
    --bg-base: oklch(from var(--bg-1) 0.1 0.04 h);
    --bg-1-a: .22;
    --bg-2-a: .18;
    --bg-3-a: .20;
  }
}
.bg-blend-success {
  --bg-base: oklch(from var(--bg-1) 1 0.04 h);
  --bg-angle: 40;
  --bg-2-angle: var(--bg-angle);
  --bg-3-angle: calc(var(--bg-angle) * 2);
  --bg-1: var(--color-success);
  --bg-2: oklch(from var(--bg-1) l c calc(h + var(--bg-2-angle)));
  --bg-3: oklch(from var(--bg-1) l c calc(h + var(--bg-3-angle)));
  --bg-1-a: .42;
  --bg-2-a: .38;
  --bg-3-a: .25;
  --bg-1-at: 20% 14%;
  --bg-2-at: 90% 40%;
  --bg-3-at: 60% 140%;
  background-color: var(--bg-base);
  background-image: radial-gradient(ellipse at var(--bg-1-at), oklch(from var(--bg-1) l c h / var(--bg-1-a)) 0%, transparent 55%), radial-gradient(ellipse at var(--bg-2-at), oklch(from var(--bg-2) l c h / var(--bg-2-a)) 0%, transparent 55%), radial-gradient(ellipse at var(--bg-3-at), oklch(from var(--bg-3) l c h / var(--bg-3-a)) 0%, transparent 60%);
  &:where(.dark, .dark *) {
    --bg-base: oklch(from var(--bg-1) 0.1 0.04 h);
    --bg-1-a: .22;
    --bg-2-a: .18;
    --bg-3-a: .20;
  }
  @media (prefers-color-scheme: dark) {
    --bg-base: oklch(from var(--bg-1) 0.1 0.04 h);
    --bg-1-a: .22;
    --bg-2-a: .18;
    --bg-3-a: .20;
  }
}
.bg-tint {
  --bg-base: var(--color-stage);
  --bg-angle: 60;
  --bg-1: var(--color-primary);
  --bg-2: oklch(from var(--bg-1) l c calc(h + var(--bg-angle)));
  --bg-3: oklch(from var(--bg-1) l c calc(h + var(--bg-angle)*2));
  --bg-1-a: .24;
  --bg-2-a: .20;
  --bg-3-a: .10;
  --bg-1-at: 18% 20%;
  --bg-2-at: 82% 22%;
  --bg-3-at: 60% 82%;
  background-color: var(--bg-base);
  background-image: radial-gradient(ellipse at var(--bg-1-at), oklch(from var(--bg-1) l c h / var(--bg-1-a)) 0%, transparent 55%), radial-gradient(ellipse at var(--bg-2-at), oklch(from var(--bg-2) l c h / var(--bg-2-a)) 0%, transparent 55%), radial-gradient(ellipse at var(--bg-3-at), oklch(from var(--bg-3) l c h / var(--bg-3-a)) 0%, transparent 60%);
  &:where(.dark, .dark *) {
    --bg-1-a: .16;
    --bg-2-a: .14;
    --bg-3-a: .08;
  }
  @media (prefers-color-scheme: dark) {
    --bg-1-a: .16;
    --bg-2-a: .14;
    --bg-3-a: .08;
  }
}
.bg-tint-\[\#ff0000\] {
  --bg-base: var(--color-stage);
  --bg-angle: 60;
  --bg-1: #ff0000;
  --bg-2: oklch(from var(--bg-1) l c calc(h + var(--bg-angle)));
  --bg-3: oklch(from var(--bg-1) l c calc(h + var(--bg-angle)*2));
  --bg-1-a: .24;
  --bg-2-a: .20;
  --bg-3-a: .10;
  --bg-1-at: 18% 20%;
  --bg-2-at: 82% 22%;
  --bg-3-at: 60% 82%;
  background-color: var(--bg-base);
  background-image: radial-gradient(ellipse at var(--bg-1-at), oklch(from var(--bg-1) l c h / var(--bg-1-a)) 0%, transparent 55%), radial-gradient(ellipse at var(--bg-2-at), oklch(from var(--bg-2) l c h / var(--bg-2-a)) 0%, transparent 55%), radial-gradient(ellipse at var(--bg-3-at), oklch(from var(--bg-3) l c h / var(--bg-3-a)) 0%, transparent 60%);
  &:where(.dark, .dark *) {
    --bg-1-a: .16;
    --bg-2-a: .14;
    --bg-3-a: .08;
  }
  @media (prefers-color-scheme: dark) {
    --bg-1-a: .16;
    --bg-2-a: .14;
    --bg-3-a: .08;
  }
}
.bg-tint-green-500 {
  --bg-base: var(--color-stage);
  --bg-angle: 60;
  --bg-1: var(--color-green-500);
  --bg-2: oklch(from var(--bg-1) l c calc(h + var(--bg-angle)));
  --bg-3: oklch(from var(--bg-1) l c calc(h + var(--bg-angle)*2));
  --bg-1-a: .24;
  --bg-2-a: .20;
  --bg-3-a: .10;
  --bg-1-at: 18% 20%;
  --bg-2-at: 82% 22%;
  --bg-3-at: 60% 82%;
  background-color: var(--bg-base);
  background-image: radial-gradient(ellipse at var(--bg-1-at), oklch(from var(--bg-1) l c h / var(--bg-1-a)) 0%, transparent 55%), radial-gradient(ellipse at var(--bg-2-at), oklch(from var(--bg-2) l c h / var(--bg-2-a)) 0%, transparent 55%), radial-gradient(ellipse at var(--bg-3-at), oklch(from var(--bg-3) l c h / var(--bg-3-a)) 0%, transparent 60%);
  &:where(.dark, .dark *) {
    --bg-1-a: .16;
    --bg-2-a: .14;
    --bg-3-a: .08;
  }
  @media (prefers-color-scheme: dark) {
    --bg-1-a: .16;
    --bg-2-a: .14;
    --bg-3-a: .08;
  }
}
.bg-whisper {
  --bg-base: var(--color-stage);
  --bg-angle: 90;
  --bg-2-angle: var(--bg-angle);
  --bg-3-angle: calc(var(--bg-angle) * 2);
  --bg-1: var(--color-primary);
  --bg-2: oklch(from var(--bg-1) l c calc(h + var(--bg-2-angle)));
  --bg-3: oklch(from var(--bg-1) l c calc(h + var(--bg-3-angle)));
  --bg-1-a: .1;
  --bg-2-a: var(--bg-1-a);
  --bg-3-a: 0;
  --bg-1-at: 0% 0%;
  --bg-2-at: 200% 100%;
  --bg-3-at: -100% 150%;
  background-image: radial-gradient(ellipse at var(--bg-1-at), oklch(from var(--bg-1) l c h / var(--bg-1-a)) 0%, transparent 60%), radial-gradient(ellipse at var(--bg-2-at), oklch(from var(--bg-2) l c h / var(--bg-2-a)) 0%, transparent 60%), radial-gradient(ellipse at var(--bg-3-at), oklch(from var(--bg-3) l c h / var(--bg-3-a)) 0%, transparent 60%);
  background-color: var(--bg-base);
  &:where(.dark, .dark *) {
    --bg-1-a: .15;
  }
  @media (prefers-color-scheme: dark) {
    --bg-1-a: .15;
  }
}
.bg-whisper-blue-500 {
  --bg-base: var(--color-stage);
  --bg-angle: 90;
  --bg-2-angle: var(--bg-angle);
  --bg-3-angle: calc(var(--bg-angle) * 2);
  --bg-1: var(--color-blue-500);
  --bg-2: oklch(from var(--bg-1) l c calc(h + var(--bg-2-angle)));
  --bg-3: oklch(from var(--bg-1) l c calc(h + var(--bg-3-angle)));
  --bg-1-a: .1;
  --bg-2-a: var(--bg-1-a);
  --bg-3-a: 0;
  --bg-1-at: 0% 0%;
  --bg-2-at: 200% 100%;
  --bg-3-at: -100% 150%;
  background-image: radial-gradient(ellipse at var(--bg-1-at), oklch(from var(--bg-1) l c h / var(--bg-1-a)) 0%, transparent 60%), radial-gradient(ellipse at var(--bg-2-at), oklch(from var(--bg-2) l c h / var(--bg-2-a)) 0%, transparent 60%), radial-gradient(ellipse at var(--bg-3-at), oklch(from var(--bg-3) l c h / var(--bg-3-a)) 0%, transparent 60%);
  background-color: var(--bg-base);
  &:where(.dark, .dark *) {
    --bg-1-a: .15;
  }
  @media (prefers-color-scheme: dark) {
    --bg-1-a: .15;
  }
}
.bg-whisper-indigo-500 {
  --bg-base: var(--color-stage);
  --bg-angle: 90;
  --bg-2-angle: var(--bg-angle);
  --bg-3-angle: calc(var(--bg-angle) * 2);
  --bg-1: var(--color-indigo-500);
  --bg-2: oklch(from var(--bg-1) l c calc(h + var(--bg-2-angle)));
  --bg-3: oklch(from var(--bg-1) l c calc(h + var(--bg-3-angle)));
  --bg-1-a: .1;
  --bg-2-a: var(--bg-1-a);
  --bg-3-a: 0;
  --bg-1-at: 0% 0%;
  --bg-2-at: 200% 100%;
  --bg-3-at: -100% 150%;
  background-image: radial-gradient(ellipse at var(--bg-1-at), oklch(from var(--bg-1) l c h / var(--bg-1-a)) 0%, transparent 60%), radial-gradient(ellipse at var(--bg-2-at), oklch(from var(--bg-2) l c h / var(--bg-2-a)) 0%, transparent 60%), radial-gradient(ellipse at var(--bg-3-at), oklch(from var(--bg-3) l c h / var(--bg-3-a)) 0%, transparent 60%);
  background-color: var(--bg-base);
  &:where(.dark, .dark *) {
    --bg-1-a: .15;
  }
  @media (prefers-color-scheme: dark) {
    --bg-1-a: .15;
  }
}
.bg-whisper-orange-500 {
  --bg-base: var(--color-stage);
  --bg-angle: 90;
  --bg-2-angle: var(--bg-angle);
  --bg-3-angle: calc(var(--bg-angle) * 2);
  --bg-1: var(--color-orange-500);
  --bg-2: oklch(from var(--bg-1) l c calc(h + var(--bg-2-angle)));
  --bg-3: oklch(from var(--bg-1) l c calc(h + var(--bg-3-angle)));
  --bg-1-a: .1;
  --bg-2-a: var(--bg-1-a);
  --bg-3-a: 0;
  --bg-1-at: 0% 0%;
  --bg-2-at: 200% 100%;
  --bg-3-at: -100% 150%;
  background-image: radial-gradient(ellipse at var(--bg-1-at), oklch(from var(--bg-1) l c h / var(--bg-1-a)) 0%, transparent 60%), radial-gradient(ellipse at var(--bg-2-at), oklch(from var(--bg-2) l c h / var(--bg-2-a)) 0%, transparent 60%), radial-gradient(ellipse at var(--bg-3-at), oklch(from var(--bg-3) l c h / var(--bg-3-a)) 0%, transparent 60%);
  background-color: var(--bg-base);
  &:where(.dark, .dark *) {
    --bg-1-a: .15;
  }
  @media (prefers-color-scheme: dark) {
    --bg-1-a: .15;
  }
}
.bg-whisper-pink-500 {
  --bg-base: var(--color-stage);
  --bg-angle: 90;
  --bg-2-angle: var(--bg-angle);
  --bg-3-angle: calc(var(--bg-angle) * 2);
  --bg-1: var(--color-pink-500);
  --bg-2: oklch(from var(--bg-1) l c calc(h + var(--bg-2-angle)));
  --bg-3: oklch(from var(--bg-1) l c calc(h + var(--bg-3-angle)));
  --bg-1-a: .1;
  --bg-2-a: var(--bg-1-a);
  --bg-3-a: 0;
  --bg-1-at: 0% 0%;
  --bg-2-at: 200% 100%;
  --bg-3-at: -100% 150%;
  background-image: radial-gradient(ellipse at var(--bg-1-at), oklch(from var(--bg-1) l c h / var(--bg-1-a)) 0%, transparent 60%), radial-gradient(ellipse at var(--bg-2-at), oklch(from var(--bg-2) l c h / var(--bg-2-a)) 0%, transparent 60%), radial-gradient(ellipse at var(--bg-3-at), oklch(from var(--bg-3) l c h / var(--bg-3-a)) 0%, transparent 60%);
  background-color: var(--bg-base);
  &:where(.dark, .dark *) {
    --bg-1-a: .15;
  }
  @media (prefers-color-scheme: dark) {
    --bg-1-a: .15;
  }
}
.bg-whisper-red-500 {
  --bg-base: var(--color-stage);
  --bg-angle: 90;
  --bg-2-angle: var(--bg-angle);
  --bg-3-angle: calc(var(--bg-angle) * 2);
  --bg-1: var(--color-red-500);
  --bg-2: oklch(from var(--bg-1) l c calc(h + var(--bg-2-angle)));
  --bg-3: oklch(from var(--bg-1) l c calc(h + var(--bg-3-angle)));
  --bg-1-a: .1;
  --bg-2-a: var(--bg-1-a);
  --bg-3-a: 0;
  --bg-1-at: 0% 0%;
  --bg-2-at: 200% 100%;
  --bg-3-at: -100% 150%;
  background-image: radial-gradient(ellipse at var(--bg-1-at), oklch(from var(--bg-1) l c h / var(--bg-1-a)) 0%, transparent 60%), radial-gradient(ellipse at var(--bg-2-at), oklch(from var(--bg-2) l c h / var(--bg-2-a)) 0%, transparent 60%), radial-gradient(ellipse at var(--bg-3-at), oklch(from var(--bg-3) l c h / var(--bg-3-a)) 0%, transparent 60%);
  background-color: var(--bg-base);
  &:where(.dark, .dark *) {
    --bg-1-a: .15;
  }
  @media (prefers-color-scheme: dark) {
    --bg-1-a: .15;
  }
}
.buoy-reverse {
  [data-role=label] {
    background-color: var(--buoy-background-value);
    color: var(--buoy-color-value);
  }
  [data-role=value] {
    background-color: var(--buoy-background-label);
    color: var(--buoy-color-label);
  }
}
.tree-selected {
  color: var(--tree-node-color-selected);
  background-color: var(--tree-node-background-selected);
}
.check-caution {
  --check-input-border-color: oklch(from var(--color-caution) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-caution-bd-hover);
  --check-input-border-color-hover: var(--color-caution);
  --check-input-background: oklch(from var(--color-caution) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-caution-surface);
  --check-input-fill: var(--color-caution);
  --check-outline-color: var(--color-caution);
  --check-halo-color: var(--color-caution);
  --check-indeterminate-bg: oklch(from var(--color-caution) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-caution-bd);
  --check-indeterminate-bd: var(--color-caution);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-caution-contrast);
    --check-input-background: var(--color-caution);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  &:where(.check-subtle) {
    --check-color: oklch(from var(--color-caution) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-color: var(--color-caution-body);
    --check-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-caution-bg-hover);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-caution) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-caution-bg-active);
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-caution) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-caution-bg-active);
    }
  }
  &:where(.check-vivid) {
    --check-color: oklch(from var(--color-caution) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-color: var(--color-caution-body);
    --check-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-caution-bg-hover);
    --check-input-background: transparent;
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-background: var(--color-caution);
      --check-color: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-color: var(--color-caution-contrast);
      --check-input-fill: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-input-fill: var(--color-caution-contrast);
      &:where(:not(:has(:focus-visible))) {
        --check-input-border-color: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color: var(--color-caution-contrast);
        --check-input-border-color-hover: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color-hover: var(--color-caution-contrast);
      }
    }
    input:checked {
      outline-color: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      outline-color: var(--color-caution-contrast);
    }
  }
  &:where(.check-ghost) {
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-caution-bg-hover);
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-caution) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --check-background: var(--color-caution-bg-active);
    }
  }
  &:where(.check-outline) {
    --check-border-color: oklch(from var(--color-caution) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-caution-bd);
    --check-background: oklch(from var(--color-caution) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-caution-surface);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-caution) min(l, 0.74) c h);
      --check-background: oklch(from var(--color-caution) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-background: var(--color-caution-surface);
      --check-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --check-color: var(--color-caution-fg);
    }
  }
  &:where(.check-muted) {
    --check-border-color: oklch(from var(--color-caution) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-caution-bd);
    --check-background: oklch(from var(--color-caution) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-caution-surface);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-caution) var(--light-threshold-bd-active) calc(var(--chorme-bd-active) * var(--color-c-factor)) h);
      --check-border-color: var(--color-caution-bd-active);
      --check-background: oklch(from var(--color-caution) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-background: var(--color-caution-surface);
    }
  }
  &:where(.check-tick) {
    --check-border-color: oklch(from var(--color-caution) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-caution-bd);
    &:where(:not(:has(:checked))) {
      input {
        background-color: oklch(from var(--color-caution) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
        background-color: var(--color-caution-bd);
      }
    }
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-border-color: oklch(from var(--color-caution) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --check-border-color: var(--color-caution-bd-hover);
      --check-background: oklch(from var(--color-caution) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-caution-bg);
    }
    &:where(:has(:checked)) {
      --check-color: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-color: var(--color-caution-contrast);
      --check-border-color: var(--color-caution);
      --check-background: var(--color-caution);
    }
  }
}
.check-error {
  --check-input-border-color: oklch(from var(--color-error) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-error-bd-hover);
  --check-input-border-color-hover: var(--color-error);
  --check-input-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-error-surface);
  --check-input-fill: var(--color-error);
  --check-outline-color: var(--color-error);
  --check-halo-color: var(--color-error);
  --check-indeterminate-bg: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-error-bd);
  --check-indeterminate-bd: var(--color-error);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-error-contrast);
    --check-input-background: var(--color-error);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  &:where(.check-subtle) {
    --check-color: oklch(from var(--color-error) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-color: var(--color-error-body);
    --check-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-error-bg-hover);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-error) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-error-bg-active);
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-error) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-error-bg-active);
    }
  }
  &:where(.check-vivid) {
    --check-color: oklch(from var(--color-error) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-color: var(--color-error-body);
    --check-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-error-bg-hover);
    --check-input-background: transparent;
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-background: var(--color-error);
      --check-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-color: var(--color-error-contrast);
      --check-input-fill: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-input-fill: var(--color-error-contrast);
      &:where(:not(:has(:focus-visible))) {
        --check-input-border-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color: var(--color-error-contrast);
        --check-input-border-color-hover: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color-hover: var(--color-error-contrast);
      }
    }
    input:checked {
      outline-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      outline-color: var(--color-error-contrast);
    }
  }
  &:where(.check-ghost) {
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-error-bg-hover);
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-error) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --check-background: var(--color-error-bg-active);
    }
  }
  &:where(.check-outline) {
    --check-border-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-error-bd);
    --check-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-error-surface);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-error) min(l, 0.74) c h);
      --check-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-background: var(--color-error-surface);
      --check-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --check-color: var(--color-error-fg);
    }
  }
  &:where(.check-muted) {
    --check-border-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-error-bd);
    --check-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-error-surface);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-error) var(--light-threshold-bd-active) calc(var(--chorme-bd-active) * var(--color-c-factor)) h);
      --check-border-color: var(--color-error-bd-active);
      --check-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-background: var(--color-error-surface);
    }
  }
  &:where(.check-tick) {
    --check-border-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-error-bd);
    &:where(:not(:has(:checked))) {
      input {
        background-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
        background-color: var(--color-error-bd);
      }
    }
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-border-color: oklch(from var(--color-error) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --check-border-color: var(--color-error-bd-hover);
      --check-background: oklch(from var(--color-error) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-error-bg);
    }
    &:where(:has(:checked)) {
      --check-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-color: var(--color-error-contrast);
      --check-border-color: var(--color-error);
      --check-background: var(--color-error);
    }
  }
}
.check-highlight {
  --check-input-border-color: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-highlight-bd-hover);
  --check-input-border-color-hover: var(--color-highlight);
  --check-input-background: oklch(from var(--color-highlight) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-highlight-surface);
  --check-input-fill: var(--color-highlight);
  --check-outline-color: var(--color-highlight);
  --check-halo-color: var(--color-highlight);
  --check-indeterminate-bg: oklch(from var(--color-highlight) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-highlight-bd);
  --check-indeterminate-bd: var(--color-highlight);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-highlight-contrast);
    --check-input-background: var(--color-highlight);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  &:where(.check-subtle) {
    --check-color: oklch(from var(--color-highlight) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-color: var(--color-highlight-body);
    --check-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-highlight-bg-hover);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-highlight) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-highlight-bg-active);
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-highlight) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-highlight-bg-active);
    }
  }
  &:where(.check-vivid) {
    --check-color: oklch(from var(--color-highlight) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-color: var(--color-highlight-body);
    --check-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-highlight-bg-hover);
    --check-input-background: transparent;
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-background: var(--color-highlight);
      --check-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-color: var(--color-highlight-contrast);
      --check-input-fill: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-input-fill: var(--color-highlight-contrast);
      &:where(:not(:has(:focus-visible))) {
        --check-input-border-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color: var(--color-highlight-contrast);
        --check-input-border-color-hover: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color-hover: var(--color-highlight-contrast);
      }
    }
    input:checked {
      outline-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      outline-color: var(--color-highlight-contrast);
    }
  }
  &:where(.check-ghost) {
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-highlight-bg-hover);
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-highlight) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --check-background: var(--color-highlight-bg-active);
    }
  }
  &:where(.check-outline) {
    --check-border-color: oklch(from var(--color-highlight) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-highlight-bd);
    --check-background: oklch(from var(--color-highlight) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-highlight-surface);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-highlight) min(l, 0.74) c h);
      --check-background: oklch(from var(--color-highlight) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-background: var(--color-highlight-surface);
      --check-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --check-color: var(--color-highlight-fg);
    }
  }
  &:where(.check-muted) {
    --check-border-color: oklch(from var(--color-highlight) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-highlight-bd);
    --check-background: oklch(from var(--color-highlight) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-highlight-surface);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-highlight) var(--light-threshold-bd-active) calc(var(--chorme-bd-active) * var(--color-c-factor)) h);
      --check-border-color: var(--color-highlight-bd-active);
      --check-background: oklch(from var(--color-highlight) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-background: var(--color-highlight-surface);
    }
  }
  &:where(.check-tick) {
    --check-border-color: oklch(from var(--color-highlight) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-highlight-bd);
    &:where(:not(:has(:checked))) {
      input {
        background-color: oklch(from var(--color-highlight) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
        background-color: var(--color-highlight-bd);
      }
    }
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-border-color: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --check-border-color: var(--color-highlight-bd-hover);
      --check-background: oklch(from var(--color-highlight) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-highlight-bg);
    }
    &:where(:has(:checked)) {
      --check-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-color: var(--color-highlight-contrast);
      --check-border-color: var(--color-highlight);
      --check-background: var(--color-highlight);
    }
  }
}
.check-info {
  --check-input-border-color: oklch(from var(--color-info) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-info-bd-hover);
  --check-input-border-color-hover: var(--color-info);
  --check-input-background: oklch(from var(--color-info) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-info-surface);
  --check-input-fill: var(--color-info);
  --check-outline-color: var(--color-info);
  --check-halo-color: var(--color-info);
  --check-indeterminate-bg: oklch(from var(--color-info) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-info-bd);
  --check-indeterminate-bd: var(--color-info);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-info-contrast);
    --check-input-background: var(--color-info);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  &:where(.check-subtle) {
    --check-color: oklch(from var(--color-info) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-color: var(--color-info-body);
    --check-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-info-bg-hover);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-info) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-info-bg-active);
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-info) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-info-bg-active);
    }
  }
  &:where(.check-vivid) {
    --check-color: oklch(from var(--color-info) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-color: var(--color-info-body);
    --check-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-info-bg-hover);
    --check-input-background: transparent;
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-background: var(--color-info);
      --check-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-color: var(--color-info-contrast);
      --check-input-fill: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-input-fill: var(--color-info-contrast);
      &:where(:not(:has(:focus-visible))) {
        --check-input-border-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color: var(--color-info-contrast);
        --check-input-border-color-hover: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color-hover: var(--color-info-contrast);
      }
    }
    input:checked {
      outline-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      outline-color: var(--color-info-contrast);
    }
  }
  &:where(.check-ghost) {
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-info-bg-hover);
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-info) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --check-background: var(--color-info-bg-active);
    }
  }
  &:where(.check-outline) {
    --check-border-color: oklch(from var(--color-info) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-info-bd);
    --check-background: oklch(from var(--color-info) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-info-surface);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-info) min(l, 0.74) c h);
      --check-background: oklch(from var(--color-info) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-background: var(--color-info-surface);
      --check-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --check-color: var(--color-info-fg);
    }
  }
  &:where(.check-muted) {
    --check-border-color: oklch(from var(--color-info) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-info-bd);
    --check-background: oklch(from var(--color-info) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-info-surface);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-info) var(--light-threshold-bd-active) calc(var(--chorme-bd-active) * var(--color-c-factor)) h);
      --check-border-color: var(--color-info-bd-active);
      --check-background: oklch(from var(--color-info) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-background: var(--color-info-surface);
    }
  }
  &:where(.check-tick) {
    --check-border-color: oklch(from var(--color-info) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-info-bd);
    &:where(:not(:has(:checked))) {
      input {
        background-color: oklch(from var(--color-info) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
        background-color: var(--color-info-bd);
      }
    }
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-border-color: oklch(from var(--color-info) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --check-border-color: var(--color-info-bd-hover);
      --check-background: oklch(from var(--color-info) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-info-bg);
    }
    &:where(:has(:checked)) {
      --check-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-color: var(--color-info-contrast);
      --check-border-color: var(--color-info);
      --check-background: var(--color-info);
    }
  }
}
.check-primary {
  --check-input-border-color: oklch(from var(--color-primary) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-primary-bd-hover);
  --check-input-border-color-hover: var(--color-primary);
  --check-input-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-primary-surface);
  --check-input-fill: var(--color-primary);
  --check-outline-color: var(--color-primary);
  --check-halo-color: var(--color-primary);
  --check-indeterminate-bg: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-primary-bd);
  --check-indeterminate-bd: var(--color-primary);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-primary-contrast);
    --check-input-background: var(--color-primary);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  &:where(.check-subtle) {
    --check-color: oklch(from var(--color-primary) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-color: var(--color-primary-body);
    --check-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-primary-bg-hover);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-primary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-primary-bg-active);
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-primary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-primary-bg-active);
    }
  }
  &:where(.check-vivid) {
    --check-color: oklch(from var(--color-primary) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-color: var(--color-primary-body);
    --check-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-primary-bg-hover);
    --check-input-background: transparent;
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-background: var(--color-primary);
      --check-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-color: var(--color-primary-contrast);
      --check-input-fill: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-input-fill: var(--color-primary-contrast);
      &:where(:not(:has(:focus-visible))) {
        --check-input-border-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color: var(--color-primary-contrast);
        --check-input-border-color-hover: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color-hover: var(--color-primary-contrast);
      }
    }
    input:checked {
      outline-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      outline-color: var(--color-primary-contrast);
    }
  }
  &:where(.check-ghost) {
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-primary-bg-hover);
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-primary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --check-background: var(--color-primary-bg-active);
    }
  }
  &:where(.check-outline) {
    --check-border-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-primary-bd);
    --check-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-primary-surface);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-primary) min(l, 0.74) c h);
      --check-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-background: var(--color-primary-surface);
      --check-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --check-color: var(--color-primary-fg);
    }
  }
  &:where(.check-muted) {
    --check-border-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-primary-bd);
    --check-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-primary-surface);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-primary) var(--light-threshold-bd-active) calc(var(--chorme-bd-active) * var(--color-c-factor)) h);
      --check-border-color: var(--color-primary-bd-active);
      --check-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-background: var(--color-primary-surface);
    }
  }
  &:where(.check-tick) {
    --check-border-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-primary-bd);
    &:where(:not(:has(:checked))) {
      input {
        background-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
        background-color: var(--color-primary-bd);
      }
    }
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-border-color: oklch(from var(--color-primary) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --check-border-color: var(--color-primary-bd-hover);
      --check-background: oklch(from var(--color-primary) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-primary-bg);
    }
    &:where(:has(:checked)) {
      --check-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-color: var(--color-primary-contrast);
      --check-border-color: var(--color-primary);
      --check-background: var(--color-primary);
    }
  }
}
.check-secondary {
  --check-input-border-color: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-secondary-bd-hover);
  --check-input-border-color-hover: var(--color-secondary);
  --check-input-background: oklch(from var(--color-secondary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-secondary-surface);
  --check-input-fill: var(--color-secondary);
  --check-outline-color: var(--color-secondary);
  --check-halo-color: var(--color-secondary);
  --check-indeterminate-bg: oklch(from var(--color-secondary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-secondary-bd);
  --check-indeterminate-bd: var(--color-secondary);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-secondary-contrast);
    --check-input-background: var(--color-secondary);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  &:where(.check-subtle) {
    --check-color: oklch(from var(--color-secondary) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-color: var(--color-secondary-body);
    --check-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-secondary-bg-hover);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-secondary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-secondary-bg-active);
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-secondary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-secondary-bg-active);
    }
  }
  &:where(.check-vivid) {
    --check-color: oklch(from var(--color-secondary) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-color: var(--color-secondary-body);
    --check-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-secondary-bg-hover);
    --check-input-background: transparent;
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-background: var(--color-secondary);
      --check-color: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-color: var(--color-secondary-contrast);
      --check-input-fill: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-input-fill: var(--color-secondary-contrast);
      &:where(:not(:has(:focus-visible))) {
        --check-input-border-color: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color: var(--color-secondary-contrast);
        --check-input-border-color-hover: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color-hover: var(--color-secondary-contrast);
      }
    }
    input:checked {
      outline-color: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      outline-color: var(--color-secondary-contrast);
    }
  }
  &:where(.check-ghost) {
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-secondary-bg-hover);
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-secondary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --check-background: var(--color-secondary-bg-active);
    }
  }
  &:where(.check-outline) {
    --check-border-color: oklch(from var(--color-secondary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-secondary-bd);
    --check-background: oklch(from var(--color-secondary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-secondary-surface);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-secondary) min(l, 0.74) c h);
      --check-background: oklch(from var(--color-secondary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-background: var(--color-secondary-surface);
      --check-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --check-color: var(--color-secondary-fg);
    }
  }
  &:where(.check-muted) {
    --check-border-color: oklch(from var(--color-secondary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-secondary-bd);
    --check-background: oklch(from var(--color-secondary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-secondary-surface);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-secondary) var(--light-threshold-bd-active) calc(var(--chorme-bd-active) * var(--color-c-factor)) h);
      --check-border-color: var(--color-secondary-bd-active);
      --check-background: oklch(from var(--color-secondary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-background: var(--color-secondary-surface);
    }
  }
  &:where(.check-tick) {
    --check-border-color: oklch(from var(--color-secondary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-secondary-bd);
    &:where(:not(:has(:checked))) {
      input {
        background-color: oklch(from var(--color-secondary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
        background-color: var(--color-secondary-bd);
      }
    }
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-border-color: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --check-border-color: var(--color-secondary-bd-hover);
      --check-background: oklch(from var(--color-secondary) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-secondary-bg);
    }
    &:where(:has(:checked)) {
      --check-color: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-color: var(--color-secondary-contrast);
      --check-border-color: var(--color-secondary);
      --check-background: var(--color-secondary);
    }
  }
}
.check-success {
  --check-input-border-color: oklch(from var(--color-success) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-success-bd-hover);
  --check-input-border-color-hover: var(--color-success);
  --check-input-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-success-surface);
  --check-input-fill: var(--color-success);
  --check-outline-color: var(--color-success);
  --check-halo-color: var(--color-success);
  --check-indeterminate-bg: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-success-bd);
  --check-indeterminate-bd: var(--color-success);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-success-contrast);
    --check-input-background: var(--color-success);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  &:where(.check-subtle) {
    --check-color: oklch(from var(--color-success) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-color: var(--color-success-body);
    --check-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-success-bg-hover);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-success) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-success-bg-active);
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-success) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-success-bg-active);
    }
  }
  &:where(.check-vivid) {
    --check-color: oklch(from var(--color-success) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-color: var(--color-success-body);
    --check-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-success-bg-hover);
    --check-input-background: transparent;
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-background: var(--color-success);
      --check-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-color: var(--color-success-contrast);
      --check-input-fill: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-input-fill: var(--color-success-contrast);
      &:where(:not(:has(:focus-visible))) {
        --check-input-border-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color: var(--color-success-contrast);
        --check-input-border-color-hover: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color-hover: var(--color-success-contrast);
      }
    }
    input:checked {
      outline-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      outline-color: var(--color-success-contrast);
    }
  }
  &:where(.check-ghost) {
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-success-bg-hover);
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-success) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --check-background: var(--color-success-bg-active);
    }
  }
  &:where(.check-outline) {
    --check-border-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-success-bd);
    --check-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-success-surface);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-success) min(l, 0.74) c h);
      --check-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-background: var(--color-success-surface);
      --check-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --check-color: var(--color-success-fg);
    }
  }
  &:where(.check-muted) {
    --check-border-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-success-bd);
    --check-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-success-surface);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-success) var(--light-threshold-bd-active) calc(var(--chorme-bd-active) * var(--color-c-factor)) h);
      --check-border-color: var(--color-success-bd-active);
      --check-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-background: var(--color-success-surface);
    }
  }
  &:where(.check-tick) {
    --check-border-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-success-bd);
    &:where(:not(:has(:checked))) {
      input {
        background-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
        background-color: var(--color-success-bd);
      }
    }
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-border-color: oklch(from var(--color-success) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --check-border-color: var(--color-success-bd-hover);
      --check-background: oklch(from var(--color-success) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-success-bg);
    }
    &:where(:has(:checked)) {
      --check-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-color: var(--color-success-contrast);
      --check-border-color: var(--color-success);
      --check-background: var(--color-success);
    }
  }
}
.check-tertiary {
  --check-input-border-color: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-tertiary-bd-hover);
  --check-input-border-color-hover: var(--color-tertiary);
  --check-input-background: oklch(from var(--color-tertiary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-tertiary-surface);
  --check-input-fill: var(--color-tertiary);
  --check-outline-color: var(--color-tertiary);
  --check-halo-color: var(--color-tertiary);
  --check-indeterminate-bg: oklch(from var(--color-tertiary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-tertiary-bd);
  --check-indeterminate-bd: var(--color-tertiary);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-tertiary-contrast);
    --check-input-background: var(--color-tertiary);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  &:where(.check-subtle) {
    --check-color: oklch(from var(--color-tertiary) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-color: var(--color-tertiary-body);
    --check-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-tertiary-bg-hover);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-tertiary-bg-active);
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-tertiary-bg-active);
    }
  }
  &:where(.check-vivid) {
    --check-color: oklch(from var(--color-tertiary) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-color: var(--color-tertiary-body);
    --check-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-tertiary-bg-hover);
    --check-input-background: transparent;
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-background: var(--color-tertiary);
      --check-color: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-color: var(--color-tertiary-contrast);
      --check-input-fill: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-input-fill: var(--color-tertiary-contrast);
      &:where(:not(:has(:focus-visible))) {
        --check-input-border-color: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color: var(--color-tertiary-contrast);
        --check-input-border-color-hover: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color-hover: var(--color-tertiary-contrast);
      }
    }
    input:checked {
      outline-color: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      outline-color: var(--color-tertiary-contrast);
    }
  }
  &:where(.check-ghost) {
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-tertiary-bg-hover);
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --check-background: var(--color-tertiary-bg-active);
    }
  }
  &:where(.check-outline) {
    --check-border-color: oklch(from var(--color-tertiary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-tertiary-bd);
    --check-background: oklch(from var(--color-tertiary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-tertiary-surface);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-tertiary) min(l, 0.74) c h);
      --check-background: oklch(from var(--color-tertiary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-background: var(--color-tertiary-surface);
      --check-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --check-color: var(--color-tertiary-fg);
    }
  }
  &:where(.check-muted) {
    --check-border-color: oklch(from var(--color-tertiary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-tertiary-bd);
    --check-background: oklch(from var(--color-tertiary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-tertiary-surface);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) calc(var(--chorme-bd-active) * var(--color-c-factor)) h);
      --check-border-color: var(--color-tertiary-bd-active);
      --check-background: oklch(from var(--color-tertiary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-background: var(--color-tertiary-surface);
    }
  }
  &:where(.check-tick) {
    --check-border-color: oklch(from var(--color-tertiary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-tertiary-bd);
    &:where(:not(:has(:checked))) {
      input {
        background-color: oklch(from var(--color-tertiary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
        background-color: var(--color-tertiary-bd);
      }
    }
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-border-color: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --check-border-color: var(--color-tertiary-bd-hover);
      --check-background: oklch(from var(--color-tertiary) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-tertiary-bg);
    }
    &:where(:has(:checked)) {
      --check-color: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-color: var(--color-tertiary-contrast);
      --check-border-color: var(--color-tertiary);
      --check-background: var(--color-tertiary);
    }
  }
}
.check-warning {
  --check-input-border-color: oklch(from var(--color-warning) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-warning-bd-hover);
  --check-input-border-color-hover: var(--color-warning);
  --check-input-background: oklch(from var(--color-warning) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-warning-surface);
  --check-input-fill: var(--color-warning);
  --check-outline-color: var(--color-warning);
  --check-halo-color: var(--color-warning);
  --check-indeterminate-bg: oklch(from var(--color-warning) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-warning-bd);
  --check-indeterminate-bd: var(--color-warning);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-warning-contrast);
    --check-input-background: var(--color-warning);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  &:where(.check-subtle) {
    --check-color: oklch(from var(--color-warning) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-color: var(--color-warning-body);
    --check-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-warning-bg-hover);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-warning) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-warning-bg-active);
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-warning) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-warning-bg-active);
    }
  }
  &:where(.check-vivid) {
    --check-color: oklch(from var(--color-warning) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-color: var(--color-warning-body);
    --check-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-warning-bg-hover);
    --check-input-background: transparent;
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-background: var(--color-warning);
      --check-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-color: var(--color-warning-contrast);
      --check-input-fill: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-input-fill: var(--color-warning-contrast);
      &:where(:not(:has(:focus-visible))) {
        --check-input-border-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color: var(--color-warning-contrast);
        --check-input-border-color-hover: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color-hover: var(--color-warning-contrast);
      }
    }
    input:checked {
      outline-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      outline-color: var(--color-warning-contrast);
    }
  }
  &:where(.check-ghost) {
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-warning-bg-hover);
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-warning) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --check-background: var(--color-warning-bg-active);
    }
  }
  &:where(.check-outline) {
    --check-border-color: oklch(from var(--color-warning) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-warning-bd);
    --check-background: oklch(from var(--color-warning) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-warning-surface);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-warning) min(l, 0.74) c h);
      --check-background: oklch(from var(--color-warning) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-background: var(--color-warning-surface);
      --check-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --check-color: var(--color-warning-fg);
    }
  }
  &:where(.check-muted) {
    --check-border-color: oklch(from var(--color-warning) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-warning-bd);
    --check-background: oklch(from var(--color-warning) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-warning-surface);
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-warning) var(--light-threshold-bd-active) calc(var(--chorme-bd-active) * var(--color-c-factor)) h);
      --check-border-color: var(--color-warning-bd-active);
      --check-background: oklch(from var(--color-warning) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-background: var(--color-warning-surface);
    }
  }
  &:where(.check-tick) {
    --check-border-color: oklch(from var(--color-warning) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-border-color: var(--color-warning-bd);
    &:where(:not(:has(:checked))) {
      input {
        background-color: oklch(from var(--color-warning) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
        background-color: var(--color-warning-bd);
      }
    }
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-border-color: oklch(from var(--color-warning) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --check-border-color: var(--color-warning-bd-hover);
      --check-background: oklch(from var(--color-warning) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --check-background: var(--color-warning-bg);
    }
    &:where(:has(:checked)) {
      --check-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-color: var(--color-warning-contrast);
      --check-border-color: var(--color-warning);
      --check-background: var(--color-warning);
    }
  }
}
.check-blue-100 {
  --check-input-border-color: oklch(from var(--color-blue-100) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color-hover: var(--color-blue-100);
  --check-input-background: oklch(from var(--color-blue-100) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-fill: var(--color-blue-100);
  --check-outline-color: var(--color-blue-100);
  --check-halo-color: var(--color-blue-100);
  --check-indeterminate-bg: oklch(from var(--color-blue-100) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bd: var(--color-blue-100);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-blue-100) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-background: var(--color-blue-100);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  &:where(.check-subtle) {
    --check-color: oklch(from var(--color-blue-100) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-background: oklch(from var(--color-blue-100) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-blue-100) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-blue-100) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
  }
  &:where(.check-vivid) {
    --check-color: oklch(from var(--color-blue-100) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-background: oklch(from var(--color-blue-100) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-input-background: transparent;
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-background: var(--color-blue-100);
      --check-color: oklch(from var(--color-blue-100) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-input-fill: oklch(from var(--color-blue-100) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      &:where(:not(:has(:focus-visible))) {
        --check-input-border-color: oklch(from var(--color-blue-100) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color-hover: oklch(from var(--color-blue-100) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      }
    }
    input:checked {
      outline-color: oklch(from var(--color-blue-100) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    }
  }
  &:where(.check-ghost) {
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-blue-100) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-blue-100) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    }
  }
  &:where(.check-outline) {
    --check-border-color: oklch(from var(--color-blue-100) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-background: oklch(from var(--color-blue-100) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-blue-100) min(l, 0.74) c h);
      --check-background: oklch(from var(--color-blue-100) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-color: oklch(from var(--color-blue-100) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    }
  }
  &:where(.check-muted) {
    --check-border-color: oklch(from var(--color-blue-100) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-background: oklch(from var(--color-blue-100) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-blue-100) var(--light-threshold-bd-active) calc(var(--chorme-bd-active) * var(--color-c-factor)) h);
      --check-background: oklch(from var(--color-blue-100) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    }
  }
  &:where(.check-tick) {
    --check-border-color: oklch(from var(--color-blue-100) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    &:where(:not(:has(:checked))) {
      input {
        background-color: oklch(from var(--color-blue-100) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
      }
    }
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-border-color: oklch(from var(--color-blue-100) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --check-background: oklch(from var(--color-blue-100) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
    &:where(:has(:checked)) {
      --check-color: oklch(from var(--color-blue-100) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-border-color: var(--color-blue-100);
      --check-background: var(--color-blue-100);
    }
  }
}
.check-blue-500 {
  --check-input-border-color: oklch(from var(--color-blue-500) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color-hover: var(--color-blue-500);
  --check-input-background: oklch(from var(--color-blue-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-fill: var(--color-blue-500);
  --check-outline-color: var(--color-blue-500);
  --check-halo-color: var(--color-blue-500);
  --check-indeterminate-bg: oklch(from var(--color-blue-500) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bd: var(--color-blue-500);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-blue-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-background: var(--color-blue-500);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  &:where(.check-subtle) {
    --check-color: oklch(from var(--color-blue-500) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-background: oklch(from var(--color-blue-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-blue-500) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-blue-500) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
  }
  &:where(.check-vivid) {
    --check-color: oklch(from var(--color-blue-500) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-background: oklch(from var(--color-blue-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-input-background: transparent;
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-background: var(--color-blue-500);
      --check-color: oklch(from var(--color-blue-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-input-fill: oklch(from var(--color-blue-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      &:where(:not(:has(:focus-visible))) {
        --check-input-border-color: oklch(from var(--color-blue-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color-hover: oklch(from var(--color-blue-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      }
    }
    input:checked {
      outline-color: oklch(from var(--color-blue-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    }
  }
  &:where(.check-ghost) {
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-blue-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-blue-500) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    }
  }
  &:where(.check-outline) {
    --check-border-color: oklch(from var(--color-blue-500) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-background: oklch(from var(--color-blue-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-blue-500) min(l, 0.74) c h);
      --check-background: oklch(from var(--color-blue-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-color: oklch(from var(--color-blue-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    }
  }
  &:where(.check-muted) {
    --check-border-color: oklch(from var(--color-blue-500) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-background: oklch(from var(--color-blue-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-blue-500) var(--light-threshold-bd-active) calc(var(--chorme-bd-active) * var(--color-c-factor)) h);
      --check-background: oklch(from var(--color-blue-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    }
  }
  &:where(.check-tick) {
    --check-border-color: oklch(from var(--color-blue-500) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    &:where(:not(:has(:checked))) {
      input {
        background-color: oklch(from var(--color-blue-500) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
      }
    }
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-border-color: oklch(from var(--color-blue-500) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --check-background: oklch(from var(--color-blue-500) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
    &:where(:has(:checked)) {
      --check-color: oklch(from var(--color-blue-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-border-color: var(--color-blue-500);
      --check-background: var(--color-blue-500);
    }
  }
}
.check-blue-800 {
  --check-input-border-color: oklch(from var(--color-blue-800) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color-hover: var(--color-blue-800);
  --check-input-background: oklch(from var(--color-blue-800) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-fill: var(--color-blue-800);
  --check-outline-color: var(--color-blue-800);
  --check-halo-color: var(--color-blue-800);
  --check-indeterminate-bg: oklch(from var(--color-blue-800) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bd: var(--color-blue-800);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-blue-800) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-background: var(--color-blue-800);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  &:where(.check-subtle) {
    --check-color: oklch(from var(--color-blue-800) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-background: oklch(from var(--color-blue-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-blue-800) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-blue-800) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
  }
  &:where(.check-vivid) {
    --check-color: oklch(from var(--color-blue-800) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --check-background: oklch(from var(--color-blue-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-input-background: transparent;
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-background: var(--color-blue-800);
      --check-color: oklch(from var(--color-blue-800) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-input-fill: oklch(from var(--color-blue-800) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      &:where(:not(:has(:focus-visible))) {
        --check-input-border-color: oklch(from var(--color-blue-800) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
        --check-input-border-color-hover: oklch(from var(--color-blue-800) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      }
    }
    input:checked {
      outline-color: oklch(from var(--color-blue-800) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    }
  }
  &:where(.check-ghost) {
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: oklch(from var(--color-blue-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
    &:where(:has(:checked)) {
      --check-background: oklch(from var(--color-blue-800) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    }
  }
  &:where(.check-outline) {
    --check-border-color: oklch(from var(--color-blue-800) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-background: oklch(from var(--color-blue-800) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-blue-800) min(l, 0.74) c h);
      --check-background: oklch(from var(--color-blue-800) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
      --check-color: oklch(from var(--color-blue-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    }
  }
  &:where(.check-muted) {
    --check-border-color: oklch(from var(--color-blue-800) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --check-background: oklch(from var(--color-blue-800) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: oklch(from var(--color-blue-800) var(--light-threshold-bd-active) calc(var(--chorme-bd-active) * var(--color-c-factor)) h);
      --check-background: oklch(from var(--color-blue-800) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    }
  }
  &:where(.check-tick) {
    --check-border-color: oklch(from var(--color-blue-800) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    &:where(:not(:has(:checked))) {
      input {
        background-color: oklch(from var(--color-blue-800) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
      }
    }
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-border-color: oklch(from var(--color-blue-800) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --check-background: oklch(from var(--color-blue-800) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
    &:where(:has(:checked)) {
      --check-color: oklch(from var(--color-blue-800) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-border-color: var(--color-blue-800);
      --check-background: var(--color-blue-800);
    }
  }
}
.input-ghost-caption {
  --input-border-color: transparent;
  --input-border-color-hover: transparent;
  --input-border-color-focus: oklch(from var(--color-caption-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: transparent;
  --input-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-caption-fg);
  --input-background-hover: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-caption-bg-hover);
  --input-background-focus: var(--input-background-hover);
  --input-background-invalid: var(--color-error-bg-hover);
  --input-border-width: 0;
  --input-outline-width: 2px;
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-ghost-caution {
  --input-border-color: transparent;
  --input-border-color-hover: transparent;
  --input-border-color-focus: oklch(from var(--color-caution-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: transparent;
  --input-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-caution-fg);
  --input-background-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-caution-bg-hover);
  --input-background-focus: var(--input-background-hover);
  --input-background-invalid: var(--color-error-bg-hover);
  --input-border-width: 0;
  --input-outline-width: 2px;
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-ghost-description {
  --input-border-color: transparent;
  --input-border-color-hover: transparent;
  --input-border-color-focus: oklch(from var(--color-description-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: transparent;
  --input-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-description-fg);
  --input-background-hover: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-description-bg-hover);
  --input-background-focus: var(--input-background-hover);
  --input-background-invalid: var(--color-error-bg-hover);
  --input-border-width: 0;
  --input-outline-width: 2px;
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-ghost-error {
  --input-border-color: transparent;
  --input-border-color-hover: transparent;
  --input-border-color-focus: oklch(from var(--color-error-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: transparent;
  --input-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-error-fg);
  --input-background-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-error-bg-hover);
  --input-background-focus: var(--input-background-hover);
  --input-background-invalid: var(--color-error-bg-hover);
  --input-border-width: 0;
  --input-outline-width: 2px;
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-ghost-highlight {
  --input-border-color: transparent;
  --input-border-color-hover: transparent;
  --input-border-color-focus: oklch(from var(--color-highlight-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: transparent;
  --input-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-highlight-fg);
  --input-background-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-highlight-bg-hover);
  --input-background-focus: var(--input-background-hover);
  --input-background-invalid: var(--color-error-bg-hover);
  --input-border-width: 0;
  --input-outline-width: 2px;
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-ghost-info {
  --input-border-color: transparent;
  --input-border-color-hover: transparent;
  --input-border-color-focus: oklch(from var(--color-info-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: transparent;
  --input-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-info-fg);
  --input-background-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-info-bg-hover);
  --input-background-focus: var(--input-background-hover);
  --input-background-invalid: var(--color-error-bg-hover);
  --input-border-width: 0;
  --input-outline-width: 2px;
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-ghost-ink {
  --input-border-color: transparent;
  --input-border-color-hover: transparent;
  --input-border-color-focus: oklch(from var(--color-ink-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: transparent;
  --input-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-ink-fg);
  --input-background-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-ink-bg-hover);
  --input-background-focus: var(--input-background-hover);
  --input-background-invalid: var(--color-error-bg-hover);
  --input-border-width: 0;
  --input-outline-width: 2px;
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-ghost-placeholder {
  --input-border-color: transparent;
  --input-border-color-hover: transparent;
  --input-border-color-focus: oklch(from var(--color-placeholder-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: transparent;
  --input-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-placeholder-fg);
  --input-background-hover: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-placeholder-bg-hover);
  --input-background-focus: var(--input-background-hover);
  --input-background-invalid: var(--color-error-bg-hover);
  --input-border-width: 0;
  --input-outline-width: 2px;
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-ghost-primary {
  --input-border-color: transparent;
  --input-border-color-hover: transparent;
  --input-border-color-focus: oklch(from var(--color-primary-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: transparent;
  --input-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-primary-fg);
  --input-background-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-primary-bg-hover);
  --input-background-focus: var(--input-background-hover);
  --input-background-invalid: var(--color-error-bg-hover);
  --input-border-width: 0;
  --input-outline-width: 2px;
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-ghost-secondary {
  --input-border-color: transparent;
  --input-border-color-hover: transparent;
  --input-border-color-focus: oklch(from var(--color-secondary-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: transparent;
  --input-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-secondary-fg);
  --input-background-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-secondary-bg-hover);
  --input-background-focus: var(--input-background-hover);
  --input-background-invalid: var(--color-error-bg-hover);
  --input-border-width: 0;
  --input-outline-width: 2px;
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-ghost-success {
  --input-border-color: transparent;
  --input-border-color-hover: transparent;
  --input-border-color-focus: oklch(from var(--color-success-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: transparent;
  --input-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-success-fg);
  --input-background-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-success-bg-hover);
  --input-background-focus: var(--input-background-hover);
  --input-background-invalid: var(--color-error-bg-hover);
  --input-border-width: 0;
  --input-outline-width: 2px;
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-ghost-tertiary {
  --input-border-color: transparent;
  --input-border-color-hover: transparent;
  --input-border-color-focus: oklch(from var(--color-tertiary-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: transparent;
  --input-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-tertiary-fg);
  --input-background-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-tertiary-bg-hover);
  --input-background-focus: var(--input-background-hover);
  --input-background-invalid: var(--color-error-bg-hover);
  --input-border-width: 0;
  --input-outline-width: 2px;
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-ghost-title {
  --input-border-color: transparent;
  --input-border-color-hover: transparent;
  --input-border-color-focus: oklch(from var(--color-title-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: transparent;
  --input-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-title-fg);
  --input-background-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-title-bg-hover);
  --input-background-focus: var(--input-background-hover);
  --input-background-invalid: var(--color-error-bg-hover);
  --input-border-width: 0;
  --input-outline-width: 2px;
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-ghost-warning {
  --input-border-color: transparent;
  --input-border-color-hover: transparent;
  --input-border-color-focus: oklch(from var(--color-warning-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: transparent;
  --input-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-warning-fg);
  --input-background-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-warning-bg-hover);
  --input-background-focus: var(--input-background-hover);
  --input-background-invalid: var(--color-error-bg-hover);
  --input-border-width: 0;
  --input-outline-width: 2px;
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-ghost-\[\#ff0000\] {
  --input-border-color: transparent;
  --input-border-color-hover: transparent;
  --input-border-color-focus: oklch(from #ff0000 min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: transparent;
  --input-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background-hover: oklch(from #ff0000 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-focus: var(--input-background-hover);
  --input-background-invalid: var(--color-error-bg-hover);
  --input-border-width: 0;
  --input-outline-width: 2px;
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-ghost-teal-500 {
  --input-border-color: transparent;
  --input-border-color-hover: transparent;
  --input-border-color-focus: oklch(from var(--color-teal-500) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: transparent;
  --input-color: oklch(from var(--color-teal-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background-hover: oklch(from var(--color-teal-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-focus: var(--input-background-hover);
  --input-background-invalid: var(--color-error-bg-hover);
  --input-border-width: 0;
  --input-outline-width: 2px;
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-muted-caption {
  --input-border-color: oklch(from var(--color-caption) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color: var(--color-caption-bd);
  --input-border-color-hover: oklch(from var(--color-caption-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-background: var(--color-caption-surface);
  --input-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-*-fg);
  --input-border-color-focus: var(--color-caption);
  --input-option-bg-checked: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-caption-bg-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-muted-caution {
  --input-border-color: oklch(from var(--color-caution) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color: var(--color-caution-bd);
  --input-border-color-hover: oklch(from var(--color-caution-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-background: var(--color-caution-surface);
  --input-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-*-fg);
  --input-border-color-focus: var(--color-caution);
  --input-option-bg-checked: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-caution-bg-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-muted-description {
  --input-border-color: oklch(from var(--color-description) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color: var(--color-description-bd);
  --input-border-color-hover: oklch(from var(--color-description-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-background: var(--color-description-surface);
  --input-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-*-fg);
  --input-border-color-focus: var(--color-description);
  --input-option-bg-checked: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-description-bg-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-muted-error {
  --input-border-color: oklch(from var(--color-error) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color: var(--color-error-bd);
  --input-border-color-hover: oklch(from var(--color-error-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-background: var(--color-error-surface);
  --input-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-*-fg);
  --input-border-color-focus: var(--color-error);
  --input-option-bg-checked: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-error-bg-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-muted-highlight {
  --input-border-color: oklch(from var(--color-highlight) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color: var(--color-highlight-bd);
  --input-border-color-hover: oklch(from var(--color-highlight-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-background: var(--color-highlight-surface);
  --input-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-*-fg);
  --input-border-color-focus: var(--color-highlight);
  --input-option-bg-checked: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-highlight-bg-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-muted-info {
  --input-border-color: oklch(from var(--color-info) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color: var(--color-info-bd);
  --input-border-color-hover: oklch(from var(--color-info-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-background: var(--color-info-surface);
  --input-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-*-fg);
  --input-border-color-focus: var(--color-info);
  --input-option-bg-checked: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-info-bg-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-muted-ink {
  --input-border-color: oklch(from var(--color-ink) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color: var(--color-ink-bd);
  --input-border-color-hover: oklch(from var(--color-ink-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-background: var(--color-ink-surface);
  --input-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-*-fg);
  --input-border-color-focus: var(--color-ink);
  --input-option-bg-checked: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-ink-bg-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-muted-placeholder {
  --input-border-color: oklch(from var(--color-placeholder) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color: var(--color-placeholder-bd);
  --input-border-color-hover: oklch(from var(--color-placeholder-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-background: var(--color-placeholder-surface);
  --input-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-*-fg);
  --input-border-color-focus: var(--color-placeholder);
  --input-option-bg-checked: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-placeholder-bg-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-muted-primary {
  --input-border-color: oklch(from var(--color-primary) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color: var(--color-primary-bd);
  --input-border-color-hover: oklch(from var(--color-primary-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-background: var(--color-primary-surface);
  --input-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-*-fg);
  --input-border-color-focus: var(--color-primary);
  --input-option-bg-checked: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-primary-bg-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-muted-secondary {
  --input-border-color: oklch(from var(--color-secondary) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color: var(--color-secondary-bd);
  --input-border-color-hover: oklch(from var(--color-secondary-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-background: var(--color-secondary-surface);
  --input-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-*-fg);
  --input-border-color-focus: var(--color-secondary);
  --input-option-bg-checked: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-secondary-bg-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-muted-success {
  --input-border-color: oklch(from var(--color-success) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color: var(--color-success-bd);
  --input-border-color-hover: oklch(from var(--color-success-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-background: var(--color-success-surface);
  --input-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-*-fg);
  --input-border-color-focus: var(--color-success);
  --input-option-bg-checked: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-success-bg-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-muted-tertiary {
  --input-border-color: oklch(from var(--color-tertiary) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color: var(--color-tertiary-bd);
  --input-border-color-hover: oklch(from var(--color-tertiary-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-background: var(--color-tertiary-surface);
  --input-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-*-fg);
  --input-border-color-focus: var(--color-tertiary);
  --input-option-bg-checked: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-tertiary-bg-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-muted-title {
  --input-border-color: oklch(from var(--color-title) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color: var(--color-title-bd);
  --input-border-color-hover: oklch(from var(--color-title-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-background: var(--color-title-surface);
  --input-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-*-fg);
  --input-border-color-focus: var(--color-title);
  --input-option-bg-checked: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-title-bg-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-muted-warning {
  --input-border-color: oklch(from var(--color-warning) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color: var(--color-warning-bd);
  --input-border-color-hover: oklch(from var(--color-warning-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-background: var(--color-warning-surface);
  --input-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-*-fg);
  --input-border-color-focus: var(--color-warning);
  --input-option-bg-checked: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--color-warning-bg-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.input-outline-caption {
  --input-border-color: oklch(from var(--color-caption-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-caption) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --input-background: var(--color-caption-surface);
  --input-background-hover: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-caption-bg-hover);
  --input-border-color-hover: var(--input-border-color);
  --input-border-color-focus: var(--input-border-color);
  --input-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-caption-fg);
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
    --input-background: var(--input-background-hover);
  }
}
.input-outline-caution {
  --input-border-color: oklch(from var(--color-caution-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-caution) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --input-background: var(--color-caution-surface);
  --input-background-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-caution-bg-hover);
  --input-border-color-hover: var(--input-border-color);
  --input-border-color-focus: var(--input-border-color);
  --input-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-caution-fg);
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
    --input-background: var(--input-background-hover);
  }
}
.input-outline-description {
  --input-border-color: oklch(from var(--color-description-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-description) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --input-background: var(--color-description-surface);
  --input-background-hover: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-description-bg-hover);
  --input-border-color-hover: var(--input-border-color);
  --input-border-color-focus: var(--input-border-color);
  --input-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-description-fg);
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
    --input-background: var(--input-background-hover);
  }
}
.input-outline-error {
  --input-border-color: oklch(from var(--color-error-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --input-background: var(--color-error-surface);
  --input-background-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-error-bg-hover);
  --input-border-color-hover: var(--input-border-color);
  --input-border-color-focus: var(--input-border-color);
  --input-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-error-fg);
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
    --input-background: var(--input-background-hover);
  }
}
.input-outline-highlight {
  --input-border-color: oklch(from var(--color-highlight-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-highlight) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --input-background: var(--color-highlight-surface);
  --input-background-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-highlight-bg-hover);
  --input-border-color-hover: var(--input-border-color);
  --input-border-color-focus: var(--input-border-color);
  --input-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-highlight-fg);
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
    --input-background: var(--input-background-hover);
  }
}
.input-outline-info {
  --input-border-color: oklch(from var(--color-info-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-info) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --input-background: var(--color-info-surface);
  --input-background-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-info-bg-hover);
  --input-border-color-hover: var(--input-border-color);
  --input-border-color-focus: var(--input-border-color);
  --input-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-info-fg);
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
    --input-background: var(--input-background-hover);
  }
}
.input-outline-ink {
  --input-border-color: oklch(from var(--color-ink-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-ink) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --input-background: var(--color-ink-surface);
  --input-background-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-ink-bg-hover);
  --input-border-color-hover: var(--input-border-color);
  --input-border-color-focus: var(--input-border-color);
  --input-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-ink-fg);
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
    --input-background: var(--input-background-hover);
  }
}
.input-outline-placeholder {
  --input-border-color: oklch(from var(--color-placeholder-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-placeholder) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --input-background: var(--color-placeholder-surface);
  --input-background-hover: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-placeholder-bg-hover);
  --input-border-color-hover: var(--input-border-color);
  --input-border-color-focus: var(--input-border-color);
  --input-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-placeholder-fg);
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
    --input-background: var(--input-background-hover);
  }
}
.input-outline-primary {
  --input-border-color: oklch(from var(--color-primary-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --input-background: var(--color-primary-surface);
  --input-background-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-primary-bg-hover);
  --input-border-color-hover: var(--input-border-color);
  --input-border-color-focus: var(--input-border-color);
  --input-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-primary-fg);
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
    --input-background: var(--input-background-hover);
  }
}
.input-outline-secondary {
  --input-border-color: oklch(from var(--color-secondary-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-secondary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --input-background: var(--color-secondary-surface);
  --input-background-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-secondary-bg-hover);
  --input-border-color-hover: var(--input-border-color);
  --input-border-color-focus: var(--input-border-color);
  --input-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-secondary-fg);
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
    --input-background: var(--input-background-hover);
  }
}
.input-outline-success {
  --input-border-color: oklch(from var(--color-success-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --input-background: var(--color-success-surface);
  --input-background-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-success-bg-hover);
  --input-border-color-hover: var(--input-border-color);
  --input-border-color-focus: var(--input-border-color);
  --input-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-success-fg);
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
    --input-background: var(--input-background-hover);
  }
}
.input-outline-tertiary {
  --input-border-color: oklch(from var(--color-tertiary-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-tertiary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --input-background: var(--color-tertiary-surface);
  --input-background-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-tertiary-bg-hover);
  --input-border-color-hover: var(--input-border-color);
  --input-border-color-focus: var(--input-border-color);
  --input-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-tertiary-fg);
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
    --input-background: var(--input-background-hover);
  }
}
.input-outline-title {
  --input-border-color: oklch(from var(--color-title-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-title) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --input-background: var(--color-title-surface);
  --input-background-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-title-bg-hover);
  --input-border-color-hover: var(--input-border-color);
  --input-border-color-focus: var(--input-border-color);
  --input-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-title-fg);
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
    --input-background: var(--input-background-hover);
  }
}
.input-outline-warning {
  --input-border-color: oklch(from var(--color-warning-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-warning) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --input-background: var(--color-warning-surface);
  --input-background-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background-hover: var(--color-warning-bg-hover);
  --input-border-color-hover: var(--input-border-color);
  --input-border-color-focus: var(--input-border-color);
  --input-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-color: var(--color-warning-fg);
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
    --input-background: var(--input-background-hover);
  }
}
.input-subtle-caption {
  --input-border-color: transparent;
  --input-border-color-hover: oklch(from var(--color-caption-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-color: oklch(from var(--color-caption-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background: var(--color-caption-bg-hover);
  --input-option-bg-checked: var(--input-background);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-border-color: var(--input-border-color-focus);
  }
}
.input-subtle-caution {
  --input-border-color: transparent;
  --input-border-color-hover: oklch(from var(--color-caution-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-color: oklch(from var(--color-caution-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background: var(--color-caution-bg-hover);
  --input-option-bg-checked: var(--input-background);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-border-color: var(--input-border-color-focus);
  }
}
.input-subtle-description {
  --input-border-color: transparent;
  --input-border-color-hover: oklch(from var(--color-description-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-color: oklch(from var(--color-description-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background: var(--color-description-bg-hover);
  --input-option-bg-checked: var(--input-background);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-border-color: var(--input-border-color-focus);
  }
}
.input-subtle-error {
  --input-border-color: transparent;
  --input-border-color-hover: oklch(from var(--color-error-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-color: oklch(from var(--color-error-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background: var(--color-error-bg-hover);
  --input-option-bg-checked: var(--input-background);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-border-color: var(--input-border-color-focus);
  }
}
.input-subtle-highlight {
  --input-border-color: transparent;
  --input-border-color-hover: oklch(from var(--color-highlight-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-color: oklch(from var(--color-highlight-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background: var(--color-highlight-bg-hover);
  --input-option-bg-checked: var(--input-background);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-border-color: var(--input-border-color-focus);
  }
}
.input-subtle-info {
  --input-border-color: transparent;
  --input-border-color-hover: oklch(from var(--color-info-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-color: oklch(from var(--color-info-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background: var(--color-info-bg-hover);
  --input-option-bg-checked: var(--input-background);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-border-color: var(--input-border-color-focus);
  }
}
.input-subtle-ink {
  --input-border-color: transparent;
  --input-border-color-hover: oklch(from var(--color-ink-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-color: oklch(from var(--color-ink-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background: var(--color-ink-bg-hover);
  --input-option-bg-checked: var(--input-background);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-border-color: var(--input-border-color-focus);
  }
}
.input-subtle-placeholder {
  --input-border-color: transparent;
  --input-border-color-hover: oklch(from var(--color-placeholder-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-color: oklch(from var(--color-placeholder-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background: var(--color-placeholder-bg-hover);
  --input-option-bg-checked: var(--input-background);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-border-color: var(--input-border-color-focus);
  }
}
.input-subtle-primary {
  --input-border-color: transparent;
  --input-border-color-hover: oklch(from var(--color-primary-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-color: oklch(from var(--color-primary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background: var(--color-primary-bg-hover);
  --input-option-bg-checked: var(--input-background);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-border-color: var(--input-border-color-focus);
  }
}
.input-subtle-secondary {
  --input-border-color: transparent;
  --input-border-color-hover: oklch(from var(--color-secondary-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-color: oklch(from var(--color-secondary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background: var(--color-secondary-bg-hover);
  --input-option-bg-checked: var(--input-background);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-border-color: var(--input-border-color-focus);
  }
}
.input-subtle-success {
  --input-border-color: transparent;
  --input-border-color-hover: oklch(from var(--color-success-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-color: oklch(from var(--color-success-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background: var(--color-success-bg-hover);
  --input-option-bg-checked: var(--input-background);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-border-color: var(--input-border-color-focus);
  }
}
.input-subtle-tertiary {
  --input-border-color: transparent;
  --input-border-color-hover: oklch(from var(--color-tertiary-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-color: oklch(from var(--color-tertiary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background: var(--color-tertiary-bg-hover);
  --input-option-bg-checked: var(--input-background);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-border-color: var(--input-border-color-focus);
  }
}
.input-subtle-title {
  --input-border-color: transparent;
  --input-border-color-hover: oklch(from var(--color-title-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-color: oklch(from var(--color-title-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background: var(--color-title-bg-hover);
  --input-option-bg-checked: var(--input-background);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-border-color: var(--input-border-color-focus);
  }
}
.input-subtle-warning {
  --input-border-color: transparent;
  --input-border-color-hover: oklch(from var(--color-warning-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-color: oklch(from var(--color-warning-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-background: var(--color-warning-bg-hover);
  --input-option-bg-checked: var(--input-background);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-border-color: var(--input-border-color-focus);
  }
}
.input-outline-teal-500 {
  --input-border-color: oklch(from var(--color-teal-500) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-teal-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --input-background-hover: oklch(from var(--color-teal-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-border-color-hover: var(--input-border-color);
  --input-border-color-focus: var(--input-border-color);
  --input-color: oklch(from var(--color-teal-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-option-bg-checked: var(--input-background-hover);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover), &:where(:not([disabled]):focus-visible) {
    --input-background: var(--input-background-hover);
  }
}
.input-subtle-\[\#ff0000\] {
  --input-border-color: transparent;
  --input-border-color-hover: oklch(from #ff0000 min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from #ff0000 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--input-background);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-border-color: var(--input-border-color-focus);
  }
}
.input-subtle-teal-500 {
  --input-border-color: transparent;
  --input-border-color-hover: oklch(from var(--color-teal-500) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-border-color-focus: var(--input-border-color-hover);
  --input-color: oklch(from var(--color-teal-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --input-background: oklch(from var(--color-teal-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --input-option-bg-checked: var(--input-background);
  @supports (appearance: base-select) {
    &:where(select[multiple]) {
      background-color: transparent;
    }
  }
  &:where([readonly]) {
    --input-color-readonly: oklch(from var(--input-color) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:not([disabled]):focus-visible) {
    --input-border-color: var(--input-border-color-focus);
  }
}
.input-outline {
  :where(&) {
    --input-border-color: var(--color-title);
    --input-border-color-hover: var(--input-border-color);
    --input-background: var(--color-title-surface);
    --input-background-hover: var(--color-title-bg-hover);
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-background: var(--color-title-bg-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-background: var(--color-title-bg-hover);
      --input-border-color: var(--input-border-color-focus);
    }
  }
}
.input-ghost {
  :where(&) {
    --input-border-color: transparent;
    --input-border-color-hover: transparent;
    --input-background: transparent;
    &:where([placeholder]:not(:placeholder-shown)), &:where(:not([disabled]):hover) {
      --input-background: var(--color-title-bg-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --input-background: var(--color-title-bg-hover);
      --input-border-color: var(--input-border-color-focus);
    }
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
  }
}
.entry-outline {
  --entry-padding-x: calc(var(--entry-height)/3);
  --entry-border-color: var(--color-title);
  --entry-border-width: 1px;
  &:where(.entry-multiline) {
    --entry-padding-x: 1em;
  }
  background-color: var(--color-title-surface);
  border: var(--entry-border-width) solid var(--entry-border-color);
}
.tools-plain {
  --tools-padding-x: 0;
  --tools-height: auto;
  &:where(:not(.tools-v)) {
    --tools-gap: 1em;
  }
  >*:hover {
    background-color: transparent;
    text-decoration: underline;
  }
}
.code-plain {
  :where(&) {
    --code-color: currentColor;
    --code-padding-x: 0;
    --code-border-radius: 0;
    background-color: transparent;
  }
}
.input-subtle {
  :where(&) {
    --input-border-color: var(--color-title-bg-hover);
    --input-background: var(--color-title-bg-hover);
    &:where(:not([disabled]):focus-visible) {
      --input-border-color: var(--input-border-color-focus);
    }
    @supports (appearance: base-select) {
      &:where(select[multiple]) {
        background-color: transparent;
      }
    }
  }
}
.pre-plain {
  :where(&) {
    --pre-color: currentColor;
    --pre-padding: 0;
    --pre-border-radius: 0;
    background-color: transparent;
  }
}
.entry-ghost {
  --entry-padding-x: calc(var(--entry-height)/3);
  &:where(:not(.entry-disabled)):hover {
    background-color: var(--color-title-bg);
  }
}
.entry-subtle {
  --entry-padding-x: calc(var(--entry-height)/3);
  background-color: var(--color-title-bg);
}
.table-selected {
  --: ;
  &:where(tr, td, th) {
    background-color: var(--table-color-select);
  }
}
.table-stripe {
  --: ;
  :where(tbody tr:not(.table-disabled, .table-selected):nth-child(odd)) {
    background-color: var(--table-color-stripe);
  }
}
.table-stripe-even {
  --: ;
  :where(tbody tr:not(.table-disabled, .table-selected):nth-child(even)) {
    background-color: var(--table-color-stripe);
  }
}
.bg-\[\#ff00ff\] {
  background-color: #ff00ff;
}
.bg-amber-500 {
  background-color: var(--color-amber-500);
}
.bg-black\/40 {
  background-color: color-mix(in srgb, #000 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
  }
}
.bg-blue-500 {
  background-color: var(--color-blue-500);
}
.bg-emerald-500 {
  background-color: var(--color-emerald-500);
}
.bg-error {
  background-color: var(--color-error);
}
.bg-fuchsia-500 {
  background-color: var(--color-fuchsia-500);
}
.bg-green-500 {
  background-color: var(--color-green-500);
}
.bg-indigo-500 {
  background-color: var(--color-indigo-500);
}
.bg-info {
  background-color: var(--color-info);
}
.bg-lime-500 {
  background-color: var(--color-lime-500);
}
.bg-orange-500 {
  background-color: var(--color-orange-500);
}
.bg-pink-500 {
  background-color: var(--color-pink-500);
}
.bg-primary {
  background-color: var(--color-primary);
}
.bg-primary-bg {
  background-color: var(--color-primary-bg);
}
.bg-purple-500 {
  background-color: var(--color-purple-500);
}
.bg-red-500 {
  background-color: var(--color-red-500);
}
.bg-rose-100 {
  background-color: var(--color-rose-100);
}
.bg-rose-500 {
  background-color: var(--color-rose-500);
}
.bg-sky-100 {
  background-color: var(--color-sky-100);
}
.bg-sky-500 {
  background-color: var(--color-sky-500);
}
.bg-success {
  background-color: var(--color-success);
}
.bg-teal-500 {
  background-color: var(--color-teal-500);
}
.bg-title-bd {
  background-color: var(--color-title-bd);
}
.bg-transparent {
  background-color: transparent;
}
.bg-violet-500 {
  background-color: var(--color-violet-500);
}
.bg-warning {
  background-color: var(--color-warning);
}
.bg-yellow-500 {
  background-color: var(--color-yellow-500);
}
.table-hoverable {
  :where(tbody tr:not(.table-selected, .table-disabled):hover) {
    background-color: var(--table-color-hover);
  }
}
.bg-gradient-to-br {
  --tw-gradient-position: to bottom right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}
.gilt {
  --gilt-angle: 105;
  --gilt-1: var(--color-primary);
  --gilt-2: currentColor;
  background-image: linear-gradient(calc(1deg * var(--gilt-angle) * var(--direction-factor-1)), var(--gilt-1) 0%, transparent 30%, transparent 80%, var(--gilt-2) 100%), linear-gradient(currentColor);
  background-size: 100% 100%;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bg-blueprint {
  --bg-color: var(--color-title-bg);
  --bg-size: 1;
  --bg-item-width: 10px;
  --bg-border-width: 1px;
  --bg-tmp-item-width: calc(var(--bg-item-width) * var(--bg-size));
  background-image: linear-gradient(oklch(from var(--bg-color) calc(l * 0.98) c h) var(--bg-border-width), transparent var(--bg-border-width)), linear-gradient(90deg, oklch(from var(--bg-color) calc(l * 0.98) c h) var(--bg-border-width), transparent var(--bg-border-width)), linear-gradient(var(--bg-color) var(--bg-border-width), transparent var(--bg-border-width)), linear-gradient(90deg, var(--bg-color) var(--bg-border-width), transparent var(--bg-border-width));
  background-size: calc(var(--bg-tmp-item-width) * 5) calc(var(--bg-tmp-item-width) * 5), calc(var(--bg-tmp-item-width) * 5) calc(var(--bg-tmp-item-width) * 5), var(--bg-item-width) var(--bg-tmp-item-width), var(--bg-tmp-item-width) var(--bg-tmp-item-width);
  background-position: calc(-1 * var(--bg-border-width)) calc(-1 * var(--bg-border-width)), calc(-1 * var(--bg-border-width)) calc(-1 * var(--bg-border-width)), calc(-1 * var(--bg-border-width)) calc(-1 * var(--bg-border-width)), calc(-1 * var(--bg-border-width)) calc(-1 * var(--bg-border-width));
}
.bg-houndstooth {
  --bg-color: var(--color-title-bg-hover);
  --bg-size: 1;
  --bg-item-width: 16px;
  background-image: linear-gradient(45deg, var(--bg-color) 25%, transparent 25%), linear-gradient(-45deg, var(--bg-color) 25%, transparent 25%);
  background-size: calc(var(--bg-item-width) * var(--bg-size)) calc(var(--bg-item-width) * var(--bg-size));
  background-position: 0 0, 0 calc(calc(var(--bg-item-width) / 2) * var(--bg-size));
  &:where(.dark, .dark *) {
    --bg-color: var(--color-title-bg);
  }
  @media (prefers-color-scheme: dark) {
    --bg-color: var(--color-title-bg);
  }
}
.bg-hatch {
  --bg-color: var(--color-title-bg-active);
  --bg-size: 1;
  --bg-border-width: 1px;
  --bg-item-width: 5px;
  --bg-tmp-item-width: calc(var(--bg-item-width) * var(--bg-size));
  --bg-tmp-border-width: calc(var(--bg-border-width)*var(--bg-size));
  --bg-tmp-size: calc((var(--bg-tmp-border-width) + var(--bg-tmp-item-width)) * 1.414);
  --bg-tmp-size: round(calc((var(--bg-tmp-border-width) + var(--bg-tmp-item-width)) * 1.414), 1px);
  background-image: repeating-linear-gradient(-45deg, var(--bg-color), var(--bg-color) var(--bg-tmp-border-width), transparent var(--bg-tmp-border-width), transparent calc(var(--bg-tmp-item-width) + var(--bg-tmp-border-width)));
  background-size: var(--bg-tmp-size) var(--bg-tmp-size);
  &:where(.dark, .dark *) {
    --bg-color: var(--color-title-bg-hover);
  }
  @media (prefers-color-scheme: dark) {
    --bg-color: var(--color-title-bg-hover);
  }
}
.bg-polka {
  --bg-color: var(--color-title-bg-active);
  --bg-color-alt: var(--bg-color);
  --bg-size: 1;
  --bg-item-width: 12px;
  --bg-tmp-item-width: calc(var(--bg-item-width) * var(--bg-size));
  background-image: radial-gradient(circle at calc(var(--bg-size)*2px) calc(var(--bg-size)*2px), var(--bg-color) calc(1px*var(--bg-size)), transparent calc(1px*var(--bg-size)));
  background-size: var(--bg-tmp-item-width) var(--bg-tmp-item-width);
  &:where(.dark, .dark *) {
    --bg-color: var(--color-title-bg-hover);
  }
  @media (prefers-color-scheme: dark) {
    --bg-color: var(--color-title-bg-hover);
  }
}
.bg-chessboard {
  --bg-color: var(--color-title-bg-hover);
  --bg-size: 1;
  --bg-item-width: 16px;
  --bg-tmp-item-width: calc(var(--bg-item-width) * var(--bg-size));
  background-image: repeating-conic-gradient(var(--bg-color) 0% 25%, transparent 25% 50%);
  background-size: var(--bg-tmp-item-width) var(--bg-tmp-item-width);
  &:where(.dark, .dark *) {
    --bg-color: var(--color-title-bg);
  }
  @media (prefers-color-scheme: dark) {
    --bg-color: var(--color-title-bg);
  }
}
.bg-grid {
  --bg-color: var(--color-title-bg-hover);
  --bg-size: 1;
  --bg-item-width: 12px;
  --bg-tmp-item-width: calc(var(--bg-item-width) * var(--bg-size));
  background-image: linear-gradient(var(--bg-color) 1px, transparent 1px), linear-gradient(90deg, var(--bg-color) 1px, transparent 1px);
  background-size: var(--bg-tmp-item-width) var(--bg-tmp-item-width), var(--bg-tmp-item-width) var(--bg-tmp-item-width), 100% 100%;
  &:where(.dark, .dark *) {
    --bg-color: var(--color-title-bg);
  }
  @media (prefers-color-scheme: dark) {
    --bg-color: var(--color-title-bg);
  }
}
.bg-noise {
  --bg-color: var(--color-title-bg-active);
  --bg-size: 1;
  --bg-item-width: 3px;
  --bg-tmp-item-width: calc(var(--bg-item-width) * var(--bg-size));
  background-image: -webkit-repeating-radial-gradient(center center, var(--bg-color), var(--bg-color) calc(var(--bg-size)*1px), transparent calc(var(--bg-size)*1px), transparent 100%);
  background-size: var(--bg-tmp-item-width) var(--bg-tmp-item-width);
  &:where(.dark, .dark *) {
    --bg-color: var(--color-title-bg-hover);
  }
  @media (prefers-color-scheme: dark) {
    --bg-color: var(--color-title-bg-hover);
  }
}
.bg-sunburst {
  --bg-color: var(--color-title-bg-hover);
  --bg-at: 50% 50%;
  --bg-size: 1;
  --bg-item-width: 8deg;
  --bg-border-width: 2deg;
  --bg-tmp-item-width: calc(var(--bg-item-width) * var(--bg-size));
  --bg-tmp-border-width: calc(var(--bg-border-width) * var(--bg-size));
  background-image: repeating-conic-gradient(from 0deg at var(--bg-at), var(--bg-color) 0deg var(--bg-tmp-border-width), transparent var(--bg-tmp-border-width) var(--bg-tmp-item-width));
  &:where(.dark, .dark *) {
    --bg-color: var(--color-title-bg);
  }
  @media (prefers-color-scheme: dark) {
    --bg-color: var(--color-title-bg);
  }
}
.bg-crosshatch {
  --bg-color: var(--color-title-bg-hover);
  --bg-size: 1;
  --bg-border-width: 1px;
  --bg-item-width: 10px;
  --bg-tmp-item-width: calc(var(--bg-item-width) * var(--bg-size));
  --bg-tmp-border-width: calc(var(--bg-border-width)*var(--bg-size) - 0.3px);
  background-image: repeating-linear-gradient(-45deg, var(--bg-color) 0 var(--bg-tmp-border-width), transparent var(--bg-tmp-border-width) var(--bg-tmp-item-width)), repeating-linear-gradient(45deg, var(--bg-color) 0 var(--bg-tmp-border-width), transparent var(--bg-tmp-border-width) var(--bg-tmp-item-width));
  &:where(.dark, .dark *) {
    --bg-color: var(--color-title-bg);
  }
  @media (prefers-color-scheme: dark) {
    --bg-color: var(--color-title-bg);
  }
}
.bg-hatch-h {
  --bg-color: var(--color-title-bg-hover);
  --bg-size: 1;
  --bg-border-width: 1px;
  --bg-item-width: 8px;
  --bg-tmp-item-width: calc(var(--bg-item-width) * var(--bg-size));
  --bg-tmp-border-width: calc(var(--bg-border-width)*var(--bg-size));
  background-image: repeating-linear-gradient(0deg, var(--bg-color) 0 var(--bg-tmp-border-width), transparent var(--bg-tmp-border-width) var(--bg-tmp-item-width));
  &:where(.dark, .dark *) {
    --bg-color: var(--color-title-bg);
  }
  @media (prefers-color-scheme: dark) {
    --bg-color: var(--color-title-bg);
  }
}
.bg-hatch-v {
  --bg-color: var(--color-title-bg-hover);
  --bg-size: 1;
  --bg-border-width: 1px;
  --bg-item-width: 8px;
  --bg-tmp-item-width: calc(var(--bg-item-width) * var(--bg-size));
  --bg-tmp-border-width: calc(var(--bg-border-width)*var(--bg-size));
  background-image: repeating-linear-gradient(90deg, var(--bg-color) 0 var(--bg-tmp-border-width), transparent var(--bg-tmp-border-width) var(--bg-tmp-item-width));
  &:where(.dark, .dark *) {
    --bg-color: var(--color-title-bg);
  }
  @media (prefers-color-scheme: dark) {
    --bg-color: var(--color-title-bg);
  }
}
.bg-circles {
  --bg-color: var(--color-title-bg-hover);
  --bg-at: 50% 50%;
  --bg-size: 1;
  --bg-item-width: 10px;
  --bg-border-width: 1px;
  background-image: repeating-radial-gradient(circle at var(--bg-at), transparent 0, transparent calc(var(--bg-size) * var(--bg-item-width)), var(--bg-color) calc(var(--bg-size) * var(--bg-item-width)), var(--bg-color) calc(var(--bg-size) * (var(--bg-item-width) + var(--bg-border-width))));
  &:where(.dark, .dark *) {
    --bg-color: var(--color-title-bg);
  }
  @media (prefers-color-scheme: dark) {
    --bg-color: var(--color-title-bg);
  }
}
.bg-marble {
  --bg-color: var(--color-title-bg-hover);
  --bg-size: 1;
  --bg-item-width: 10px;
  --bg-border-width: 1px;
  --bg-tmp-item-width: calc(var(--bg-item-width) * var(--bg-size));
  background-image: repeating-linear-gradient(120deg, transparent, transparent var(--bg-tmp-item-width), var(--bg-color) var(--bg-tmp-item-width), var(--bg-color) calc(var(--bg-tmp-item-width) + var(--bg-border-width))), repeating-linear-gradient(60deg, transparent, transparent calc(var(--bg-tmp-item-width) * 2), var(--bg-color) calc(var(--bg-tmp-item-width) * 2), var(--bg-color) calc(var(--bg-tmp-item-width) * 2 + var(--bg-border-width)));
  &:where(.dark, .dark *) {
    --bg-color: var(--color-title-bg);
  }
  @media (prefers-color-scheme: dark) {
    --bg-color: var(--color-title-bg);
  }
}
.bg-stripes {
  --bg-color: var(--color-title-bg);
  --bg-size: 1;
  --bg-item-width: 16px;
  --bg-tmp-item-width: calc(var(--bg-item-width) * var(--bg-size));
  background-image: repeating-linear-gradient(-45deg, transparent 0 calc(var(--bg-tmp-item-width)/2 - 0.3px), var(--bg-color) calc(var(--bg-tmp-item-width)/2 + 0.7px) var(--bg-tmp-item-width));
  &:where(.dark, .dark *) {
    --bg-color: oklch(from var(--color-title-bg) calc(l *0.8) c h);
  }
  @media (prefers-color-scheme: dark) {
    --bg-color: oklch(from var(--color-title-bg) calc(l *0.8) c h);
  }
}
.bg-stripes-h {
  --bg-color: var(--color-title-bg);
  --bg-size: 1;
  --bg-item-width: 8px;
  --bg-tmp-item-width: calc(var(--bg-item-width) * var(--bg-size));
  background-image: repeating-linear-gradient(0deg, transparent 0 var(--bg-tmp-item-width), var(--bg-color) var(--bg-tmp-item-width) calc(var(--bg-tmp-item-width) * 2));
  &:where(.dark, .dark *) {
    --bg-color: oklch(from var(--color-title-bg) calc(l *0.8) c h);
  }
  @media (prefers-color-scheme: dark) {
    --bg-color: oklch(from var(--color-title-bg) calc(l *0.8) c h);
  }
}
.bg-stripes-v {
  --bg-color: var(--color-title-bg);
  --bg-size: 1;
  --bg-item-width: 8px;
  --bg-tmp-item-width: calc(var(--bg-item-width) * var(--bg-size));
  background-image: repeating-linear-gradient(90deg, transparent 0 var(--bg-tmp-item-width), var(--bg-color) var(--bg-tmp-item-width) calc(var(--bg-tmp-item-width) * 2));
  &:where(.dark, .dark *) {
    --bg-color: oklch(from var(--color-title-bg) calc(l *0.8) c h);
  }
  @media (prefers-color-scheme: dark) {
    --bg-color: oklch(from var(--color-title-bg) calc(l *0.8) c h);
  }
}
.gilt-spotlight {
  --gilt-angle: 105;
  background-image: linear-gradient(calc(1deg * var(--gilt-angle) * var(--direction-factor-1)), transparent 0%, transparent 40%, var(--gilt-1) 60%, transparent 90%, var(--gilt-2) 100%), linear-gradient(currentColor);
}
.from-pink-500 {
  --tw-gradient-from: var(--color-pink-500);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-violet-500 {
  --tw-gradient-to: var(--color-violet-500);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.ellipsis-fadeout {
  &:where(:not(.ellipsis)) {
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  }
}
.divider-dashed {
  &:before {
    background: linear-gradient(calc(var(--divider-deg-start) + var(--direction-factor-4)), var(--divider-background) 0%, var(--divider-background) 50%, transparent 50%, transparent 100%);
    background-position: left center;
  }
  &:after {
    background: linear-gradient(calc(var(--divider-deg-end) + var(--direction-factor-4)), var(--divider-background) 0%, var(--divider-background) 50%, transparent 50%, transparent 100%);
    background-position: right center;
  }
  &:where(.divider-v):before, &:where(.divider-v):after {
    background-size: var(--divider-size) calc(var(--divider-size)*10);
    background-repeat: repeat-y;
  }
  &:where(:not(.divider-v)):before, &:where(:not(.divider-v)):after {
    background-size: calc(var(--divider-size)*10) var(--divider-size);
    background-repeat: repeat-x;
  }
}
.divider-dotted {
  &:before {
    background: linear-gradient(calc(var(--divider-deg-start) + var(--direction-factor-4)), var(--divider-background) 50%, transparent 50%);
    background-position: left center;
  }
  &:after {
    background: linear-gradient(calc(var(--divider-deg-end) + var(--direction-factor-4)), var(--divider-background) 50%, transparent 50%);
    background-position: right center;
  }
  &:where(.divider-v):before, &:where(.divider-v):after {
    background-size: var(--divider-size) calc(var(--divider-size)*4);
    background-repeat: repeat-y;
  }
  &:where(:not(.divider-v)):before, &:where(:not(.divider-v)):after {
    background-size: calc(var(--divider-size) * 4) var(--divider-size);
    background-repeat: repeat-x;
  }
}
.background-cover {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.divider-slash {
  --divider-size: 2px;
  &:before, &:after {
    background: linear-gradient(calc(45deg + var(--direction-factor-4)), var(--divider-background) 0, var(--divider-background) 25%, transparent 25%, transparent 50%, var(--divider-background) 50%, var(--divider-background) 75%, transparent 75%, transparent);
    background-size: 6px 6px;
  }
}
.shimmer-bottom {
  --shimmer-angle: 0;
  --shimmer-animation: shimmer-ttb;
  background-size: 100% 200%;
}
.shimmer-top {
  --shimmer-angle: 0;
  --shimmer-animation: shimmer-btt;
  background-size: 100% 200%;
}
.progress-stripes {
  --progress-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
  >[data-role=bar] {
    background-size: 35px 35px;
  }
}
.object-cover {
  object-fit: cover;
}
.p-1 {
  padding: calc(var(--spacing) * 1);
}
.p-4 {
  padding: calc(var(--spacing) * 4);
}
.p-6 {
  padding: calc(var(--spacing) * 6);
}
.px-1 {
  padding-inline: calc(var(--spacing) * 1);
}
.pagination-turning {
  --: ;
  padding-block: calc(var(--pagination-height)/2);
}
.py-safe {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.pt-safe {
  --: ;
  padding-top: env(safe-area-inset-top);
}
.px-safe {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.pb-safe {
  --: ;
  padding-bottom: env(safe-area-inset-bottom);
}
.field-ratio {
  --field-width: var(--default-height-input);
  --field-padding-x: 0;
  [data-role=input] {
    --input-padding-x: 0;
    text-align: center;
  }
}
.shell-ratio {
  --shell-width: var(--default-height-input);
  --shell-padding-x: 0;
  input {
    --input-padding-x: 0;
    text-align: center;
  }
}
.input-ratio {
  --input-width: var(--input-row-height);
  --input-padding-x: 0;
  text-align: center;
}
.table-bottom {
  td {
    vertical-align: bottom;
  }
}
.table-top {
  td {
    vertical-align: top;
  }
}
.font-mono {
  font-family: var(--font-mono);
}
.text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-base {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}
.text-lg {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
}
.text-sm {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.text-xl {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
}
.text-xs {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}
.text-2xs {
  font-size: var(--text-2xs);
}
.text-3xs {
  font-size: var(--text-3xs);
}
.code-\[\#ff0000\] {
  &:where(:not(.code-muted, .code-solid, .code-outline)) {
    --code-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from #ff0000 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(.code-muted) {
    --code-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from #ff0000 var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    border: 1px solid oklch(from #ff0000 var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    line-height: calc(1lh - 2px);
  }
  &:where(.code-outline) {
    --code-color: #ff0000;
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
  &:where(.code-solid) {
    --code-color: oklch(from #ff0000 clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --code-background: #ff0000;
  }
}
.code-blue-200 {
  &:where(:not(.code-muted, .code-solid, .code-outline)) {
    --code-color: oklch(from var(--color-blue-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-blue-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(.code-muted) {
    --code-color: oklch(from var(--color-blue-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-blue-200) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    border: 1px solid oklch(from var(--color-blue-200) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    line-height: calc(1lh - 2px);
  }
  &:where(.code-outline) {
    --code-color: var(--color-blue-200);
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
  &:where(.code-solid) {
    --code-color: oklch(from var(--color-blue-200) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --code-background: var(--color-blue-200);
  }
}
.code-blue-500 {
  &:where(:not(.code-muted, .code-solid, .code-outline)) {
    --code-color: oklch(from var(--color-blue-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-blue-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(.code-muted) {
    --code-color: oklch(from var(--color-blue-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-blue-500) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    border: 1px solid oklch(from var(--color-blue-500) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    line-height: calc(1lh - 2px);
  }
  &:where(.code-outline) {
    --code-color: var(--color-blue-500);
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
  &:where(.code-solid) {
    --code-color: oklch(from var(--color-blue-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --code-background: var(--color-blue-500);
  }
}
.code-green-500 {
  &:where(:not(.code-muted, .code-solid, .code-outline)) {
    --code-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(.code-muted) {
    --code-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-green-500) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    border: 1px solid oklch(from var(--color-green-500) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    line-height: calc(1lh - 2px);
  }
  &:where(.code-outline) {
    --code-color: var(--color-green-500);
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
  &:where(.code-solid) {
    --code-color: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --code-background: var(--color-green-500);
  }
}
.code-indigo-500 {
  &:where(:not(.code-muted, .code-solid, .code-outline)) {
    --code-color: oklch(from var(--color-indigo-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-indigo-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(.code-muted) {
    --code-color: oklch(from var(--color-indigo-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-indigo-500) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    border: 1px solid oklch(from var(--color-indigo-500) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    line-height: calc(1lh - 2px);
  }
  &:where(.code-outline) {
    --code-color: var(--color-indigo-500);
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
  &:where(.code-solid) {
    --code-color: oklch(from var(--color-indigo-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --code-background: var(--color-indigo-500);
  }
}
.code-red-500 {
  &:where(:not(.code-muted, .code-solid, .code-outline)) {
    --code-color: oklch(from var(--color-red-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-red-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(.code-muted) {
    --code-color: oklch(from var(--color-red-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --code-background: oklch(from var(--color-red-500) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    border: 1px solid oklch(from var(--color-red-500) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    line-height: calc(1lh - 2px);
  }
  &:where(.code-outline) {
    --code-color: var(--color-red-500);
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
  &:where(.code-solid) {
    --code-color: oklch(from var(--color-red-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --code-background: var(--color-red-500);
  }
}
.code-outline-\[\#ff6b6b\] {
  --code-color: #ff6b6b;
  --code-background: transparent;
  border: 1px solid var(--code-color);
  line-height: calc(1lh - 4px);
}
.code-outline-\[blue\] {
  --code-color: blue;
  --code-background: transparent;
  border: 1px solid var(--code-color);
  line-height: calc(1lh - 4px);
}
.code-outline-error {
  --code-color: var(--color-error);
  --code-background: transparent;
  border: 1px solid var(--code-color);
  line-height: calc(1lh - 4px);
}
.code-outline-primary {
  --code-color: var(--color-primary);
  --code-background: transparent;
  border: 1px solid var(--code-color);
  line-height: calc(1lh - 4px);
}
.code-outline-success {
  --code-color: var(--color-success);
  --code-background: transparent;
  border: 1px solid var(--code-color);
  line-height: calc(1lh - 4px);
}
.code-outline-warning {
  --code-color: var(--color-warning);
  --code-background: transparent;
  border: 1px solid var(--code-color);
  line-height: calc(1lh - 4px);
}
.code-muted {
  :where(&) {
    --code-background: var(--color-primary-bg);
    border: 1px solid var(--color-primary-bd);
    line-height: calc(1lh - 2px);
  }
}
.code-outline {
  :where(&) {
    --code-background: transparent;
    border: 1px solid var(--code-color);
    line-height: calc(1lh - 4px);
  }
}
.font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
.table-nowrap {
  td, th {
    white-space: nowrap;
  }
}
.table-focused {
  &:where(td) {
    color: var(--table-color-focus);
    outline: 2px solid var(--table-color-focus);
    outline-offset: -2px;
  }
}
.btn-caption {
  &:where(:not(.btn-subtle, .btn-muted, .btn-ghost, .btn-outline, .btn-vivid, .btn-link)) {
    --btn-color: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-caption-contrast);
    --btn-background: var(--color-caption);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-caption-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-caption) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-caption-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-caption) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-caption-active);
    }
  }
  &:where(.btn-subtle) {
    --btn-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-caption-fg);
    --btn-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-caption-bg-hover);
    --btn-border-width: 0;
    --btn-tmp-background: oklch(from var(--color-caption) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-tmp-background: var(--color-caption-bg-active);
    --custom-outline-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-caption-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--btn-tmp-background);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
    }
  }
  &:where(.btn-muted) {
    --btn-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-caption-fg);
    --btn-background: oklch(from var(--color-caption) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-caption-surface);
    --btn-border-color: oklch(from var(--color-caption) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-caption-bd);
    --custom-outline-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-caption-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-caption) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
      --btn-background: var(--color-caption-bg);
      --btn-border-color: oklch(from var(--color-caption) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --btn-border-color: var(--color-caption-bd-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-caption-bg-hover);
      --btn-border-color: oklch(from var(--color-caption) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --btn-border-color: var(--color-caption-bd-active);
    }
  }
  &:where(.btn-ghost) {
    --btn-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-caption-fg);
    --btn-background: transparent;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-caption-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-caption-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-caption) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-caption-bg-active);
    }
  }
  &:where(.btn-outline) {
    --btn-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-caption-fg);
    --btn-background: oklch(from var(--color-caption) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-caption-surface);
    --btn-border-color: oklch(from var(--color-caption-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-caption-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-caption-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-caption) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-caption-bg-active);
    }
  }
  &:where(.btn-vivid) {
    --btn-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-caption-fg);
    --btn-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-caption-bg-hover);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-caption-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-caption);
      --btn-color: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-caption-contrast);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-caption) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-caption-active);
      --btn-color: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-caption-contrast);
    }
  }
  &:where(.btn-link) {
    color: var(--color-caption);
  }
}
.btn-caution {
  &:where(:not(.btn-subtle, .btn-muted, .btn-ghost, .btn-outline, .btn-vivid, .btn-link)) {
    --btn-color: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-caution-contrast);
    --btn-background: var(--color-caution);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-caution-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-caution-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-caution) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-caution-active);
    }
  }
  &:where(.btn-subtle) {
    --btn-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-caution-fg);
    --btn-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-caution-bg-hover);
    --btn-border-width: 0;
    --btn-tmp-background: oklch(from var(--color-caution) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-tmp-background: var(--color-caution-bg-active);
    --custom-outline-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-caution-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--btn-tmp-background);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
    }
  }
  &:where(.btn-muted) {
    --btn-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-caution-fg);
    --btn-background: oklch(from var(--color-caution) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-caution-surface);
    --btn-border-color: oklch(from var(--color-caution) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-caution-bd);
    --custom-outline-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-caution-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-caution) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
      --btn-background: var(--color-caution-bg);
      --btn-border-color: oklch(from var(--color-caution) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --btn-border-color: var(--color-caution-bd-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-caution-bg-hover);
      --btn-border-color: oklch(from var(--color-caution) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --btn-border-color: var(--color-caution-bd-active);
    }
  }
  &:where(.btn-ghost) {
    --btn-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-caution-fg);
    --btn-background: transparent;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-caution-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-caution-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-caution) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-caution-bg-active);
    }
  }
  &:where(.btn-outline) {
    --btn-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-caution-fg);
    --btn-background: oklch(from var(--color-caution) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-caution-surface);
    --btn-border-color: oklch(from var(--color-caution-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-caution-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-caution-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-caution) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-caution-bg-active);
    }
  }
  &:where(.btn-vivid) {
    --btn-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-caution-fg);
    --btn-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-caution-bg-hover);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-caution-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-caution);
      --btn-color: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-caution-contrast);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-caution) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-caution-active);
      --btn-color: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-caution-contrast);
    }
  }
  &:where(.btn-link) {
    color: var(--color-caution);
  }
}
.btn-description {
  &:where(:not(.btn-subtle, .btn-muted, .btn-ghost, .btn-outline, .btn-vivid, .btn-link)) {
    --btn-color: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-description-contrast);
    --btn-background: var(--color-description);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-description-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-description) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-description-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-description) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-description-active);
    }
  }
  &:where(.btn-subtle) {
    --btn-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-description-fg);
    --btn-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-description-bg-hover);
    --btn-border-width: 0;
    --btn-tmp-background: oklch(from var(--color-description) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-tmp-background: var(--color-description-bg-active);
    --custom-outline-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-description-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--btn-tmp-background);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
    }
  }
  &:where(.btn-muted) {
    --btn-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-description-fg);
    --btn-background: oklch(from var(--color-description) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-description-surface);
    --btn-border-color: oklch(from var(--color-description) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-description-bd);
    --custom-outline-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-description-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-description) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
      --btn-background: var(--color-description-bg);
      --btn-border-color: oklch(from var(--color-description) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --btn-border-color: var(--color-description-bd-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-description-bg-hover);
      --btn-border-color: oklch(from var(--color-description) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --btn-border-color: var(--color-description-bd-active);
    }
  }
  &:where(.btn-ghost) {
    --btn-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-description-fg);
    --btn-background: transparent;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-description-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-description-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-description) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-description-bg-active);
    }
  }
  &:where(.btn-outline) {
    --btn-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-description-fg);
    --btn-background: oklch(from var(--color-description) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-description-surface);
    --btn-border-color: oklch(from var(--color-description-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-description-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-description-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-description) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-description-bg-active);
    }
  }
  &:where(.btn-vivid) {
    --btn-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-description-fg);
    --btn-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-description-bg-hover);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-description-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-description);
      --btn-color: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-description-contrast);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-description) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-description-active);
      --btn-color: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-description-contrast);
    }
  }
  &:where(.btn-link) {
    color: var(--color-description);
  }
}
.btn-error {
  &:where(:not(.btn-subtle, .btn-muted, .btn-ghost, .btn-outline, .btn-vivid, .btn-link)) {
    --btn-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-error-contrast);
    --btn-background: var(--color-error);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-error-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-error-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-error) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-error-active);
    }
  }
  &:where(.btn-subtle) {
    --btn-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-error-fg);
    --btn-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-error-bg-hover);
    --btn-border-width: 0;
    --btn-tmp-background: oklch(from var(--color-error) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-tmp-background: var(--color-error-bg-active);
    --custom-outline-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-error-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--btn-tmp-background);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
    }
  }
  &:where(.btn-muted) {
    --btn-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-error-fg);
    --btn-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-error-surface);
    --btn-border-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-error-bd);
    --custom-outline-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-error-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-error) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
      --btn-background: var(--color-error-bg);
      --btn-border-color: oklch(from var(--color-error) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --btn-border-color: var(--color-error-bd-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-error-bg-hover);
      --btn-border-color: oklch(from var(--color-error) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --btn-border-color: var(--color-error-bd-active);
    }
  }
  &:where(.btn-ghost) {
    --btn-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-error-fg);
    --btn-background: transparent;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-error-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-error-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-error) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-error-bg-active);
    }
  }
  &:where(.btn-outline) {
    --btn-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-error-fg);
    --btn-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-error-surface);
    --btn-border-color: oklch(from var(--color-error-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-error-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-error-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-error) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-error-bg-active);
    }
  }
  &:where(.btn-vivid) {
    --btn-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-error-fg);
    --btn-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-error-bg-hover);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-error-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-error);
      --btn-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-error-contrast);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-error) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-error-active);
      --btn-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-error-contrast);
    }
  }
  &:where(.btn-link) {
    color: var(--color-error);
  }
}
.btn-highlight {
  &:where(:not(.btn-subtle, .btn-muted, .btn-ghost, .btn-outline, .btn-vivid, .btn-link)) {
    --btn-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-highlight-contrast);
    --btn-background: var(--color-highlight);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-highlight-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-highlight-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-highlight) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-highlight-active);
    }
  }
  &:where(.btn-subtle) {
    --btn-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-highlight-fg);
    --btn-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-highlight-bg-hover);
    --btn-border-width: 0;
    --btn-tmp-background: oklch(from var(--color-highlight) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-tmp-background: var(--color-highlight-bg-active);
    --custom-outline-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-highlight-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--btn-tmp-background);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
    }
  }
  &:where(.btn-muted) {
    --btn-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-highlight-fg);
    --btn-background: oklch(from var(--color-highlight) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-highlight-surface);
    --btn-border-color: oklch(from var(--color-highlight) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-highlight-bd);
    --custom-outline-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-highlight-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-highlight) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
      --btn-background: var(--color-highlight-bg);
      --btn-border-color: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --btn-border-color: var(--color-highlight-bd-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-highlight-bg-hover);
      --btn-border-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --btn-border-color: var(--color-highlight-bd-active);
    }
  }
  &:where(.btn-ghost) {
    --btn-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-highlight-fg);
    --btn-background: transparent;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-highlight-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-highlight-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-highlight) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-highlight-bg-active);
    }
  }
  &:where(.btn-outline) {
    --btn-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-highlight-fg);
    --btn-background: oklch(from var(--color-highlight) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-highlight-surface);
    --btn-border-color: oklch(from var(--color-highlight-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-highlight-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-highlight-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-highlight) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-highlight-bg-active);
    }
  }
  &:where(.btn-vivid) {
    --btn-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-highlight-fg);
    --btn-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-highlight-bg-hover);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-highlight-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-highlight);
      --btn-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-highlight-contrast);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-highlight) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-highlight-active);
      --btn-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-highlight-contrast);
    }
  }
  &:where(.btn-link) {
    color: var(--color-highlight);
  }
}
.btn-info {
  &:where(:not(.btn-subtle, .btn-muted, .btn-ghost, .btn-outline, .btn-vivid, .btn-link)) {
    --btn-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-info-contrast);
    --btn-background: var(--color-info);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-info-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-info-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-info) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-info-active);
    }
  }
  &:where(.btn-subtle) {
    --btn-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-info-fg);
    --btn-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-info-bg-hover);
    --btn-border-width: 0;
    --btn-tmp-background: oklch(from var(--color-info) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-tmp-background: var(--color-info-bg-active);
    --custom-outline-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-info-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--btn-tmp-background);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
    }
  }
  &:where(.btn-muted) {
    --btn-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-info-fg);
    --btn-background: oklch(from var(--color-info) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-info-surface);
    --btn-border-color: oklch(from var(--color-info) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-info-bd);
    --custom-outline-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-info-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-info) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
      --btn-background: var(--color-info-bg);
      --btn-border-color: oklch(from var(--color-info) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --btn-border-color: var(--color-info-bd-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-info-bg-hover);
      --btn-border-color: oklch(from var(--color-info) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --btn-border-color: var(--color-info-bd-active);
    }
  }
  &:where(.btn-ghost) {
    --btn-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-info-fg);
    --btn-background: transparent;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-info-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-info-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-info) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-info-bg-active);
    }
  }
  &:where(.btn-outline) {
    --btn-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-info-fg);
    --btn-background: oklch(from var(--color-info) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-info-surface);
    --btn-border-color: oklch(from var(--color-info-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-info-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-info-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-info) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-info-bg-active);
    }
  }
  &:where(.btn-vivid) {
    --btn-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-info-fg);
    --btn-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-info-bg-hover);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-info-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-info);
      --btn-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-info-contrast);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-info) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-info-active);
      --btn-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-info-contrast);
    }
  }
  &:where(.btn-link) {
    color: var(--color-info);
  }
}
.btn-ink {
  &:where(:not(.btn-subtle, .btn-muted, .btn-ghost, .btn-outline, .btn-vivid, .btn-link)) {
    --btn-color: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-ink-contrast);
    --btn-background: var(--color-ink);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-ink-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-ink-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-ink) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-ink-active);
    }
  }
  &:where(.btn-subtle) {
    --btn-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-ink-fg);
    --btn-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-ink-bg-hover);
    --btn-border-width: 0;
    --btn-tmp-background: oklch(from var(--color-ink) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-tmp-background: var(--color-ink-bg-active);
    --custom-outline-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-ink-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--btn-tmp-background);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
    }
  }
  &:where(.btn-muted) {
    --btn-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-ink-fg);
    --btn-background: oklch(from var(--color-ink) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-ink-surface);
    --btn-border-color: oklch(from var(--color-ink) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-ink-bd);
    --custom-outline-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-ink-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-ink) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
      --btn-background: var(--color-ink-bg);
      --btn-border-color: oklch(from var(--color-ink) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --btn-border-color: var(--color-ink-bd-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-ink-bg-hover);
      --btn-border-color: oklch(from var(--color-ink) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --btn-border-color: var(--color-ink-bd-active);
    }
  }
  &:where(.btn-ghost) {
    --btn-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-ink-fg);
    --btn-background: transparent;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-ink-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-ink-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-ink) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-ink-bg-active);
    }
  }
  &:where(.btn-outline) {
    --btn-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-ink-fg);
    --btn-background: oklch(from var(--color-ink) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-ink-surface);
    --btn-border-color: oklch(from var(--color-ink-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-ink-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-ink-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-ink) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-ink-bg-active);
    }
  }
  &:where(.btn-vivid) {
    --btn-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-ink-fg);
    --btn-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-ink-bg-hover);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-ink-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-ink);
      --btn-color: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-ink-contrast);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-ink) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-ink-active);
      --btn-color: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-ink-contrast);
    }
  }
  &:where(.btn-link) {
    color: var(--color-ink);
  }
}
.btn-placeholder {
  &:where(:not(.btn-subtle, .btn-muted, .btn-ghost, .btn-outline, .btn-vivid, .btn-link)) {
    --btn-color: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-placeholder-contrast);
    --btn-background: var(--color-placeholder);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-placeholder-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-placeholder) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-placeholder-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-placeholder) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-placeholder-active);
    }
  }
  &:where(.btn-subtle) {
    --btn-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-placeholder-fg);
    --btn-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-placeholder-bg-hover);
    --btn-border-width: 0;
    --btn-tmp-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-tmp-background: var(--color-placeholder-bg-active);
    --custom-outline-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-placeholder-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--btn-tmp-background);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
    }
  }
  &:where(.btn-muted) {
    --btn-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-placeholder-fg);
    --btn-background: oklch(from var(--color-placeholder) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-placeholder-surface);
    --btn-border-color: oklch(from var(--color-placeholder) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-placeholder-bd);
    --custom-outline-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-placeholder-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-placeholder) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
      --btn-background: var(--color-placeholder-bg);
      --btn-border-color: oklch(from var(--color-placeholder) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --btn-border-color: var(--color-placeholder-bd-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-placeholder-bg-hover);
      --btn-border-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --btn-border-color: var(--color-placeholder-bd-active);
    }
  }
  &:where(.btn-ghost) {
    --btn-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-placeholder-fg);
    --btn-background: transparent;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-placeholder-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-placeholder-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-placeholder-bg-active);
    }
  }
  &:where(.btn-outline) {
    --btn-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-placeholder-fg);
    --btn-background: oklch(from var(--color-placeholder) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-placeholder-surface);
    --btn-border-color: oklch(from var(--color-placeholder-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-placeholder-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-placeholder-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-placeholder-bg-active);
    }
  }
  &:where(.btn-vivid) {
    --btn-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-placeholder-fg);
    --btn-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-placeholder-bg-hover);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-placeholder-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-placeholder);
      --btn-color: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-placeholder-contrast);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-placeholder) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-placeholder-active);
      --btn-color: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-placeholder-contrast);
    }
  }
  &:where(.btn-link) {
    color: var(--color-placeholder);
  }
}
.btn-primary {
  &:where(:not(.btn-subtle, .btn-muted, .btn-ghost, .btn-outline, .btn-vivid, .btn-link)) {
    --btn-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-primary-contrast);
    --btn-background: var(--color-primary);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-primary-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-primary-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-primary) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-primary-active);
    }
  }
  &:where(.btn-subtle) {
    --btn-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-primary-fg);
    --btn-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-primary-bg-hover);
    --btn-border-width: 0;
    --btn-tmp-background: oklch(from var(--color-primary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-tmp-background: var(--color-primary-bg-active);
    --custom-outline-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-primary-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--btn-tmp-background);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
    }
  }
  &:where(.btn-muted) {
    --btn-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-primary-fg);
    --btn-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-primary-surface);
    --btn-border-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-primary-bd);
    --custom-outline-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-primary-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-primary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
      --btn-background: var(--color-primary-bg);
      --btn-border-color: oklch(from var(--color-primary) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --btn-border-color: var(--color-primary-bd-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-primary-bg-hover);
      --btn-border-color: oklch(from var(--color-primary) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --btn-border-color: var(--color-primary-bd-active);
    }
  }
  &:where(.btn-ghost) {
    --btn-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-primary-fg);
    --btn-background: transparent;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-primary-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-primary-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-primary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-primary-bg-active);
    }
  }
  &:where(.btn-outline) {
    --btn-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-primary-fg);
    --btn-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-primary-surface);
    --btn-border-color: oklch(from var(--color-primary-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-primary-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-primary-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-primary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-primary-bg-active);
    }
  }
  &:where(.btn-vivid) {
    --btn-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-primary-fg);
    --btn-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-primary-bg-hover);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-primary-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-primary);
      --btn-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-primary-contrast);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-primary) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-primary-active);
      --btn-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-primary-contrast);
    }
  }
  &:where(.btn-link) {
    color: var(--color-primary);
  }
}
.btn-secondary {
  &:where(:not(.btn-subtle, .btn-muted, .btn-ghost, .btn-outline, .btn-vivid, .btn-link)) {
    --btn-color: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-secondary-contrast);
    --btn-background: var(--color-secondary);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-secondary-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-secondary-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-secondary) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-secondary-active);
    }
  }
  &:where(.btn-subtle) {
    --btn-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-secondary-fg);
    --btn-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-secondary-bg-hover);
    --btn-border-width: 0;
    --btn-tmp-background: oklch(from var(--color-secondary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-tmp-background: var(--color-secondary-bg-active);
    --custom-outline-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-secondary-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--btn-tmp-background);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
    }
  }
  &:where(.btn-muted) {
    --btn-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-secondary-fg);
    --btn-background: oklch(from var(--color-secondary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-secondary-surface);
    --btn-border-color: oklch(from var(--color-secondary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-secondary-bd);
    --custom-outline-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-secondary-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-secondary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
      --btn-background: var(--color-secondary-bg);
      --btn-border-color: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --btn-border-color: var(--color-secondary-bd-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-secondary-bg-hover);
      --btn-border-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --btn-border-color: var(--color-secondary-bd-active);
    }
  }
  &:where(.btn-ghost) {
    --btn-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-secondary-fg);
    --btn-background: transparent;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-secondary-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-secondary-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-secondary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-secondary-bg-active);
    }
  }
  &:where(.btn-outline) {
    --btn-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-secondary-fg);
    --btn-background: oklch(from var(--color-secondary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-secondary-surface);
    --btn-border-color: oklch(from var(--color-secondary-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-secondary-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-secondary-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-secondary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-secondary-bg-active);
    }
  }
  &:where(.btn-vivid) {
    --btn-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-secondary-fg);
    --btn-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-secondary-bg-hover);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-secondary-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-secondary);
      --btn-color: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-secondary-contrast);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-secondary) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-secondary-active);
      --btn-color: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-secondary-contrast);
    }
  }
  &:where(.btn-link) {
    color: var(--color-secondary);
  }
}
.btn-success {
  &:where(:not(.btn-subtle, .btn-muted, .btn-ghost, .btn-outline, .btn-vivid, .btn-link)) {
    --btn-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-success-contrast);
    --btn-background: var(--color-success);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-success-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-success-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-success) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-success-active);
    }
  }
  &:where(.btn-subtle) {
    --btn-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-success-fg);
    --btn-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-success-bg-hover);
    --btn-border-width: 0;
    --btn-tmp-background: oklch(from var(--color-success) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-tmp-background: var(--color-success-bg-active);
    --custom-outline-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-success-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--btn-tmp-background);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
    }
  }
  &:where(.btn-muted) {
    --btn-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-success-fg);
    --btn-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-success-surface);
    --btn-border-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-success-bd);
    --custom-outline-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-success-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-success) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
      --btn-background: var(--color-success-bg);
      --btn-border-color: oklch(from var(--color-success) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --btn-border-color: var(--color-success-bd-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-success-bg-hover);
      --btn-border-color: oklch(from var(--color-success) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --btn-border-color: var(--color-success-bd-active);
    }
  }
  &:where(.btn-ghost) {
    --btn-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-success-fg);
    --btn-background: transparent;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-success-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-success-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-success) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-success-bg-active);
    }
  }
  &:where(.btn-outline) {
    --btn-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-success-fg);
    --btn-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-success-surface);
    --btn-border-color: oklch(from var(--color-success-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-success-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-success-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-success) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-success-bg-active);
    }
  }
  &:where(.btn-vivid) {
    --btn-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-success-fg);
    --btn-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-success-bg-hover);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-success-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-success);
      --btn-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-success-contrast);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-success) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-success-active);
      --btn-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-success-contrast);
    }
  }
  &:where(.btn-link) {
    color: var(--color-success);
  }
}
.btn-tertiary {
  &:where(:not(.btn-subtle, .btn-muted, .btn-ghost, .btn-outline, .btn-vivid, .btn-link)) {
    --btn-color: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-tertiary-contrast);
    --btn-background: var(--color-tertiary);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-tertiary-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-tertiary-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-tertiary) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-tertiary-active);
    }
  }
  &:where(.btn-subtle) {
    --btn-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-tertiary-fg);
    --btn-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-tertiary-bg-hover);
    --btn-border-width: 0;
    --btn-tmp-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-tmp-background: var(--color-tertiary-bg-active);
    --custom-outline-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-tertiary-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--btn-tmp-background);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
    }
  }
  &:where(.btn-muted) {
    --btn-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-tertiary-fg);
    --btn-background: oklch(from var(--color-tertiary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-tertiary-surface);
    --btn-border-color: oklch(from var(--color-tertiary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-tertiary-bd);
    --custom-outline-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-tertiary-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-tertiary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
      --btn-background: var(--color-tertiary-bg);
      --btn-border-color: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --btn-border-color: var(--color-tertiary-bd-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-tertiary-bg-hover);
      --btn-border-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --btn-border-color: var(--color-tertiary-bd-active);
    }
  }
  &:where(.btn-ghost) {
    --btn-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-tertiary-fg);
    --btn-background: transparent;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-tertiary-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-tertiary-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-tertiary-bg-active);
    }
  }
  &:where(.btn-outline) {
    --btn-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-tertiary-fg);
    --btn-background: oklch(from var(--color-tertiary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-tertiary-surface);
    --btn-border-color: oklch(from var(--color-tertiary-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-tertiary-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-tertiary-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-tertiary-bg-active);
    }
  }
  &:where(.btn-vivid) {
    --btn-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-tertiary-fg);
    --btn-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-tertiary-bg-hover);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-tertiary-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-tertiary);
      --btn-color: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-tertiary-contrast);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-tertiary) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-tertiary-active);
      --btn-color: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-tertiary-contrast);
    }
  }
  &:where(.btn-link) {
    color: var(--color-tertiary);
  }
}
.btn-title {
  &:where(:not(.btn-subtle, .btn-muted, .btn-ghost, .btn-outline, .btn-vivid, .btn-link)) {
    --btn-color: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-title-contrast);
    --btn-background: var(--color-title);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-title-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-title-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-title) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-title-active);
    }
  }
  &:where(.btn-subtle) {
    --btn-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-title-fg);
    --btn-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-title-bg-hover);
    --btn-border-width: 0;
    --btn-tmp-background: oklch(from var(--color-title) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-tmp-background: var(--color-title-bg-active);
    --custom-outline-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-title-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--btn-tmp-background);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
    }
  }
  &:where(.btn-muted) {
    --btn-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-title-fg);
    --btn-background: oklch(from var(--color-title) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-title-surface);
    --btn-border-color: oklch(from var(--color-title) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-title-bd);
    --custom-outline-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-title-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-title) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
      --btn-background: var(--color-title-bg);
      --btn-border-color: oklch(from var(--color-title) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --btn-border-color: var(--color-title-bd-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-title-bg-hover);
      --btn-border-color: oklch(from var(--color-title) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --btn-border-color: var(--color-title-bd-active);
    }
  }
  &:where(.btn-ghost) {
    --btn-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-title-fg);
    --btn-background: transparent;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-title-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-title-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-title) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-title-bg-active);
    }
  }
  &:where(.btn-outline) {
    --btn-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-title-fg);
    --btn-background: oklch(from var(--color-title) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-title-surface);
    --btn-border-color: oklch(from var(--color-title-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-title-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-title-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-title) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-title-bg-active);
    }
  }
  &:where(.btn-vivid) {
    --btn-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-title-fg);
    --btn-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-title-bg-hover);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-title-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-title);
      --btn-color: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-title-contrast);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-title) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-title-active);
      --btn-color: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-title-contrast);
    }
  }
  &:where(.btn-link) {
    color: var(--color-title);
  }
}
.btn-warning {
  &:where(:not(.btn-subtle, .btn-muted, .btn-ghost, .btn-outline, .btn-vivid, .btn-link)) {
    --btn-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-warning-contrast);
    --btn-background: var(--color-warning);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-warning-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-warning-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-warning) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-warning-active);
    }
  }
  &:where(.btn-subtle) {
    --btn-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-warning-fg);
    --btn-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-warning-bg-hover);
    --btn-border-width: 0;
    --btn-tmp-background: oklch(from var(--color-warning) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-tmp-background: var(--color-warning-bg-active);
    --custom-outline-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-warning-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--btn-tmp-background);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
    }
  }
  &:where(.btn-muted) {
    --btn-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-warning-fg);
    --btn-background: oklch(from var(--color-warning) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-warning-surface);
    --btn-border-color: oklch(from var(--color-warning) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-warning-bd);
    --custom-outline-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-warning-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-warning) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
      --btn-background: var(--color-warning-bg);
      --btn-border-color: oklch(from var(--color-warning) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
      --btn-border-color: var(--color-warning-bd-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-warning-bg-hover);
      --btn-border-color: oklch(from var(--color-warning) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
      --btn-border-color: var(--color-warning-bd-active);
    }
  }
  &:where(.btn-ghost) {
    --btn-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-warning-fg);
    --btn-background: transparent;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-warning-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-warning-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-warning) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-warning-bg-active);
    }
  }
  &:where(.btn-outline) {
    --btn-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-warning-fg);
    --btn-background: oklch(from var(--color-warning) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-background: var(--color-warning-surface);
    --btn-border-color: oklch(from var(--color-warning-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-warning-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-background: var(--color-warning-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-warning) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
      --btn-background: var(--color-warning-bg-active);
    }
  }
  &:where(.btn-vivid) {
    --btn-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-color: var(--color-warning-fg);
    --btn-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-warning-bg-hover);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: var(--color-warning-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-warning);
      --btn-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-warning-contrast);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-warning) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-background: var(--color-warning-active);
      --btn-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --btn-color: var(--color-warning-contrast);
    }
  }
  &:where(.btn-link) {
    color: var(--color-warning);
  }
}
.btn-\[\#ff0000\] {
  &:where(:not(.btn-subtle, .btn-muted, .btn-ghost, .btn-outline, .btn-vivid, .btn-link)) {
    --btn-color: oklch(from #ff0000 clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-background: #ff0000;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from #ff0000 calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from #ff0000 calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    }
  }
  &:where(.btn-subtle) {
    --btn-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: oklch(from #ff0000 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-border-width: 0;
    --btn-tmp-background: oklch(from #ff0000 var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --custom-outline-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--btn-tmp-background);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
    }
  }
  &:where(.btn-muted) {
    --btn-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: oklch(from #ff0000 var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-border-color: oklch(from #ff0000 var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from #ff0000 var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
      --btn-border-color: oklch(from #ff0000 var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from #ff0000 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-border-color: oklch(from #ff0000 clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    }
  }
  &:where(.btn-ghost) {
    --btn-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: transparent;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from #ff0000 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from #ff0000 var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    }
  }
  &:where(.btn-outline) {
    --btn-color: oklch(from #ff0000 clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: oklch(from #ff0000 var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-border-color: oklch(from #ff0000 min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from #ff0000 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from #ff0000 var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    }
  }
  &:where(.btn-vivid) {
    --btn-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: oklch(from #ff0000 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-border-width: 0;
    --custom-outline-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: #ff0000;
      --btn-color: oklch(from #ff0000 clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from #ff0000 calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-color: oklch(from #ff0000 clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    }
  }
  &:where(.btn-link) {
    color: #ff0000;
  }
}
.btn-\[blue\] {
  &:where(:not(.btn-subtle, .btn-muted, .btn-ghost, .btn-outline, .btn-vivid, .btn-link)) {
    --btn-color: oklch(from blue clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-background: blue;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from blue calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from blue calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    }
  }
  &:where(.btn-subtle) {
    --btn-color: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: oklch(from blue var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-border-width: 0;
    --btn-tmp-background: oklch(from blue var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --custom-outline-color: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--btn-tmp-background);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
    }
  }
  &:where(.btn-muted) {
    --btn-color: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: oklch(from blue var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-border-color: oklch(from blue var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from blue var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
      --btn-border-color: oklch(from blue var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from blue var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-border-color: oklch(from blue clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    }
  }
  &:where(.btn-ghost) {
    --btn-color: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: transparent;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from blue var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from blue var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    }
  }
  &:where(.btn-outline) {
    --btn-color: oklch(from blue clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: oklch(from blue var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-border-color: oklch(from blue min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from blue var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from blue var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    }
  }
  &:where(.btn-vivid) {
    --btn-color: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: oklch(from blue var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-border-width: 0;
    --custom-outline-color: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: blue;
      --btn-color: oklch(from blue clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from blue calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-color: oklch(from blue clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    }
  }
  &:where(.btn-link) {
    color: blue;
  }
}
.btn-green-200 {
  &:where(:not(.btn-subtle, .btn-muted, .btn-ghost, .btn-outline, .btn-vivid, .btn-link)) {
    --btn-color: oklch(from var(--color-green-200) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-background: var(--color-green-200);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-green-200) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-green-200) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    }
  }
  &:where(.btn-subtle) {
    --btn-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: oklch(from var(--color-green-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-border-width: 0;
    --btn-tmp-background: oklch(from var(--color-green-200) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --custom-outline-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--btn-tmp-background);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
    }
  }
  &:where(.btn-muted) {
    --btn-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: oklch(from var(--color-green-200) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-border-color: oklch(from var(--color-green-200) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-green-200) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
      --btn-border-color: oklch(from var(--color-green-200) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-green-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-border-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    }
  }
  &:where(.btn-ghost) {
    --btn-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: transparent;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-green-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-green-200) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    }
  }
  &:where(.btn-outline) {
    --btn-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: oklch(from var(--color-green-200) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-border-color: oklch(from var(--color-green-200) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-green-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-green-200) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    }
  }
  &:where(.btn-vivid) {
    --btn-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: oklch(from var(--color-green-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-green-200);
      --btn-color: oklch(from var(--color-green-200) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-green-200) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-color: oklch(from var(--color-green-200) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    }
  }
  &:where(.btn-link) {
    color: var(--color-green-200);
  }
}
.btn-green-500 {
  &:where(:not(.btn-subtle, .btn-muted, .btn-ghost, .btn-outline, .btn-vivid, .btn-link)) {
    --btn-color: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-background: var(--color-green-500);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-green-500) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-green-500) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    }
  }
  &:where(.btn-subtle) {
    --btn-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-border-width: 0;
    --btn-tmp-background: oklch(from var(--color-green-500) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --custom-outline-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--btn-tmp-background);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
    }
  }
  &:where(.btn-muted) {
    --btn-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: oklch(from var(--color-green-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-border-color: oklch(from var(--color-green-500) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-green-500) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
      --btn-border-color: oklch(from var(--color-green-500) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-border-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    }
  }
  &:where(.btn-ghost) {
    --btn-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: transparent;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-green-500) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    }
  }
  &:where(.btn-outline) {
    --btn-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: oklch(from var(--color-green-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-border-color: oklch(from var(--color-green-500) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-green-500) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    }
  }
  &:where(.btn-vivid) {
    --btn-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-green-500);
      --btn-color: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-green-500) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-color: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    }
  }
  &:where(.btn-link) {
    color: var(--color-green-500);
  }
}
.btn-green-800 {
  &:where(:not(.btn-subtle, .btn-muted, .btn-ghost, .btn-outline, .btn-vivid, .btn-link)) {
    --btn-color: oklch(from var(--color-green-800) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-background: var(--color-green-800);
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-green-800) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-green-800) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    }
  }
  &:where(.btn-subtle) {
    --btn-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: oklch(from var(--color-green-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-border-width: 0;
    --btn-tmp-background: oklch(from var(--color-green-800) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --custom-outline-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--btn-tmp-background);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
    }
  }
  &:where(.btn-muted) {
    --btn-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: oklch(from var(--color-green-800) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-border-color: oklch(from var(--color-green-800) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-green-800) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
      --btn-border-color: oklch(from var(--color-green-800) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-green-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
      --btn-border-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    }
  }
  &:where(.btn-ghost) {
    --btn-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: transparent;
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-green-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-green-800) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    }
  }
  &:where(.btn-outline) {
    --btn-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: oklch(from var(--color-green-800) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --btn-border-color: oklch(from var(--color-green-800) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
    --custom-outline-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: oklch(from var(--color-green-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-green-800) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    }
  }
  &:where(.btn-vivid) {
    --btn-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-background: oklch(from var(--color-green-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-border-width: 0;
    --custom-outline-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-green-800);
      --btn-color: oklch(from var(--color-green-800) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--color-green-800) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
      --btn-color: oklch(from var(--color-green-800) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    }
  }
  &:where(.btn-link) {
    color: var(--color-green-800);
  }
}
.tree-error {
  --tree-node-background-selected: var(--color-error);
  --tree-node-color-selected: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --tree-node-color-selected: var(--color-error-contrast);
  --tree-node-background-active: var(--color-error);
  --tree-node-color-active: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --tree-node-color-active: var(--color-error-contrast);
  &:where(.tree-entries) {
    --tree-node-color-selected: currentColor;
    --tree-node-background-selected: oklch(from var(--color-error) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tree-node-background-selected: var(--color-error-bg);
    li>:first-child {
      &:where(.tree-selected) {
        &:after {
          color: oklch(from var(--color-error-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
        }
        &>[data-role=content]>[data-role=label] {
          color: oklch(from var(--color-error-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
        }
      }
    }
  }
}
.tree-primary {
  --tree-node-background-selected: var(--color-primary);
  --tree-node-color-selected: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --tree-node-color-selected: var(--color-primary-contrast);
  --tree-node-background-active: var(--color-primary);
  --tree-node-color-active: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --tree-node-color-active: var(--color-primary-contrast);
  &:where(.tree-entries) {
    --tree-node-color-selected: currentColor;
    --tree-node-background-selected: oklch(from var(--color-primary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tree-node-background-selected: var(--color-primary-bg);
    li>:first-child {
      &:where(.tree-selected) {
        &:after {
          color: oklch(from var(--color-primary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
        }
        &>[data-role=content]>[data-role=label] {
          color: oklch(from var(--color-primary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
        }
      }
    }
  }
}
.tree-success {
  --tree-node-background-selected: var(--color-success);
  --tree-node-color-selected: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --tree-node-color-selected: var(--color-success-contrast);
  --tree-node-background-active: var(--color-success);
  --tree-node-color-active: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --tree-node-color-active: var(--color-success-contrast);
  &:where(.tree-entries) {
    --tree-node-color-selected: currentColor;
    --tree-node-background-selected: oklch(from var(--color-success) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tree-node-background-selected: var(--color-success-bg);
    li>:first-child {
      &:where(.tree-selected) {
        &:after {
          color: oklch(from var(--color-success-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
        }
        &>[data-role=content]>[data-role=label] {
          color: oklch(from var(--color-success-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
        }
      }
    }
  }
}
.tree-warning {
  --tree-node-background-selected: var(--color-warning);
  --tree-node-color-selected: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --tree-node-color-selected: var(--color-warning-contrast);
  --tree-node-background-active: var(--color-warning);
  --tree-node-color-active: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --tree-node-color-active: var(--color-warning-contrast);
  &:where(.tree-entries) {
    --tree-node-color-selected: currentColor;
    --tree-node-background-selected: oklch(from var(--color-warning) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tree-node-background-selected: var(--color-warning-bg);
    li>:first-child {
      &:where(.tree-selected) {
        &:after {
          color: oklch(from var(--color-warning-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
        }
        &>[data-role=content]>[data-role=label] {
          color: oklch(from var(--color-warning-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
        }
      }
    }
  }
}
.progress-2xs {
  --progress-height: calc(var(--spacing) * 1);
  >[data-role=bar] {
    color: var(--progress-background-bar);
  }
}
.progress-sm {
  --progress-height: calc(var(--spacing) * 3);
  >[data-role=bar] {
    color: var(--progress-background-bar);
  }
}
.progress-xs {
  --progress-height: calc(var(--spacing) * 2);
  >[data-role=bar] {
    color: var(--progress-background-bar);
  }
}
.rating-radio {
  input[type=radio], [data-role=item] {
    color: var(--custom-item-color, var(--rating-item-color));
  }
  [data-role=item][data-checked=true], input[type=radio]:checked, input[type=radio]:hover {
    color: var(--rating-item-color-checked);
  }
}
.entry-hoverable {
  &:where(:not(.entry-disabled, .entry-selected, .entry-checked))>.entry-label:hover, &:where(:not(:has(:checked)))>.entry-label:hover, &:where(:not(.entry-disabled, .entry-selected, .entry-checked))>.entry-body>.entry-label:hover, &:where(:not(:has(:checked)))>.entry-body>.entry-label:hover {
    color: var(--entry-color-hover);
  }
}
.entry-selected {
  &:where(:not(.entry-disabled))>.entry-label, &:where(:not(.entry-disabled))>.entry-body>.entry-label {
    color: var(--entry-color-hover);
  }
}
.text-blue-300 {
  color: var(--color-blue-300);
}
.text-blue-600 {
  color: var(--color-blue-600);
}
.text-caption {
  color: var(--color-caption);
}
.text-description {
  color: var(--color-description);
}
.text-error {
  color: var(--color-error);
}
.text-error-contrast {
  color: var(--color-error-contrast);
}
.text-gray-300 {
  color: var(--color-gray-300);
}
.text-info {
  color: var(--color-info);
}
.text-info-contrast {
  color: var(--color-info-contrast);
}
.text-ink {
  color: var(--color-ink);
}
.text-placeholder {
  color: var(--color-placeholder);
}
.text-primary {
  color: var(--color-primary);
}
.text-primary-contrast {
  color: var(--color-primary-contrast);
}
.text-red-500 {
  color: var(--color-red-500);
}
.text-red-600 {
  color: var(--color-red-600);
}
.text-rose-600 {
  color: var(--color-rose-600);
}
.text-secondary {
  color: var(--color-secondary);
}
.text-sky-600 {
  color: var(--color-sky-600);
}
.text-stage {
  color: var(--color-stage);
}
.text-stage-light {
  color: var(--color-stage-light);
}
.text-success {
  color: var(--color-success);
}
.text-success-contrast {
  color: var(--color-success-contrast);
}
.text-tertiary {
  color: var(--color-tertiary);
}
.text-title {
  color: var(--color-title);
}
.text-warning {
  color: var(--color-warning);
}
.text-warning-contrast {
  color: var(--color-warning-contrast);
}
.text-white {
  color: var(--color-white);
}
.underline-dashed {
  font-style: normal;
  text-decoration: 1px underline dashed;
  &:lang(zh), &:lang(ja), &:lang(ko) {
    text-underline-offset: .2em;
  }
}
.underline-dotted {
  font-style: normal;
  text-decoration: 1px underline dotted;
  &:lang(zh), &:lang(ja), &:lang(ko) {
    text-underline-offset: .2em;
  }
}
.underline-double {
  font-style: normal;
  text-decoration: 1px underline double;
  &:lang(zh), &:lang(ja), &:lang(ko) {
    text-underline-offset: .2em;
  }
}
.underline-solid {
  font-style: normal;
  text-decoration: 1px underline solid;
  &:lang(zh), &:lang(ja), &:lang(ko) {
    text-underline-offset: .2em;
  }
}
.underline-wavy {
  font-style: normal;
  text-decoration: 1px underline wavy;
  &:lang(zh), &:lang(ja), &:lang(ko) {
    text-underline-offset: .2em;
  }
}
.emphasis-bottom {
  --emphasis-color: currentColor;
  --emphasis-fill: filled;
  --emphasis-style: circle;
  font-style: normal;
  text-emphasis: var(--emphasis-fill) var(--emphasis-style);
  text-emphasis-position: under right;
  text-emphasis-color: var(--emphasis-color);
}
.emphasis-top {
  --emphasis-color: currentColor;
  --emphasis-fill: filled;
  --emphasis-style: circle;
  font-style: normal;
  text-emphasis: var(--emphasis-fill) var(--emphasis-style);
  text-emphasis-position: over right;
  text-emphasis-color: var(--emphasis-color);
}
.italic {
  font-style: italic;
}
.underline {
  text-decoration-line: underline;
}
.btn-link-cjk {
  --: ;
  text-underline-offset: 0.2em;
}
.link-cjk {
  --: ;
  text-underline-offset: 0.2em;
}
.underline {
  &:lang(zh), &:lang(ja), &:lang(ko) {
    text-underline-offset: .2em;
  }
}
.opacity-in {
  --: ;
  opacity: 1;
}
.opacity-out {
  --: ;
  opacity: 0;
}
.table-disabled {
  --: ;
  &:where(tr, td, th) {
    opacity: var(--default-opacity-disabled);
  }
}
.deform-minus {
  >*, &:after {
    opacity: 0;
  }
}
.shadow-in {
  --: ;
  --tw-shadow: 0 0.375rem 2rem var(--tw-shadow-color, oklch(from var(--color-black) l c h / 0.12));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-out {
  --: ;
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[0_10px_40px_rgba\(0\,0\,0\,0\.3\)\] {
  --tw-shadow: 0 10px 40px var(--tw-shadow-color, rgba(0,0,0,0.3));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-inner {
  --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-4 {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.inset-ring {
  --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.inset-ring-4 {
  --tw-inset-ring-shadow: inset 0 0 0 4px var(--tw-inset-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shell-caption {
  &:where(:not(.shell-ghost, .shell-subtle, .shell-muted, .shell-underline)) {
    --shell-border-color: var(--color-caption);
    --shell-border-color-hover: var(--color-caption);
    --shell-border-color-focus: var(--color-caption);
    --shell-background: oklch(from var(--color-caption) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --shell-background: var(--color-caption-surface);
    --shell-background-hover: oklch(from var(--color-caption) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-caption-bg-hover);
    --shell-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-caption-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-caption) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-ghost) {
    --shell-border-color: transparent;
    --shell-border-color-hover: transparent;
    --shell-border-color-focus: oklch(from var(--color-caption-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-background-hover: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-caption-bg-hover);
    --shell-background-focus: var(--shell-background-hover);
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-caption-fg);
    --shell-border-width: 0;
    --shell-outline-width: 2px;
    input:where([readonly]) {
      --input-color: oklch(from var(--color-caption) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-subtle) {
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background: var(--color-caption-bg-hover);
    --shell-border-color: transparent;
    --shell-border-color-hover: oklch(from var(--color-caption-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-caption-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-caption) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-muted) {
    --shell-border-color: oklch(from var(--color-caption) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color: var(--color-caption-bd);
    --shell-border-color-hover: oklch(from var(--color-caption-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-caption-fg);
    --shell-background: var(--color-caption-surface);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-caption) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-underline) {
    --shell-shadow-width: 1px;
    --shell-shadow-width-offset: 0px;
    --shell-padding-x: 0;
    --shell-border-color-hover: var(--color-caption);
    --shell-shadow-color: var(--shell-border-color);
    --shell-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-caption-fg);
    --shell-border-width: 0;
    --shell-border-radius: 0;
    box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-caption) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
      --shell-shadow-color: var(--shell-border-color-hover);
    }
    &:where(:not(:has([disabled])):has(:focus-visible)) {
      --shell-shadow-color: var(--shell-border-color-hover);
      --shell-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:has(:user-invalid)) {
      --shell-shadow-color: var(--color-error);
    }
  }
}
.shell-caution {
  &:where(:not(.shell-ghost, .shell-subtle, .shell-muted, .shell-underline)) {
    --shell-border-color: var(--color-caution);
    --shell-border-color-hover: var(--color-caution);
    --shell-border-color-focus: var(--color-caution);
    --shell-background: oklch(from var(--color-caution) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --shell-background: var(--color-caution-surface);
    --shell-background-hover: oklch(from var(--color-caution) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-caution-bg-hover);
    --shell-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-caution-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-caution) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-ghost) {
    --shell-border-color: transparent;
    --shell-border-color-hover: transparent;
    --shell-border-color-focus: oklch(from var(--color-caution-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-background-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-caution-bg-hover);
    --shell-background-focus: var(--shell-background-hover);
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-caution-fg);
    --shell-border-width: 0;
    --shell-outline-width: 2px;
    input:where([readonly]) {
      --input-color: oklch(from var(--color-caution) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-subtle) {
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background: var(--color-caution-bg-hover);
    --shell-border-color: transparent;
    --shell-border-color-hover: oklch(from var(--color-caution-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-caution-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-caution) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-muted) {
    --shell-border-color: oklch(from var(--color-caution) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color: var(--color-caution-bd);
    --shell-border-color-hover: oklch(from var(--color-caution-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-caution-fg);
    --shell-background: var(--color-caution-surface);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-caution) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-underline) {
    --shell-shadow-width: 1px;
    --shell-shadow-width-offset: 0px;
    --shell-padding-x: 0;
    --shell-border-color-hover: var(--color-caution);
    --shell-shadow-color: var(--shell-border-color);
    --shell-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-caution-fg);
    --shell-border-width: 0;
    --shell-border-radius: 0;
    box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-caution) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
      --shell-shadow-color: var(--shell-border-color-hover);
    }
    &:where(:not(:has([disabled])):has(:focus-visible)) {
      --shell-shadow-color: var(--shell-border-color-hover);
      --shell-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:has(:user-invalid)) {
      --shell-shadow-color: var(--color-error);
    }
  }
}
.shell-description {
  &:where(:not(.shell-ghost, .shell-subtle, .shell-muted, .shell-underline)) {
    --shell-border-color: var(--color-description);
    --shell-border-color-hover: var(--color-description);
    --shell-border-color-focus: var(--color-description);
    --shell-background: oklch(from var(--color-description) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --shell-background: var(--color-description-surface);
    --shell-background-hover: oklch(from var(--color-description) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-description-bg-hover);
    --shell-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-description-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-description) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-ghost) {
    --shell-border-color: transparent;
    --shell-border-color-hover: transparent;
    --shell-border-color-focus: oklch(from var(--color-description-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-background-hover: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-description-bg-hover);
    --shell-background-focus: var(--shell-background-hover);
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-description-fg);
    --shell-border-width: 0;
    --shell-outline-width: 2px;
    input:where([readonly]) {
      --input-color: oklch(from var(--color-description) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-subtle) {
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background: var(--color-description-bg-hover);
    --shell-border-color: transparent;
    --shell-border-color-hover: oklch(from var(--color-description-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-description-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-description) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-muted) {
    --shell-border-color: oklch(from var(--color-description) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color: var(--color-description-bd);
    --shell-border-color-hover: oklch(from var(--color-description-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-description-fg);
    --shell-background: var(--color-description-surface);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-description) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-underline) {
    --shell-shadow-width: 1px;
    --shell-shadow-width-offset: 0px;
    --shell-padding-x: 0;
    --shell-border-color-hover: var(--color-description);
    --shell-shadow-color: var(--shell-border-color);
    --shell-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-description-fg);
    --shell-border-width: 0;
    --shell-border-radius: 0;
    box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-description) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
      --shell-shadow-color: var(--shell-border-color-hover);
    }
    &:where(:not(:has([disabled])):has(:focus-visible)) {
      --shell-shadow-color: var(--shell-border-color-hover);
      --shell-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:has(:user-invalid)) {
      --shell-shadow-color: var(--color-error);
    }
  }
}
.shell-error {
  &:where(:not(.shell-ghost, .shell-subtle, .shell-muted, .shell-underline)) {
    --shell-border-color: var(--color-error);
    --shell-border-color-hover: var(--color-error);
    --shell-border-color-focus: var(--color-error);
    --shell-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --shell-background: var(--color-error-surface);
    --shell-background-hover: oklch(from var(--color-error) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-error-bg-hover);
    --shell-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-error-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-error) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-ghost) {
    --shell-border-color: transparent;
    --shell-border-color-hover: transparent;
    --shell-border-color-focus: oklch(from var(--color-error-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-background-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-error-bg-hover);
    --shell-background-focus: var(--shell-background-hover);
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-error-fg);
    --shell-border-width: 0;
    --shell-outline-width: 2px;
    input:where([readonly]) {
      --input-color: oklch(from var(--color-error) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-subtle) {
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background: var(--color-error-bg-hover);
    --shell-border-color: transparent;
    --shell-border-color-hover: oklch(from var(--color-error-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-error-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-error) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-muted) {
    --shell-border-color: oklch(from var(--color-error) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color: var(--color-error-bd);
    --shell-border-color-hover: oklch(from var(--color-error-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-error-fg);
    --shell-background: var(--color-error-surface);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-error) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-underline) {
    --shell-shadow-width: 1px;
    --shell-shadow-width-offset: 0px;
    --shell-padding-x: 0;
    --shell-border-color-hover: var(--color-error);
    --shell-shadow-color: var(--shell-border-color);
    --shell-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-error-fg);
    --shell-border-width: 0;
    --shell-border-radius: 0;
    box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-error) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
      --shell-shadow-color: var(--shell-border-color-hover);
    }
    &:where(:not(:has([disabled])):has(:focus-visible)) {
      --shell-shadow-color: var(--shell-border-color-hover);
      --shell-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:has(:user-invalid)) {
      --shell-shadow-color: var(--color-error);
    }
  }
}
.shell-highlight {
  &:where(:not(.shell-ghost, .shell-subtle, .shell-muted, .shell-underline)) {
    --shell-border-color: var(--color-highlight);
    --shell-border-color-hover: var(--color-highlight);
    --shell-border-color-focus: var(--color-highlight);
    --shell-background: oklch(from var(--color-highlight) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --shell-background: var(--color-highlight-surface);
    --shell-background-hover: oklch(from var(--color-highlight) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-highlight-bg-hover);
    --shell-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-highlight-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-highlight) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-ghost) {
    --shell-border-color: transparent;
    --shell-border-color-hover: transparent;
    --shell-border-color-focus: oklch(from var(--color-highlight-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-background-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-highlight-bg-hover);
    --shell-background-focus: var(--shell-background-hover);
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-highlight-fg);
    --shell-border-width: 0;
    --shell-outline-width: 2px;
    input:where([readonly]) {
      --input-color: oklch(from var(--color-highlight) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-subtle) {
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background: var(--color-highlight-bg-hover);
    --shell-border-color: transparent;
    --shell-border-color-hover: oklch(from var(--color-highlight-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-highlight-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-highlight) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-muted) {
    --shell-border-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color: var(--color-highlight-bd);
    --shell-border-color-hover: oklch(from var(--color-highlight-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-highlight-fg);
    --shell-background: var(--color-highlight-surface);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-highlight) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-underline) {
    --shell-shadow-width: 1px;
    --shell-shadow-width-offset: 0px;
    --shell-padding-x: 0;
    --shell-border-color-hover: var(--color-highlight);
    --shell-shadow-color: var(--shell-border-color);
    --shell-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-highlight-fg);
    --shell-border-width: 0;
    --shell-border-radius: 0;
    box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-highlight) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
      --shell-shadow-color: var(--shell-border-color-hover);
    }
    &:where(:not(:has([disabled])):has(:focus-visible)) {
      --shell-shadow-color: var(--shell-border-color-hover);
      --shell-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:has(:user-invalid)) {
      --shell-shadow-color: var(--color-error);
    }
  }
}
.shell-info {
  &:where(:not(.shell-ghost, .shell-subtle, .shell-muted, .shell-underline)) {
    --shell-border-color: var(--color-info);
    --shell-border-color-hover: var(--color-info);
    --shell-border-color-focus: var(--color-info);
    --shell-background: oklch(from var(--color-info) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --shell-background: var(--color-info-surface);
    --shell-background-hover: oklch(from var(--color-info) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-info-bg-hover);
    --shell-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-info-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-info) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-ghost) {
    --shell-border-color: transparent;
    --shell-border-color-hover: transparent;
    --shell-border-color-focus: oklch(from var(--color-info-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-background-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-info-bg-hover);
    --shell-background-focus: var(--shell-background-hover);
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-info-fg);
    --shell-border-width: 0;
    --shell-outline-width: 2px;
    input:where([readonly]) {
      --input-color: oklch(from var(--color-info) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-subtle) {
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background: var(--color-info-bg-hover);
    --shell-border-color: transparent;
    --shell-border-color-hover: oklch(from var(--color-info-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-info-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-info) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-muted) {
    --shell-border-color: oklch(from var(--color-info) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color: var(--color-info-bd);
    --shell-border-color-hover: oklch(from var(--color-info-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-info-fg);
    --shell-background: var(--color-info-surface);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-info) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-underline) {
    --shell-shadow-width: 1px;
    --shell-shadow-width-offset: 0px;
    --shell-padding-x: 0;
    --shell-border-color-hover: var(--color-info);
    --shell-shadow-color: var(--shell-border-color);
    --shell-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-info-fg);
    --shell-border-width: 0;
    --shell-border-radius: 0;
    box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-info) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
      --shell-shadow-color: var(--shell-border-color-hover);
    }
    &:where(:not(:has([disabled])):has(:focus-visible)) {
      --shell-shadow-color: var(--shell-border-color-hover);
      --shell-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:has(:user-invalid)) {
      --shell-shadow-color: var(--color-error);
    }
  }
}
.shell-ink {
  &:where(:not(.shell-ghost, .shell-subtle, .shell-muted, .shell-underline)) {
    --shell-border-color: var(--color-ink);
    --shell-border-color-hover: var(--color-ink);
    --shell-border-color-focus: var(--color-ink);
    --shell-background: oklch(from var(--color-ink) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --shell-background: var(--color-ink-surface);
    --shell-background-hover: oklch(from var(--color-ink) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-ink-bg-hover);
    --shell-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-ink-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-ink) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-ghost) {
    --shell-border-color: transparent;
    --shell-border-color-hover: transparent;
    --shell-border-color-focus: oklch(from var(--color-ink-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-background-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-ink-bg-hover);
    --shell-background-focus: var(--shell-background-hover);
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-ink-fg);
    --shell-border-width: 0;
    --shell-outline-width: 2px;
    input:where([readonly]) {
      --input-color: oklch(from var(--color-ink) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-subtle) {
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background: var(--color-ink-bg-hover);
    --shell-border-color: transparent;
    --shell-border-color-hover: oklch(from var(--color-ink-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-ink-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-ink) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-muted) {
    --shell-border-color: oklch(from var(--color-ink) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color: var(--color-ink-bd);
    --shell-border-color-hover: oklch(from var(--color-ink-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-ink-fg);
    --shell-background: var(--color-ink-surface);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-ink) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-underline) {
    --shell-shadow-width: 1px;
    --shell-shadow-width-offset: 0px;
    --shell-padding-x: 0;
    --shell-border-color-hover: var(--color-ink);
    --shell-shadow-color: var(--shell-border-color);
    --shell-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-ink-fg);
    --shell-border-width: 0;
    --shell-border-radius: 0;
    box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-ink) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
      --shell-shadow-color: var(--shell-border-color-hover);
    }
    &:where(:not(:has([disabled])):has(:focus-visible)) {
      --shell-shadow-color: var(--shell-border-color-hover);
      --shell-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:has(:user-invalid)) {
      --shell-shadow-color: var(--color-error);
    }
  }
}
.shell-placeholder {
  &:where(:not(.shell-ghost, .shell-subtle, .shell-muted, .shell-underline)) {
    --shell-border-color: var(--color-placeholder);
    --shell-border-color-hover: var(--color-placeholder);
    --shell-border-color-focus: var(--color-placeholder);
    --shell-background: oklch(from var(--color-placeholder) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --shell-background: var(--color-placeholder-surface);
    --shell-background-hover: oklch(from var(--color-placeholder) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-placeholder-bg-hover);
    --shell-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-placeholder-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-placeholder) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-ghost) {
    --shell-border-color: transparent;
    --shell-border-color-hover: transparent;
    --shell-border-color-focus: oklch(from var(--color-placeholder-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-background-hover: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-placeholder-bg-hover);
    --shell-background-focus: var(--shell-background-hover);
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-placeholder-fg);
    --shell-border-width: 0;
    --shell-outline-width: 2px;
    input:where([readonly]) {
      --input-color: oklch(from var(--color-placeholder) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-subtle) {
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background: var(--color-placeholder-bg-hover);
    --shell-border-color: transparent;
    --shell-border-color-hover: oklch(from var(--color-placeholder-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-placeholder-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-placeholder) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-muted) {
    --shell-border-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color: var(--color-placeholder-bd);
    --shell-border-color-hover: oklch(from var(--color-placeholder-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-placeholder-fg);
    --shell-background: var(--color-placeholder-surface);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-placeholder) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-underline) {
    --shell-shadow-width: 1px;
    --shell-shadow-width-offset: 0px;
    --shell-padding-x: 0;
    --shell-border-color-hover: var(--color-placeholder);
    --shell-shadow-color: var(--shell-border-color);
    --shell-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-placeholder-fg);
    --shell-border-width: 0;
    --shell-border-radius: 0;
    box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-placeholder) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
      --shell-shadow-color: var(--shell-border-color-hover);
    }
    &:where(:not(:has([disabled])):has(:focus-visible)) {
      --shell-shadow-color: var(--shell-border-color-hover);
      --shell-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:has(:user-invalid)) {
      --shell-shadow-color: var(--color-error);
    }
  }
}
.shell-primary {
  &:where(:not(.shell-ghost, .shell-subtle, .shell-muted, .shell-underline)) {
    --shell-border-color: var(--color-primary);
    --shell-border-color-hover: var(--color-primary);
    --shell-border-color-focus: var(--color-primary);
    --shell-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --shell-background: var(--color-primary-surface);
    --shell-background-hover: oklch(from var(--color-primary) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-primary-bg-hover);
    --shell-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-primary-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-primary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-ghost) {
    --shell-border-color: transparent;
    --shell-border-color-hover: transparent;
    --shell-border-color-focus: oklch(from var(--color-primary-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-background-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-primary-bg-hover);
    --shell-background-focus: var(--shell-background-hover);
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-primary-fg);
    --shell-border-width: 0;
    --shell-outline-width: 2px;
    input:where([readonly]) {
      --input-color: oklch(from var(--color-primary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-subtle) {
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background: var(--color-primary-bg-hover);
    --shell-border-color: transparent;
    --shell-border-color-hover: oklch(from var(--color-primary-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-primary-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-primary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-muted) {
    --shell-border-color: oklch(from var(--color-primary) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color: var(--color-primary-bd);
    --shell-border-color-hover: oklch(from var(--color-primary-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-primary-fg);
    --shell-background: var(--color-primary-surface);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-primary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-underline) {
    --shell-shadow-width: 1px;
    --shell-shadow-width-offset: 0px;
    --shell-padding-x: 0;
    --shell-border-color-hover: var(--color-primary);
    --shell-shadow-color: var(--shell-border-color);
    --shell-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-primary-fg);
    --shell-border-width: 0;
    --shell-border-radius: 0;
    box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-primary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
      --shell-shadow-color: var(--shell-border-color-hover);
    }
    &:where(:not(:has([disabled])):has(:focus-visible)) {
      --shell-shadow-color: var(--shell-border-color-hover);
      --shell-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:has(:user-invalid)) {
      --shell-shadow-color: var(--color-error);
    }
  }
}
.shell-secondary {
  &:where(:not(.shell-ghost, .shell-subtle, .shell-muted, .shell-underline)) {
    --shell-border-color: var(--color-secondary);
    --shell-border-color-hover: var(--color-secondary);
    --shell-border-color-focus: var(--color-secondary);
    --shell-background: oklch(from var(--color-secondary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --shell-background: var(--color-secondary-surface);
    --shell-background-hover: oklch(from var(--color-secondary) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-secondary-bg-hover);
    --shell-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-secondary-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-secondary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-ghost) {
    --shell-border-color: transparent;
    --shell-border-color-hover: transparent;
    --shell-border-color-focus: oklch(from var(--color-secondary-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-background-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-secondary-bg-hover);
    --shell-background-focus: var(--shell-background-hover);
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-secondary-fg);
    --shell-border-width: 0;
    --shell-outline-width: 2px;
    input:where([readonly]) {
      --input-color: oklch(from var(--color-secondary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-subtle) {
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background: var(--color-secondary-bg-hover);
    --shell-border-color: transparent;
    --shell-border-color-hover: oklch(from var(--color-secondary-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-secondary-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-secondary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-muted) {
    --shell-border-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color: var(--color-secondary-bd);
    --shell-border-color-hover: oklch(from var(--color-secondary-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-secondary-fg);
    --shell-background: var(--color-secondary-surface);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-secondary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-underline) {
    --shell-shadow-width: 1px;
    --shell-shadow-width-offset: 0px;
    --shell-padding-x: 0;
    --shell-border-color-hover: var(--color-secondary);
    --shell-shadow-color: var(--shell-border-color);
    --shell-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-secondary-fg);
    --shell-border-width: 0;
    --shell-border-radius: 0;
    box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-secondary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
      --shell-shadow-color: var(--shell-border-color-hover);
    }
    &:where(:not(:has([disabled])):has(:focus-visible)) {
      --shell-shadow-color: var(--shell-border-color-hover);
      --shell-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:has(:user-invalid)) {
      --shell-shadow-color: var(--color-error);
    }
  }
}
.shell-success {
  &:where(:not(.shell-ghost, .shell-subtle, .shell-muted, .shell-underline)) {
    --shell-border-color: var(--color-success);
    --shell-border-color-hover: var(--color-success);
    --shell-border-color-focus: var(--color-success);
    --shell-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --shell-background: var(--color-success-surface);
    --shell-background-hover: oklch(from var(--color-success) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-success-bg-hover);
    --shell-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-success-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-success) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-ghost) {
    --shell-border-color: transparent;
    --shell-border-color-hover: transparent;
    --shell-border-color-focus: oklch(from var(--color-success-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-background-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-success-bg-hover);
    --shell-background-focus: var(--shell-background-hover);
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-success-fg);
    --shell-border-width: 0;
    --shell-outline-width: 2px;
    input:where([readonly]) {
      --input-color: oklch(from var(--color-success) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-subtle) {
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background: var(--color-success-bg-hover);
    --shell-border-color: transparent;
    --shell-border-color-hover: oklch(from var(--color-success-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-success-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-success) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-muted) {
    --shell-border-color: oklch(from var(--color-success) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color: var(--color-success-bd);
    --shell-border-color-hover: oklch(from var(--color-success-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-success-fg);
    --shell-background: var(--color-success-surface);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-success) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-underline) {
    --shell-shadow-width: 1px;
    --shell-shadow-width-offset: 0px;
    --shell-padding-x: 0;
    --shell-border-color-hover: var(--color-success);
    --shell-shadow-color: var(--shell-border-color);
    --shell-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-success-fg);
    --shell-border-width: 0;
    --shell-border-radius: 0;
    box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-success) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
      --shell-shadow-color: var(--shell-border-color-hover);
    }
    &:where(:not(:has([disabled])):has(:focus-visible)) {
      --shell-shadow-color: var(--shell-border-color-hover);
      --shell-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:has(:user-invalid)) {
      --shell-shadow-color: var(--color-error);
    }
  }
}
.shell-tertiary {
  &:where(:not(.shell-ghost, .shell-subtle, .shell-muted, .shell-underline)) {
    --shell-border-color: var(--color-tertiary);
    --shell-border-color-hover: var(--color-tertiary);
    --shell-border-color-focus: var(--color-tertiary);
    --shell-background: oklch(from var(--color-tertiary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --shell-background: var(--color-tertiary-surface);
    --shell-background-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-tertiary-bg-hover);
    --shell-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-tertiary-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-tertiary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-ghost) {
    --shell-border-color: transparent;
    --shell-border-color-hover: transparent;
    --shell-border-color-focus: oklch(from var(--color-tertiary-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-background-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-tertiary-bg-hover);
    --shell-background-focus: var(--shell-background-hover);
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-tertiary-fg);
    --shell-border-width: 0;
    --shell-outline-width: 2px;
    input:where([readonly]) {
      --input-color: oklch(from var(--color-tertiary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-subtle) {
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background: var(--color-tertiary-bg-hover);
    --shell-border-color: transparent;
    --shell-border-color-hover: oklch(from var(--color-tertiary-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-tertiary-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-tertiary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-muted) {
    --shell-border-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color: var(--color-tertiary-bd);
    --shell-border-color-hover: oklch(from var(--color-tertiary-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-tertiary-fg);
    --shell-background: var(--color-tertiary-surface);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-tertiary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-underline) {
    --shell-shadow-width: 1px;
    --shell-shadow-width-offset: 0px;
    --shell-padding-x: 0;
    --shell-border-color-hover: var(--color-tertiary);
    --shell-shadow-color: var(--shell-border-color);
    --shell-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-tertiary-fg);
    --shell-border-width: 0;
    --shell-border-radius: 0;
    box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-tertiary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
      --shell-shadow-color: var(--shell-border-color-hover);
    }
    &:where(:not(:has([disabled])):has(:focus-visible)) {
      --shell-shadow-color: var(--shell-border-color-hover);
      --shell-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:has(:user-invalid)) {
      --shell-shadow-color: var(--color-error);
    }
  }
}
.shell-title {
  &:where(:not(.shell-ghost, .shell-subtle, .shell-muted, .shell-underline)) {
    --shell-border-color: var(--color-title);
    --shell-border-color-hover: var(--color-title);
    --shell-border-color-focus: var(--color-title);
    --shell-background: oklch(from var(--color-title) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --shell-background: var(--color-title-surface);
    --shell-background-hover: oklch(from var(--color-title) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-title-bg-hover);
    --shell-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-title-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-title) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-ghost) {
    --shell-border-color: transparent;
    --shell-border-color-hover: transparent;
    --shell-border-color-focus: oklch(from var(--color-title-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-background-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-title-bg-hover);
    --shell-background-focus: var(--shell-background-hover);
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-title-fg);
    --shell-border-width: 0;
    --shell-outline-width: 2px;
    input:where([readonly]) {
      --input-color: oklch(from var(--color-title) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-subtle) {
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background: var(--color-title-bg-hover);
    --shell-border-color: transparent;
    --shell-border-color-hover: oklch(from var(--color-title-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-title-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-title) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-muted) {
    --shell-border-color: oklch(from var(--color-title) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color: var(--color-title-bd);
    --shell-border-color-hover: oklch(from var(--color-title-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-title-fg);
    --shell-background: var(--color-title-surface);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-title) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-underline) {
    --shell-shadow-width: 1px;
    --shell-shadow-width-offset: 0px;
    --shell-padding-x: 0;
    --shell-border-color-hover: var(--color-title);
    --shell-shadow-color: var(--shell-border-color);
    --shell-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-title-fg);
    --shell-border-width: 0;
    --shell-border-radius: 0;
    box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-title) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
      --shell-shadow-color: var(--shell-border-color-hover);
    }
    &:where(:not(:has([disabled])):has(:focus-visible)) {
      --shell-shadow-color: var(--shell-border-color-hover);
      --shell-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:has(:user-invalid)) {
      --shell-shadow-color: var(--color-error);
    }
  }
}
.shell-warning {
  &:where(:not(.shell-ghost, .shell-subtle, .shell-muted, .shell-underline)) {
    --shell-border-color: var(--color-warning);
    --shell-border-color-hover: var(--color-warning);
    --shell-border-color-focus: var(--color-warning);
    --shell-background: oklch(from var(--color-warning) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --shell-background: var(--color-warning-surface);
    --shell-background-hover: oklch(from var(--color-warning) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-warning-bg-hover);
    --shell-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-warning-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-warning) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-ghost) {
    --shell-border-color: transparent;
    --shell-border-color-hover: transparent;
    --shell-border-color-focus: oklch(from var(--color-warning-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-background-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-hover: var(--color-warning-bg-hover);
    --shell-background-focus: var(--shell-background-hover);
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-warning-fg);
    --shell-border-width: 0;
    --shell-outline-width: 2px;
    input:where([readonly]) {
      --input-color: oklch(from var(--color-warning) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-subtle) {
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background: var(--color-warning-bg-hover);
    --shell-border-color: transparent;
    --shell-border-color-hover: oklch(from var(--color-warning-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-warning-fg);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-warning) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-muted) {
    --shell-border-color: oklch(from var(--color-warning) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color: var(--color-warning-bd);
    --shell-border-color-hover: oklch(from var(--color-warning-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-warning-fg);
    --shell-background: var(--color-warning-surface);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-warning) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-underline) {
    --shell-shadow-width: 1px;
    --shell-shadow-width-offset: 0px;
    --shell-padding-x: 0;
    --shell-border-color-hover: var(--color-warning);
    --shell-shadow-color: var(--shell-border-color);
    --shell-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-color: var(--color-warning-fg);
    --shell-border-width: 0;
    --shell-border-radius: 0;
    box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-warning) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
      --shell-shadow-color: var(--shell-border-color-hover);
    }
    &:where(:not(:has([disabled])):has(:focus-visible)) {
      --shell-shadow-color: var(--shell-border-color-hover);
      --shell-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:has(:user-invalid)) {
      --shell-shadow-color: var(--color-error);
    }
  }
}
.shell-blue-500 {
  &:where(:not(.shell-ghost, .shell-subtle, .shell-muted, .shell-underline)) {
    --shell-border-color: var(--color-blue-500);
    --shell-border-color-hover: var(--color-blue-500);
    --shell-border-color-focus: var(--color-blue-500);
    --shell-background: oklch(from var(--color-blue-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --shell-background-hover: oklch(from var(--color-blue-500) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-color: oklch(from var(--color-blue-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-blue-500) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-ghost) {
    --shell-border-color: transparent;
    --shell-border-color-hover: transparent;
    --shell-border-color-focus: oklch(from var(--color-blue-500) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-background-hover: oklch(from var(--color-blue-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-focus: var(--shell-background-hover);
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-color: oklch(from var(--color-blue-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-width: 0;
    --shell-outline-width: 2px;
    input:where([readonly]) {
      --input-color: oklch(from var(--color-blue-500) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-subtle) {
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-background: oklch(from var(--color-blue-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-border-color: transparent;
    --shell-border-color-hover: oklch(from var(--color-blue-500) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-blue-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-blue-500) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-muted) {
    --shell-border-color: oklch(from var(--color-blue-500) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-hover: oklch(from var(--color-blue-500) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-blue-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-blue-500) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-underline) {
    --shell-shadow-width: 1px;
    --shell-shadow-width-offset: 0px;
    --shell-padding-x: 0;
    --shell-border-color-hover: var(--color-blue-500);
    --shell-shadow-color: var(--shell-border-color);
    --shell-color: oklch(from var(--color-blue-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-width: 0;
    --shell-border-radius: 0;
    box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-blue-500) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
      --shell-shadow-color: var(--shell-border-color-hover);
    }
    &:where(:not(:has([disabled])):has(:focus-visible)) {
      --shell-shadow-color: var(--shell-border-color-hover);
      --shell-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:has(:user-invalid)) {
      --shell-shadow-color: var(--color-error);
    }
  }
}
.shell-teal-500 {
  &:where(:not(.shell-ghost, .shell-subtle, .shell-muted, .shell-underline)) {
    --shell-border-color: var(--color-teal-500);
    --shell-border-color-hover: var(--color-teal-500);
    --shell-border-color-focus: var(--color-teal-500);
    --shell-background: oklch(from var(--color-teal-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --shell-background-hover: oklch(from var(--color-teal-500) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-color: oklch(from var(--color-teal-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-teal-500) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-ghost) {
    --shell-border-color: transparent;
    --shell-border-color-hover: transparent;
    --shell-border-color-focus: oklch(from var(--color-teal-500) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-background-hover: oklch(from var(--color-teal-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-background-focus: var(--shell-background-hover);
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-color: oklch(from var(--color-teal-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-width: 0;
    --shell-outline-width: 2px;
    input:where([readonly]) {
      --input-color: oklch(from var(--color-teal-500) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-subtle) {
    --shell-background-invalid: var(--color-error-bg-hover);
    --shell-background: oklch(from var(--color-teal-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --shell-border-color: transparent;
    --shell-border-color-hover: oklch(from var(--color-teal-500) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-teal-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-teal-500) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-muted) {
    --shell-border-color: oklch(from var(--color-teal-500) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-hover: oklch(from var(--color-teal-500) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-color-focus: var(--shell-border-color-hover);
    --shell-color: oklch(from var(--color-teal-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-teal-500) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
  }
  &:where(.shell-underline) {
    --shell-shadow-width: 1px;
    --shell-shadow-width-offset: 0px;
    --shell-padding-x: 0;
    --shell-border-color-hover: var(--color-teal-500);
    --shell-shadow-color: var(--shell-border-color);
    --shell-color: oklch(from var(--color-teal-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --shell-border-width: 0;
    --shell-border-radius: 0;
    box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
    input:where([readonly]) {
      --input-color: oklch(from var(--color-teal-500) calc(l* var(--light-readonly)) calc(c * 0.8) h);
    }
    &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
      --shell-shadow-color: var(--shell-border-color-hover);
    }
    &:where(:not(:has([disabled])):has(:focus-visible)) {
      --shell-shadow-color: var(--shell-border-color-hover);
      --shell-shadow-width-offset: 1px;
      outline: none;
    }
    &:where(:has(:user-invalid)) {
      --shell-shadow-color: var(--color-error);
    }
  }
}
.shell-underline-error {
  --shell-shadow-width: 1px;
  --shell-shadow-width-offset: 0px;
  --shell-padding-x: 0;
  --shell-border-color-hover: var(--color-error);
  --shell-shadow-color: var(--shell-border-color);
  --shell-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-error-fg);
  --shell-border-width: 0;
  --shell-border-radius: 0;
  box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-error) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
    --shell-shadow-color: var(--shell-border-color-hover);
  }
  &:where(:not(:has([disabled])):has(:focus-visible)) {
    --shell-shadow-color: var(--shell-border-color-hover);
    --shell-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:has(:user-invalid)) {
    --shell-shadow-color: var(--color-error);
  }
}
.shell-underline-highlight {
  --shell-shadow-width: 1px;
  --shell-shadow-width-offset: 0px;
  --shell-padding-x: 0;
  --shell-border-color-hover: var(--color-highlight);
  --shell-shadow-color: var(--shell-border-color);
  --shell-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-highlight-fg);
  --shell-border-width: 0;
  --shell-border-radius: 0;
  box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-highlight) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
    --shell-shadow-color: var(--shell-border-color-hover);
  }
  &:where(:not(:has([disabled])):has(:focus-visible)) {
    --shell-shadow-color: var(--shell-border-color-hover);
    --shell-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:has(:user-invalid)) {
    --shell-shadow-color: var(--color-error);
  }
}
.shell-underline-info {
  --shell-shadow-width: 1px;
  --shell-shadow-width-offset: 0px;
  --shell-padding-x: 0;
  --shell-border-color-hover: var(--color-info);
  --shell-shadow-color: var(--shell-border-color);
  --shell-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-info-fg);
  --shell-border-width: 0;
  --shell-border-radius: 0;
  box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-info) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
    --shell-shadow-color: var(--shell-border-color-hover);
  }
  &:where(:not(:has([disabled])):has(:focus-visible)) {
    --shell-shadow-color: var(--shell-border-color-hover);
    --shell-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:has(:user-invalid)) {
    --shell-shadow-color: var(--color-error);
  }
}
.shell-underline-primary {
  --shell-shadow-width: 1px;
  --shell-shadow-width-offset: 0px;
  --shell-padding-x: 0;
  --shell-border-color-hover: var(--color-primary);
  --shell-shadow-color: var(--shell-border-color);
  --shell-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-primary-fg);
  --shell-border-width: 0;
  --shell-border-radius: 0;
  box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-primary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
    --shell-shadow-color: var(--shell-border-color-hover);
  }
  &:where(:not(:has([disabled])):has(:focus-visible)) {
    --shell-shadow-color: var(--shell-border-color-hover);
    --shell-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:has(:user-invalid)) {
    --shell-shadow-color: var(--color-error);
  }
}
.shell-underline-success {
  --shell-shadow-width: 1px;
  --shell-shadow-width-offset: 0px;
  --shell-padding-x: 0;
  --shell-border-color-hover: var(--color-success);
  --shell-shadow-color: var(--shell-border-color);
  --shell-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-success-fg);
  --shell-border-width: 0;
  --shell-border-radius: 0;
  box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-success) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
    --shell-shadow-color: var(--shell-border-color-hover);
  }
  &:where(:not(:has([disabled])):has(:focus-visible)) {
    --shell-shadow-color: var(--shell-border-color-hover);
    --shell-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:has(:user-invalid)) {
    --shell-shadow-color: var(--color-error);
  }
}
.shell-underline-warning {
  --shell-shadow-width: 1px;
  --shell-shadow-width-offset: 0px;
  --shell-padding-x: 0;
  --shell-border-color-hover: var(--color-warning);
  --shell-shadow-color: var(--shell-border-color);
  --shell-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-warning-fg);
  --shell-border-width: 0;
  --shell-border-radius: 0;
  box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-warning) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
    --shell-shadow-color: var(--shell-border-color-hover);
  }
  &:where(:not(:has([disabled])):has(:focus-visible)) {
    --shell-shadow-color: var(--shell-border-color-hover);
    --shell-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:has(:user-invalid)) {
    --shell-shadow-color: var(--color-error);
  }
}
.shell-underline-blue-200 {
  --shell-shadow-width: 1px;
  --shell-shadow-width-offset: 0px;
  --shell-padding-x: 0;
  --shell-border-color-hover: var(--color-blue-200);
  --shell-shadow-color: var(--shell-border-color);
  --shell-color: oklch(from var(--color-blue-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-width: 0;
  --shell-border-radius: 0;
  box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-blue-200) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
    --shell-shadow-color: var(--shell-border-color-hover);
  }
  &:where(:not(:has([disabled])):has(:focus-visible)) {
    --shell-shadow-color: var(--shell-border-color-hover);
    --shell-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:has(:user-invalid)) {
    --shell-shadow-color: var(--color-error);
  }
}
.shell-underline-blue-500 {
  --shell-shadow-width: 1px;
  --shell-shadow-width-offset: 0px;
  --shell-padding-x: 0;
  --shell-border-color-hover: var(--color-blue-500);
  --shell-shadow-color: var(--shell-border-color);
  --shell-color: oklch(from var(--color-blue-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-width: 0;
  --shell-border-radius: 0;
  box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-blue-500) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
  &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
    --shell-shadow-color: var(--shell-border-color-hover);
  }
  &:where(:not(:has([disabled])):has(:focus-visible)) {
    --shell-shadow-color: var(--shell-border-color-hover);
    --shell-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:has(:user-invalid)) {
    --shell-shadow-color: var(--color-error);
  }
}
.shell-underline {
  --shell-shadow-width: 1px;
  --shell-shadow-width-offset: 0px;
  --shell-padding-x: 0;
  --shell-border-color-hover: var(--color-title);
  --shell-shadow-color: var(--shell-border-color);
  --shell-border-width: 0;
  --shell-border-radius: 0;
  box-shadow: 0 calc(var(--shell-shadow-width) + var(--shell-shadow-width-offset)) 0 0 var(--shell-shadow-color);
  &:where(:has([placeholder]:not(:placeholder-shown))), &:where(:not(:has([disabled])):hover) {
    --shell-shadow-color: var(--shell-border-color-hover);
  }
  &:where(:not(:has([disabled])):has(:focus-visible)) {
    --shell-shadow-color: var(--shell-border-color-hover);
    --shell-shadow-width-offset: 1px;
    outline: none;
  }
  &:where(:has(:user-invalid)) {
    --shell-shadow-color: var(--shell-color-invalid);
  }
}
.table-grid {
  border-inline-start: 1px solid var(--table-border-color);
  box-shadow: inset calc(-1px * var(--direction-factor-1)) 0 0 0 var(--table-border-color);
  td, th {
    box-shadow: inset calc(-1px * var(--direction-factor-1)) 0 0 0 var(--table-border-color);
  }
}
.shadow-blue-500\/50 {
  --tw-shadow-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.shadow-green-500\/40 {
  --tw-shadow-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-green-500) 40%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.shadow-red-500\/40 {
  --tw-shadow-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 40%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.ring-blue-500 {
  --tw-ring-color: var(--color-blue-500);
}
.ring-primary {
  --tw-ring-color: var(--color-primary);
}
.inset-ring-primary {
  --tw-inset-ring-color: var(--color-primary);
}
.ring-offset-2 {
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
.check-vivid-error {
  --check-border-radius: var(--default-border-radius);
  &:where(.check-multiline) {
    --check-padding-x: 1em;
    --check-padding-y: 1em;
  }
  &:where(:not(.check-multiline)) {
    --check-padding-x: calc(var(--check-height)/3);
    --check-height: var(--default-height-input);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
    outline: var(--default-outline-width) solid var(--check-outline-color);
    outline-offset: var(--default-outline-offset);
  }
  --check-input-border-color: oklch(from var(--color-error) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-error-bd-hover);
  --check-input-border-color-hover: var(--color-error);
  --check-input-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-error-surface);
  --check-input-fill: var(--color-error);
  --check-outline-color: var(--color-error);
  --check-halo-color: var(--color-error);
  --check-indeterminate-bg: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-error-bd);
  --check-indeterminate-bd: var(--color-error);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-error-contrast);
    --check-input-background: var(--color-error);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  --check-color: oklch(from var(--color-error) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  --check-color: var(--color-error-body);
  --check-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --check-background: var(--color-error-bg-hover);
  --check-input-background: transparent;
  &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
    --check-background: var(--color-error);
    --check-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-color: var(--color-error-contrast);
    --check-input-fill: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-error-contrast);
    &:where(:not(:has(:focus-visible))) {
      --check-input-border-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-input-border-color: var(--color-error-contrast);
      --check-input-border-color-hover: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-input-border-color-hover: var(--color-error-contrast);
    }
  }
  input:checked {
    outline-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    outline-color: var(--color-error-contrast);
  }
}
.check-vivid-primary {
  --check-border-radius: var(--default-border-radius);
  &:where(.check-multiline) {
    --check-padding-x: 1em;
    --check-padding-y: 1em;
  }
  &:where(:not(.check-multiline)) {
    --check-padding-x: calc(var(--check-height)/3);
    --check-height: var(--default-height-input);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
    outline: var(--default-outline-width) solid var(--check-outline-color);
    outline-offset: var(--default-outline-offset);
  }
  --check-input-border-color: oklch(from var(--color-primary) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-primary-bd-hover);
  --check-input-border-color-hover: var(--color-primary);
  --check-input-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-primary-surface);
  --check-input-fill: var(--color-primary);
  --check-outline-color: var(--color-primary);
  --check-halo-color: var(--color-primary);
  --check-indeterminate-bg: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-primary-bd);
  --check-indeterminate-bd: var(--color-primary);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-primary-contrast);
    --check-input-background: var(--color-primary);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  --check-color: oklch(from var(--color-primary) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  --check-color: var(--color-primary-body);
  --check-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --check-background: var(--color-primary-bg-hover);
  --check-input-background: transparent;
  &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
    --check-background: var(--color-primary);
    --check-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-color: var(--color-primary-contrast);
    --check-input-fill: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-primary-contrast);
    &:where(:not(:has(:focus-visible))) {
      --check-input-border-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-input-border-color: var(--color-primary-contrast);
      --check-input-border-color-hover: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-input-border-color-hover: var(--color-primary-contrast);
    }
  }
  input:checked {
    outline-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    outline-color: var(--color-primary-contrast);
  }
}
.check-vivid-success {
  --check-border-radius: var(--default-border-radius);
  &:where(.check-multiline) {
    --check-padding-x: 1em;
    --check-padding-y: 1em;
  }
  &:where(:not(.check-multiline)) {
    --check-padding-x: calc(var(--check-height)/3);
    --check-height: var(--default-height-input);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
    outline: var(--default-outline-width) solid var(--check-outline-color);
    outline-offset: var(--default-outline-offset);
  }
  --check-input-border-color: oklch(from var(--color-success) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-success-bd-hover);
  --check-input-border-color-hover: var(--color-success);
  --check-input-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-success-surface);
  --check-input-fill: var(--color-success);
  --check-outline-color: var(--color-success);
  --check-halo-color: var(--color-success);
  --check-indeterminate-bg: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-success-bd);
  --check-indeterminate-bd: var(--color-success);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-success-contrast);
    --check-input-background: var(--color-success);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  --check-color: oklch(from var(--color-success) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  --check-color: var(--color-success-body);
  --check-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --check-background: var(--color-success-bg-hover);
  --check-input-background: transparent;
  &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
    --check-background: var(--color-success);
    --check-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-color: var(--color-success-contrast);
    --check-input-fill: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-success-contrast);
    &:where(:not(:has(:focus-visible))) {
      --check-input-border-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-input-border-color: var(--color-success-contrast);
      --check-input-border-color-hover: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --check-input-border-color-hover: var(--color-success-contrast);
    }
  }
  input:checked {
    outline-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    outline-color: var(--color-success-contrast);
  }
}
.check-vivid {
  :where(&) {
    --check-background: var(--color-title-bg-hover);
    --check-border-radius: var(--default-border-radius);
    &:where(.check-multiline) {
      --check-padding-x: 1em;
      --check-padding-y: 1em;
    }
    &:where(:not(.check-multiline)) {
      --check-padding-x: calc(var(--check-height)/3);
      --check-height: var(--default-height-input);
    }
    &:where(:has(:focus-visible)) {
      --check-input-border-color: transparent;
      outline: var(--default-outline-width) solid var(--check-outline-color);
      outline-offset: var(--default-outline-offset);
    }
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-background: var(--color-primary);
      --check-color: var(--color-primary-contrast);
      --check-input-background: transparent;
      --check-input-fill: var(--color-primary-contrast);
      &:where(:not(:has(:focus-visible))) {
        --check-input-border-color: var(--color-primary-contrast);
        --check-input-border-color-hover: var(--color-primary-contrast);
      }
    }
    input:checked {
      outline-color: var(--color-primary-contrast);
    }
  }
}
.check-outline-error {
  --check-border-width: 1px;
  --check-border-radius: var(--default-border-radius);
  &:where(.check-multiline) {
    --check-padding-x: 1em;
    --check-padding-y: 1em;
  }
  &:where(:not(.check-multiline)) {
    --check-padding-x: calc(var(--check-height)/3);
    --check-height: var(--default-height-input);
  }
  &:where(:has(:focus-visible)) {
    outline: var(--default-outline-width) solid var(--check-outline-color);
    outline-offset: var(--default-outline-offset);
  }
  --check-input-border-color: oklch(from var(--color-error) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-error-bd-hover);
  --check-input-border-color-hover: var(--color-error);
  --check-input-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-error-surface);
  --check-input-fill: var(--color-error);
  --check-outline-color: var(--color-error);
  --check-halo-color: var(--color-error);
  --check-indeterminate-bg: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-error-bd);
  --check-indeterminate-bd: var(--color-error);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-error-contrast);
    --check-input-background: var(--color-error);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  --check-border-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-border-color: var(--color-error-bd);
  --check-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-background: var(--color-error-surface);
  &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
    --check-border-color: oklch(from var(--color-error) min(l, 0.74) c h);
    --check-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-error-surface);
    --check-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --check-color: var(--color-error-fg);
  }
}
.check-outline-primary {
  --check-border-width: 1px;
  --check-border-radius: var(--default-border-radius);
  &:where(.check-multiline) {
    --check-padding-x: 1em;
    --check-padding-y: 1em;
  }
  &:where(:not(.check-multiline)) {
    --check-padding-x: calc(var(--check-height)/3);
    --check-height: var(--default-height-input);
  }
  &:where(:has(:focus-visible)) {
    outline: var(--default-outline-width) solid var(--check-outline-color);
    outline-offset: var(--default-outline-offset);
  }
  --check-input-border-color: oklch(from var(--color-primary) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-primary-bd-hover);
  --check-input-border-color-hover: var(--color-primary);
  --check-input-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-primary-surface);
  --check-input-fill: var(--color-primary);
  --check-outline-color: var(--color-primary);
  --check-halo-color: var(--color-primary);
  --check-indeterminate-bg: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-primary-bd);
  --check-indeterminate-bd: var(--color-primary);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-primary-contrast);
    --check-input-background: var(--color-primary);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  --check-border-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-border-color: var(--color-primary-bd);
  --check-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-background: var(--color-primary-surface);
  &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
    --check-border-color: oklch(from var(--color-primary) min(l, 0.74) c h);
    --check-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-primary-surface);
    --check-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --check-color: var(--color-primary-fg);
  }
}
.check-outline-success {
  --check-border-width: 1px;
  --check-border-radius: var(--default-border-radius);
  &:where(.check-multiline) {
    --check-padding-x: 1em;
    --check-padding-y: 1em;
  }
  &:where(:not(.check-multiline)) {
    --check-padding-x: calc(var(--check-height)/3);
    --check-height: var(--default-height-input);
  }
  &:where(:has(:focus-visible)) {
    outline: var(--default-outline-width) solid var(--check-outline-color);
    outline-offset: var(--default-outline-offset);
  }
  --check-input-border-color: oklch(from var(--color-success) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-success-bd-hover);
  --check-input-border-color-hover: var(--color-success);
  --check-input-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-success-surface);
  --check-input-fill: var(--color-success);
  --check-outline-color: var(--color-success);
  --check-halo-color: var(--color-success);
  --check-indeterminate-bg: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-success-bd);
  --check-indeterminate-bd: var(--color-success);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-success-contrast);
    --check-input-background: var(--color-success);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  --check-border-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-border-color: var(--color-success-bd);
  --check-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-background: var(--color-success-surface);
  &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
    --check-border-color: oklch(from var(--color-success) min(l, 0.74) c h);
    --check-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-success-surface);
    --check-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --check-color: var(--color-success-fg);
  }
}
.check-muted-error {
  --check-border-width: 1px;
  --check-border-radius: var(--default-border-radius);
  &:where(.check-multiline) {
    --check-padding-x: 1em;
    --check-padding-y: 1em;
  }
  &:where(:not(.check-multiline)) {
    --check-padding-x: calc(var(--check-height)/3);
    --check-height: var(--default-height-input);
  }
  &:where(:has(:focus-visible)) {
    outline: var(--default-outline-width) solid var(--check-outline-color);
    outline-offset: var(--default-outline-offset);
  }
  --check-input-border-color: oklch(from var(--color-error) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-error-bd-hover);
  --check-input-border-color-hover: var(--color-error);
  --check-input-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-error-surface);
  --check-input-fill: var(--color-error);
  --check-outline-color: var(--color-error);
  --check-halo-color: var(--color-error);
  --check-indeterminate-bg: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-error-bd);
  --check-indeterminate-bd: var(--color-error);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-error-contrast);
    --check-input-background: var(--color-error);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  --check-border-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-border-color: var(--color-error-bd);
  --check-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-background: var(--color-error-surface);
  &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
    --check-border-color: oklch(from var(--color-error) var(--light-threshold-bd-active) calc(var(--chorme-bd-active) * var(--color-c-factor)) h);
    --check-border-color: var(--color-error-bd-active);
    --check-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-error-surface);
  }
}
.check-muted-primary {
  --check-border-width: 1px;
  --check-border-radius: var(--default-border-radius);
  &:where(.check-multiline) {
    --check-padding-x: 1em;
    --check-padding-y: 1em;
  }
  &:where(:not(.check-multiline)) {
    --check-padding-x: calc(var(--check-height)/3);
    --check-height: var(--default-height-input);
  }
  &:where(:has(:focus-visible)) {
    outline: var(--default-outline-width) solid var(--check-outline-color);
    outline-offset: var(--default-outline-offset);
  }
  --check-input-border-color: oklch(from var(--color-primary) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-primary-bd-hover);
  --check-input-border-color-hover: var(--color-primary);
  --check-input-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-primary-surface);
  --check-input-fill: var(--color-primary);
  --check-outline-color: var(--color-primary);
  --check-halo-color: var(--color-primary);
  --check-indeterminate-bg: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-primary-bd);
  --check-indeterminate-bd: var(--color-primary);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-primary-contrast);
    --check-input-background: var(--color-primary);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  --check-border-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-border-color: var(--color-primary-bd);
  --check-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-background: var(--color-primary-surface);
  &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
    --check-border-color: oklch(from var(--color-primary) var(--light-threshold-bd-active) calc(var(--chorme-bd-active) * var(--color-c-factor)) h);
    --check-border-color: var(--color-primary-bd-active);
    --check-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-primary-surface);
  }
}
.check-muted-success {
  --check-border-width: 1px;
  --check-border-radius: var(--default-border-radius);
  &:where(.check-multiline) {
    --check-padding-x: 1em;
    --check-padding-y: 1em;
  }
  &:where(:not(.check-multiline)) {
    --check-padding-x: calc(var(--check-height)/3);
    --check-height: var(--default-height-input);
  }
  &:where(:has(:focus-visible)) {
    outline: var(--default-outline-width) solid var(--check-outline-color);
    outline-offset: var(--default-outline-offset);
  }
  --check-input-border-color: oklch(from var(--color-success) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-success-bd-hover);
  --check-input-border-color-hover: var(--color-success);
  --check-input-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-success-surface);
  --check-input-fill: var(--color-success);
  --check-outline-color: var(--color-success);
  --check-halo-color: var(--color-success);
  --check-indeterminate-bg: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-success-bd);
  --check-indeterminate-bd: var(--color-success);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-success-contrast);
    --check-input-background: var(--color-success);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  --check-border-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-border-color: var(--color-success-bd);
  --check-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-background: var(--color-success-surface);
  &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
    --check-border-color: oklch(from var(--color-success) var(--light-threshold-bd-active) calc(var(--chorme-bd-active) * var(--color-c-factor)) h);
    --check-border-color: var(--color-success-bd-active);
    --check-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --check-background: var(--color-success-surface);
  }
}
.check-subtle-error {
  --check-background: var(--color-title-bg-hover);
  --check-border-radius: var(--default-border-radius);
  &:where(.check-multiline) {
    --check-padding-x: 1em;
    --check-padding-y: 1em;
  }
  &:where(:not(.check-multiline)) {
    --check-padding-x: calc(var(--check-height)/3);
    --check-height: var(--default-height-input);
  }
  &:where(:has(:focus-visible)) {
    outline: var(--default-outline-width) solid var(--check-outline-color);
    outline-offset: var(--default-outline-offset);
  }
  --check-input-border-color: oklch(from var(--color-error) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-error-bd-hover);
  --check-input-border-color-hover: var(--color-error);
  --check-input-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-error-surface);
  --check-input-fill: var(--color-error);
  --check-outline-color: var(--color-error);
  --check-halo-color: var(--color-error);
  --check-indeterminate-bg: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-error-bd);
  --check-indeterminate-bd: var(--color-error);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-error-contrast);
    --check-input-background: var(--color-error);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  --check-color: oklch(from var(--color-error) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  --check-color: var(--color-error-body);
  --check-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --check-background: var(--color-error-bg-hover);
  &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
    --check-background: oklch(from var(--color-error) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-error-bg-active);
  }
  &:where(:has(:checked)) {
    --check-background: oklch(from var(--color-error) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-error-bg-active);
  }
}
.check-subtle-primary {
  --check-background: var(--color-title-bg-hover);
  --check-border-radius: var(--default-border-radius);
  &:where(.check-multiline) {
    --check-padding-x: 1em;
    --check-padding-y: 1em;
  }
  &:where(:not(.check-multiline)) {
    --check-padding-x: calc(var(--check-height)/3);
    --check-height: var(--default-height-input);
  }
  &:where(:has(:focus-visible)) {
    outline: var(--default-outline-width) solid var(--check-outline-color);
    outline-offset: var(--default-outline-offset);
  }
  --check-input-border-color: oklch(from var(--color-primary) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-primary-bd-hover);
  --check-input-border-color-hover: var(--color-primary);
  --check-input-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-primary-surface);
  --check-input-fill: var(--color-primary);
  --check-outline-color: var(--color-primary);
  --check-halo-color: var(--color-primary);
  --check-indeterminate-bg: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-primary-bd);
  --check-indeterminate-bd: var(--color-primary);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-primary-contrast);
    --check-input-background: var(--color-primary);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  --check-color: oklch(from var(--color-primary) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  --check-color: var(--color-primary-body);
  --check-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --check-background: var(--color-primary-bg-hover);
  &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
    --check-background: oklch(from var(--color-primary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-primary-bg-active);
  }
  &:where(:has(:checked)) {
    --check-background: oklch(from var(--color-primary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-primary-bg-active);
  }
}
.check-subtle-success {
  --check-background: var(--color-title-bg-hover);
  --check-border-radius: var(--default-border-radius);
  &:where(.check-multiline) {
    --check-padding-x: 1em;
    --check-padding-y: 1em;
  }
  &:where(:not(.check-multiline)) {
    --check-padding-x: calc(var(--check-height)/3);
    --check-height: var(--default-height-input);
  }
  &:where(:has(:focus-visible)) {
    outline: var(--default-outline-width) solid var(--check-outline-color);
    outline-offset: var(--default-outline-offset);
  }
  --check-input-border-color: oklch(from var(--color-success) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-success-bd-hover);
  --check-input-border-color-hover: var(--color-success);
  --check-input-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-success-surface);
  --check-input-fill: var(--color-success);
  --check-outline-color: var(--color-success);
  --check-halo-color: var(--color-success);
  --check-indeterminate-bg: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-success-bd);
  --check-indeterminate-bd: var(--color-success);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-success-contrast);
    --check-input-background: var(--color-success);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  --check-color: oklch(from var(--color-success) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  --check-color: var(--color-success-body);
  --check-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --check-background: var(--color-success-bg-hover);
  &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
    --check-background: oklch(from var(--color-success) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-success-bg-active);
  }
  &:where(:has(:checked)) {
    --check-background: oklch(from var(--color-success) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-success-bg-active);
  }
}
.check-ghost-error {
  --check-border-radius: var(--default-border-radius);
  &:where(.check-multiline) {
    --check-padding-x: 1em;
    --check-padding-y: 1em;
  }
  &:where(:not(.check-multiline)) {
    --check-padding-x: calc(var(--check-height)/3);
    --check-height: var(--default-height-input);
  }
  &:where(:has(:focus-visible)) {
    outline: var(--default-outline-width) solid var(--check-outline-color);
    outline-offset: var(--default-outline-offset);
  }
  --check-input-border-color: oklch(from var(--color-error) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-error-bd-hover);
  --check-input-border-color-hover: var(--color-error);
  --check-input-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-error-surface);
  --check-input-fill: var(--color-error);
  --check-outline-color: var(--color-error);
  --check-halo-color: var(--color-error);
  --check-indeterminate-bg: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-error-bd);
  --check-indeterminate-bd: var(--color-error);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-error-contrast);
    --check-input-background: var(--color-error);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
    --check-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-error-bg-hover);
  }
  &:where(:has(:checked)) {
    --check-background: oklch(from var(--color-error) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --check-background: var(--color-error-bg-active);
  }
}
.check-ghost-primary {
  --check-border-radius: var(--default-border-radius);
  &:where(.check-multiline) {
    --check-padding-x: 1em;
    --check-padding-y: 1em;
  }
  &:where(:not(.check-multiline)) {
    --check-padding-x: calc(var(--check-height)/3);
    --check-height: var(--default-height-input);
  }
  &:where(:has(:focus-visible)) {
    outline: var(--default-outline-width) solid var(--check-outline-color);
    outline-offset: var(--default-outline-offset);
  }
  --check-input-border-color: oklch(from var(--color-primary) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-primary-bd-hover);
  --check-input-border-color-hover: var(--color-primary);
  --check-input-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-primary-surface);
  --check-input-fill: var(--color-primary);
  --check-outline-color: var(--color-primary);
  --check-halo-color: var(--color-primary);
  --check-indeterminate-bg: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-primary-bd);
  --check-indeterminate-bd: var(--color-primary);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-primary-contrast);
    --check-input-background: var(--color-primary);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
    --check-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-primary-bg-hover);
  }
  &:where(:has(:checked)) {
    --check-background: oklch(from var(--color-primary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --check-background: var(--color-primary-bg-active);
  }
}
.check-ghost-success {
  --check-border-radius: var(--default-border-radius);
  &:where(.check-multiline) {
    --check-padding-x: 1em;
    --check-padding-y: 1em;
  }
  &:where(:not(.check-multiline)) {
    --check-padding-x: calc(var(--check-height)/3);
    --check-height: var(--default-height-input);
  }
  &:where(:has(:focus-visible)) {
    outline: var(--default-outline-width) solid var(--check-outline-color);
    outline-offset: var(--default-outline-offset);
  }
  --check-input-border-color: oklch(from var(--color-success) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  --check-input-border-color: var(--color-success-bd-hover);
  --check-input-border-color-hover: var(--color-success);
  --check-input-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --check-input-background: var(--color-success-surface);
  --check-input-fill: var(--color-success);
  --check-outline-color: var(--color-success);
  --check-halo-color: var(--color-success);
  --check-indeterminate-bg: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --check-indeterminate-bg: var(--color-success-bd);
  --check-indeterminate-bd: var(--color-success);
  &:where(:has([type=checkbox]:checked)) {
    --check-input-fill: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --check-input-fill: var(--color-success-contrast);
    --check-input-background: var(--color-success);
  }
  &:where(:has(:focus-visible)) {
    --check-input-border-color: transparent;
  }
  input {
    --default-outline-color: var(--check-outline-color);
  }
  &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
    --check-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --check-background: var(--color-success-bg-hover);
  }
  &:where(:has(:checked)) {
    --check-background: oklch(from var(--color-success) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --check-background: var(--color-success-bg-active);
  }
}
.check-outline {
  :where(&) {
    --check-border-color: var(--color-title-bd);
    --check-background: var(--color-title-surface);
    --check-border-width: 1px;
    --check-border-radius: var(--default-border-radius);
    &:where(.check-multiline) {
      --check-padding-x: 1em;
      --check-padding-y: 1em;
    }
    &:where(:not(.check-multiline)) {
      --check-padding-x: calc(var(--check-height)/3);
      --check-height: var(--default-height-input);
    }
    &:where(:has(:focus-visible)) {
      outline: var(--default-outline-width) solid var(--check-outline-color);
      outline-offset: var(--default-outline-offset);
    }
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: var(--color-primary);
      --check-background: var(--color-primary-surface);
      --check-color: var(--color-primary);
    }
  }
}
.check-muted {
  :where(&) {
    --check-border-color: var(--color-title-bd);
    --check-background: var(--color-title-surface);
    --check-border-width: 1px;
    --check-border-radius: var(--default-border-radius);
    &:where(.check-multiline) {
      --check-padding-x: 1em;
      --check-padding-y: 1em;
    }
    &:where(:not(.check-multiline)) {
      --check-padding-x: calc(var(--check-height)/3);
      --check-height: var(--default-height-input);
    }
    &:where(:has(:focus-visible)) {
      outline: var(--default-outline-width) solid var(--check-outline-color);
      outline-offset: var(--default-outline-offset);
    }
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover, &:where(:has(:checked)) {
      --check-border-color: var(--color-primary-bd-active);
      --check-background: var(--color-primary-surface);
    }
  }
}
.check-subtle {
  :where(&) {
    --check-background: var(--color-title-bg-hover);
    --check-border-radius: var(--default-border-radius);
    &:where(.check-multiline) {
      --check-padding-x: 1em;
      --check-padding-y: 1em;
    }
    &:where(:not(.check-multiline)) {
      --check-padding-x: calc(var(--check-height)/3);
      --check-height: var(--default-height-input);
    }
    &:where(:has(:focus-visible)) {
      outline: var(--default-outline-width) solid var(--check-outline-color);
      outline-offset: var(--default-outline-offset);
    }
    &:where(:not(:has(:disabled), :has(:checked))):hover {
      --check-background: var(--color-primary-bg-hover);
    }
    &:where(:has(:checked)) {
      --check-background: var(--color-primary-bg-hover);
    }
  }
}
.check-ghost {
  :where(&) {
    --check-border-radius: var(--default-border-radius);
    &:where(.check-multiline) {
      --check-padding-x: 1em;
      --check-padding-y: 1em;
    }
    &:where(:not(.check-multiline)) {
      --check-padding-x: calc(var(--check-height)/3);
      --check-height: var(--default-height-input);
    }
    &:where(:has(:focus-visible)) {
      outline: var(--default-outline-width) solid var(--check-outline-color);
      outline-offset: var(--default-outline-offset);
    }
    &:where(:not(:has(:disabled)):not(:has(:checked))):hover {
      --check-background: var(--color-title-bg-hover);
    }
    &:where(:has(:checked)) {
      --check-background: var(--color-primary-bg-active);
    }
  }
}
.table-intercell {
  :where(tbody td:where(:not(.table-focused))) {
    &:hover {
      outline: 2px solid var(--color-description);
      outline-offset: -2px;
    }
  }
}
.outline {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.drop-shadow-in {
  --: ;
  --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.12)));
  --tw-drop-shadow: drop-shadow(var(--drop-shadow-md));
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.drop-shadow {
  --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06)));
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.drop-shadow-out {
  --: ;
  --tw-drop-shadow:  ;
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.poster-bright-in {
  &:where(:not(:has(img))) {
    filter: brightness(0.6);
  }
  &:where(:has(img)) img {
    filter: brightness(0.6);
  }
  &:where(:not(:has(img))):hover {
    filter: brightness(1);
  }
  &:hover img {
    filter: brightness(1);
  }
}
.poster-gray-out {
  &:where(:not(:has(img))) {
    filter: grayscale(80%);
  }
  &:where(:has(img)) img {
    filter: grayscale(80%);
  }
  &:where(:not(:has(img))):hover {
    filter: grayscale(0%);
  }
  &:hover img {
    filter: grayscale(0%);
  }
}
.blur-in {
  --: ;
  filter: blur(0);
}
.blur-out {
  --: ;
  filter: blur(10px);
}
.poster-bright-out {
  &:where(:not(:has(img))):hover {
    filter: brightness(0.6);
  }
  &:hover img {
    filter: brightness(0.6);
  }
}
.poster-gray-in {
  &:where(:not(:has(img))):hover {
    filter: grayscale(80%);
  }
  &:hover img {
    filter: grayscale(80%);
  }
}
.filter {
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.backdrop-blur-in {
  --: ;
  backdrop-filter: blur(0);
}
.backdrop-blur-out {
  --: ;
  backdrop-filter: blur(10px);
}
.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.transition {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[backdrop-filter\] {
  transition-property: backdrop-filter;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[box-shadow\] {
  transition-property: box-shadow;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[filter\] {
  transition-property: filter;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[opacity\,translate\] {
  transition-property: opacity,translate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[opacity\] {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[property\] {
  transition-property: property;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[rotate\] {
  transition-property: rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[scale\,rotate\] {
  transition-property: scale,rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[scale\] {
  transition-property: scale;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[translate\] {
  transition-property: translate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.duration-fastest {
  --: ;
  transition-duration: var(--duration-fastest);
}
.duration-normal {
  --: ;
  transition-duration: var(--duration-normal);
}
.duration-slower {
  --: ;
  transition-duration: var(--duration-slower);
}
.duration-slowest {
  --: ;
  transition-duration: var(--duration-slowest);
}
.ease-out {
  --tw-ease: var(--ease-out);
  transition-timing-function: var(--ease-out);
}
.theme-peach {
  --color-primary-base: #c85a49;
  --color-secondary-base: #e28f83;
  --color-tertiary-base: #e6dfd3;
  --color-warning-base: #d97706;
  --color-caution-base: #eab308;
  --color-highlight-base: #fde047;
  --color-info-base: #2563eb;
  --color-success-base: #15803d;
  --color-error-base: #b91c1c;
  --color-ink-base: #1f1b18;
  --color-bg-base: #faf8f5;
  &:where(:not(:root)) {
    --color-primary: oklch(from var(--color-primary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-primary-outline: oklch(from var(--color-primary) l c h);
    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
    --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
    --color-primary-contrast: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
    --color-primary-surface: oklch(from var(--color-primary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
    --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-secondary: oklch(from var(--color-secondary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-secondary-outline: oklch(from var(--color-secondary) l c h);
    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
    --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
    --color-secondary-contrast: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
    --color-secondary-surface: oklch(from var(--color-secondary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
    --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-tertiary: oklch(from var(--color-tertiary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-tertiary-outline: oklch(from var(--color-tertiary) l c h);
    --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
    --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
    --color-tertiary-contrast: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
    --color-tertiary-surface: oklch(from var(--color-tertiary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
    --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-success: oklch(from var(--color-success-base) l calc(c * var(--color-c-factor,1)) h);
    --color-success-outline: oklch(from var(--color-success) l c h);
    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
    --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
    --color-success-contrast: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
    --color-success-surface: oklch(from var(--color-success) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
    --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-info: oklch(from var(--color-info-base) l calc(c * var(--color-c-factor,1)) h);
    --color-info-outline: oklch(from var(--color-info) l c h);
    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
    --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
    --color-info-contrast: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
    --color-info-surface: oklch(from var(--color-info) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
    --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-highlight: oklch(from var(--color-highlight-base) l calc(c * var(--color-c-factor,1)) h);
    --color-highlight-outline: oklch(from var(--color-highlight) l c h);
    --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
    --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
    --color-highlight-contrast: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
    --color-highlight-surface: oklch(from var(--color-highlight) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
    --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-error: oklch(from var(--color-error-base) l calc(c * var(--color-c-factor,1)) h);
    --color-error-outline: oklch(from var(--color-error) l c h);
    --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
    --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
    --color-error-contrast: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
    --color-error-surface: oklch(from var(--color-error) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
    --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-warning: oklch(from var(--color-warning-base) l calc(c * var(--color-c-factor,1)) h);
    --color-warning-outline: oklch(from var(--color-warning) l c h);
    --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
    --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
    --color-warning-contrast: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
    --color-warning-surface: oklch(from var(--color-warning) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
    --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-caution: oklch(from var(--color-caution-base) l calc(c * var(--color-c-factor,1)) h);
    --color-caution-outline: oklch(from var(--color-caution) l c h);
    --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
    --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
    --color-caution-contrast: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
    --color-caution-surface: oklch(from var(--color-caution) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
    --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
    --color-title-outline: oklch(from var(--color-title) l c h);
    --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
    --color-title-contrast: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
    --color-title-surface: oklch(from var(--color-title) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
    --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-description-base: oklch(from var(--color-title) calc(l * 2.5) c h);
    --color-description: var(--color-description-base);
    --color-description-outline: var(--color-title);
    --color-description-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-description-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-description-contrast: var(--color-title-contrast);
    --color-description-body: var(--color-description-base);
    --color-description-fg: var(--color-description-base);
    --color-description-surface: var(--color-title-surface);
    --color-description-bg: var(--color-title-bg);
    --color-description-bg-hover: var(--color-title-bg-hover);
    --color-description-bg-active: var(--color-title-bg-active);
    --color-description-bd: var(--color-title-bd);
    --color-description-bd-hover: var(--color-title-bd-hover);
    --color-description-bd-active: var(--color-title-bd-active);
    --color-caption-base: oklch(from var(--color-title) calc(l * 3.5) c h);
    --color-caption: var(--color-caption-base);
    --color-caption-outline: var(--color-title);
    --color-caption-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-caption-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-caption-contrast: var(--color-title-contrast);
    --color-caption-body: var(--color-caption-base);
    --color-caption-fg: var(--color-caption-base);
    --color-caption-surface: var(--color-title-surface);
    --color-caption-bg: var(--color-title-bg);
    --color-caption-bg-hover: var(--color-title-bg-hover);
    --color-caption-bg-active: var(--color-title-bg-active);
    --color-caption-bd: var(--color-title-bd);
    --color-caption-bd-hover: var(--color-title-bd-hover);
    --color-caption-bd-active: var(--color-title-bd-active);
    --color-placeholder-base: oklch(from var(--color-title) calc(l * 4.5) c h);
    --color-placeholder: var(--color-placeholder-base);
    --color-placeholder-outline: var(--color-title);
    --color-placeholder-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-placeholder-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-placeholder-contrast: var(--color-title-contrast);
    --color-placeholder-body: var(--color-placeholder-base);
    --color-placeholder-fg: var(--color-placeholder-base);
    --color-placeholder-surface: var(--color-title-surface);
    --color-placeholder-bg: var(--color-title-bg);
    --color-placeholder-bg-hover: var(--color-title-bg-hover);
    --color-placeholder-bg-active: var(--color-title-bg-active);
    --color-placeholder-bd: var(--color-title-bd);
    --color-placeholder-bd-hover: var(--color-title-bd-hover);
    --color-placeholder-bd-active: var(--color-title-bd-active);
    --color-ink: oklch(from var(--color-ink-base) l calc(c * var(--color-c-factor,1)) h);
    --color-ink-outline: oklch(from var(--color-ink) l c h);
    --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
    --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
    --color-ink-contrast: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
    --color-ink-surface: oklch(from var(--color-ink) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
    --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  }
}
.theme-amber {
  --color-primary-base: #b86b1e;
  --color-secondary-base: #d48a3a;
  --color-tertiary-base: #e8b05a;
  --color-warning-base: #e8781e;
  --color-caution-base: #d49e2a;
  --color-highlight-base: #e8d43a;
  --color-info-base: #3a7fbf;
  --color-success-base: #4a8f4a;
  --color-error-base: #c94a3a;
  --color-ink-base: #2b1e0e;
  &:where(:not(:root)) {
    --color-primary: oklch(from var(--color-primary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-primary-outline: oklch(from var(--color-primary) l c h);
    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
    --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
    --color-primary-contrast: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
    --color-primary-surface: oklch(from var(--color-primary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
    --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-secondary: oklch(from var(--color-secondary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-secondary-outline: oklch(from var(--color-secondary) l c h);
    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
    --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
    --color-secondary-contrast: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
    --color-secondary-surface: oklch(from var(--color-secondary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
    --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-tertiary: oklch(from var(--color-tertiary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-tertiary-outline: oklch(from var(--color-tertiary) l c h);
    --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
    --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
    --color-tertiary-contrast: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
    --color-tertiary-surface: oklch(from var(--color-tertiary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
    --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-success: oklch(from var(--color-success-base) l calc(c * var(--color-c-factor,1)) h);
    --color-success-outline: oklch(from var(--color-success) l c h);
    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
    --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
    --color-success-contrast: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
    --color-success-surface: oklch(from var(--color-success) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
    --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-info: oklch(from var(--color-info-base) l calc(c * var(--color-c-factor,1)) h);
    --color-info-outline: oklch(from var(--color-info) l c h);
    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
    --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
    --color-info-contrast: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
    --color-info-surface: oklch(from var(--color-info) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
    --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-highlight: oklch(from var(--color-highlight-base) l calc(c * var(--color-c-factor,1)) h);
    --color-highlight-outline: oklch(from var(--color-highlight) l c h);
    --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
    --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
    --color-highlight-contrast: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
    --color-highlight-surface: oklch(from var(--color-highlight) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
    --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-error: oklch(from var(--color-error-base) l calc(c * var(--color-c-factor,1)) h);
    --color-error-outline: oklch(from var(--color-error) l c h);
    --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
    --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
    --color-error-contrast: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
    --color-error-surface: oklch(from var(--color-error) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
    --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-warning: oklch(from var(--color-warning-base) l calc(c * var(--color-c-factor,1)) h);
    --color-warning-outline: oklch(from var(--color-warning) l c h);
    --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
    --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
    --color-warning-contrast: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
    --color-warning-surface: oklch(from var(--color-warning) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
    --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-caution: oklch(from var(--color-caution-base) l calc(c * var(--color-c-factor,1)) h);
    --color-caution-outline: oklch(from var(--color-caution) l c h);
    --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
    --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
    --color-caution-contrast: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
    --color-caution-surface: oklch(from var(--color-caution) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
    --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
    --color-title-outline: oklch(from var(--color-title) l c h);
    --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
    --color-title-contrast: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
    --color-title-surface: oklch(from var(--color-title) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
    --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-description-base: oklch(from var(--color-title) calc(l * 2.5) c h);
    --color-description: var(--color-description-base);
    --color-description-outline: var(--color-title);
    --color-description-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-description-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-description-contrast: var(--color-title-contrast);
    --color-description-body: var(--color-description-base);
    --color-description-fg: var(--color-description-base);
    --color-description-surface: var(--color-title-surface);
    --color-description-bg: var(--color-title-bg);
    --color-description-bg-hover: var(--color-title-bg-hover);
    --color-description-bg-active: var(--color-title-bg-active);
    --color-description-bd: var(--color-title-bd);
    --color-description-bd-hover: var(--color-title-bd-hover);
    --color-description-bd-active: var(--color-title-bd-active);
    --color-caption-base: oklch(from var(--color-title) calc(l * 3.5) c h);
    --color-caption: var(--color-caption-base);
    --color-caption-outline: var(--color-title);
    --color-caption-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-caption-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-caption-contrast: var(--color-title-contrast);
    --color-caption-body: var(--color-caption-base);
    --color-caption-fg: var(--color-caption-base);
    --color-caption-surface: var(--color-title-surface);
    --color-caption-bg: var(--color-title-bg);
    --color-caption-bg-hover: var(--color-title-bg-hover);
    --color-caption-bg-active: var(--color-title-bg-active);
    --color-caption-bd: var(--color-title-bd);
    --color-caption-bd-hover: var(--color-title-bd-hover);
    --color-caption-bd-active: var(--color-title-bd-active);
    --color-placeholder-base: oklch(from var(--color-title) calc(l * 4.5) c h);
    --color-placeholder: var(--color-placeholder-base);
    --color-placeholder-outline: var(--color-title);
    --color-placeholder-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-placeholder-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-placeholder-contrast: var(--color-title-contrast);
    --color-placeholder-body: var(--color-placeholder-base);
    --color-placeholder-fg: var(--color-placeholder-base);
    --color-placeholder-surface: var(--color-title-surface);
    --color-placeholder-bg: var(--color-title-bg);
    --color-placeholder-bg-hover: var(--color-title-bg-hover);
    --color-placeholder-bg-active: var(--color-title-bg-active);
    --color-placeholder-bd: var(--color-title-bd);
    --color-placeholder-bd-hover: var(--color-title-bd-hover);
    --color-placeholder-bd-active: var(--color-title-bd-active);
    --color-ink: oklch(from var(--color-ink-base) l calc(c * var(--color-c-factor,1)) h);
    --color-ink-outline: oklch(from var(--color-ink) l c h);
    --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
    --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
    --color-ink-contrast: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
    --color-ink-surface: oklch(from var(--color-ink) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
    --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  }
}
.theme-aurora {
  --color-primary-base: #16d9a0;
  --color-secondary-base: #7b5fe0;
  --color-tertiary-base: #3a8ee0;
  --color-warning-base: #f0a83a;
  --color-caution-base: #e0b84a;
  --color-highlight-base: #b8f04a;
  --color-info-base: #2ec4e0;
  --color-success-base: #22c98a;
  --color-error-base: #e0435c;
  --color-ink-base: #0d0d0d;
  &:where(:not(:root)) {
    --color-primary: oklch(from var(--color-primary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-primary-outline: oklch(from var(--color-primary) l c h);
    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
    --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
    --color-primary-contrast: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
    --color-primary-surface: oklch(from var(--color-primary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
    --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-secondary: oklch(from var(--color-secondary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-secondary-outline: oklch(from var(--color-secondary) l c h);
    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
    --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
    --color-secondary-contrast: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
    --color-secondary-surface: oklch(from var(--color-secondary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
    --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-tertiary: oklch(from var(--color-tertiary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-tertiary-outline: oklch(from var(--color-tertiary) l c h);
    --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
    --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
    --color-tertiary-contrast: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
    --color-tertiary-surface: oklch(from var(--color-tertiary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
    --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-success: oklch(from var(--color-success-base) l calc(c * var(--color-c-factor,1)) h);
    --color-success-outline: oklch(from var(--color-success) l c h);
    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
    --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
    --color-success-contrast: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
    --color-success-surface: oklch(from var(--color-success) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
    --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-info: oklch(from var(--color-info-base) l calc(c * var(--color-c-factor,1)) h);
    --color-info-outline: oklch(from var(--color-info) l c h);
    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
    --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
    --color-info-contrast: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
    --color-info-surface: oklch(from var(--color-info) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
    --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-highlight: oklch(from var(--color-highlight-base) l calc(c * var(--color-c-factor,1)) h);
    --color-highlight-outline: oklch(from var(--color-highlight) l c h);
    --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
    --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
    --color-highlight-contrast: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
    --color-highlight-surface: oklch(from var(--color-highlight) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
    --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-error: oklch(from var(--color-error-base) l calc(c * var(--color-c-factor,1)) h);
    --color-error-outline: oklch(from var(--color-error) l c h);
    --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
    --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
    --color-error-contrast: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
    --color-error-surface: oklch(from var(--color-error) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
    --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-warning: oklch(from var(--color-warning-base) l calc(c * var(--color-c-factor,1)) h);
    --color-warning-outline: oklch(from var(--color-warning) l c h);
    --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
    --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
    --color-warning-contrast: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
    --color-warning-surface: oklch(from var(--color-warning) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
    --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-caution: oklch(from var(--color-caution-base) l calc(c * var(--color-c-factor,1)) h);
    --color-caution-outline: oklch(from var(--color-caution) l c h);
    --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
    --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
    --color-caution-contrast: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
    --color-caution-surface: oklch(from var(--color-caution) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
    --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
    --color-title-outline: oklch(from var(--color-title) l c h);
    --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
    --color-title-contrast: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
    --color-title-surface: oklch(from var(--color-title) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
    --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-description-base: oklch(from var(--color-title) calc(l * 2.5) c h);
    --color-description: var(--color-description-base);
    --color-description-outline: var(--color-title);
    --color-description-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-description-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-description-contrast: var(--color-title-contrast);
    --color-description-body: var(--color-description-base);
    --color-description-fg: var(--color-description-base);
    --color-description-surface: var(--color-title-surface);
    --color-description-bg: var(--color-title-bg);
    --color-description-bg-hover: var(--color-title-bg-hover);
    --color-description-bg-active: var(--color-title-bg-active);
    --color-description-bd: var(--color-title-bd);
    --color-description-bd-hover: var(--color-title-bd-hover);
    --color-description-bd-active: var(--color-title-bd-active);
    --color-caption-base: oklch(from var(--color-title) calc(l * 3.5) c h);
    --color-caption: var(--color-caption-base);
    --color-caption-outline: var(--color-title);
    --color-caption-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-caption-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-caption-contrast: var(--color-title-contrast);
    --color-caption-body: var(--color-caption-base);
    --color-caption-fg: var(--color-caption-base);
    --color-caption-surface: var(--color-title-surface);
    --color-caption-bg: var(--color-title-bg);
    --color-caption-bg-hover: var(--color-title-bg-hover);
    --color-caption-bg-active: var(--color-title-bg-active);
    --color-caption-bd: var(--color-title-bd);
    --color-caption-bd-hover: var(--color-title-bd-hover);
    --color-caption-bd-active: var(--color-title-bd-active);
    --color-placeholder-base: oklch(from var(--color-title) calc(l * 4.5) c h);
    --color-placeholder: var(--color-placeholder-base);
    --color-placeholder-outline: var(--color-title);
    --color-placeholder-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-placeholder-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-placeholder-contrast: var(--color-title-contrast);
    --color-placeholder-body: var(--color-placeholder-base);
    --color-placeholder-fg: var(--color-placeholder-base);
    --color-placeholder-surface: var(--color-title-surface);
    --color-placeholder-bg: var(--color-title-bg);
    --color-placeholder-bg-hover: var(--color-title-bg-hover);
    --color-placeholder-bg-active: var(--color-title-bg-active);
    --color-placeholder-bd: var(--color-title-bd);
    --color-placeholder-bd-hover: var(--color-title-bd-hover);
    --color-placeholder-bd-active: var(--color-title-bd-active);
    --color-ink: oklch(from var(--color-ink-base) l calc(c * var(--color-c-factor,1)) h);
    --color-ink-outline: oklch(from var(--color-ink) l c h);
    --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
    --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
    --color-ink-contrast: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
    --color-ink-surface: oklch(from var(--color-ink) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
    --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  }
}
.theme-cyber {
  --color-primary-base: #00e5ff;
  --color-secondary-base: #ff2ec4;
  --color-tertiary-base: #a259ff;
  --color-warning-base: #ff9500;
  --color-caution-base: #ffe600;
  --color-highlight-base: #ccff00;
  --color-info-base: #00b8ff;
  --color-success-base: #00ff9c;
  --color-error-base: #ff3860;
  --color-ink-base: #2b2724;
  &:where(:not(:root)) {
    --color-primary: oklch(from var(--color-primary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-primary-outline: oklch(from var(--color-primary) l c h);
    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
    --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
    --color-primary-contrast: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
    --color-primary-surface: oklch(from var(--color-primary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
    --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-secondary: oklch(from var(--color-secondary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-secondary-outline: oklch(from var(--color-secondary) l c h);
    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
    --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
    --color-secondary-contrast: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
    --color-secondary-surface: oklch(from var(--color-secondary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
    --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-tertiary: oklch(from var(--color-tertiary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-tertiary-outline: oklch(from var(--color-tertiary) l c h);
    --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
    --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
    --color-tertiary-contrast: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
    --color-tertiary-surface: oklch(from var(--color-tertiary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
    --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-success: oklch(from var(--color-success-base) l calc(c * var(--color-c-factor,1)) h);
    --color-success-outline: oklch(from var(--color-success) l c h);
    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
    --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
    --color-success-contrast: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
    --color-success-surface: oklch(from var(--color-success) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
    --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-info: oklch(from var(--color-info-base) l calc(c * var(--color-c-factor,1)) h);
    --color-info-outline: oklch(from var(--color-info) l c h);
    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
    --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
    --color-info-contrast: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
    --color-info-surface: oklch(from var(--color-info) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
    --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-highlight: oklch(from var(--color-highlight-base) l calc(c * var(--color-c-factor,1)) h);
    --color-highlight-outline: oklch(from var(--color-highlight) l c h);
    --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
    --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
    --color-highlight-contrast: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
    --color-highlight-surface: oklch(from var(--color-highlight) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
    --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-error: oklch(from var(--color-error-base) l calc(c * var(--color-c-factor,1)) h);
    --color-error-outline: oklch(from var(--color-error) l c h);
    --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
    --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
    --color-error-contrast: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
    --color-error-surface: oklch(from var(--color-error) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
    --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-warning: oklch(from var(--color-warning-base) l calc(c * var(--color-c-factor,1)) h);
    --color-warning-outline: oklch(from var(--color-warning) l c h);
    --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
    --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
    --color-warning-contrast: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
    --color-warning-surface: oklch(from var(--color-warning) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
    --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-caution: oklch(from var(--color-caution-base) l calc(c * var(--color-c-factor,1)) h);
    --color-caution-outline: oklch(from var(--color-caution) l c h);
    --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
    --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
    --color-caution-contrast: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
    --color-caution-surface: oklch(from var(--color-caution) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
    --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
    --color-title-outline: oklch(from var(--color-title) l c h);
    --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
    --color-title-contrast: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
    --color-title-surface: oklch(from var(--color-title) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
    --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-description-base: oklch(from var(--color-title) calc(l * 2.5) c h);
    --color-description: var(--color-description-base);
    --color-description-outline: var(--color-title);
    --color-description-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-description-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-description-contrast: var(--color-title-contrast);
    --color-description-body: var(--color-description-base);
    --color-description-fg: var(--color-description-base);
    --color-description-surface: var(--color-title-surface);
    --color-description-bg: var(--color-title-bg);
    --color-description-bg-hover: var(--color-title-bg-hover);
    --color-description-bg-active: var(--color-title-bg-active);
    --color-description-bd: var(--color-title-bd);
    --color-description-bd-hover: var(--color-title-bd-hover);
    --color-description-bd-active: var(--color-title-bd-active);
    --color-caption-base: oklch(from var(--color-title) calc(l * 3.5) c h);
    --color-caption: var(--color-caption-base);
    --color-caption-outline: var(--color-title);
    --color-caption-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-caption-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-caption-contrast: var(--color-title-contrast);
    --color-caption-body: var(--color-caption-base);
    --color-caption-fg: var(--color-caption-base);
    --color-caption-surface: var(--color-title-surface);
    --color-caption-bg: var(--color-title-bg);
    --color-caption-bg-hover: var(--color-title-bg-hover);
    --color-caption-bg-active: var(--color-title-bg-active);
    --color-caption-bd: var(--color-title-bd);
    --color-caption-bd-hover: var(--color-title-bd-hover);
    --color-caption-bd-active: var(--color-title-bd-active);
    --color-placeholder-base: oklch(from var(--color-title) calc(l * 4.5) c h);
    --color-placeholder: var(--color-placeholder-base);
    --color-placeholder-outline: var(--color-title);
    --color-placeholder-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-placeholder-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-placeholder-contrast: var(--color-title-contrast);
    --color-placeholder-body: var(--color-placeholder-base);
    --color-placeholder-fg: var(--color-placeholder-base);
    --color-placeholder-surface: var(--color-title-surface);
    --color-placeholder-bg: var(--color-title-bg);
    --color-placeholder-bg-hover: var(--color-title-bg-hover);
    --color-placeholder-bg-active: var(--color-title-bg-active);
    --color-placeholder-bd: var(--color-title-bd);
    --color-placeholder-bd-hover: var(--color-title-bd-hover);
    --color-placeholder-bd-active: var(--color-title-bd-active);
    --color-ink: oklch(from var(--color-ink-base) l calc(c * var(--color-c-factor,1)) h);
    --color-ink-outline: oklch(from var(--color-ink) l c h);
    --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
    --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
    --color-ink-contrast: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
    --color-ink-surface: oklch(from var(--color-ink) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
    --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  }
}
.theme-forest {
  --color-primary-base: #2f7d4f;
  --color-secondary-base: #1f9e7a;
  --color-tertiary-base: #8a9a5b;
  --color-warning-base: #d98c2b;
  --color-caution-base: #c9a227;
  --color-highlight-base: #a8c94a;
  --color-info-base: #2a8a9e;
  --color-success-base: #3f9142;
  --color-error-base: #c0503b;
  --color-ink-base: #14231a;
  &:where(:not(:root)) {
    --color-primary: oklch(from var(--color-primary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-primary-outline: oklch(from var(--color-primary) l c h);
    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
    --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
    --color-primary-contrast: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
    --color-primary-surface: oklch(from var(--color-primary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
    --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-secondary: oklch(from var(--color-secondary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-secondary-outline: oklch(from var(--color-secondary) l c h);
    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
    --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
    --color-secondary-contrast: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
    --color-secondary-surface: oklch(from var(--color-secondary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
    --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-tertiary: oklch(from var(--color-tertiary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-tertiary-outline: oklch(from var(--color-tertiary) l c h);
    --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
    --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
    --color-tertiary-contrast: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
    --color-tertiary-surface: oklch(from var(--color-tertiary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
    --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-success: oklch(from var(--color-success-base) l calc(c * var(--color-c-factor,1)) h);
    --color-success-outline: oklch(from var(--color-success) l c h);
    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
    --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
    --color-success-contrast: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
    --color-success-surface: oklch(from var(--color-success) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
    --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-info: oklch(from var(--color-info-base) l calc(c * var(--color-c-factor,1)) h);
    --color-info-outline: oklch(from var(--color-info) l c h);
    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
    --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
    --color-info-contrast: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
    --color-info-surface: oklch(from var(--color-info) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
    --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-highlight: oklch(from var(--color-highlight-base) l calc(c * var(--color-c-factor,1)) h);
    --color-highlight-outline: oklch(from var(--color-highlight) l c h);
    --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
    --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
    --color-highlight-contrast: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
    --color-highlight-surface: oklch(from var(--color-highlight) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
    --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-error: oklch(from var(--color-error-base) l calc(c * var(--color-c-factor,1)) h);
    --color-error-outline: oklch(from var(--color-error) l c h);
    --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
    --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
    --color-error-contrast: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
    --color-error-surface: oklch(from var(--color-error) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
    --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-warning: oklch(from var(--color-warning-base) l calc(c * var(--color-c-factor,1)) h);
    --color-warning-outline: oklch(from var(--color-warning) l c h);
    --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
    --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
    --color-warning-contrast: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
    --color-warning-surface: oklch(from var(--color-warning) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
    --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-caution: oklch(from var(--color-caution-base) l calc(c * var(--color-c-factor,1)) h);
    --color-caution-outline: oklch(from var(--color-caution) l c h);
    --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
    --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
    --color-caution-contrast: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
    --color-caution-surface: oklch(from var(--color-caution) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
    --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
    --color-title-outline: oklch(from var(--color-title) l c h);
    --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
    --color-title-contrast: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
    --color-title-surface: oklch(from var(--color-title) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
    --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-description-base: oklch(from var(--color-title) calc(l * 2.5) c h);
    --color-description: var(--color-description-base);
    --color-description-outline: var(--color-title);
    --color-description-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-description-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-description-contrast: var(--color-title-contrast);
    --color-description-body: var(--color-description-base);
    --color-description-fg: var(--color-description-base);
    --color-description-surface: var(--color-title-surface);
    --color-description-bg: var(--color-title-bg);
    --color-description-bg-hover: var(--color-title-bg-hover);
    --color-description-bg-active: var(--color-title-bg-active);
    --color-description-bd: var(--color-title-bd);
    --color-description-bd-hover: var(--color-title-bd-hover);
    --color-description-bd-active: var(--color-title-bd-active);
    --color-caption-base: oklch(from var(--color-title) calc(l * 3.5) c h);
    --color-caption: var(--color-caption-base);
    --color-caption-outline: var(--color-title);
    --color-caption-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-caption-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-caption-contrast: var(--color-title-contrast);
    --color-caption-body: var(--color-caption-base);
    --color-caption-fg: var(--color-caption-base);
    --color-caption-surface: var(--color-title-surface);
    --color-caption-bg: var(--color-title-bg);
    --color-caption-bg-hover: var(--color-title-bg-hover);
    --color-caption-bg-active: var(--color-title-bg-active);
    --color-caption-bd: var(--color-title-bd);
    --color-caption-bd-hover: var(--color-title-bd-hover);
    --color-caption-bd-active: var(--color-title-bd-active);
    --color-placeholder-base: oklch(from var(--color-title) calc(l * 4.5) c h);
    --color-placeholder: var(--color-placeholder-base);
    --color-placeholder-outline: var(--color-title);
    --color-placeholder-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-placeholder-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-placeholder-contrast: var(--color-title-contrast);
    --color-placeholder-body: var(--color-placeholder-base);
    --color-placeholder-fg: var(--color-placeholder-base);
    --color-placeholder-surface: var(--color-title-surface);
    --color-placeholder-bg: var(--color-title-bg);
    --color-placeholder-bg-hover: var(--color-title-bg-hover);
    --color-placeholder-bg-active: var(--color-title-bg-active);
    --color-placeholder-bd: var(--color-title-bd);
    --color-placeholder-bd-hover: var(--color-title-bd-hover);
    --color-placeholder-bd-active: var(--color-title-bd-active);
    --color-ink: oklch(from var(--color-ink-base) l calc(c * var(--color-c-factor,1)) h);
    --color-ink-outline: oklch(from var(--color-ink) l c h);
    --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
    --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
    --color-ink-contrast: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
    --color-ink-surface: oklch(from var(--color-ink) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
    --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  }
}
.theme-glacier {
  --color-primary-base: #1a8fbf;
  --color-secondary-base: #4ab0d4;
  --color-tertiary-base: #7acce8;
  --color-warning-base: #e8a03a;
  --color-caution-base: #d4b83a;
  --color-highlight-base: #e8e04a;
  --color-info-base: #1a8fc4;
  --color-success-base: #3a9f6a;
  --color-error-base: #d45a4a;
  --color-ink-base: #0e1e2b;
  &:where(:not(:root)) {
    --color-primary: oklch(from var(--color-primary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-primary-outline: oklch(from var(--color-primary) l c h);
    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
    --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
    --color-primary-contrast: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
    --color-primary-surface: oklch(from var(--color-primary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
    --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-secondary: oklch(from var(--color-secondary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-secondary-outline: oklch(from var(--color-secondary) l c h);
    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
    --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
    --color-secondary-contrast: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
    --color-secondary-surface: oklch(from var(--color-secondary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
    --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-tertiary: oklch(from var(--color-tertiary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-tertiary-outline: oklch(from var(--color-tertiary) l c h);
    --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
    --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
    --color-tertiary-contrast: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
    --color-tertiary-surface: oklch(from var(--color-tertiary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
    --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-success: oklch(from var(--color-success-base) l calc(c * var(--color-c-factor,1)) h);
    --color-success-outline: oklch(from var(--color-success) l c h);
    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
    --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
    --color-success-contrast: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
    --color-success-surface: oklch(from var(--color-success) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
    --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-info: oklch(from var(--color-info-base) l calc(c * var(--color-c-factor,1)) h);
    --color-info-outline: oklch(from var(--color-info) l c h);
    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
    --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
    --color-info-contrast: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
    --color-info-surface: oklch(from var(--color-info) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
    --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-highlight: oklch(from var(--color-highlight-base) l calc(c * var(--color-c-factor,1)) h);
    --color-highlight-outline: oklch(from var(--color-highlight) l c h);
    --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
    --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
    --color-highlight-contrast: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
    --color-highlight-surface: oklch(from var(--color-highlight) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
    --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-error: oklch(from var(--color-error-base) l calc(c * var(--color-c-factor,1)) h);
    --color-error-outline: oklch(from var(--color-error) l c h);
    --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
    --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
    --color-error-contrast: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
    --color-error-surface: oklch(from var(--color-error) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
    --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-warning: oklch(from var(--color-warning-base) l calc(c * var(--color-c-factor,1)) h);
    --color-warning-outline: oklch(from var(--color-warning) l c h);
    --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
    --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
    --color-warning-contrast: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
    --color-warning-surface: oklch(from var(--color-warning) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
    --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-caution: oklch(from var(--color-caution-base) l calc(c * var(--color-c-factor,1)) h);
    --color-caution-outline: oklch(from var(--color-caution) l c h);
    --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
    --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
    --color-caution-contrast: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
    --color-caution-surface: oklch(from var(--color-caution) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
    --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
    --color-title-outline: oklch(from var(--color-title) l c h);
    --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
    --color-title-contrast: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
    --color-title-surface: oklch(from var(--color-title) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
    --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-description-base: oklch(from var(--color-title) calc(l * 2.5) c h);
    --color-description: var(--color-description-base);
    --color-description-outline: var(--color-title);
    --color-description-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-description-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-description-contrast: var(--color-title-contrast);
    --color-description-body: var(--color-description-base);
    --color-description-fg: var(--color-description-base);
    --color-description-surface: var(--color-title-surface);
    --color-description-bg: var(--color-title-bg);
    --color-description-bg-hover: var(--color-title-bg-hover);
    --color-description-bg-active: var(--color-title-bg-active);
    --color-description-bd: var(--color-title-bd);
    --color-description-bd-hover: var(--color-title-bd-hover);
    --color-description-bd-active: var(--color-title-bd-active);
    --color-caption-base: oklch(from var(--color-title) calc(l * 3.5) c h);
    --color-caption: var(--color-caption-base);
    --color-caption-outline: var(--color-title);
    --color-caption-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-caption-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-caption-contrast: var(--color-title-contrast);
    --color-caption-body: var(--color-caption-base);
    --color-caption-fg: var(--color-caption-base);
    --color-caption-surface: var(--color-title-surface);
    --color-caption-bg: var(--color-title-bg);
    --color-caption-bg-hover: var(--color-title-bg-hover);
    --color-caption-bg-active: var(--color-title-bg-active);
    --color-caption-bd: var(--color-title-bd);
    --color-caption-bd-hover: var(--color-title-bd-hover);
    --color-caption-bd-active: var(--color-title-bd-active);
    --color-placeholder-base: oklch(from var(--color-title) calc(l * 4.5) c h);
    --color-placeholder: var(--color-placeholder-base);
    --color-placeholder-outline: var(--color-title);
    --color-placeholder-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-placeholder-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-placeholder-contrast: var(--color-title-contrast);
    --color-placeholder-body: var(--color-placeholder-base);
    --color-placeholder-fg: var(--color-placeholder-base);
    --color-placeholder-surface: var(--color-title-surface);
    --color-placeholder-bg: var(--color-title-bg);
    --color-placeholder-bg-hover: var(--color-title-bg-hover);
    --color-placeholder-bg-active: var(--color-title-bg-active);
    --color-placeholder-bd: var(--color-title-bd);
    --color-placeholder-bd-hover: var(--color-title-bd-hover);
    --color-placeholder-bd-active: var(--color-title-bd-active);
    --color-ink: oklch(from var(--color-ink-base) l calc(c * var(--color-c-factor,1)) h);
    --color-ink-outline: oklch(from var(--color-ink) l c h);
    --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
    --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
    --color-ink-contrast: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
    --color-ink-surface: oklch(from var(--color-ink) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
    --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  }
}
.theme-lavender {
  --color-primary-base: #7c5cff;
  --color-secondary-base: #b15be0;
  --color-tertiary-base: #6a8fff;
  --color-warning-base: #f0a05c;
  --color-caution-base: #dcb24a;
  --color-highlight-base: #f0e14a;
  --color-info-base: #5b8fe0;
  --color-success-base: #4bb187;
  --color-error-base: #e0566a;
  --color-ink-base: #1a1428;
  &:where(:not(:root)) {
    --color-primary: oklch(from var(--color-primary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-primary-outline: oklch(from var(--color-primary) l c h);
    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
    --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
    --color-primary-contrast: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
    --color-primary-surface: oklch(from var(--color-primary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
    --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-secondary: oklch(from var(--color-secondary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-secondary-outline: oklch(from var(--color-secondary) l c h);
    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
    --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
    --color-secondary-contrast: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
    --color-secondary-surface: oklch(from var(--color-secondary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
    --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-tertiary: oklch(from var(--color-tertiary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-tertiary-outline: oklch(from var(--color-tertiary) l c h);
    --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
    --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
    --color-tertiary-contrast: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
    --color-tertiary-surface: oklch(from var(--color-tertiary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
    --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-success: oklch(from var(--color-success-base) l calc(c * var(--color-c-factor,1)) h);
    --color-success-outline: oklch(from var(--color-success) l c h);
    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
    --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
    --color-success-contrast: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
    --color-success-surface: oklch(from var(--color-success) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
    --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-info: oklch(from var(--color-info-base) l calc(c * var(--color-c-factor,1)) h);
    --color-info-outline: oklch(from var(--color-info) l c h);
    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
    --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
    --color-info-contrast: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
    --color-info-surface: oklch(from var(--color-info) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
    --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-highlight: oklch(from var(--color-highlight-base) l calc(c * var(--color-c-factor,1)) h);
    --color-highlight-outline: oklch(from var(--color-highlight) l c h);
    --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
    --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
    --color-highlight-contrast: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
    --color-highlight-surface: oklch(from var(--color-highlight) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
    --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-error: oklch(from var(--color-error-base) l calc(c * var(--color-c-factor,1)) h);
    --color-error-outline: oklch(from var(--color-error) l c h);
    --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
    --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
    --color-error-contrast: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
    --color-error-surface: oklch(from var(--color-error) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
    --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-warning: oklch(from var(--color-warning-base) l calc(c * var(--color-c-factor,1)) h);
    --color-warning-outline: oklch(from var(--color-warning) l c h);
    --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
    --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
    --color-warning-contrast: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
    --color-warning-surface: oklch(from var(--color-warning) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
    --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-caution: oklch(from var(--color-caution-base) l calc(c * var(--color-c-factor,1)) h);
    --color-caution-outline: oklch(from var(--color-caution) l c h);
    --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
    --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
    --color-caution-contrast: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
    --color-caution-surface: oklch(from var(--color-caution) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
    --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
    --color-title-outline: oklch(from var(--color-title) l c h);
    --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
    --color-title-contrast: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
    --color-title-surface: oklch(from var(--color-title) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
    --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-description-base: oklch(from var(--color-title) calc(l * 2.5) c h);
    --color-description: var(--color-description-base);
    --color-description-outline: var(--color-title);
    --color-description-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-description-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-description-contrast: var(--color-title-contrast);
    --color-description-body: var(--color-description-base);
    --color-description-fg: var(--color-description-base);
    --color-description-surface: var(--color-title-surface);
    --color-description-bg: var(--color-title-bg);
    --color-description-bg-hover: var(--color-title-bg-hover);
    --color-description-bg-active: var(--color-title-bg-active);
    --color-description-bd: var(--color-title-bd);
    --color-description-bd-hover: var(--color-title-bd-hover);
    --color-description-bd-active: var(--color-title-bd-active);
    --color-caption-base: oklch(from var(--color-title) calc(l * 3.5) c h);
    --color-caption: var(--color-caption-base);
    --color-caption-outline: var(--color-title);
    --color-caption-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-caption-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-caption-contrast: var(--color-title-contrast);
    --color-caption-body: var(--color-caption-base);
    --color-caption-fg: var(--color-caption-base);
    --color-caption-surface: var(--color-title-surface);
    --color-caption-bg: var(--color-title-bg);
    --color-caption-bg-hover: var(--color-title-bg-hover);
    --color-caption-bg-active: var(--color-title-bg-active);
    --color-caption-bd: var(--color-title-bd);
    --color-caption-bd-hover: var(--color-title-bd-hover);
    --color-caption-bd-active: var(--color-title-bd-active);
    --color-placeholder-base: oklch(from var(--color-title) calc(l * 4.5) c h);
    --color-placeholder: var(--color-placeholder-base);
    --color-placeholder-outline: var(--color-title);
    --color-placeholder-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-placeholder-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-placeholder-contrast: var(--color-title-contrast);
    --color-placeholder-body: var(--color-placeholder-base);
    --color-placeholder-fg: var(--color-placeholder-base);
    --color-placeholder-surface: var(--color-title-surface);
    --color-placeholder-bg: var(--color-title-bg);
    --color-placeholder-bg-hover: var(--color-title-bg-hover);
    --color-placeholder-bg-active: var(--color-title-bg-active);
    --color-placeholder-bd: var(--color-title-bd);
    --color-placeholder-bd-hover: var(--color-title-bd-hover);
    --color-placeholder-bd-active: var(--color-title-bd-active);
    --color-ink: oklch(from var(--color-ink-base) l calc(c * var(--color-c-factor,1)) h);
    --color-ink-outline: oklch(from var(--color-ink) l c h);
    --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
    --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
    --color-ink-contrast: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
    --color-ink-surface: oklch(from var(--color-ink) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
    --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  }
}
.theme-midnight {
  --color-primary-base: #5b7fff;
  --color-secondary-base: #8f6fe0;
  --color-tertiary-base: #4fd1e0;
  --color-warning-base: #f0a54a;
  --color-caution-base: #e0c04a;
  --color-highlight-base: #f0e880;
  --color-info-base: #4a9be0;
  --color-success-base: #4fbf80;
  --color-error-base: #e0524a;
  --color-ink-base: #0d0d0d;
  &:where(:not(:root)) {
    --color-primary: oklch(from var(--color-primary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-primary-outline: oklch(from var(--color-primary) l c h);
    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
    --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
    --color-primary-contrast: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
    --color-primary-surface: oklch(from var(--color-primary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
    --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-secondary: oklch(from var(--color-secondary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-secondary-outline: oklch(from var(--color-secondary) l c h);
    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
    --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
    --color-secondary-contrast: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
    --color-secondary-surface: oklch(from var(--color-secondary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
    --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-tertiary: oklch(from var(--color-tertiary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-tertiary-outline: oklch(from var(--color-tertiary) l c h);
    --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
    --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
    --color-tertiary-contrast: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
    --color-tertiary-surface: oklch(from var(--color-tertiary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
    --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-success: oklch(from var(--color-success-base) l calc(c * var(--color-c-factor,1)) h);
    --color-success-outline: oklch(from var(--color-success) l c h);
    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
    --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
    --color-success-contrast: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
    --color-success-surface: oklch(from var(--color-success) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
    --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-info: oklch(from var(--color-info-base) l calc(c * var(--color-c-factor,1)) h);
    --color-info-outline: oklch(from var(--color-info) l c h);
    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
    --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
    --color-info-contrast: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
    --color-info-surface: oklch(from var(--color-info) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
    --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-highlight: oklch(from var(--color-highlight-base) l calc(c * var(--color-c-factor,1)) h);
    --color-highlight-outline: oklch(from var(--color-highlight) l c h);
    --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
    --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
    --color-highlight-contrast: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
    --color-highlight-surface: oklch(from var(--color-highlight) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
    --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-error: oklch(from var(--color-error-base) l calc(c * var(--color-c-factor,1)) h);
    --color-error-outline: oklch(from var(--color-error) l c h);
    --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
    --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
    --color-error-contrast: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
    --color-error-surface: oklch(from var(--color-error) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
    --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-warning: oklch(from var(--color-warning-base) l calc(c * var(--color-c-factor,1)) h);
    --color-warning-outline: oklch(from var(--color-warning) l c h);
    --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
    --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
    --color-warning-contrast: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
    --color-warning-surface: oklch(from var(--color-warning) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
    --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-caution: oklch(from var(--color-caution-base) l calc(c * var(--color-c-factor,1)) h);
    --color-caution-outline: oklch(from var(--color-caution) l c h);
    --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
    --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
    --color-caution-contrast: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
    --color-caution-surface: oklch(from var(--color-caution) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
    --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
    --color-title-outline: oklch(from var(--color-title) l c h);
    --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
    --color-title-contrast: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
    --color-title-surface: oklch(from var(--color-title) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
    --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-description-base: oklch(from var(--color-title) calc(l * 2.5) c h);
    --color-description: var(--color-description-base);
    --color-description-outline: var(--color-title);
    --color-description-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-description-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-description-contrast: var(--color-title-contrast);
    --color-description-body: var(--color-description-base);
    --color-description-fg: var(--color-description-base);
    --color-description-surface: var(--color-title-surface);
    --color-description-bg: var(--color-title-bg);
    --color-description-bg-hover: var(--color-title-bg-hover);
    --color-description-bg-active: var(--color-title-bg-active);
    --color-description-bd: var(--color-title-bd);
    --color-description-bd-hover: var(--color-title-bd-hover);
    --color-description-bd-active: var(--color-title-bd-active);
    --color-caption-base: oklch(from var(--color-title) calc(l * 3.5) c h);
    --color-caption: var(--color-caption-base);
    --color-caption-outline: var(--color-title);
    --color-caption-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-caption-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-caption-contrast: var(--color-title-contrast);
    --color-caption-body: var(--color-caption-base);
    --color-caption-fg: var(--color-caption-base);
    --color-caption-surface: var(--color-title-surface);
    --color-caption-bg: var(--color-title-bg);
    --color-caption-bg-hover: var(--color-title-bg-hover);
    --color-caption-bg-active: var(--color-title-bg-active);
    --color-caption-bd: var(--color-title-bd);
    --color-caption-bd-hover: var(--color-title-bd-hover);
    --color-caption-bd-active: var(--color-title-bd-active);
    --color-placeholder-base: oklch(from var(--color-title) calc(l * 4.5) c h);
    --color-placeholder: var(--color-placeholder-base);
    --color-placeholder-outline: var(--color-title);
    --color-placeholder-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-placeholder-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-placeholder-contrast: var(--color-title-contrast);
    --color-placeholder-body: var(--color-placeholder-base);
    --color-placeholder-fg: var(--color-placeholder-base);
    --color-placeholder-surface: var(--color-title-surface);
    --color-placeholder-bg: var(--color-title-bg);
    --color-placeholder-bg-hover: var(--color-title-bg-hover);
    --color-placeholder-bg-active: var(--color-title-bg-active);
    --color-placeholder-bd: var(--color-title-bd);
    --color-placeholder-bd-hover: var(--color-title-bd-hover);
    --color-placeholder-bd-active: var(--color-title-bd-active);
    --color-ink: oklch(from var(--color-ink-base) l calc(c * var(--color-c-factor,1)) h);
    --color-ink-outline: oklch(from var(--color-ink) l c h);
    --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
    --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
    --color-ink-contrast: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
    --color-ink-surface: oklch(from var(--color-ink) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
    --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  }
}
.theme-minimal {
  --color-primary-base: #3a3a3a;
  --color-secondary-base: #6a6a6a;
  --color-tertiary-base: #9a9a9a;
  --color-warning-base: #d49e3a;
  --color-caution-base: #c4b03a;
  --color-highlight-base: #d4cc3a;
  --color-info-base: #3a7fa8;
  --color-success-base: #4a8f4a;
  --color-error-base: #b84a3a;
  --color-ink-base: #1a1a1a;
  &:where(:not(:root)) {
    --color-primary: oklch(from var(--color-primary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-primary-outline: oklch(from var(--color-primary) l c h);
    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
    --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
    --color-primary-contrast: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
    --color-primary-surface: oklch(from var(--color-primary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
    --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-secondary: oklch(from var(--color-secondary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-secondary-outline: oklch(from var(--color-secondary) l c h);
    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
    --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
    --color-secondary-contrast: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
    --color-secondary-surface: oklch(from var(--color-secondary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
    --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-tertiary: oklch(from var(--color-tertiary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-tertiary-outline: oklch(from var(--color-tertiary) l c h);
    --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
    --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
    --color-tertiary-contrast: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
    --color-tertiary-surface: oklch(from var(--color-tertiary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
    --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-success: oklch(from var(--color-success-base) l calc(c * var(--color-c-factor,1)) h);
    --color-success-outline: oklch(from var(--color-success) l c h);
    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
    --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
    --color-success-contrast: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
    --color-success-surface: oklch(from var(--color-success) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
    --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-info: oklch(from var(--color-info-base) l calc(c * var(--color-c-factor,1)) h);
    --color-info-outline: oklch(from var(--color-info) l c h);
    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
    --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
    --color-info-contrast: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
    --color-info-surface: oklch(from var(--color-info) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
    --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-highlight: oklch(from var(--color-highlight-base) l calc(c * var(--color-c-factor,1)) h);
    --color-highlight-outline: oklch(from var(--color-highlight) l c h);
    --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
    --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
    --color-highlight-contrast: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
    --color-highlight-surface: oklch(from var(--color-highlight) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
    --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-error: oklch(from var(--color-error-base) l calc(c * var(--color-c-factor,1)) h);
    --color-error-outline: oklch(from var(--color-error) l c h);
    --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
    --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
    --color-error-contrast: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
    --color-error-surface: oklch(from var(--color-error) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
    --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-warning: oklch(from var(--color-warning-base) l calc(c * var(--color-c-factor,1)) h);
    --color-warning-outline: oklch(from var(--color-warning) l c h);
    --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
    --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
    --color-warning-contrast: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
    --color-warning-surface: oklch(from var(--color-warning) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
    --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-caution: oklch(from var(--color-caution-base) l calc(c * var(--color-c-factor,1)) h);
    --color-caution-outline: oklch(from var(--color-caution) l c h);
    --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
    --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
    --color-caution-contrast: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
    --color-caution-surface: oklch(from var(--color-caution) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
    --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
    --color-title-outline: oklch(from var(--color-title) l c h);
    --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
    --color-title-contrast: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
    --color-title-surface: oklch(from var(--color-title) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
    --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-description-base: oklch(from var(--color-title) calc(l * 2.5) c h);
    --color-description: var(--color-description-base);
    --color-description-outline: var(--color-title);
    --color-description-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-description-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-description-contrast: var(--color-title-contrast);
    --color-description-body: var(--color-description-base);
    --color-description-fg: var(--color-description-base);
    --color-description-surface: var(--color-title-surface);
    --color-description-bg: var(--color-title-bg);
    --color-description-bg-hover: var(--color-title-bg-hover);
    --color-description-bg-active: var(--color-title-bg-active);
    --color-description-bd: var(--color-title-bd);
    --color-description-bd-hover: var(--color-title-bd-hover);
    --color-description-bd-active: var(--color-title-bd-active);
    --color-caption-base: oklch(from var(--color-title) calc(l * 3.5) c h);
    --color-caption: var(--color-caption-base);
    --color-caption-outline: var(--color-title);
    --color-caption-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-caption-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-caption-contrast: var(--color-title-contrast);
    --color-caption-body: var(--color-caption-base);
    --color-caption-fg: var(--color-caption-base);
    --color-caption-surface: var(--color-title-surface);
    --color-caption-bg: var(--color-title-bg);
    --color-caption-bg-hover: var(--color-title-bg-hover);
    --color-caption-bg-active: var(--color-title-bg-active);
    --color-caption-bd: var(--color-title-bd);
    --color-caption-bd-hover: var(--color-title-bd-hover);
    --color-caption-bd-active: var(--color-title-bd-active);
    --color-placeholder-base: oklch(from var(--color-title) calc(l * 4.5) c h);
    --color-placeholder: var(--color-placeholder-base);
    --color-placeholder-outline: var(--color-title);
    --color-placeholder-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-placeholder-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-placeholder-contrast: var(--color-title-contrast);
    --color-placeholder-body: var(--color-placeholder-base);
    --color-placeholder-fg: var(--color-placeholder-base);
    --color-placeholder-surface: var(--color-title-surface);
    --color-placeholder-bg: var(--color-title-bg);
    --color-placeholder-bg-hover: var(--color-title-bg-hover);
    --color-placeholder-bg-active: var(--color-title-bg-active);
    --color-placeholder-bd: var(--color-title-bd);
    --color-placeholder-bd-hover: var(--color-title-bd-hover);
    --color-placeholder-bd-active: var(--color-title-bd-active);
    --color-ink: oklch(from var(--color-ink-base) l calc(c * var(--color-c-factor,1)) h);
    --color-ink-outline: oklch(from var(--color-ink) l c h);
    --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
    --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
    --color-ink-contrast: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
    --color-ink-surface: oklch(from var(--color-ink) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
    --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  }
}
.theme-morandi {
  --color-primary-base: #6b8299;
  --color-secondary-base: #a17e82;
  --color-tertiary-base: #8a9a7e;
  --color-warning-base: #c08552;
  --color-caution-base: #baa06a;
  --color-highlight-base: #d4c896;
  --color-info-base: #7d99ad;
  --color-success-base: #7f9d7a;
  --color-error-base: #b06a5c;
  --color-ink-base: #2b2724;
  &:where(:not(:root)) {
    --color-primary: oklch(from var(--color-primary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-primary-outline: oklch(from var(--color-primary) l c h);
    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
    --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
    --color-primary-contrast: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
    --color-primary-surface: oklch(from var(--color-primary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
    --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-secondary: oklch(from var(--color-secondary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-secondary-outline: oklch(from var(--color-secondary) l c h);
    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
    --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
    --color-secondary-contrast: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
    --color-secondary-surface: oklch(from var(--color-secondary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
    --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-tertiary: oklch(from var(--color-tertiary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-tertiary-outline: oklch(from var(--color-tertiary) l c h);
    --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
    --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
    --color-tertiary-contrast: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
    --color-tertiary-surface: oklch(from var(--color-tertiary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
    --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-success: oklch(from var(--color-success-base) l calc(c * var(--color-c-factor,1)) h);
    --color-success-outline: oklch(from var(--color-success) l c h);
    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
    --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
    --color-success-contrast: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
    --color-success-surface: oklch(from var(--color-success) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
    --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-info: oklch(from var(--color-info-base) l calc(c * var(--color-c-factor,1)) h);
    --color-info-outline: oklch(from var(--color-info) l c h);
    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
    --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
    --color-info-contrast: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
    --color-info-surface: oklch(from var(--color-info) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
    --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-highlight: oklch(from var(--color-highlight-base) l calc(c * var(--color-c-factor,1)) h);
    --color-highlight-outline: oklch(from var(--color-highlight) l c h);
    --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
    --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
    --color-highlight-contrast: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
    --color-highlight-surface: oklch(from var(--color-highlight) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
    --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-error: oklch(from var(--color-error-base) l calc(c * var(--color-c-factor,1)) h);
    --color-error-outline: oklch(from var(--color-error) l c h);
    --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
    --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
    --color-error-contrast: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
    --color-error-surface: oklch(from var(--color-error) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
    --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-warning: oklch(from var(--color-warning-base) l calc(c * var(--color-c-factor,1)) h);
    --color-warning-outline: oklch(from var(--color-warning) l c h);
    --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
    --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
    --color-warning-contrast: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
    --color-warning-surface: oklch(from var(--color-warning) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
    --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-caution: oklch(from var(--color-caution-base) l calc(c * var(--color-c-factor,1)) h);
    --color-caution-outline: oklch(from var(--color-caution) l c h);
    --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
    --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
    --color-caution-contrast: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
    --color-caution-surface: oklch(from var(--color-caution) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
    --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
    --color-title-outline: oklch(from var(--color-title) l c h);
    --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
    --color-title-contrast: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
    --color-title-surface: oklch(from var(--color-title) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
    --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-description-base: oklch(from var(--color-title) calc(l * 2.5) c h);
    --color-description: var(--color-description-base);
    --color-description-outline: var(--color-title);
    --color-description-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-description-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-description-contrast: var(--color-title-contrast);
    --color-description-body: var(--color-description-base);
    --color-description-fg: var(--color-description-base);
    --color-description-surface: var(--color-title-surface);
    --color-description-bg: var(--color-title-bg);
    --color-description-bg-hover: var(--color-title-bg-hover);
    --color-description-bg-active: var(--color-title-bg-active);
    --color-description-bd: var(--color-title-bd);
    --color-description-bd-hover: var(--color-title-bd-hover);
    --color-description-bd-active: var(--color-title-bd-active);
    --color-caption-base: oklch(from var(--color-title) calc(l * 3.5) c h);
    --color-caption: var(--color-caption-base);
    --color-caption-outline: var(--color-title);
    --color-caption-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-caption-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-caption-contrast: var(--color-title-contrast);
    --color-caption-body: var(--color-caption-base);
    --color-caption-fg: var(--color-caption-base);
    --color-caption-surface: var(--color-title-surface);
    --color-caption-bg: var(--color-title-bg);
    --color-caption-bg-hover: var(--color-title-bg-hover);
    --color-caption-bg-active: var(--color-title-bg-active);
    --color-caption-bd: var(--color-title-bd);
    --color-caption-bd-hover: var(--color-title-bd-hover);
    --color-caption-bd-active: var(--color-title-bd-active);
    --color-placeholder-base: oklch(from var(--color-title) calc(l * 4.5) c h);
    --color-placeholder: var(--color-placeholder-base);
    --color-placeholder-outline: var(--color-title);
    --color-placeholder-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-placeholder-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-placeholder-contrast: var(--color-title-contrast);
    --color-placeholder-body: var(--color-placeholder-base);
    --color-placeholder-fg: var(--color-placeholder-base);
    --color-placeholder-surface: var(--color-title-surface);
    --color-placeholder-bg: var(--color-title-bg);
    --color-placeholder-bg-hover: var(--color-title-bg-hover);
    --color-placeholder-bg-active: var(--color-title-bg-active);
    --color-placeholder-bd: var(--color-title-bd);
    --color-placeholder-bd-hover: var(--color-title-bd-hover);
    --color-placeholder-bd-active: var(--color-title-bd-active);
    --color-ink: oklch(from var(--color-ink-base) l calc(c * var(--color-c-factor,1)) h);
    --color-ink-outline: oklch(from var(--color-ink) l c h);
    --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
    --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
    --color-ink-contrast: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
    --color-ink-surface: oklch(from var(--color-ink) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
    --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  }
}
.theme-neon {
  --color-primary-base: #d43aff;
  --color-secondary-base: #ff3ac4;
  --color-tertiary-base: #3ad4ff;
  --color-warning-base: #ff8a1e;
  --color-caution-base: #f4cc1e;
  --color-highlight-base: #f4f41e;
  --color-info-base: #1eb4ff;
  --color-success-base: #3ad43a;
  --color-error-base: #ff3a3a;
  --color-ink-base: #0d0d1a;
  &:where(:not(:root)) {
    --color-primary: oklch(from var(--color-primary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-primary-outline: oklch(from var(--color-primary) l c h);
    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
    --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
    --color-primary-contrast: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
    --color-primary-surface: oklch(from var(--color-primary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
    --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-secondary: oklch(from var(--color-secondary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-secondary-outline: oklch(from var(--color-secondary) l c h);
    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
    --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
    --color-secondary-contrast: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
    --color-secondary-surface: oklch(from var(--color-secondary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
    --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-tertiary: oklch(from var(--color-tertiary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-tertiary-outline: oklch(from var(--color-tertiary) l c h);
    --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
    --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
    --color-tertiary-contrast: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
    --color-tertiary-surface: oklch(from var(--color-tertiary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
    --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-success: oklch(from var(--color-success-base) l calc(c * var(--color-c-factor,1)) h);
    --color-success-outline: oklch(from var(--color-success) l c h);
    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
    --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
    --color-success-contrast: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
    --color-success-surface: oklch(from var(--color-success) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
    --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-info: oklch(from var(--color-info-base) l calc(c * var(--color-c-factor,1)) h);
    --color-info-outline: oklch(from var(--color-info) l c h);
    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
    --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
    --color-info-contrast: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
    --color-info-surface: oklch(from var(--color-info) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
    --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-highlight: oklch(from var(--color-highlight-base) l calc(c * var(--color-c-factor,1)) h);
    --color-highlight-outline: oklch(from var(--color-highlight) l c h);
    --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
    --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
    --color-highlight-contrast: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
    --color-highlight-surface: oklch(from var(--color-highlight) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
    --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-error: oklch(from var(--color-error-base) l calc(c * var(--color-c-factor,1)) h);
    --color-error-outline: oklch(from var(--color-error) l c h);
    --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
    --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
    --color-error-contrast: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
    --color-error-surface: oklch(from var(--color-error) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
    --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-warning: oklch(from var(--color-warning-base) l calc(c * var(--color-c-factor,1)) h);
    --color-warning-outline: oklch(from var(--color-warning) l c h);
    --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
    --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
    --color-warning-contrast: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
    --color-warning-surface: oklch(from var(--color-warning) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
    --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-caution: oklch(from var(--color-caution-base) l calc(c * var(--color-c-factor,1)) h);
    --color-caution-outline: oklch(from var(--color-caution) l c h);
    --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
    --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
    --color-caution-contrast: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
    --color-caution-surface: oklch(from var(--color-caution) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
    --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
    --color-title-outline: oklch(from var(--color-title) l c h);
    --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
    --color-title-contrast: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
    --color-title-surface: oklch(from var(--color-title) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
    --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-description-base: oklch(from var(--color-title) calc(l * 2.5) c h);
    --color-description: var(--color-description-base);
    --color-description-outline: var(--color-title);
    --color-description-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-description-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-description-contrast: var(--color-title-contrast);
    --color-description-body: var(--color-description-base);
    --color-description-fg: var(--color-description-base);
    --color-description-surface: var(--color-title-surface);
    --color-description-bg: var(--color-title-bg);
    --color-description-bg-hover: var(--color-title-bg-hover);
    --color-description-bg-active: var(--color-title-bg-active);
    --color-description-bd: var(--color-title-bd);
    --color-description-bd-hover: var(--color-title-bd-hover);
    --color-description-bd-active: var(--color-title-bd-active);
    --color-caption-base: oklch(from var(--color-title) calc(l * 3.5) c h);
    --color-caption: var(--color-caption-base);
    --color-caption-outline: var(--color-title);
    --color-caption-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-caption-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-caption-contrast: var(--color-title-contrast);
    --color-caption-body: var(--color-caption-base);
    --color-caption-fg: var(--color-caption-base);
    --color-caption-surface: var(--color-title-surface);
    --color-caption-bg: var(--color-title-bg);
    --color-caption-bg-hover: var(--color-title-bg-hover);
    --color-caption-bg-active: var(--color-title-bg-active);
    --color-caption-bd: var(--color-title-bd);
    --color-caption-bd-hover: var(--color-title-bd-hover);
    --color-caption-bd-active: var(--color-title-bd-active);
    --color-placeholder-base: oklch(from var(--color-title) calc(l * 4.5) c h);
    --color-placeholder: var(--color-placeholder-base);
    --color-placeholder-outline: var(--color-title);
    --color-placeholder-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-placeholder-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-placeholder-contrast: var(--color-title-contrast);
    --color-placeholder-body: var(--color-placeholder-base);
    --color-placeholder-fg: var(--color-placeholder-base);
    --color-placeholder-surface: var(--color-title-surface);
    --color-placeholder-bg: var(--color-title-bg);
    --color-placeholder-bg-hover: var(--color-title-bg-hover);
    --color-placeholder-bg-active: var(--color-title-bg-active);
    --color-placeholder-bd: var(--color-title-bd);
    --color-placeholder-bd-hover: var(--color-title-bd-hover);
    --color-placeholder-bd-active: var(--color-title-bd-active);
    --color-ink: oklch(from var(--color-ink-base) l calc(c * var(--color-c-factor,1)) h);
    --color-ink-outline: oklch(from var(--color-ink) l c h);
    --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
    --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
    --color-ink-contrast: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
    --color-ink-surface: oklch(from var(--color-ink) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
    --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  }
}
.theme-noir {
  --color-primary-base: #1a1a1a;
  --color-secondary-base: #5a5a5a;
  --color-tertiary-base: #9a9a9a;
  --color-warning-base: #b8813a;
  --color-caution-base: #a8923a;
  --color-highlight-base: #d4cf7a;
  --color-info-base: #4a6b8a;
  --color-success-base: #5a8a5f;
  --color-error-base: #a8453a;
  --color-ink-base: #0a0a0a;
  &:where(:not(:root)) {
    --color-primary: oklch(from var(--color-primary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-primary-outline: oklch(from var(--color-primary) l c h);
    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
    --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
    --color-primary-contrast: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
    --color-primary-surface: oklch(from var(--color-primary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
    --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-secondary: oklch(from var(--color-secondary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-secondary-outline: oklch(from var(--color-secondary) l c h);
    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
    --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
    --color-secondary-contrast: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
    --color-secondary-surface: oklch(from var(--color-secondary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
    --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-tertiary: oklch(from var(--color-tertiary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-tertiary-outline: oklch(from var(--color-tertiary) l c h);
    --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
    --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
    --color-tertiary-contrast: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
    --color-tertiary-surface: oklch(from var(--color-tertiary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
    --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-success: oklch(from var(--color-success-base) l calc(c * var(--color-c-factor,1)) h);
    --color-success-outline: oklch(from var(--color-success) l c h);
    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
    --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
    --color-success-contrast: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
    --color-success-surface: oklch(from var(--color-success) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
    --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-info: oklch(from var(--color-info-base) l calc(c * var(--color-c-factor,1)) h);
    --color-info-outline: oklch(from var(--color-info) l c h);
    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
    --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
    --color-info-contrast: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
    --color-info-surface: oklch(from var(--color-info) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
    --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-highlight: oklch(from var(--color-highlight-base) l calc(c * var(--color-c-factor,1)) h);
    --color-highlight-outline: oklch(from var(--color-highlight) l c h);
    --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
    --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
    --color-highlight-contrast: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
    --color-highlight-surface: oklch(from var(--color-highlight) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
    --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-error: oklch(from var(--color-error-base) l calc(c * var(--color-c-factor,1)) h);
    --color-error-outline: oklch(from var(--color-error) l c h);
    --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
    --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
    --color-error-contrast: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
    --color-error-surface: oklch(from var(--color-error) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
    --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-warning: oklch(from var(--color-warning-base) l calc(c * var(--color-c-factor,1)) h);
    --color-warning-outline: oklch(from var(--color-warning) l c h);
    --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
    --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
    --color-warning-contrast: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
    --color-warning-surface: oklch(from var(--color-warning) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
    --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-caution: oklch(from var(--color-caution-base) l calc(c * var(--color-c-factor,1)) h);
    --color-caution-outline: oklch(from var(--color-caution) l c h);
    --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
    --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
    --color-caution-contrast: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
    --color-caution-surface: oklch(from var(--color-caution) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
    --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
    --color-title-outline: oklch(from var(--color-title) l c h);
    --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
    --color-title-contrast: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
    --color-title-surface: oklch(from var(--color-title) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
    --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-description-base: oklch(from var(--color-title) calc(l * 2.5) c h);
    --color-description: var(--color-description-base);
    --color-description-outline: var(--color-title);
    --color-description-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-description-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-description-contrast: var(--color-title-contrast);
    --color-description-body: var(--color-description-base);
    --color-description-fg: var(--color-description-base);
    --color-description-surface: var(--color-title-surface);
    --color-description-bg: var(--color-title-bg);
    --color-description-bg-hover: var(--color-title-bg-hover);
    --color-description-bg-active: var(--color-title-bg-active);
    --color-description-bd: var(--color-title-bd);
    --color-description-bd-hover: var(--color-title-bd-hover);
    --color-description-bd-active: var(--color-title-bd-active);
    --color-caption-base: oklch(from var(--color-title) calc(l * 3.5) c h);
    --color-caption: var(--color-caption-base);
    --color-caption-outline: var(--color-title);
    --color-caption-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-caption-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-caption-contrast: var(--color-title-contrast);
    --color-caption-body: var(--color-caption-base);
    --color-caption-fg: var(--color-caption-base);
    --color-caption-surface: var(--color-title-surface);
    --color-caption-bg: var(--color-title-bg);
    --color-caption-bg-hover: var(--color-title-bg-hover);
    --color-caption-bg-active: var(--color-title-bg-active);
    --color-caption-bd: var(--color-title-bd);
    --color-caption-bd-hover: var(--color-title-bd-hover);
    --color-caption-bd-active: var(--color-title-bd-active);
    --color-placeholder-base: oklch(from var(--color-title) calc(l * 4.5) c h);
    --color-placeholder: var(--color-placeholder-base);
    --color-placeholder-outline: var(--color-title);
    --color-placeholder-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-placeholder-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-placeholder-contrast: var(--color-title-contrast);
    --color-placeholder-body: var(--color-placeholder-base);
    --color-placeholder-fg: var(--color-placeholder-base);
    --color-placeholder-surface: var(--color-title-surface);
    --color-placeholder-bg: var(--color-title-bg);
    --color-placeholder-bg-hover: var(--color-title-bg-hover);
    --color-placeholder-bg-active: var(--color-title-bg-active);
    --color-placeholder-bd: var(--color-title-bd);
    --color-placeholder-bd-hover: var(--color-title-bd-hover);
    --color-placeholder-bd-active: var(--color-title-bd-active);
    --color-ink: oklch(from var(--color-ink-base) l calc(c * var(--color-c-factor,1)) h);
    --color-ink-outline: oklch(from var(--color-ink) l c h);
    --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
    --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
    --color-ink-contrast: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
    --color-ink-surface: oklch(from var(--color-ink) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
    --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  }
}
.theme-ocean {
  --color-primary-base: #0a5fb4;
  --color-secondary-base: #0f9baa;
  --color-tertiary-base: #4fd1c5;
  --color-warning-base: #f0883e;
  --color-caution-base: #e8b64a;
  --color-highlight-base: #cfe066;
  --color-info-base: #2196d8;
  --color-success-base: #2e9e6b;
  --color-error-base: #e15a4d;
  --color-ink-base: #0b1c2c;
  &:where(:not(:root)) {
    --color-primary: oklch(from var(--color-primary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-primary-outline: oklch(from var(--color-primary) l c h);
    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
    --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
    --color-primary-contrast: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
    --color-primary-surface: oklch(from var(--color-primary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
    --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-secondary: oklch(from var(--color-secondary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-secondary-outline: oklch(from var(--color-secondary) l c h);
    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
    --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
    --color-secondary-contrast: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
    --color-secondary-surface: oklch(from var(--color-secondary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
    --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-tertiary: oklch(from var(--color-tertiary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-tertiary-outline: oklch(from var(--color-tertiary) l c h);
    --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
    --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
    --color-tertiary-contrast: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
    --color-tertiary-surface: oklch(from var(--color-tertiary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
    --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-success: oklch(from var(--color-success-base) l calc(c * var(--color-c-factor,1)) h);
    --color-success-outline: oklch(from var(--color-success) l c h);
    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
    --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
    --color-success-contrast: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
    --color-success-surface: oklch(from var(--color-success) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
    --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-info: oklch(from var(--color-info-base) l calc(c * var(--color-c-factor,1)) h);
    --color-info-outline: oklch(from var(--color-info) l c h);
    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
    --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
    --color-info-contrast: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
    --color-info-surface: oklch(from var(--color-info) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
    --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-highlight: oklch(from var(--color-highlight-base) l calc(c * var(--color-c-factor,1)) h);
    --color-highlight-outline: oklch(from var(--color-highlight) l c h);
    --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
    --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
    --color-highlight-contrast: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
    --color-highlight-surface: oklch(from var(--color-highlight) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
    --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-error: oklch(from var(--color-error-base) l calc(c * var(--color-c-factor,1)) h);
    --color-error-outline: oklch(from var(--color-error) l c h);
    --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
    --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
    --color-error-contrast: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
    --color-error-surface: oklch(from var(--color-error) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
    --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-warning: oklch(from var(--color-warning-base) l calc(c * var(--color-c-factor,1)) h);
    --color-warning-outline: oklch(from var(--color-warning) l c h);
    --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
    --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
    --color-warning-contrast: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
    --color-warning-surface: oklch(from var(--color-warning) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
    --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-caution: oklch(from var(--color-caution-base) l calc(c * var(--color-c-factor,1)) h);
    --color-caution-outline: oklch(from var(--color-caution) l c h);
    --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
    --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
    --color-caution-contrast: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
    --color-caution-surface: oklch(from var(--color-caution) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
    --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
    --color-title-outline: oklch(from var(--color-title) l c h);
    --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
    --color-title-contrast: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
    --color-title-surface: oklch(from var(--color-title) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
    --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-description-base: oklch(from var(--color-title) calc(l * 2.5) c h);
    --color-description: var(--color-description-base);
    --color-description-outline: var(--color-title);
    --color-description-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-description-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-description-contrast: var(--color-title-contrast);
    --color-description-body: var(--color-description-base);
    --color-description-fg: var(--color-description-base);
    --color-description-surface: var(--color-title-surface);
    --color-description-bg: var(--color-title-bg);
    --color-description-bg-hover: var(--color-title-bg-hover);
    --color-description-bg-active: var(--color-title-bg-active);
    --color-description-bd: var(--color-title-bd);
    --color-description-bd-hover: var(--color-title-bd-hover);
    --color-description-bd-active: var(--color-title-bd-active);
    --color-caption-base: oklch(from var(--color-title) calc(l * 3.5) c h);
    --color-caption: var(--color-caption-base);
    --color-caption-outline: var(--color-title);
    --color-caption-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-caption-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-caption-contrast: var(--color-title-contrast);
    --color-caption-body: var(--color-caption-base);
    --color-caption-fg: var(--color-caption-base);
    --color-caption-surface: var(--color-title-surface);
    --color-caption-bg: var(--color-title-bg);
    --color-caption-bg-hover: var(--color-title-bg-hover);
    --color-caption-bg-active: var(--color-title-bg-active);
    --color-caption-bd: var(--color-title-bd);
    --color-caption-bd-hover: var(--color-title-bd-hover);
    --color-caption-bd-active: var(--color-title-bd-active);
    --color-placeholder-base: oklch(from var(--color-title) calc(l * 4.5) c h);
    --color-placeholder: var(--color-placeholder-base);
    --color-placeholder-outline: var(--color-title);
    --color-placeholder-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-placeholder-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-placeholder-contrast: var(--color-title-contrast);
    --color-placeholder-body: var(--color-placeholder-base);
    --color-placeholder-fg: var(--color-placeholder-base);
    --color-placeholder-surface: var(--color-title-surface);
    --color-placeholder-bg: var(--color-title-bg);
    --color-placeholder-bg-hover: var(--color-title-bg-hover);
    --color-placeholder-bg-active: var(--color-title-bg-active);
    --color-placeholder-bd: var(--color-title-bd);
    --color-placeholder-bd-hover: var(--color-title-bd-hover);
    --color-placeholder-bd-active: var(--color-title-bd-active);
    --color-ink: oklch(from var(--color-ink-base) l calc(c * var(--color-c-factor,1)) h);
    --color-ink-outline: oklch(from var(--color-ink) l c h);
    --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
    --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
    --color-ink-contrast: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
    --color-ink-surface: oklch(from var(--color-ink) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
    --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  }
}
.theme-sakura {
  --color-primary-base: #ff8fab;
  --color-secondary-base: #e0729e;
  --color-tertiary-base: #ffb4a2;
  --color-warning-base: #f4a259;
  --color-caution-base: #e8c468;
  --color-highlight-base: #f9e79f;
  --color-info-base: #7eb6e0;
  --color-success-base: #7fc9a0;
  --color-error-base: #e0574f;
  --color-ink-base: #2e1a24;
  &:where(:not(:root)) {
    --color-primary: oklch(from var(--color-primary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-primary-outline: oklch(from var(--color-primary) l c h);
    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
    --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
    --color-primary-contrast: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
    --color-primary-surface: oklch(from var(--color-primary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
    --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-secondary: oklch(from var(--color-secondary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-secondary-outline: oklch(from var(--color-secondary) l c h);
    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
    --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
    --color-secondary-contrast: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
    --color-secondary-surface: oklch(from var(--color-secondary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
    --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-tertiary: oklch(from var(--color-tertiary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-tertiary-outline: oklch(from var(--color-tertiary) l c h);
    --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
    --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
    --color-tertiary-contrast: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
    --color-tertiary-surface: oklch(from var(--color-tertiary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
    --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-success: oklch(from var(--color-success-base) l calc(c * var(--color-c-factor,1)) h);
    --color-success-outline: oklch(from var(--color-success) l c h);
    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
    --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
    --color-success-contrast: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
    --color-success-surface: oklch(from var(--color-success) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
    --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-info: oklch(from var(--color-info-base) l calc(c * var(--color-c-factor,1)) h);
    --color-info-outline: oklch(from var(--color-info) l c h);
    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
    --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
    --color-info-contrast: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
    --color-info-surface: oklch(from var(--color-info) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
    --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-highlight: oklch(from var(--color-highlight-base) l calc(c * var(--color-c-factor,1)) h);
    --color-highlight-outline: oklch(from var(--color-highlight) l c h);
    --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
    --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
    --color-highlight-contrast: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
    --color-highlight-surface: oklch(from var(--color-highlight) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
    --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-error: oklch(from var(--color-error-base) l calc(c * var(--color-c-factor,1)) h);
    --color-error-outline: oklch(from var(--color-error) l c h);
    --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
    --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
    --color-error-contrast: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
    --color-error-surface: oklch(from var(--color-error) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
    --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-warning: oklch(from var(--color-warning-base) l calc(c * var(--color-c-factor,1)) h);
    --color-warning-outline: oklch(from var(--color-warning) l c h);
    --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
    --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
    --color-warning-contrast: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
    --color-warning-surface: oklch(from var(--color-warning) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
    --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-caution: oklch(from var(--color-caution-base) l calc(c * var(--color-c-factor,1)) h);
    --color-caution-outline: oklch(from var(--color-caution) l c h);
    --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
    --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
    --color-caution-contrast: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
    --color-caution-surface: oklch(from var(--color-caution) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
    --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
    --color-title-outline: oklch(from var(--color-title) l c h);
    --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
    --color-title-contrast: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
    --color-title-surface: oklch(from var(--color-title) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
    --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-description-base: oklch(from var(--color-title) calc(l * 2.5) c h);
    --color-description: var(--color-description-base);
    --color-description-outline: var(--color-title);
    --color-description-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-description-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-description-contrast: var(--color-title-contrast);
    --color-description-body: var(--color-description-base);
    --color-description-fg: var(--color-description-base);
    --color-description-surface: var(--color-title-surface);
    --color-description-bg: var(--color-title-bg);
    --color-description-bg-hover: var(--color-title-bg-hover);
    --color-description-bg-active: var(--color-title-bg-active);
    --color-description-bd: var(--color-title-bd);
    --color-description-bd-hover: var(--color-title-bd-hover);
    --color-description-bd-active: var(--color-title-bd-active);
    --color-caption-base: oklch(from var(--color-title) calc(l * 3.5) c h);
    --color-caption: var(--color-caption-base);
    --color-caption-outline: var(--color-title);
    --color-caption-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-caption-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-caption-contrast: var(--color-title-contrast);
    --color-caption-body: var(--color-caption-base);
    --color-caption-fg: var(--color-caption-base);
    --color-caption-surface: var(--color-title-surface);
    --color-caption-bg: var(--color-title-bg);
    --color-caption-bg-hover: var(--color-title-bg-hover);
    --color-caption-bg-active: var(--color-title-bg-active);
    --color-caption-bd: var(--color-title-bd);
    --color-caption-bd-hover: var(--color-title-bd-hover);
    --color-caption-bd-active: var(--color-title-bd-active);
    --color-placeholder-base: oklch(from var(--color-title) calc(l * 4.5) c h);
    --color-placeholder: var(--color-placeholder-base);
    --color-placeholder-outline: var(--color-title);
    --color-placeholder-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-placeholder-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-placeholder-contrast: var(--color-title-contrast);
    --color-placeholder-body: var(--color-placeholder-base);
    --color-placeholder-fg: var(--color-placeholder-base);
    --color-placeholder-surface: var(--color-title-surface);
    --color-placeholder-bg: var(--color-title-bg);
    --color-placeholder-bg-hover: var(--color-title-bg-hover);
    --color-placeholder-bg-active: var(--color-title-bg-active);
    --color-placeholder-bd: var(--color-title-bd);
    --color-placeholder-bd-hover: var(--color-title-bd-hover);
    --color-placeholder-bd-active: var(--color-title-bd-active);
    --color-ink: oklch(from var(--color-ink-base) l calc(c * var(--color-c-factor,1)) h);
    --color-ink-outline: oklch(from var(--color-ink) l c h);
    --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
    --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
    --color-ink-contrast: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
    --color-ink-surface: oklch(from var(--color-ink) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
    --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  }
}
.theme-sunset {
  --color-primary-base: #ff6b4a;
  --color-secondary-base: #e0558f;
  --color-tertiary-base: #ffb648;
  --color-warning-base: #d9701c;
  --color-caution-base: #e8a13a;
  --color-highlight-base: #ffd93d;
  --color-info-base: #4a90d9;
  --color-success-base: #3ba876;
  --color-error-base: #d9342c;
  --color-ink-base: #2b1810;
  &:where(:not(:root)) {
    --color-primary: oklch(from var(--color-primary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-primary-outline: oklch(from var(--color-primary) l c h);
    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
    --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
    --color-primary-contrast: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
    --color-primary-surface: oklch(from var(--color-primary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
    --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-secondary: oklch(from var(--color-secondary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-secondary-outline: oklch(from var(--color-secondary) l c h);
    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
    --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
    --color-secondary-contrast: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
    --color-secondary-surface: oklch(from var(--color-secondary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
    --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-tertiary: oklch(from var(--color-tertiary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-tertiary-outline: oklch(from var(--color-tertiary) l c h);
    --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
    --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
    --color-tertiary-contrast: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
    --color-tertiary-surface: oklch(from var(--color-tertiary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
    --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-success: oklch(from var(--color-success-base) l calc(c * var(--color-c-factor,1)) h);
    --color-success-outline: oklch(from var(--color-success) l c h);
    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
    --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
    --color-success-contrast: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
    --color-success-surface: oklch(from var(--color-success) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
    --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-info: oklch(from var(--color-info-base) l calc(c * var(--color-c-factor,1)) h);
    --color-info-outline: oklch(from var(--color-info) l c h);
    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
    --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
    --color-info-contrast: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
    --color-info-surface: oklch(from var(--color-info) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
    --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-highlight: oklch(from var(--color-highlight-base) l calc(c * var(--color-c-factor,1)) h);
    --color-highlight-outline: oklch(from var(--color-highlight) l c h);
    --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
    --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
    --color-highlight-contrast: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
    --color-highlight-surface: oklch(from var(--color-highlight) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
    --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-error: oklch(from var(--color-error-base) l calc(c * var(--color-c-factor,1)) h);
    --color-error-outline: oklch(from var(--color-error) l c h);
    --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
    --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
    --color-error-contrast: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
    --color-error-surface: oklch(from var(--color-error) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
    --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-warning: oklch(from var(--color-warning-base) l calc(c * var(--color-c-factor,1)) h);
    --color-warning-outline: oklch(from var(--color-warning) l c h);
    --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
    --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
    --color-warning-contrast: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
    --color-warning-surface: oklch(from var(--color-warning) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
    --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-caution: oklch(from var(--color-caution-base) l calc(c * var(--color-c-factor,1)) h);
    --color-caution-outline: oklch(from var(--color-caution) l c h);
    --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
    --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
    --color-caution-contrast: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
    --color-caution-surface: oklch(from var(--color-caution) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
    --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
    --color-title-outline: oklch(from var(--color-title) l c h);
    --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
    --color-title-contrast: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
    --color-title-surface: oklch(from var(--color-title) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
    --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-description-base: oklch(from var(--color-title) calc(l * 2.5) c h);
    --color-description: var(--color-description-base);
    --color-description-outline: var(--color-title);
    --color-description-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-description-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-description-contrast: var(--color-title-contrast);
    --color-description-body: var(--color-description-base);
    --color-description-fg: var(--color-description-base);
    --color-description-surface: var(--color-title-surface);
    --color-description-bg: var(--color-title-bg);
    --color-description-bg-hover: var(--color-title-bg-hover);
    --color-description-bg-active: var(--color-title-bg-active);
    --color-description-bd: var(--color-title-bd);
    --color-description-bd-hover: var(--color-title-bd-hover);
    --color-description-bd-active: var(--color-title-bd-active);
    --color-caption-base: oklch(from var(--color-title) calc(l * 3.5) c h);
    --color-caption: var(--color-caption-base);
    --color-caption-outline: var(--color-title);
    --color-caption-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-caption-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-caption-contrast: var(--color-title-contrast);
    --color-caption-body: var(--color-caption-base);
    --color-caption-fg: var(--color-caption-base);
    --color-caption-surface: var(--color-title-surface);
    --color-caption-bg: var(--color-title-bg);
    --color-caption-bg-hover: var(--color-title-bg-hover);
    --color-caption-bg-active: var(--color-title-bg-active);
    --color-caption-bd: var(--color-title-bd);
    --color-caption-bd-hover: var(--color-title-bd-hover);
    --color-caption-bd-active: var(--color-title-bd-active);
    --color-placeholder-base: oklch(from var(--color-title) calc(l * 4.5) c h);
    --color-placeholder: var(--color-placeholder-base);
    --color-placeholder-outline: var(--color-title);
    --color-placeholder-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-placeholder-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-placeholder-contrast: var(--color-title-contrast);
    --color-placeholder-body: var(--color-placeholder-base);
    --color-placeholder-fg: var(--color-placeholder-base);
    --color-placeholder-surface: var(--color-title-surface);
    --color-placeholder-bg: var(--color-title-bg);
    --color-placeholder-bg-hover: var(--color-title-bg-hover);
    --color-placeholder-bg-active: var(--color-title-bg-active);
    --color-placeholder-bd: var(--color-title-bd);
    --color-placeholder-bd-hover: var(--color-title-bd-hover);
    --color-placeholder-bd-active: var(--color-title-bd-active);
    --color-ink: oklch(from var(--color-ink-base) l calc(c * var(--color-c-factor,1)) h);
    --color-ink-outline: oklch(from var(--color-ink) l c h);
    --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
    --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
    --color-ink-contrast: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
    --color-ink-surface: oklch(from var(--color-ink) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
    --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  }
}
.theme-terracotta {
  --color-primary-base: #b84a2a;
  --color-secondary-base: #d46a3a;
  --color-tertiary-base: #e8945a;
  --color-warning-base: #e8a03a;
  --color-caution-base: #d4b03a;
  --color-highlight-base: #e8d44a;
  --color-info-base: #3a7fa8;
  --color-success-base: #5a8f4a;
  --color-error-base: #c94a3a;
  --color-ink-base: #2b1a0e;
  &:where(:not(:root)) {
    --color-primary: oklch(from var(--color-primary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-primary-outline: oklch(from var(--color-primary) l c h);
    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
    --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
    --color-primary-contrast: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
    --color-primary-surface: oklch(from var(--color-primary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
    --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-secondary: oklch(from var(--color-secondary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-secondary-outline: oklch(from var(--color-secondary) l c h);
    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
    --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
    --color-secondary-contrast: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
    --color-secondary-surface: oklch(from var(--color-secondary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
    --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-tertiary: oklch(from var(--color-tertiary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-tertiary-outline: oklch(from var(--color-tertiary) l c h);
    --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
    --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
    --color-tertiary-contrast: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
    --color-tertiary-surface: oklch(from var(--color-tertiary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
    --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-success: oklch(from var(--color-success-base) l calc(c * var(--color-c-factor,1)) h);
    --color-success-outline: oklch(from var(--color-success) l c h);
    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
    --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
    --color-success-contrast: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
    --color-success-surface: oklch(from var(--color-success) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
    --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-info: oklch(from var(--color-info-base) l calc(c * var(--color-c-factor,1)) h);
    --color-info-outline: oklch(from var(--color-info) l c h);
    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
    --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
    --color-info-contrast: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
    --color-info-surface: oklch(from var(--color-info) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
    --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-highlight: oklch(from var(--color-highlight-base) l calc(c * var(--color-c-factor,1)) h);
    --color-highlight-outline: oklch(from var(--color-highlight) l c h);
    --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
    --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
    --color-highlight-contrast: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
    --color-highlight-surface: oklch(from var(--color-highlight) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
    --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-error: oklch(from var(--color-error-base) l calc(c * var(--color-c-factor,1)) h);
    --color-error-outline: oklch(from var(--color-error) l c h);
    --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
    --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
    --color-error-contrast: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
    --color-error-surface: oklch(from var(--color-error) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
    --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-warning: oklch(from var(--color-warning-base) l calc(c * var(--color-c-factor,1)) h);
    --color-warning-outline: oklch(from var(--color-warning) l c h);
    --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
    --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
    --color-warning-contrast: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
    --color-warning-surface: oklch(from var(--color-warning) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
    --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-caution: oklch(from var(--color-caution-base) l calc(c * var(--color-c-factor,1)) h);
    --color-caution-outline: oklch(from var(--color-caution) l c h);
    --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
    --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
    --color-caution-contrast: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
    --color-caution-surface: oklch(from var(--color-caution) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
    --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
    --color-title-outline: oklch(from var(--color-title) l c h);
    --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
    --color-title-contrast: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
    --color-title-surface: oklch(from var(--color-title) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
    --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-description-base: oklch(from var(--color-title) calc(l * 2.5) c h);
    --color-description: var(--color-description-base);
    --color-description-outline: var(--color-title);
    --color-description-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-description-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-description-contrast: var(--color-title-contrast);
    --color-description-body: var(--color-description-base);
    --color-description-fg: var(--color-description-base);
    --color-description-surface: var(--color-title-surface);
    --color-description-bg: var(--color-title-bg);
    --color-description-bg-hover: var(--color-title-bg-hover);
    --color-description-bg-active: var(--color-title-bg-active);
    --color-description-bd: var(--color-title-bd);
    --color-description-bd-hover: var(--color-title-bd-hover);
    --color-description-bd-active: var(--color-title-bd-active);
    --color-caption-base: oklch(from var(--color-title) calc(l * 3.5) c h);
    --color-caption: var(--color-caption-base);
    --color-caption-outline: var(--color-title);
    --color-caption-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-caption-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-caption-contrast: var(--color-title-contrast);
    --color-caption-body: var(--color-caption-base);
    --color-caption-fg: var(--color-caption-base);
    --color-caption-surface: var(--color-title-surface);
    --color-caption-bg: var(--color-title-bg);
    --color-caption-bg-hover: var(--color-title-bg-hover);
    --color-caption-bg-active: var(--color-title-bg-active);
    --color-caption-bd: var(--color-title-bd);
    --color-caption-bd-hover: var(--color-title-bd-hover);
    --color-caption-bd-active: var(--color-title-bd-active);
    --color-placeholder-base: oklch(from var(--color-title) calc(l * 4.5) c h);
    --color-placeholder: var(--color-placeholder-base);
    --color-placeholder-outline: var(--color-title);
    --color-placeholder-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-placeholder-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-placeholder-contrast: var(--color-title-contrast);
    --color-placeholder-body: var(--color-placeholder-base);
    --color-placeholder-fg: var(--color-placeholder-base);
    --color-placeholder-surface: var(--color-title-surface);
    --color-placeholder-bg: var(--color-title-bg);
    --color-placeholder-bg-hover: var(--color-title-bg-hover);
    --color-placeholder-bg-active: var(--color-title-bg-active);
    --color-placeholder-bd: var(--color-title-bd);
    --color-placeholder-bd-hover: var(--color-title-bd-hover);
    --color-placeholder-bd-active: var(--color-title-bd-active);
    --color-ink: oklch(from var(--color-ink-base) l calc(c * var(--color-c-factor,1)) h);
    --color-ink-outline: oklch(from var(--color-ink) l c h);
    --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
    --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
    --color-ink-contrast: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
    --color-ink-surface: oklch(from var(--color-ink) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
    --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  }
}
.theme-twilight {
  --color-primary-base: #6c3bb8;
  --color-secondary-base: #8f4fc4;
  --color-tertiary-base: #b37dd6;
  --color-warning-base: #e8943a;
  --color-caution-base: #d4aa3a;
  --color-highlight-base: #e8d64a;
  --color-info-base: #4a8fbf;
  --color-success-base: #4a8f5a;
  --color-error-base: #cf4a4a;
  --color-ink-base: #1e142b;
  &:where(:not(:root)) {
    --color-primary: oklch(from var(--color-primary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-primary-outline: oklch(from var(--color-primary) l c h);
    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
    --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
    --color-primary-contrast: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
    --color-primary-surface: oklch(from var(--color-primary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
    --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-secondary: oklch(from var(--color-secondary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-secondary-outline: oklch(from var(--color-secondary) l c h);
    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
    --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
    --color-secondary-contrast: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
    --color-secondary-surface: oklch(from var(--color-secondary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
    --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-tertiary: oklch(from var(--color-tertiary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-tertiary-outline: oklch(from var(--color-tertiary) l c h);
    --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
    --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
    --color-tertiary-contrast: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
    --color-tertiary-surface: oklch(from var(--color-tertiary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
    --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-success: oklch(from var(--color-success-base) l calc(c * var(--color-c-factor,1)) h);
    --color-success-outline: oklch(from var(--color-success) l c h);
    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
    --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
    --color-success-contrast: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
    --color-success-surface: oklch(from var(--color-success) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
    --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-info: oklch(from var(--color-info-base) l calc(c * var(--color-c-factor,1)) h);
    --color-info-outline: oklch(from var(--color-info) l c h);
    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
    --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
    --color-info-contrast: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
    --color-info-surface: oklch(from var(--color-info) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
    --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-highlight: oklch(from var(--color-highlight-base) l calc(c * var(--color-c-factor,1)) h);
    --color-highlight-outline: oklch(from var(--color-highlight) l c h);
    --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
    --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
    --color-highlight-contrast: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
    --color-highlight-surface: oklch(from var(--color-highlight) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
    --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-error: oklch(from var(--color-error-base) l calc(c * var(--color-c-factor,1)) h);
    --color-error-outline: oklch(from var(--color-error) l c h);
    --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
    --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
    --color-error-contrast: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
    --color-error-surface: oklch(from var(--color-error) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
    --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-warning: oklch(from var(--color-warning-base) l calc(c * var(--color-c-factor,1)) h);
    --color-warning-outline: oklch(from var(--color-warning) l c h);
    --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
    --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
    --color-warning-contrast: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
    --color-warning-surface: oklch(from var(--color-warning) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
    --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-caution: oklch(from var(--color-caution-base) l calc(c * var(--color-c-factor,1)) h);
    --color-caution-outline: oklch(from var(--color-caution) l c h);
    --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
    --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
    --color-caution-contrast: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
    --color-caution-surface: oklch(from var(--color-caution) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
    --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
    --color-title-outline: oklch(from var(--color-title) l c h);
    --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
    --color-title-contrast: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
    --color-title-surface: oklch(from var(--color-title) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
    --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-description-base: oklch(from var(--color-title) calc(l * 2.5) c h);
    --color-description: var(--color-description-base);
    --color-description-outline: var(--color-title);
    --color-description-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-description-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-description-contrast: var(--color-title-contrast);
    --color-description-body: var(--color-description-base);
    --color-description-fg: var(--color-description-base);
    --color-description-surface: var(--color-title-surface);
    --color-description-bg: var(--color-title-bg);
    --color-description-bg-hover: var(--color-title-bg-hover);
    --color-description-bg-active: var(--color-title-bg-active);
    --color-description-bd: var(--color-title-bd);
    --color-description-bd-hover: var(--color-title-bd-hover);
    --color-description-bd-active: var(--color-title-bd-active);
    --color-caption-base: oklch(from var(--color-title) calc(l * 3.5) c h);
    --color-caption: var(--color-caption-base);
    --color-caption-outline: var(--color-title);
    --color-caption-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-caption-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-caption-contrast: var(--color-title-contrast);
    --color-caption-body: var(--color-caption-base);
    --color-caption-fg: var(--color-caption-base);
    --color-caption-surface: var(--color-title-surface);
    --color-caption-bg: var(--color-title-bg);
    --color-caption-bg-hover: var(--color-title-bg-hover);
    --color-caption-bg-active: var(--color-title-bg-active);
    --color-caption-bd: var(--color-title-bd);
    --color-caption-bd-hover: var(--color-title-bd-hover);
    --color-caption-bd-active: var(--color-title-bd-active);
    --color-placeholder-base: oklch(from var(--color-title) calc(l * 4.5) c h);
    --color-placeholder: var(--color-placeholder-base);
    --color-placeholder-outline: var(--color-title);
    --color-placeholder-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-placeholder-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-placeholder-contrast: var(--color-title-contrast);
    --color-placeholder-body: var(--color-placeholder-base);
    --color-placeholder-fg: var(--color-placeholder-base);
    --color-placeholder-surface: var(--color-title-surface);
    --color-placeholder-bg: var(--color-title-bg);
    --color-placeholder-bg-hover: var(--color-title-bg-hover);
    --color-placeholder-bg-active: var(--color-title-bg-active);
    --color-placeholder-bd: var(--color-title-bd);
    --color-placeholder-bd-hover: var(--color-title-bd-hover);
    --color-placeholder-bd-active: var(--color-title-bd-active);
    --color-ink: oklch(from var(--color-ink-base) l calc(c * var(--color-c-factor,1)) h);
    --color-ink-outline: oklch(from var(--color-ink) l c h);
    --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
    --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
    --color-ink-contrast: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
    --color-ink-surface: oklch(from var(--color-ink) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
    --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  }
}
.light {
  &:where(:not(:root)) {
    --color-primary: oklch(from var(--color-primary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-primary-outline: oklch(from var(--color-primary) l c h);
    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
    --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
    --color-primary-contrast: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
    --color-primary-surface: oklch(from var(--color-primary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
    --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-secondary: oklch(from var(--color-secondary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-secondary-outline: oklch(from var(--color-secondary) l c h);
    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
    --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
    --color-secondary-contrast: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
    --color-secondary-surface: oklch(from var(--color-secondary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
    --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-tertiary: oklch(from var(--color-tertiary-base) l calc(c * var(--color-c-factor,1)) h);
    --color-tertiary-outline: oklch(from var(--color-tertiary) l c h);
    --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
    --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
    --color-tertiary-contrast: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
    --color-tertiary-surface: oklch(from var(--color-tertiary) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
    --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-success: oklch(from var(--color-success-base) l calc(c * var(--color-c-factor,1)) h);
    --color-success-outline: oklch(from var(--color-success) l c h);
    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
    --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
    --color-success-contrast: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
    --color-success-surface: oklch(from var(--color-success) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
    --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-info: oklch(from var(--color-info-base) l calc(c * var(--color-c-factor,1)) h);
    --color-info-outline: oklch(from var(--color-info) l c h);
    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
    --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
    --color-info-contrast: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
    --color-info-surface: oklch(from var(--color-info) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
    --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-highlight: oklch(from var(--color-highlight-base) l calc(c * var(--color-c-factor,1)) h);
    --color-highlight-outline: oklch(from var(--color-highlight) l c h);
    --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
    --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
    --color-highlight-contrast: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
    --color-highlight-surface: oklch(from var(--color-highlight) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
    --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-error: oklch(from var(--color-error-base) l calc(c * var(--color-c-factor,1)) h);
    --color-error-outline: oklch(from var(--color-error) l c h);
    --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
    --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
    --color-error-contrast: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
    --color-error-surface: oklch(from var(--color-error) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
    --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-warning: oklch(from var(--color-warning-base) l calc(c * var(--color-c-factor,1)) h);
    --color-warning-outline: oklch(from var(--color-warning) l c h);
    --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
    --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
    --color-warning-contrast: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
    --color-warning-surface: oklch(from var(--color-warning) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
    --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-caution: oklch(from var(--color-caution-base) l calc(c * var(--color-c-factor,1)) h);
    --color-caution-outline: oklch(from var(--color-caution) l c h);
    --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
    --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
    --color-caution-contrast: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
    --color-caution-surface: oklch(from var(--color-caution) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
    --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
    --color-title-outline: oklch(from var(--color-title) l c h);
    --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
    --color-title-contrast: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
    --color-title-surface: oklch(from var(--color-title) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
    --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
    --color-description-base: oklch(from var(--color-title) calc(l * 2.5) c h);
    --color-description: var(--color-description-base);
    --color-description-outline: var(--color-title);
    --color-description-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-description-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-description-contrast: var(--color-title-contrast);
    --color-description-body: var(--color-description-base);
    --color-description-fg: var(--color-description-base);
    --color-description-surface: var(--color-title-surface);
    --color-description-bg: var(--color-title-bg);
    --color-description-bg-hover: var(--color-title-bg-hover);
    --color-description-bg-active: var(--color-title-bg-active);
    --color-description-bd: var(--color-title-bd);
    --color-description-bd-hover: var(--color-title-bd-hover);
    --color-description-bd-active: var(--color-title-bd-active);
    --color-caption-base: oklch(from var(--color-title) calc(l * 3.5) c h);
    --color-caption: var(--color-caption-base);
    --color-caption-outline: var(--color-title);
    --color-caption-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-caption-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-caption-contrast: var(--color-title-contrast);
    --color-caption-body: var(--color-caption-base);
    --color-caption-fg: var(--color-caption-base);
    --color-caption-surface: var(--color-title-surface);
    --color-caption-bg: var(--color-title-bg);
    --color-caption-bg-hover: var(--color-title-bg-hover);
    --color-caption-bg-active: var(--color-title-bg-active);
    --color-caption-bd: var(--color-title-bd);
    --color-caption-bd-hover: var(--color-title-bd-hover);
    --color-caption-bd-active: var(--color-title-bd-active);
    --color-placeholder-base: oklch(from var(--color-title) calc(l * 4.5) c h);
    --color-placeholder: var(--color-placeholder-base);
    --color-placeholder-outline: var(--color-title);
    --color-placeholder-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-placeholder-active: oklch(from var(--color-title) calc(l * 0.9) c h);
    --color-placeholder-contrast: var(--color-title-contrast);
    --color-placeholder-body: var(--color-placeholder-base);
    --color-placeholder-fg: var(--color-placeholder-base);
    --color-placeholder-surface: var(--color-title-surface);
    --color-placeholder-bg: var(--color-title-bg);
    --color-placeholder-bg-hover: var(--color-title-bg-hover);
    --color-placeholder-bg-active: var(--color-title-bg-active);
    --color-placeholder-bd: var(--color-title-bd);
    --color-placeholder-bd-hover: var(--color-title-bd-hover);
    --color-placeholder-bd-active: var(--color-title-bd-active);
    --color-ink: oklch(from var(--color-ink-base) l calc(c * var(--color-c-factor,1)) h);
    --color-ink-outline: oklch(from var(--color-ink) l c h);
    --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
    --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
    --color-ink-contrast: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
    --color-ink-surface: oklch(from var(--color-ink) var(--light-threshold-surface) min(var(--chorme-surface),c ) h);
    --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
    --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) min(var(--chorme-bg),c) h);
    --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) min(var(--chorme-bg-hover),c) h);
    --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) min(var(--chorme-bg-active),c) h);
    --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(var(--chorme-bd),c ) h);
    --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(var(--chorme-bd-hover),c ) h);
    --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(var(--chorme-bd-active),c ) h);
  }
}
.dark {
  --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
  --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
  --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
  --color-primary-surface: transparent;
  --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
  --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) c h / var(--opacity-bg));
  --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
  --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
  --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(c ,0.12) h);
  --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(c ,0.14) h);
  --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(c ,0.16) h);
  --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
  --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
  --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
  --color-secondary-surface: transparent;
  --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
  --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) c h / var(--opacity-bg));
  --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
  --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
  --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(c ,0.12) h);
  --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(c ,0.14) h);
  --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(c ,0.16) h);
  --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
  --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
  --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
  --color-tertiary-surface: transparent;
  --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
  --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) c h / var(--opacity-bg));
  --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
  --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
  --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(c ,0.12) h);
  --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(c ,0.14) h);
  --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(c ,0.16) h);
  --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
  --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
  --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
  --color-success-surface: transparent;
  --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
  --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) c h / var(--opacity-bg));
  --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
  --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
  --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(c ,0.12) h);
  --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(c ,0.14) h);
  --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(c ,0.16) h);
  --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
  --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
  --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
  --color-info-surface: transparent;
  --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
  --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) c h / var(--opacity-bg));
  --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
  --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
  --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(c ,0.12) h);
  --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(c ,0.14) h);
  --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(c ,0.16) h);
  --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
  --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
  --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
  --color-highlight-surface: transparent;
  --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
  --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) c h / var(--opacity-bg));
  --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
  --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
  --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(c ,0.12) h);
  --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(c ,0.14) h);
  --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(c ,0.16) h);
  --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
  --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
  --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
  --color-error-surface: transparent;
  --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
  --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) c h / var(--opacity-bg));
  --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
  --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
  --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(c ,0.12) h);
  --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(c ,0.14) h);
  --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(c ,0.16) h);
  --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
  --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
  --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
  --color-warning-surface: transparent;
  --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
  --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) c h / var(--opacity-bg));
  --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
  --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
  --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(c ,0.12) h);
  --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(c ,0.14) h);
  --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(c ,0.16) h);
  --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
  --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
  --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
  --color-caution-surface: transparent;
  --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
  --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) c h / var(--opacity-bg));
  --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
  --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
  --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(c ,0.12) h);
  --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(c ,0.14) h);
  --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(c ,0.16) h);
  --color-title-base: oklch(from var(--color-ink-base) var(--light-threshold-body) c h);
  --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
  --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
  --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
  --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
  --color-title-surface: transparent;
  --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
  --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) c h / var(--opacity-bg));
  --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
  --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
  --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(c ,0.12) h);
  --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(c ,0.14) h);
  --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(c ,0.16) h);
  --color-description-base: oklch(from var(--color-title) calc(l * 0.85) c h);
  --color-description: var(--color-description-base);
  --color-description-hover: oklch(from var(--color-description) calc(l + (1 - l) * 0.25) c h);
  --color-description-active: oklch(from var(--color-description) calc(l * 0.9) c h);
  --color-description-body: var(--color-description);
  --color-description-fg: var(--color-description);
  --color-caption-base: oklch(from var(--color-title) calc(l * 0.65) c h);
  --color-caption: var(--color-caption-base);
  --color-caption-hover: oklch(from var(--color-caption) calc(l + (1 - l) * 0.25) c h);
  --color-caption-active: oklch(from var(--color-caption) calc(l * 0.9) c h);
  --color-caption-body: var(--color-caption);
  --color-caption-fg: var(--color-caption);
  --color-placeholder-base: oklch(from var(--color-title) calc(l * 0.5) c h);
  --color-placeholder: var(--color-placeholder-base);
  --color-placeholder-hover: oklch(from var(--color-placeholder) calc(l + (1 - l) * 0.25) c h);
  --color-placeholder-active: oklch(from var(--color-placeholder) calc(l * 0.9) c h);
  --color-placeholder-body: var(--color-placeholder);
  --color-placeholder-fg: var(--color-placeholder);
  --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
  --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
  --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
  --color-ink-surface: transparent;
  --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
  --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) c h / var(--opacity-bg));
  --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
  --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
  --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(c ,0.12) h);
  --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(c ,0.14) h);
  --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(c ,0.16) h);
}
.bubble-caption {
  &:where(:not(.bubble-solid, .bubble-outline, .bubble-subtle)) {
    --bubble-border-color: oklch(from var(--color-caption) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --bubble-border-color: var(--color-caption-bd);
  }
  &:where(.bubble-outline) {
    --bubble-border-color: var(--color-caption);
    --bubble-background: oklch(from var(--color-caption) var(--light-threshold-surface) calc(min(c, var(--chorme-surface)) * var(--color-c-factor)) h);
    --bubble-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-caption-fg);
  }
  &:where(.bubble-solid) {
    --bubble-background: var(--color-caption);
    --bubble-color: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bubble-color: var(--color-caption-contrast);
  }
  &:where(.bubble-subtle) {
    --bubble-border-color: transparent;
    --bubble-background: oklch(from var(--color-caption-base) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --bubble-background: var(--color-caption-surface);
    --bubble-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-caption-fg);
    --bubble-tmp-background: oklch(from var(--color-caption-base) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --bubble-tmp-background: var(--color-caption-bg);
    &:where(.dark, .dark *) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
    @media (prefers-color-scheme: dark) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
  }
}
.bubble-description {
  &:where(:not(.bubble-solid, .bubble-outline, .bubble-subtle)) {
    --bubble-border-color: oklch(from var(--color-description) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --bubble-border-color: var(--color-description-bd);
  }
  &:where(.bubble-outline) {
    --bubble-border-color: var(--color-description);
    --bubble-background: oklch(from var(--color-description) var(--light-threshold-surface) calc(min(c, var(--chorme-surface)) * var(--color-c-factor)) h);
    --bubble-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-description-fg);
  }
  &:where(.bubble-solid) {
    --bubble-background: var(--color-description);
    --bubble-color: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bubble-color: var(--color-description-contrast);
  }
  &:where(.bubble-subtle) {
    --bubble-border-color: transparent;
    --bubble-background: oklch(from var(--color-description-base) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --bubble-background: var(--color-description-surface);
    --bubble-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-description-fg);
    --bubble-tmp-background: oklch(from var(--color-description-base) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --bubble-tmp-background: var(--color-description-bg);
    &:where(.dark, .dark *) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
    @media (prefers-color-scheme: dark) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
  }
}
.bubble-error {
  &:where(:not(.bubble-solid, .bubble-outline, .bubble-subtle)) {
    --bubble-border-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --bubble-border-color: var(--color-error-bd);
  }
  &:where(.bubble-outline) {
    --bubble-border-color: var(--color-error);
    --bubble-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(min(c, var(--chorme-surface)) * var(--color-c-factor)) h);
    --bubble-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-error-fg);
  }
  &:where(.bubble-solid) {
    --bubble-background: var(--color-error);
    --bubble-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bubble-color: var(--color-error-contrast);
  }
  &:where(.bubble-subtle) {
    --bubble-border-color: transparent;
    --bubble-background: oklch(from var(--color-error-base) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --bubble-background: var(--color-error-surface);
    --bubble-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-error-fg);
    --bubble-tmp-background: oklch(from var(--color-error-base) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --bubble-tmp-background: var(--color-error-bg);
    &:where(.dark, .dark *) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
    @media (prefers-color-scheme: dark) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
  }
}
.bubble-highlight {
  &:where(:not(.bubble-solid, .bubble-outline, .bubble-subtle)) {
    --bubble-border-color: oklch(from var(--color-highlight) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --bubble-border-color: var(--color-highlight-bd);
  }
  &:where(.bubble-outline) {
    --bubble-border-color: var(--color-highlight);
    --bubble-background: oklch(from var(--color-highlight) var(--light-threshold-surface) calc(min(c, var(--chorme-surface)) * var(--color-c-factor)) h);
    --bubble-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-highlight-fg);
  }
  &:where(.bubble-solid) {
    --bubble-background: var(--color-highlight);
    --bubble-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bubble-color: var(--color-highlight-contrast);
  }
  &:where(.bubble-subtle) {
    --bubble-border-color: transparent;
    --bubble-background: oklch(from var(--color-highlight-base) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --bubble-background: var(--color-highlight-surface);
    --bubble-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-highlight-fg);
    --bubble-tmp-background: oklch(from var(--color-highlight-base) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --bubble-tmp-background: var(--color-highlight-bg);
    &:where(.dark, .dark *) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
    @media (prefers-color-scheme: dark) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
  }
}
.bubble-info {
  &:where(:not(.bubble-solid, .bubble-outline, .bubble-subtle)) {
    --bubble-border-color: oklch(from var(--color-info) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --bubble-border-color: var(--color-info-bd);
  }
  &:where(.bubble-outline) {
    --bubble-border-color: var(--color-info);
    --bubble-background: oklch(from var(--color-info) var(--light-threshold-surface) calc(min(c, var(--chorme-surface)) * var(--color-c-factor)) h);
    --bubble-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-info-fg);
  }
  &:where(.bubble-solid) {
    --bubble-background: var(--color-info);
    --bubble-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bubble-color: var(--color-info-contrast);
  }
  &:where(.bubble-subtle) {
    --bubble-border-color: transparent;
    --bubble-background: oklch(from var(--color-info-base) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --bubble-background: var(--color-info-surface);
    --bubble-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-info-fg);
    --bubble-tmp-background: oklch(from var(--color-info-base) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --bubble-tmp-background: var(--color-info-bg);
    &:where(.dark, .dark *) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
    @media (prefers-color-scheme: dark) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
  }
}
.bubble-ink {
  &:where(:not(.bubble-solid, .bubble-outline, .bubble-subtle)) {
    --bubble-border-color: oklch(from var(--color-ink) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --bubble-border-color: var(--color-ink-bd);
  }
  &:where(.bubble-outline) {
    --bubble-border-color: var(--color-ink);
    --bubble-background: oklch(from var(--color-ink) var(--light-threshold-surface) calc(min(c, var(--chorme-surface)) * var(--color-c-factor)) h);
    --bubble-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-ink-fg);
  }
  &:where(.bubble-solid) {
    --bubble-background: var(--color-ink);
    --bubble-color: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bubble-color: var(--color-ink-contrast);
  }
  &:where(.bubble-subtle) {
    --bubble-border-color: transparent;
    --bubble-background: oklch(from var(--color-ink-base) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --bubble-background: var(--color-ink-surface);
    --bubble-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-ink-fg);
    --bubble-tmp-background: oklch(from var(--color-ink-base) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --bubble-tmp-background: var(--color-ink-bg);
    &:where(.dark, .dark *) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
    @media (prefers-color-scheme: dark) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
  }
}
.bubble-placeholder {
  &:where(:not(.bubble-solid, .bubble-outline, .bubble-subtle)) {
    --bubble-border-color: oklch(from var(--color-placeholder) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --bubble-border-color: var(--color-placeholder-bd);
  }
  &:where(.bubble-outline) {
    --bubble-border-color: var(--color-placeholder);
    --bubble-background: oklch(from var(--color-placeholder) var(--light-threshold-surface) calc(min(c, var(--chorme-surface)) * var(--color-c-factor)) h);
    --bubble-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-placeholder-fg);
  }
  &:where(.bubble-solid) {
    --bubble-background: var(--color-placeholder);
    --bubble-color: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bubble-color: var(--color-placeholder-contrast);
  }
  &:where(.bubble-subtle) {
    --bubble-border-color: transparent;
    --bubble-background: oklch(from var(--color-placeholder-base) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --bubble-background: var(--color-placeholder-surface);
    --bubble-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-placeholder-fg);
    --bubble-tmp-background: oklch(from var(--color-placeholder-base) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --bubble-tmp-background: var(--color-placeholder-bg);
    &:where(.dark, .dark *) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
    @media (prefers-color-scheme: dark) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
  }
}
.bubble-primary {
  &:where(:not(.bubble-solid, .bubble-outline, .bubble-subtle)) {
    --bubble-border-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --bubble-border-color: var(--color-primary-bd);
  }
  &:where(.bubble-outline) {
    --bubble-border-color: var(--color-primary);
    --bubble-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(min(c, var(--chorme-surface)) * var(--color-c-factor)) h);
    --bubble-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-primary-fg);
  }
  &:where(.bubble-solid) {
    --bubble-background: var(--color-primary);
    --bubble-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bubble-color: var(--color-primary-contrast);
  }
  &:where(.bubble-subtle) {
    --bubble-border-color: transparent;
    --bubble-background: oklch(from var(--color-primary-base) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --bubble-background: var(--color-primary-surface);
    --bubble-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-primary-fg);
    --bubble-tmp-background: oklch(from var(--color-primary-base) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --bubble-tmp-background: var(--color-primary-bg);
    &:where(.dark, .dark *) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
    @media (prefers-color-scheme: dark) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
  }
}
.bubble-secondary {
  &:where(:not(.bubble-solid, .bubble-outline, .bubble-subtle)) {
    --bubble-border-color: oklch(from var(--color-secondary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --bubble-border-color: var(--color-secondary-bd);
  }
  &:where(.bubble-outline) {
    --bubble-border-color: var(--color-secondary);
    --bubble-background: oklch(from var(--color-secondary) var(--light-threshold-surface) calc(min(c, var(--chorme-surface)) * var(--color-c-factor)) h);
    --bubble-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-secondary-fg);
  }
  &:where(.bubble-solid) {
    --bubble-background: var(--color-secondary);
    --bubble-color: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bubble-color: var(--color-secondary-contrast);
  }
  &:where(.bubble-subtle) {
    --bubble-border-color: transparent;
    --bubble-background: oklch(from var(--color-secondary-base) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --bubble-background: var(--color-secondary-surface);
    --bubble-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-secondary-fg);
    --bubble-tmp-background: oklch(from var(--color-secondary-base) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --bubble-tmp-background: var(--color-secondary-bg);
    &:where(.dark, .dark *) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
    @media (prefers-color-scheme: dark) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
  }
}
.bubble-success {
  &:where(:not(.bubble-solid, .bubble-outline, .bubble-subtle)) {
    --bubble-border-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --bubble-border-color: var(--color-success-bd);
  }
  &:where(.bubble-outline) {
    --bubble-border-color: var(--color-success);
    --bubble-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(min(c, var(--chorme-surface)) * var(--color-c-factor)) h);
    --bubble-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-success-fg);
  }
  &:where(.bubble-solid) {
    --bubble-background: var(--color-success);
    --bubble-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bubble-color: var(--color-success-contrast);
  }
  &:where(.bubble-subtle) {
    --bubble-border-color: transparent;
    --bubble-background: oklch(from var(--color-success-base) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --bubble-background: var(--color-success-surface);
    --bubble-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-success-fg);
    --bubble-tmp-background: oklch(from var(--color-success-base) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --bubble-tmp-background: var(--color-success-bg);
    &:where(.dark, .dark *) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
    @media (prefers-color-scheme: dark) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
  }
}
.bubble-tertiary {
  &:where(:not(.bubble-solid, .bubble-outline, .bubble-subtle)) {
    --bubble-border-color: oklch(from var(--color-tertiary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --bubble-border-color: var(--color-tertiary-bd);
  }
  &:where(.bubble-outline) {
    --bubble-border-color: var(--color-tertiary);
    --bubble-background: oklch(from var(--color-tertiary) var(--light-threshold-surface) calc(min(c, var(--chorme-surface)) * var(--color-c-factor)) h);
    --bubble-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-tertiary-fg);
  }
  &:where(.bubble-solid) {
    --bubble-background: var(--color-tertiary);
    --bubble-color: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bubble-color: var(--color-tertiary-contrast);
  }
  &:where(.bubble-subtle) {
    --bubble-border-color: transparent;
    --bubble-background: oklch(from var(--color-tertiary-base) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --bubble-background: var(--color-tertiary-surface);
    --bubble-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-tertiary-fg);
    --bubble-tmp-background: oklch(from var(--color-tertiary-base) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --bubble-tmp-background: var(--color-tertiary-bg);
    &:where(.dark, .dark *) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
    @media (prefers-color-scheme: dark) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
  }
}
.bubble-title {
  &:where(:not(.bubble-solid, .bubble-outline, .bubble-subtle)) {
    --bubble-border-color: oklch(from var(--color-title) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --bubble-border-color: var(--color-title-bd);
  }
  &:where(.bubble-outline) {
    --bubble-border-color: var(--color-title);
    --bubble-background: oklch(from var(--color-title) var(--light-threshold-surface) calc(min(c, var(--chorme-surface)) * var(--color-c-factor)) h);
    --bubble-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-title-fg);
  }
  &:where(.bubble-solid) {
    --bubble-background: var(--color-title);
    --bubble-color: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bubble-color: var(--color-title-contrast);
  }
  &:where(.bubble-subtle) {
    --bubble-border-color: transparent;
    --bubble-background: oklch(from var(--color-title-base) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --bubble-background: var(--color-title-surface);
    --bubble-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-title-fg);
    --bubble-tmp-background: oklch(from var(--color-title-base) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --bubble-tmp-background: var(--color-title-bg);
    &:where(.dark, .dark *) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
    @media (prefers-color-scheme: dark) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
  }
}
.bubble-warning {
  &:where(:not(.bubble-solid, .bubble-outline, .bubble-subtle)) {
    --bubble-border-color: oklch(from var(--color-warning) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
    --bubble-border-color: var(--color-warning-bd);
  }
  &:where(.bubble-outline) {
    --bubble-border-color: var(--color-warning);
    --bubble-background: oklch(from var(--color-warning) var(--light-threshold-surface) calc(min(c, var(--chorme-surface)) * var(--color-c-factor)) h);
    --bubble-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-warning-fg);
  }
  &:where(.bubble-solid) {
    --bubble-background: var(--color-warning);
    --bubble-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bubble-color: var(--color-warning-contrast);
  }
  &:where(.bubble-subtle) {
    --bubble-border-color: transparent;
    --bubble-background: oklch(from var(--color-warning-base) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --bubble-background: var(--color-warning-surface);
    --bubble-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-color: var(--color-warning-fg);
    --bubble-tmp-background: oklch(from var(--color-warning-base) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --bubble-tmp-background: var(--color-warning-bg);
    &:where(.dark, .dark *) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
    @media (prefers-color-scheme: dark) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
  }
}
.badge-caption {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-color: var(--color-caption-contrast);
    --badge-background: var(--color-caption);
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-caption-fg);
    --badge-border-color: var(--color-caption);
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-caption-fg);
    --badge-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --badge-background: var(--color-caption-bg-hover);
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-caption-fg);
    --badge-background: oklch(from var(--color-caption) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-background: var(--color-caption-surface);
    --badge-border-color: oklch(from var(--color-caption) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.badge-caution {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-color: var(--color-caution-contrast);
    --badge-background: var(--color-caution);
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-caution-fg);
    --badge-border-color: var(--color-caution);
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-caution-fg);
    --badge-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --badge-background: var(--color-caution-bg-hover);
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-caution-fg);
    --badge-background: oklch(from var(--color-caution) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-background: var(--color-caution-surface);
    --badge-border-color: oklch(from var(--color-caution) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.badge-description {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-color: var(--color-description-contrast);
    --badge-background: var(--color-description);
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-description-fg);
    --badge-border-color: var(--color-description);
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-description-fg);
    --badge-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --badge-background: var(--color-description-bg-hover);
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-description-fg);
    --badge-background: oklch(from var(--color-description) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-background: var(--color-description-surface);
    --badge-border-color: oklch(from var(--color-description) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.badge-error {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-color: var(--color-error-contrast);
    --badge-background: var(--color-error);
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-error-fg);
    --badge-border-color: var(--color-error);
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-error-fg);
    --badge-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --badge-background: var(--color-error-bg-hover);
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-error-fg);
    --badge-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-background: var(--color-error-surface);
    --badge-border-color: oklch(from var(--color-error) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.badge-highlight {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-color: var(--color-highlight-contrast);
    --badge-background: var(--color-highlight);
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-highlight-fg);
    --badge-border-color: var(--color-highlight);
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-highlight-fg);
    --badge-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --badge-background: var(--color-highlight-bg-hover);
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-highlight-fg);
    --badge-background: oklch(from var(--color-highlight) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-background: var(--color-highlight-surface);
    --badge-border-color: oklch(from var(--color-highlight) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.badge-info {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-color: var(--color-info-contrast);
    --badge-background: var(--color-info);
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-info-fg);
    --badge-border-color: var(--color-info);
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-info-fg);
    --badge-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --badge-background: var(--color-info-bg-hover);
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-info-fg);
    --badge-background: oklch(from var(--color-info) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-background: var(--color-info-surface);
    --badge-border-color: oklch(from var(--color-info) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.badge-ink {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-color: var(--color-ink-contrast);
    --badge-background: var(--color-ink);
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-ink-fg);
    --badge-border-color: var(--color-ink);
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-ink-fg);
    --badge-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --badge-background: var(--color-ink-bg-hover);
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-ink-fg);
    --badge-background: oklch(from var(--color-ink) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-background: var(--color-ink-surface);
    --badge-border-color: oklch(from var(--color-ink) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.badge-placeholder {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-color: var(--color-placeholder-contrast);
    --badge-background: var(--color-placeholder);
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-placeholder-fg);
    --badge-border-color: var(--color-placeholder);
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-placeholder-fg);
    --badge-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --badge-background: var(--color-placeholder-bg-hover);
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-placeholder-fg);
    --badge-background: oklch(from var(--color-placeholder) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-background: var(--color-placeholder-surface);
    --badge-border-color: oklch(from var(--color-placeholder) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.badge-primary {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-color: var(--color-primary-contrast);
    --badge-background: var(--color-primary);
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-primary-fg);
    --badge-border-color: var(--color-primary);
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-primary-fg);
    --badge-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --badge-background: var(--color-primary-bg-hover);
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-primary-fg);
    --badge-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-background: var(--color-primary-surface);
    --badge-border-color: oklch(from var(--color-primary) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.badge-secondary {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-color: var(--color-secondary-contrast);
    --badge-background: var(--color-secondary);
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-secondary-fg);
    --badge-border-color: var(--color-secondary);
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-secondary-fg);
    --badge-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --badge-background: var(--color-secondary-bg-hover);
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-secondary-fg);
    --badge-background: oklch(from var(--color-secondary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-background: var(--color-secondary-surface);
    --badge-border-color: oklch(from var(--color-secondary) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.badge-success {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-color: var(--color-success-contrast);
    --badge-background: var(--color-success);
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-success-fg);
    --badge-border-color: var(--color-success);
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-success-fg);
    --badge-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --badge-background: var(--color-success-bg-hover);
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-success-fg);
    --badge-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-background: var(--color-success-surface);
    --badge-border-color: oklch(from var(--color-success) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.badge-tertiary {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-color: var(--color-tertiary-contrast);
    --badge-background: var(--color-tertiary);
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-tertiary-fg);
    --badge-border-color: var(--color-tertiary);
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-tertiary-fg);
    --badge-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --badge-background: var(--color-tertiary-bg-hover);
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-tertiary-fg);
    --badge-background: oklch(from var(--color-tertiary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-background: var(--color-tertiary-surface);
    --badge-border-color: oklch(from var(--color-tertiary) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.badge-title {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-color: var(--color-title-contrast);
    --badge-background: var(--color-title);
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-title-fg);
    --badge-border-color: var(--color-title);
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-title-fg);
    --badge-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --badge-background: var(--color-title-bg-hover);
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-title-fg);
    --badge-background: oklch(from var(--color-title) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-background: var(--color-title-surface);
    --badge-border-color: oklch(from var(--color-title) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.badge-warning {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-color: var(--color-warning-contrast);
    --badge-background: var(--color-warning);
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-warning-fg);
    --badge-border-color: var(--color-warning);
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-warning-fg);
    --badge-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --badge-background: var(--color-warning-bg-hover);
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-color: var(--color-warning-fg);
    --badge-background: oklch(from var(--color-warning) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-background: var(--color-warning-surface);
    --badge-border-color: oklch(from var(--color-warning) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.btn-muted-caption {
  --btn-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-caption-fg);
  --btn-background: oklch(from var(--color-caption) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-caption-surface);
  --btn-border-color: oklch(from var(--color-caption) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --btn-border-color: var(--color-caption-bd);
  --custom-outline-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-caption-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-caption) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --btn-background: var(--color-caption-bg);
    --btn-border-color: oklch(from var(--color-caption) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-caption-bd-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-caption-bg-hover);
    --btn-border-color: oklch(from var(--color-caption) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-border-color: var(--color-caption-bd-active);
  }
}
.btn-muted-caution {
  --btn-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-caution-fg);
  --btn-background: oklch(from var(--color-caution) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-caution-surface);
  --btn-border-color: oklch(from var(--color-caution) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --btn-border-color: var(--color-caution-bd);
  --custom-outline-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-caution-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-caution) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --btn-background: var(--color-caution-bg);
    --btn-border-color: oklch(from var(--color-caution) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-caution-bd-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-caution-bg-hover);
    --btn-border-color: oklch(from var(--color-caution) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-border-color: var(--color-caution-bd-active);
  }
}
.btn-muted-description {
  --btn-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-description-fg);
  --btn-background: oklch(from var(--color-description) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-description-surface);
  --btn-border-color: oklch(from var(--color-description) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --btn-border-color: var(--color-description-bd);
  --custom-outline-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-description-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-description) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --btn-background: var(--color-description-bg);
    --btn-border-color: oklch(from var(--color-description) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-description-bd-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-description-bg-hover);
    --btn-border-color: oklch(from var(--color-description) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-border-color: var(--color-description-bd-active);
  }
}
.btn-muted-error {
  --btn-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-error-fg);
  --btn-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-error-surface);
  --btn-border-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --btn-border-color: var(--color-error-bd);
  --custom-outline-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-error-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-error) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --btn-background: var(--color-error-bg);
    --btn-border-color: oklch(from var(--color-error) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-error-bd-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-error-bg-hover);
    --btn-border-color: oklch(from var(--color-error) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-border-color: var(--color-error-bd-active);
  }
}
.btn-muted-highlight {
  --btn-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-highlight-fg);
  --btn-background: oklch(from var(--color-highlight) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-highlight-surface);
  --btn-border-color: oklch(from var(--color-highlight) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --btn-border-color: var(--color-highlight-bd);
  --custom-outline-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-highlight-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-highlight) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --btn-background: var(--color-highlight-bg);
    --btn-border-color: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-highlight-bd-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-highlight-bg-hover);
    --btn-border-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-border-color: var(--color-highlight-bd-active);
  }
}
.btn-muted-info {
  --btn-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-info-fg);
  --btn-background: oklch(from var(--color-info) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-info-surface);
  --btn-border-color: oklch(from var(--color-info) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --btn-border-color: var(--color-info-bd);
  --custom-outline-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-info-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-info) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --btn-background: var(--color-info-bg);
    --btn-border-color: oklch(from var(--color-info) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-info-bd-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-info-bg-hover);
    --btn-border-color: oklch(from var(--color-info) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-border-color: var(--color-info-bd-active);
  }
}
.btn-muted-ink {
  --btn-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-ink-fg);
  --btn-background: oklch(from var(--color-ink) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-ink-surface);
  --btn-border-color: oklch(from var(--color-ink) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --btn-border-color: var(--color-ink-bd);
  --custom-outline-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-ink-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-ink) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --btn-background: var(--color-ink-bg);
    --btn-border-color: oklch(from var(--color-ink) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-ink-bd-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-ink-bg-hover);
    --btn-border-color: oklch(from var(--color-ink) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-border-color: var(--color-ink-bd-active);
  }
}
.btn-muted-placeholder {
  --btn-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-placeholder-fg);
  --btn-background: oklch(from var(--color-placeholder) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-placeholder-surface);
  --btn-border-color: oklch(from var(--color-placeholder) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --btn-border-color: var(--color-placeholder-bd);
  --custom-outline-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-placeholder-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-placeholder) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --btn-background: var(--color-placeholder-bg);
    --btn-border-color: oklch(from var(--color-placeholder) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-placeholder-bd-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-placeholder-bg-hover);
    --btn-border-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-border-color: var(--color-placeholder-bd-active);
  }
}
.btn-muted-primary {
  --btn-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-primary-fg);
  --btn-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-primary-surface);
  --btn-border-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --btn-border-color: var(--color-primary-bd);
  --custom-outline-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-primary-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-primary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --btn-background: var(--color-primary-bg);
    --btn-border-color: oklch(from var(--color-primary) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-primary-bd-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-primary-bg-hover);
    --btn-border-color: oklch(from var(--color-primary) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-border-color: var(--color-primary-bd-active);
  }
}
.btn-muted-secondary {
  --btn-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-secondary-fg);
  --btn-background: oklch(from var(--color-secondary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-secondary-surface);
  --btn-border-color: oklch(from var(--color-secondary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --btn-border-color: var(--color-secondary-bd);
  --custom-outline-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-secondary-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-secondary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --btn-background: var(--color-secondary-bg);
    --btn-border-color: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-secondary-bd-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-secondary-bg-hover);
    --btn-border-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-border-color: var(--color-secondary-bd-active);
  }
}
.btn-muted-success {
  --btn-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-success-fg);
  --btn-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-success-surface);
  --btn-border-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --btn-border-color: var(--color-success-bd);
  --custom-outline-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-success-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-success) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --btn-background: var(--color-success-bg);
    --btn-border-color: oklch(from var(--color-success) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-success-bd-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-success-bg-hover);
    --btn-border-color: oklch(from var(--color-success) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-border-color: var(--color-success-bd-active);
  }
}
.btn-muted-tertiary {
  --btn-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-tertiary-fg);
  --btn-background: oklch(from var(--color-tertiary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-tertiary-surface);
  --btn-border-color: oklch(from var(--color-tertiary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --btn-border-color: var(--color-tertiary-bd);
  --custom-outline-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-tertiary-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-tertiary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --btn-background: var(--color-tertiary-bg);
    --btn-border-color: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-tertiary-bd-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-tertiary-bg-hover);
    --btn-border-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-border-color: var(--color-tertiary-bd-active);
  }
}
.btn-muted-title {
  --btn-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-title-fg);
  --btn-background: oklch(from var(--color-title) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-title-surface);
  --btn-border-color: oklch(from var(--color-title) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --btn-border-color: var(--color-title-bd);
  --custom-outline-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-title-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-title) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --btn-background: var(--color-title-bg);
    --btn-border-color: oklch(from var(--color-title) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-title-bd-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-title-bg-hover);
    --btn-border-color: oklch(from var(--color-title) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-border-color: var(--color-title-bd-active);
  }
}
.btn-muted-warning {
  --btn-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-warning-fg);
  --btn-background: oklch(from var(--color-warning) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-warning-surface);
  --btn-border-color: oklch(from var(--color-warning) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --btn-border-color: var(--color-warning-bd);
  --custom-outline-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-warning-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-warning) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --btn-background: var(--color-warning-bg);
    --btn-border-color: oklch(from var(--color-warning) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
    --btn-border-color: var(--color-warning-bd-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-warning-bg-hover);
    --btn-border-color: oklch(from var(--color-warning) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --btn-border-color: var(--color-warning-bd-active);
  }
}
.segment-caption {
  --segment-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --segment-background: var(--color-caption-bg-hover);
  --segment-item-background-hover: oklch(from var(--color-caption) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --segment-item-background-hover: var(--color-caption-bg);
  --segment-outline-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --segment-outline-color: var(--color-caption-outline);
  &:where(:not(.segment-dark)) {
    --segment-item-border-color-selected: oklch(from var(--color-caption-base) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --segment-item-border-color-selected: var(--color-caption-bd-hover);
  }
  &:where(.segment-dark) {
    &:where(.segment-inverted, .segment-flush) {
      --segment-item-color-selected: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color-selected: var(--color-caption-contrast);
      --segment-item-background-selected: var(--color-caption);
    }
    &:where(:not(.segment-inverted, .segment-flush)) {
      --segment-background: var(--color-caption);
      --segment-item-color: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color: var(--color-caption-contrast);
      --segment-item-background-hover: oklch(from var(--color-caption) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --segment-item-background-hover: var(--color-caption-hover);
    }
  }
}
.segment-caution {
  --segment-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --segment-background: var(--color-caution-bg-hover);
  --segment-item-background-hover: oklch(from var(--color-caution) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --segment-item-background-hover: var(--color-caution-bg);
  --segment-outline-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --segment-outline-color: var(--color-caution-outline);
  &:where(:not(.segment-dark)) {
    --segment-item-border-color-selected: oklch(from var(--color-caution-base) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --segment-item-border-color-selected: var(--color-caution-bd-hover);
  }
  &:where(.segment-dark) {
    &:where(.segment-inverted, .segment-flush) {
      --segment-item-color-selected: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color-selected: var(--color-caution-contrast);
      --segment-item-background-selected: var(--color-caution);
    }
    &:where(:not(.segment-inverted, .segment-flush)) {
      --segment-background: var(--color-caution);
      --segment-item-color: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color: var(--color-caution-contrast);
      --segment-item-background-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --segment-item-background-hover: var(--color-caution-hover);
    }
  }
}
.segment-description {
  --segment-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --segment-background: var(--color-description-bg-hover);
  --segment-item-background-hover: oklch(from var(--color-description) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --segment-item-background-hover: var(--color-description-bg);
  --segment-outline-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --segment-outline-color: var(--color-description-outline);
  &:where(:not(.segment-dark)) {
    --segment-item-border-color-selected: oklch(from var(--color-description-base) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --segment-item-border-color-selected: var(--color-description-bd-hover);
  }
  &:where(.segment-dark) {
    &:where(.segment-inverted, .segment-flush) {
      --segment-item-color-selected: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color-selected: var(--color-description-contrast);
      --segment-item-background-selected: var(--color-description);
    }
    &:where(:not(.segment-inverted, .segment-flush)) {
      --segment-background: var(--color-description);
      --segment-item-color: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color: var(--color-description-contrast);
      --segment-item-background-hover: oklch(from var(--color-description) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --segment-item-background-hover: var(--color-description-hover);
    }
  }
}
.segment-error {
  --segment-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --segment-background: var(--color-error-bg-hover);
  --segment-item-background-hover: oklch(from var(--color-error) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --segment-item-background-hover: var(--color-error-bg);
  --segment-outline-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --segment-outline-color: var(--color-error-outline);
  &:where(:not(.segment-dark)) {
    --segment-item-border-color-selected: oklch(from var(--color-error-base) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --segment-item-border-color-selected: var(--color-error-bd-hover);
  }
  &:where(.segment-dark) {
    &:where(.segment-inverted, .segment-flush) {
      --segment-item-color-selected: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color-selected: var(--color-error-contrast);
      --segment-item-background-selected: var(--color-error);
    }
    &:where(:not(.segment-inverted, .segment-flush)) {
      --segment-background: var(--color-error);
      --segment-item-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color: var(--color-error-contrast);
      --segment-item-background-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --segment-item-background-hover: var(--color-error-hover);
    }
  }
}
.segment-highlight {
  --segment-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --segment-background: var(--color-highlight-bg-hover);
  --segment-item-background-hover: oklch(from var(--color-highlight) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --segment-item-background-hover: var(--color-highlight-bg);
  --segment-outline-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --segment-outline-color: var(--color-highlight-outline);
  &:where(:not(.segment-dark)) {
    --segment-item-border-color-selected: oklch(from var(--color-highlight-base) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --segment-item-border-color-selected: var(--color-highlight-bd-hover);
  }
  &:where(.segment-dark) {
    &:where(.segment-inverted, .segment-flush) {
      --segment-item-color-selected: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color-selected: var(--color-highlight-contrast);
      --segment-item-background-selected: var(--color-highlight);
    }
    &:where(:not(.segment-inverted, .segment-flush)) {
      --segment-background: var(--color-highlight);
      --segment-item-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color: var(--color-highlight-contrast);
      --segment-item-background-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --segment-item-background-hover: var(--color-highlight-hover);
    }
  }
}
.segment-info {
  --segment-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --segment-background: var(--color-info-bg-hover);
  --segment-item-background-hover: oklch(from var(--color-info) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --segment-item-background-hover: var(--color-info-bg);
  --segment-outline-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --segment-outline-color: var(--color-info-outline);
  &:where(:not(.segment-dark)) {
    --segment-item-border-color-selected: oklch(from var(--color-info-base) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --segment-item-border-color-selected: var(--color-info-bd-hover);
  }
  &:where(.segment-dark) {
    &:where(.segment-inverted, .segment-flush) {
      --segment-item-color-selected: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color-selected: var(--color-info-contrast);
      --segment-item-background-selected: var(--color-info);
    }
    &:where(:not(.segment-inverted, .segment-flush)) {
      --segment-background: var(--color-info);
      --segment-item-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color: var(--color-info-contrast);
      --segment-item-background-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --segment-item-background-hover: var(--color-info-hover);
    }
  }
}
.segment-ink {
  --segment-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --segment-background: var(--color-ink-bg-hover);
  --segment-item-background-hover: oklch(from var(--color-ink) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --segment-item-background-hover: var(--color-ink-bg);
  --segment-outline-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --segment-outline-color: var(--color-ink-outline);
  &:where(:not(.segment-dark)) {
    --segment-item-border-color-selected: oklch(from var(--color-ink-base) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --segment-item-border-color-selected: var(--color-ink-bd-hover);
  }
  &:where(.segment-dark) {
    &:where(.segment-inverted, .segment-flush) {
      --segment-item-color-selected: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color-selected: var(--color-ink-contrast);
      --segment-item-background-selected: var(--color-ink);
    }
    &:where(:not(.segment-inverted, .segment-flush)) {
      --segment-background: var(--color-ink);
      --segment-item-color: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color: var(--color-ink-contrast);
      --segment-item-background-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --segment-item-background-hover: var(--color-ink-hover);
    }
  }
}
.segment-placeholder {
  --segment-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --segment-background: var(--color-placeholder-bg-hover);
  --segment-item-background-hover: oklch(from var(--color-placeholder) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --segment-item-background-hover: var(--color-placeholder-bg);
  --segment-outline-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --segment-outline-color: var(--color-placeholder-outline);
  &:where(:not(.segment-dark)) {
    --segment-item-border-color-selected: oklch(from var(--color-placeholder-base) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --segment-item-border-color-selected: var(--color-placeholder-bd-hover);
  }
  &:where(.segment-dark) {
    &:where(.segment-inverted, .segment-flush) {
      --segment-item-color-selected: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color-selected: var(--color-placeholder-contrast);
      --segment-item-background-selected: var(--color-placeholder);
    }
    &:where(:not(.segment-inverted, .segment-flush)) {
      --segment-background: var(--color-placeholder);
      --segment-item-color: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color: var(--color-placeholder-contrast);
      --segment-item-background-hover: oklch(from var(--color-placeholder) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --segment-item-background-hover: var(--color-placeholder-hover);
    }
  }
}
.segment-primary {
  --segment-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --segment-background: var(--color-primary-bg-hover);
  --segment-item-background-hover: oklch(from var(--color-primary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --segment-item-background-hover: var(--color-primary-bg);
  --segment-outline-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --segment-outline-color: var(--color-primary-outline);
  &:where(:not(.segment-dark)) {
    --segment-item-border-color-selected: oklch(from var(--color-primary-base) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --segment-item-border-color-selected: var(--color-primary-bd-hover);
  }
  &:where(.segment-dark) {
    &:where(.segment-inverted, .segment-flush) {
      --segment-item-color-selected: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color-selected: var(--color-primary-contrast);
      --segment-item-background-selected: var(--color-primary);
    }
    &:where(:not(.segment-inverted, .segment-flush)) {
      --segment-background: var(--color-primary);
      --segment-item-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color: var(--color-primary-contrast);
      --segment-item-background-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --segment-item-background-hover: var(--color-primary-hover);
    }
  }
}
.segment-secondary {
  --segment-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --segment-background: var(--color-secondary-bg-hover);
  --segment-item-background-hover: oklch(from var(--color-secondary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --segment-item-background-hover: var(--color-secondary-bg);
  --segment-outline-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --segment-outline-color: var(--color-secondary-outline);
  &:where(:not(.segment-dark)) {
    --segment-item-border-color-selected: oklch(from var(--color-secondary-base) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --segment-item-border-color-selected: var(--color-secondary-bd-hover);
  }
  &:where(.segment-dark) {
    &:where(.segment-inverted, .segment-flush) {
      --segment-item-color-selected: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color-selected: var(--color-secondary-contrast);
      --segment-item-background-selected: var(--color-secondary);
    }
    &:where(:not(.segment-inverted, .segment-flush)) {
      --segment-background: var(--color-secondary);
      --segment-item-color: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color: var(--color-secondary-contrast);
      --segment-item-background-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --segment-item-background-hover: var(--color-secondary-hover);
    }
  }
}
.segment-success {
  --segment-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --segment-background: var(--color-success-bg-hover);
  --segment-item-background-hover: oklch(from var(--color-success) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --segment-item-background-hover: var(--color-success-bg);
  --segment-outline-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --segment-outline-color: var(--color-success-outline);
  &:where(:not(.segment-dark)) {
    --segment-item-border-color-selected: oklch(from var(--color-success-base) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --segment-item-border-color-selected: var(--color-success-bd-hover);
  }
  &:where(.segment-dark) {
    &:where(.segment-inverted, .segment-flush) {
      --segment-item-color-selected: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color-selected: var(--color-success-contrast);
      --segment-item-background-selected: var(--color-success);
    }
    &:where(:not(.segment-inverted, .segment-flush)) {
      --segment-background: var(--color-success);
      --segment-item-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color: var(--color-success-contrast);
      --segment-item-background-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --segment-item-background-hover: var(--color-success-hover);
    }
  }
}
.segment-tertiary {
  --segment-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --segment-background: var(--color-tertiary-bg-hover);
  --segment-item-background-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --segment-item-background-hover: var(--color-tertiary-bg);
  --segment-outline-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --segment-outline-color: var(--color-tertiary-outline);
  &:where(:not(.segment-dark)) {
    --segment-item-border-color-selected: oklch(from var(--color-tertiary-base) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --segment-item-border-color-selected: var(--color-tertiary-bd-hover);
  }
  &:where(.segment-dark) {
    &:where(.segment-inverted, .segment-flush) {
      --segment-item-color-selected: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color-selected: var(--color-tertiary-contrast);
      --segment-item-background-selected: var(--color-tertiary);
    }
    &:where(:not(.segment-inverted, .segment-flush)) {
      --segment-background: var(--color-tertiary);
      --segment-item-color: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color: var(--color-tertiary-contrast);
      --segment-item-background-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --segment-item-background-hover: var(--color-tertiary-hover);
    }
  }
}
.segment-title {
  --segment-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --segment-background: var(--color-title-bg-hover);
  --segment-item-background-hover: oklch(from var(--color-title) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --segment-item-background-hover: var(--color-title-bg);
  --segment-outline-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --segment-outline-color: var(--color-title-outline);
  &:where(:not(.segment-dark)) {
    --segment-item-border-color-selected: oklch(from var(--color-title-base) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --segment-item-border-color-selected: var(--color-title-bd-hover);
  }
  &:where(.segment-dark) {
    &:where(.segment-inverted, .segment-flush) {
      --segment-item-color-selected: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color-selected: var(--color-title-contrast);
      --segment-item-background-selected: var(--color-title);
    }
    &:where(:not(.segment-inverted, .segment-flush)) {
      --segment-background: var(--color-title);
      --segment-item-color: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color: var(--color-title-contrast);
      --segment-item-background-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --segment-item-background-hover: var(--color-title-hover);
    }
  }
}
.segment-warning {
  --segment-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --segment-background: var(--color-warning-bg-hover);
  --segment-item-background-hover: oklch(from var(--color-warning) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --segment-item-background-hover: var(--color-warning-bg);
  --segment-outline-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --segment-outline-color: var(--color-warning-outline);
  &:where(:not(.segment-dark)) {
    --segment-item-border-color-selected: oklch(from var(--color-warning-base) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --segment-item-border-color-selected: var(--color-warning-bd-hover);
  }
  &:where(.segment-dark) {
    &:where(.segment-inverted, .segment-flush) {
      --segment-item-color-selected: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color-selected: var(--color-warning-contrast);
      --segment-item-background-selected: var(--color-warning);
    }
    &:where(:not(.segment-inverted, .segment-flush)) {
      --segment-background: var(--color-warning);
      --segment-item-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-color: var(--color-warning-contrast);
      --segment-item-background-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
      --segment-item-background-hover: var(--color-warning-hover);
    }
  }
}
.rank-caption {
  &:where(:not(.rank-solid, .rank-outline, .rank-subtle, .rank-muted)) {
    --rank-color: oklch(from var(--color-caption-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-solid) {
    --rank-background: var(--color-caption);
    --rank-color: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --rank-color: var(--color-caption-contrast);
  }
  &:where(.rank-muted), &:where(.rank-outline) {
    --rank-background: oklch(from var(--color-caption) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --rank-background: var(--color-caption-surface);
    --rank-color: oklch(from var(--color-caption) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-*-body);
  }
  &:where(.rank-muted) {
    --rank-border-color: oklch(from var(--color-caption) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-border-color: var(--color-*-bd);
  }
  &:where(.rank-outline) {
    --rank-border-color: oklch(from var(--color-caption-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-subtle) {
    --rank-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --rank-background: var(--color-caption-bg-hover);
    --rank-color: oklch(from var(--color-caption) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-caption-body);
  }
}
.rank-caution {
  &:where(:not(.rank-solid, .rank-outline, .rank-subtle, .rank-muted)) {
    --rank-color: oklch(from var(--color-caution-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-solid) {
    --rank-background: var(--color-caution);
    --rank-color: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --rank-color: var(--color-caution-contrast);
  }
  &:where(.rank-muted), &:where(.rank-outline) {
    --rank-background: oklch(from var(--color-caution) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --rank-background: var(--color-caution-surface);
    --rank-color: oklch(from var(--color-caution) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-*-body);
  }
  &:where(.rank-muted) {
    --rank-border-color: oklch(from var(--color-caution) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-border-color: var(--color-*-bd);
  }
  &:where(.rank-outline) {
    --rank-border-color: oklch(from var(--color-caution-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-subtle) {
    --rank-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --rank-background: var(--color-caution-bg-hover);
    --rank-color: oklch(from var(--color-caution) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-caution-body);
  }
}
.rank-description {
  &:where(:not(.rank-solid, .rank-outline, .rank-subtle, .rank-muted)) {
    --rank-color: oklch(from var(--color-description-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-solid) {
    --rank-background: var(--color-description);
    --rank-color: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --rank-color: var(--color-description-contrast);
  }
  &:where(.rank-muted), &:where(.rank-outline) {
    --rank-background: oklch(from var(--color-description) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --rank-background: var(--color-description-surface);
    --rank-color: oklch(from var(--color-description) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-*-body);
  }
  &:where(.rank-muted) {
    --rank-border-color: oklch(from var(--color-description) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-border-color: var(--color-*-bd);
  }
  &:where(.rank-outline) {
    --rank-border-color: oklch(from var(--color-description-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-subtle) {
    --rank-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --rank-background: var(--color-description-bg-hover);
    --rank-color: oklch(from var(--color-description) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-description-body);
  }
}
.rank-error {
  &:where(:not(.rank-solid, .rank-outline, .rank-subtle, .rank-muted)) {
    --rank-color: oklch(from var(--color-error-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-solid) {
    --rank-background: var(--color-error);
    --rank-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --rank-color: var(--color-error-contrast);
  }
  &:where(.rank-muted), &:where(.rank-outline) {
    --rank-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --rank-background: var(--color-error-surface);
    --rank-color: oklch(from var(--color-error) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-*-body);
  }
  &:where(.rank-muted) {
    --rank-border-color: oklch(from var(--color-error) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-border-color: var(--color-*-bd);
  }
  &:where(.rank-outline) {
    --rank-border-color: oklch(from var(--color-error-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-subtle) {
    --rank-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --rank-background: var(--color-error-bg-hover);
    --rank-color: oklch(from var(--color-error) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-error-body);
  }
}
.rank-highlight {
  &:where(:not(.rank-solid, .rank-outline, .rank-subtle, .rank-muted)) {
    --rank-color: oklch(from var(--color-highlight-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-solid) {
    --rank-background: var(--color-highlight);
    --rank-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --rank-color: var(--color-highlight-contrast);
  }
  &:where(.rank-muted), &:where(.rank-outline) {
    --rank-background: oklch(from var(--color-highlight) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --rank-background: var(--color-highlight-surface);
    --rank-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-*-body);
  }
  &:where(.rank-muted) {
    --rank-border-color: oklch(from var(--color-highlight) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-border-color: var(--color-*-bd);
  }
  &:where(.rank-outline) {
    --rank-border-color: oklch(from var(--color-highlight-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-subtle) {
    --rank-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --rank-background: var(--color-highlight-bg-hover);
    --rank-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-highlight-body);
  }
}
.rank-info {
  &:where(:not(.rank-solid, .rank-outline, .rank-subtle, .rank-muted)) {
    --rank-color: oklch(from var(--color-info-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-solid) {
    --rank-background: var(--color-info);
    --rank-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --rank-color: var(--color-info-contrast);
  }
  &:where(.rank-muted), &:where(.rank-outline) {
    --rank-background: oklch(from var(--color-info) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --rank-background: var(--color-info-surface);
    --rank-color: oklch(from var(--color-info) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-*-body);
  }
  &:where(.rank-muted) {
    --rank-border-color: oklch(from var(--color-info) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-border-color: var(--color-*-bd);
  }
  &:where(.rank-outline) {
    --rank-border-color: oklch(from var(--color-info-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-subtle) {
    --rank-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --rank-background: var(--color-info-bg-hover);
    --rank-color: oklch(from var(--color-info) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-info-body);
  }
}
.rank-ink {
  &:where(:not(.rank-solid, .rank-outline, .rank-subtle, .rank-muted)) {
    --rank-color: oklch(from var(--color-ink-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-solid) {
    --rank-background: var(--color-ink);
    --rank-color: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --rank-color: var(--color-ink-contrast);
  }
  &:where(.rank-muted), &:where(.rank-outline) {
    --rank-background: oklch(from var(--color-ink) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --rank-background: var(--color-ink-surface);
    --rank-color: oklch(from var(--color-ink) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-*-body);
  }
  &:where(.rank-muted) {
    --rank-border-color: oklch(from var(--color-ink) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-border-color: var(--color-*-bd);
  }
  &:where(.rank-outline) {
    --rank-border-color: oklch(from var(--color-ink-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-subtle) {
    --rank-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --rank-background: var(--color-ink-bg-hover);
    --rank-color: oklch(from var(--color-ink) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-ink-body);
  }
}
.rank-placeholder {
  &:where(:not(.rank-solid, .rank-outline, .rank-subtle, .rank-muted)) {
    --rank-color: oklch(from var(--color-placeholder-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-solid) {
    --rank-background: var(--color-placeholder);
    --rank-color: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --rank-color: var(--color-placeholder-contrast);
  }
  &:where(.rank-muted), &:where(.rank-outline) {
    --rank-background: oklch(from var(--color-placeholder) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --rank-background: var(--color-placeholder-surface);
    --rank-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-*-body);
  }
  &:where(.rank-muted) {
    --rank-border-color: oklch(from var(--color-placeholder) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-border-color: var(--color-*-bd);
  }
  &:where(.rank-outline) {
    --rank-border-color: oklch(from var(--color-placeholder-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-subtle) {
    --rank-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --rank-background: var(--color-placeholder-bg-hover);
    --rank-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-placeholder-body);
  }
}
.rank-primary {
  &:where(:not(.rank-solid, .rank-outline, .rank-subtle, .rank-muted)) {
    --rank-color: oklch(from var(--color-primary-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-solid) {
    --rank-background: var(--color-primary);
    --rank-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --rank-color: var(--color-primary-contrast);
  }
  &:where(.rank-muted), &:where(.rank-outline) {
    --rank-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --rank-background: var(--color-primary-surface);
    --rank-color: oklch(from var(--color-primary) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-*-body);
  }
  &:where(.rank-muted) {
    --rank-border-color: oklch(from var(--color-primary) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-border-color: var(--color-*-bd);
  }
  &:where(.rank-outline) {
    --rank-border-color: oklch(from var(--color-primary-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-subtle) {
    --rank-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --rank-background: var(--color-primary-bg-hover);
    --rank-color: oklch(from var(--color-primary) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-primary-body);
  }
}
.rank-secondary {
  &:where(:not(.rank-solid, .rank-outline, .rank-subtle, .rank-muted)) {
    --rank-color: oklch(from var(--color-secondary-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-solid) {
    --rank-background: var(--color-secondary);
    --rank-color: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --rank-color: var(--color-secondary-contrast);
  }
  &:where(.rank-muted), &:where(.rank-outline) {
    --rank-background: oklch(from var(--color-secondary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --rank-background: var(--color-secondary-surface);
    --rank-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-*-body);
  }
  &:where(.rank-muted) {
    --rank-border-color: oklch(from var(--color-secondary) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-border-color: var(--color-*-bd);
  }
  &:where(.rank-outline) {
    --rank-border-color: oklch(from var(--color-secondary-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-subtle) {
    --rank-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --rank-background: var(--color-secondary-bg-hover);
    --rank-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-secondary-body);
  }
}
.rank-success {
  &:where(:not(.rank-solid, .rank-outline, .rank-subtle, .rank-muted)) {
    --rank-color: oklch(from var(--color-success-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-solid) {
    --rank-background: var(--color-success);
    --rank-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --rank-color: var(--color-success-contrast);
  }
  &:where(.rank-muted), &:where(.rank-outline) {
    --rank-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --rank-background: var(--color-success-surface);
    --rank-color: oklch(from var(--color-success) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-*-body);
  }
  &:where(.rank-muted) {
    --rank-border-color: oklch(from var(--color-success) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-border-color: var(--color-*-bd);
  }
  &:where(.rank-outline) {
    --rank-border-color: oklch(from var(--color-success-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-subtle) {
    --rank-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --rank-background: var(--color-success-bg-hover);
    --rank-color: oklch(from var(--color-success) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-success-body);
  }
}
.rank-tertiary {
  &:where(:not(.rank-solid, .rank-outline, .rank-subtle, .rank-muted)) {
    --rank-color: oklch(from var(--color-tertiary-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-solid) {
    --rank-background: var(--color-tertiary);
    --rank-color: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --rank-color: var(--color-tertiary-contrast);
  }
  &:where(.rank-muted), &:where(.rank-outline) {
    --rank-background: oklch(from var(--color-tertiary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --rank-background: var(--color-tertiary-surface);
    --rank-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-*-body);
  }
  &:where(.rank-muted) {
    --rank-border-color: oklch(from var(--color-tertiary) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-border-color: var(--color-*-bd);
  }
  &:where(.rank-outline) {
    --rank-border-color: oklch(from var(--color-tertiary-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-subtle) {
    --rank-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --rank-background: var(--color-tertiary-bg-hover);
    --rank-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-tertiary-body);
  }
}
.rank-title {
  &:where(:not(.rank-solid, .rank-outline, .rank-subtle, .rank-muted)) {
    --rank-color: oklch(from var(--color-title-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-solid) {
    --rank-background: var(--color-title);
    --rank-color: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --rank-color: var(--color-title-contrast);
  }
  &:where(.rank-muted), &:where(.rank-outline) {
    --rank-background: oklch(from var(--color-title) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --rank-background: var(--color-title-surface);
    --rank-color: oklch(from var(--color-title) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-*-body);
  }
  &:where(.rank-muted) {
    --rank-border-color: oklch(from var(--color-title) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-border-color: var(--color-*-bd);
  }
  &:where(.rank-outline) {
    --rank-border-color: oklch(from var(--color-title-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-subtle) {
    --rank-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --rank-background: var(--color-title-bg-hover);
    --rank-color: oklch(from var(--color-title) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-title-body);
  }
}
.rank-warning {
  &:where(:not(.rank-solid, .rank-outline, .rank-subtle, .rank-muted)) {
    --rank-color: oklch(from var(--color-warning-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-solid) {
    --rank-background: var(--color-warning);
    --rank-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --rank-color: var(--color-warning-contrast);
  }
  &:where(.rank-muted), &:where(.rank-outline) {
    --rank-background: oklch(from var(--color-warning) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --rank-background: var(--color-warning-surface);
    --rank-color: oklch(from var(--color-warning) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-*-body);
  }
  &:where(.rank-muted) {
    --rank-border-color: oklch(from var(--color-warning) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-border-color: var(--color-*-bd);
  }
  &:where(.rank-outline) {
    --rank-border-color: oklch(from var(--color-warning-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-subtle) {
    --rank-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --rank-background: var(--color-warning-bg-hover);
    --rank-color: oklch(from var(--color-warning) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-warning-body);
  }
}
.btn-vivid-caption {
  --btn-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-caption-fg);
  --btn-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-caption-bg-hover);
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-caption-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--color-caption);
    --btn-color: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-caption-contrast);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-caption) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    --btn-background: var(--color-caption-active);
    --btn-color: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-caption-contrast);
  }
}
.btn-vivid-caution {
  --btn-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-caution-fg);
  --btn-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-caution-bg-hover);
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-caution-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--color-caution);
    --btn-color: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-caution-contrast);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-caution) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    --btn-background: var(--color-caution-active);
    --btn-color: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-caution-contrast);
  }
}
.btn-vivid-description {
  --btn-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-description-fg);
  --btn-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-description-bg-hover);
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-description-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--color-description);
    --btn-color: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-description-contrast);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-description) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    --btn-background: var(--color-description-active);
    --btn-color: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-description-contrast);
  }
}
.btn-vivid-error {
  --btn-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-error-fg);
  --btn-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-error-bg-hover);
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-error-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--color-error);
    --btn-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-error-contrast);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-error) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    --btn-background: var(--color-error-active);
    --btn-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-error-contrast);
  }
}
.btn-vivid-highlight {
  --btn-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-highlight-fg);
  --btn-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-highlight-bg-hover);
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-highlight-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--color-highlight);
    --btn-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-highlight-contrast);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-highlight) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    --btn-background: var(--color-highlight-active);
    --btn-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-highlight-contrast);
  }
}
.btn-vivid-info {
  --btn-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-info-fg);
  --btn-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-info-bg-hover);
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-info-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--color-info);
    --btn-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-info-contrast);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-info) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    --btn-background: var(--color-info-active);
    --btn-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-info-contrast);
  }
}
.btn-vivid-ink {
  --btn-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-ink-fg);
  --btn-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-ink-bg-hover);
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-ink-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--color-ink);
    --btn-color: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-ink-contrast);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-ink) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    --btn-background: var(--color-ink-active);
    --btn-color: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-ink-contrast);
  }
}
.btn-vivid-placeholder {
  --btn-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-placeholder-fg);
  --btn-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-placeholder-bg-hover);
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-placeholder-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--color-placeholder);
    --btn-color: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-placeholder-contrast);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-placeholder) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    --btn-background: var(--color-placeholder-active);
    --btn-color: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-placeholder-contrast);
  }
}
.btn-vivid-primary {
  --btn-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-primary-fg);
  --btn-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-primary-bg-hover);
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-primary-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--color-primary);
    --btn-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-primary-contrast);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-primary) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    --btn-background: var(--color-primary-active);
    --btn-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-primary-contrast);
  }
}
.btn-vivid-secondary {
  --btn-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-secondary-fg);
  --btn-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-secondary-bg-hover);
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-secondary-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--color-secondary);
    --btn-color: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-secondary-contrast);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-secondary) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    --btn-background: var(--color-secondary-active);
    --btn-color: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-secondary-contrast);
  }
}
.btn-vivid-success {
  --btn-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-success-fg);
  --btn-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-success-bg-hover);
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-success-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--color-success);
    --btn-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-success-contrast);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-success) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    --btn-background: var(--color-success-active);
    --btn-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-success-contrast);
  }
}
.btn-vivid-tertiary {
  --btn-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-tertiary-fg);
  --btn-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-tertiary-bg-hover);
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-tertiary-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--color-tertiary);
    --btn-color: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-tertiary-contrast);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-tertiary) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    --btn-background: var(--color-tertiary-active);
    --btn-color: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-tertiary-contrast);
  }
}
.btn-vivid-title {
  --btn-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-title-fg);
  --btn-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-title-bg-hover);
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-title-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--color-title);
    --btn-color: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-title-contrast);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-title) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    --btn-background: var(--color-title-active);
    --btn-color: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-title-contrast);
  }
}
.btn-vivid-warning {
  --btn-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-warning-fg);
  --btn-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-warning-bg-hover);
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-warning-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--color-warning);
    --btn-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-warning-contrast);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-warning) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    --btn-background: var(--color-warning-active);
    --btn-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --btn-color: var(--color-warning-contrast);
  }
}
.tag-caption {
  --tag-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-caption-fg);
  --tag-border-color: oklch(from var(--color-caption) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: var(--color-caption-bd);
  --tag-tmp-background-hover: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-tmp-background-hover: var(--color-caption-bg-hover);
  &:where(:not(.tag-subtle, .tag-ghost, .tag-plain)) {
    --tag-background: oklch(from var(--color-caption) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tag-background: var(--color-caption-bg);
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-ghost) {
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-subtle) {
    --tag-background: var(--tag-tmp-background-hover);
    --tag-local-background: var(--tag-tmp-background-hover);
    --tag-background-hover: oklch(from var(--color-caption) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --tag-background-hover: var(--color-caption-bg-active);
  }
}
.tag-caution {
  --tag-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-caution-fg);
  --tag-border-color: oklch(from var(--color-caution) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: var(--color-caution-bd);
  --tag-tmp-background-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-tmp-background-hover: var(--color-caution-bg-hover);
  &:where(:not(.tag-subtle, .tag-ghost, .tag-plain)) {
    --tag-background: oklch(from var(--color-caution) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tag-background: var(--color-caution-bg);
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-ghost) {
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-subtle) {
    --tag-background: var(--tag-tmp-background-hover);
    --tag-local-background: var(--tag-tmp-background-hover);
    --tag-background-hover: oklch(from var(--color-caution) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --tag-background-hover: var(--color-caution-bg-active);
  }
}
.tag-description {
  --tag-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-description-fg);
  --tag-border-color: oklch(from var(--color-description) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: var(--color-description-bd);
  --tag-tmp-background-hover: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-tmp-background-hover: var(--color-description-bg-hover);
  &:where(:not(.tag-subtle, .tag-ghost, .tag-plain)) {
    --tag-background: oklch(from var(--color-description) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tag-background: var(--color-description-bg);
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-ghost) {
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-subtle) {
    --tag-background: var(--tag-tmp-background-hover);
    --tag-local-background: var(--tag-tmp-background-hover);
    --tag-background-hover: oklch(from var(--color-description) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --tag-background-hover: var(--color-description-bg-active);
  }
}
.tag-error {
  --tag-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-error-fg);
  --tag-border-color: oklch(from var(--color-error) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: var(--color-error-bd);
  --tag-tmp-background-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-tmp-background-hover: var(--color-error-bg-hover);
  &:where(:not(.tag-subtle, .tag-ghost, .tag-plain)) {
    --tag-background: oklch(from var(--color-error) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tag-background: var(--color-error-bg);
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-ghost) {
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-subtle) {
    --tag-background: var(--tag-tmp-background-hover);
    --tag-local-background: var(--tag-tmp-background-hover);
    --tag-background-hover: oklch(from var(--color-error) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --tag-background-hover: var(--color-error-bg-active);
  }
}
.tag-highlight {
  --tag-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-highlight-fg);
  --tag-border-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: var(--color-highlight-bd);
  --tag-tmp-background-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-tmp-background-hover: var(--color-highlight-bg-hover);
  &:where(:not(.tag-subtle, .tag-ghost, .tag-plain)) {
    --tag-background: oklch(from var(--color-highlight) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tag-background: var(--color-highlight-bg);
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-ghost) {
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-subtle) {
    --tag-background: var(--tag-tmp-background-hover);
    --tag-local-background: var(--tag-tmp-background-hover);
    --tag-background-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --tag-background-hover: var(--color-highlight-bg-active);
  }
}
.tag-info {
  --tag-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-info-fg);
  --tag-border-color: oklch(from var(--color-info) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: var(--color-info-bd);
  --tag-tmp-background-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-tmp-background-hover: var(--color-info-bg-hover);
  &:where(:not(.tag-subtle, .tag-ghost, .tag-plain)) {
    --tag-background: oklch(from var(--color-info) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tag-background: var(--color-info-bg);
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-ghost) {
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-subtle) {
    --tag-background: var(--tag-tmp-background-hover);
    --tag-local-background: var(--tag-tmp-background-hover);
    --tag-background-hover: oklch(from var(--color-info) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --tag-background-hover: var(--color-info-bg-active);
  }
}
.tag-ink {
  --tag-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-ink-fg);
  --tag-border-color: oklch(from var(--color-ink) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: var(--color-ink-bd);
  --tag-tmp-background-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-tmp-background-hover: var(--color-ink-bg-hover);
  &:where(:not(.tag-subtle, .tag-ghost, .tag-plain)) {
    --tag-background: oklch(from var(--color-ink) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tag-background: var(--color-ink-bg);
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-ghost) {
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-subtle) {
    --tag-background: var(--tag-tmp-background-hover);
    --tag-local-background: var(--tag-tmp-background-hover);
    --tag-background-hover: oklch(from var(--color-ink) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --tag-background-hover: var(--color-ink-bg-active);
  }
}
.tag-placeholder {
  --tag-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-placeholder-fg);
  --tag-border-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: var(--color-placeholder-bd);
  --tag-tmp-background-hover: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-tmp-background-hover: var(--color-placeholder-bg-hover);
  &:where(:not(.tag-subtle, .tag-ghost, .tag-plain)) {
    --tag-background: oklch(from var(--color-placeholder) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tag-background: var(--color-placeholder-bg);
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-ghost) {
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-subtle) {
    --tag-background: var(--tag-tmp-background-hover);
    --tag-local-background: var(--tag-tmp-background-hover);
    --tag-background-hover: oklch(from var(--color-placeholder) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --tag-background-hover: var(--color-placeholder-bg-active);
  }
}
.tag-primary {
  --tag-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-primary-fg);
  --tag-border-color: oklch(from var(--color-primary) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: var(--color-primary-bd);
  --tag-tmp-background-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-tmp-background-hover: var(--color-primary-bg-hover);
  &:where(:not(.tag-subtle, .tag-ghost, .tag-plain)) {
    --tag-background: oklch(from var(--color-primary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tag-background: var(--color-primary-bg);
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-ghost) {
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-subtle) {
    --tag-background: var(--tag-tmp-background-hover);
    --tag-local-background: var(--tag-tmp-background-hover);
    --tag-background-hover: oklch(from var(--color-primary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --tag-background-hover: var(--color-primary-bg-active);
  }
}
.tag-secondary {
  --tag-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-secondary-fg);
  --tag-border-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: var(--color-secondary-bd);
  --tag-tmp-background-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-tmp-background-hover: var(--color-secondary-bg-hover);
  &:where(:not(.tag-subtle, .tag-ghost, .tag-plain)) {
    --tag-background: oklch(from var(--color-secondary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tag-background: var(--color-secondary-bg);
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-ghost) {
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-subtle) {
    --tag-background: var(--tag-tmp-background-hover);
    --tag-local-background: var(--tag-tmp-background-hover);
    --tag-background-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --tag-background-hover: var(--color-secondary-bg-active);
  }
}
.tag-success {
  --tag-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-success-fg);
  --tag-border-color: oklch(from var(--color-success) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: var(--color-success-bd);
  --tag-tmp-background-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-tmp-background-hover: var(--color-success-bg-hover);
  &:where(:not(.tag-subtle, .tag-ghost, .tag-plain)) {
    --tag-background: oklch(from var(--color-success) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tag-background: var(--color-success-bg);
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-ghost) {
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-subtle) {
    --tag-background: var(--tag-tmp-background-hover);
    --tag-local-background: var(--tag-tmp-background-hover);
    --tag-background-hover: oklch(from var(--color-success) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --tag-background-hover: var(--color-success-bg-active);
  }
}
.tag-tertiary {
  --tag-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-tertiary-fg);
  --tag-border-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: var(--color-tertiary-bd);
  --tag-tmp-background-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-tmp-background-hover: var(--color-tertiary-bg-hover);
  &:where(:not(.tag-subtle, .tag-ghost, .tag-plain)) {
    --tag-background: oklch(from var(--color-tertiary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tag-background: var(--color-tertiary-bg);
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-ghost) {
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-subtle) {
    --tag-background: var(--tag-tmp-background-hover);
    --tag-local-background: var(--tag-tmp-background-hover);
    --tag-background-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --tag-background-hover: var(--color-tertiary-bg-active);
  }
}
.tag-title {
  --tag-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-title-fg);
  --tag-border-color: oklch(from var(--color-title) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: var(--color-title-bd);
  --tag-tmp-background-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-tmp-background-hover: var(--color-title-bg-hover);
  &:where(:not(.tag-subtle, .tag-ghost, .tag-plain)) {
    --tag-background: oklch(from var(--color-title) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tag-background: var(--color-title-bg);
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-ghost) {
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-subtle) {
    --tag-background: var(--tag-tmp-background-hover);
    --tag-local-background: var(--tag-tmp-background-hover);
    --tag-background-hover: oklch(from var(--color-title) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --tag-background-hover: var(--color-title-bg-active);
  }
}
.tag-warning {
  --tag-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-warning-fg);
  --tag-border-color: oklch(from var(--color-warning) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: var(--color-warning-bd);
  --tag-tmp-background-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-tmp-background-hover: var(--color-warning-bg-hover);
  &:where(:not(.tag-subtle, .tag-ghost, .tag-plain)) {
    --tag-background: oklch(from var(--color-warning) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tag-background: var(--color-warning-bg);
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-ghost) {
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-subtle) {
    --tag-background: var(--tag-tmp-background-hover);
    --tag-local-background: var(--tag-tmp-background-hover);
    --tag-background-hover: oklch(from var(--color-warning) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --tag-background-hover: var(--color-warning-bg-active);
  }
}
.callout-caption {
  &:where(:not(.callout-solid, .callout-muted, .callout-subtle)) {
    --callout-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --callout-color: var(--color-caption-fg);
  }
  &:where(.callout-solid) {
    --callout-background: var(--color-caption);
    --callout-color: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --callout-color: var(--color-caption-contrast);
  }
  &:where(.callout-muted, .callout-subtle) {
    --callout-color: oklch(from var(--color-caption) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --callout-color: var(--color-caption-body);
  }
  &:where(.callout-muted) {
    --callout-border-color: oklch(from var(--color-caption) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --callout-border-color: var(--color-caption-bg-active);
    --callout-background: oklch(from var(--color-caption) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --callout-background: var(--color-caption-surface);
  }
  &:where(.callout-subtle) {
    --callout-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --callout-background: var(--color-caption-bg-hover);
  }
}
.callout-caution {
  &:where(:not(.callout-solid, .callout-muted, .callout-subtle)) {
    --callout-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --callout-color: var(--color-caution-fg);
  }
  &:where(.callout-solid) {
    --callout-background: var(--color-caution);
    --callout-color: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --callout-color: var(--color-caution-contrast);
  }
  &:where(.callout-muted, .callout-subtle) {
    --callout-color: oklch(from var(--color-caution) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --callout-color: var(--color-caution-body);
  }
  &:where(.callout-muted) {
    --callout-border-color: oklch(from var(--color-caution) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --callout-border-color: var(--color-caution-bg-active);
    --callout-background: oklch(from var(--color-caution) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --callout-background: var(--color-caution-surface);
  }
  &:where(.callout-subtle) {
    --callout-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --callout-background: var(--color-caution-bg-hover);
  }
}
.callout-description {
  &:where(:not(.callout-solid, .callout-muted, .callout-subtle)) {
    --callout-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --callout-color: var(--color-description-fg);
  }
  &:where(.callout-solid) {
    --callout-background: var(--color-description);
    --callout-color: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --callout-color: var(--color-description-contrast);
  }
  &:where(.callout-muted, .callout-subtle) {
    --callout-color: oklch(from var(--color-description) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --callout-color: var(--color-description-body);
  }
  &:where(.callout-muted) {
    --callout-border-color: oklch(from var(--color-description) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --callout-border-color: var(--color-description-bg-active);
    --callout-background: oklch(from var(--color-description) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --callout-background: var(--color-description-surface);
  }
  &:where(.callout-subtle) {
    --callout-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --callout-background: var(--color-description-bg-hover);
  }
}
.callout-error {
  &:where(:not(.callout-solid, .callout-muted, .callout-subtle)) {
    --callout-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --callout-color: var(--color-error-fg);
  }
  &:where(.callout-solid) {
    --callout-background: var(--color-error);
    --callout-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --callout-color: var(--color-error-contrast);
  }
  &:where(.callout-muted, .callout-subtle) {
    --callout-color: oklch(from var(--color-error) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --callout-color: var(--color-error-body);
  }
  &:where(.callout-muted) {
    --callout-border-color: oklch(from var(--color-error) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --callout-border-color: var(--color-error-bg-active);
    --callout-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --callout-background: var(--color-error-surface);
  }
  &:where(.callout-subtle) {
    --callout-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --callout-background: var(--color-error-bg-hover);
  }
}
.callout-highlight {
  &:where(:not(.callout-solid, .callout-muted, .callout-subtle)) {
    --callout-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --callout-color: var(--color-highlight-fg);
  }
  &:where(.callout-solid) {
    --callout-background: var(--color-highlight);
    --callout-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --callout-color: var(--color-highlight-contrast);
  }
  &:where(.callout-muted, .callout-subtle) {
    --callout-color: oklch(from var(--color-highlight) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --callout-color: var(--color-highlight-body);
  }
  &:where(.callout-muted) {
    --callout-border-color: oklch(from var(--color-highlight) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --callout-border-color: var(--color-highlight-bg-active);
    --callout-background: oklch(from var(--color-highlight) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --callout-background: var(--color-highlight-surface);
  }
  &:where(.callout-subtle) {
    --callout-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --callout-background: var(--color-highlight-bg-hover);
  }
}
.callout-info {
  &:where(:not(.callout-solid, .callout-muted, .callout-subtle)) {
    --callout-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --callout-color: var(--color-info-fg);
  }
  &:where(.callout-solid) {
    --callout-background: var(--color-info);
    --callout-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --callout-color: var(--color-info-contrast);
  }
  &:where(.callout-muted, .callout-subtle) {
    --callout-color: oklch(from var(--color-info) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --callout-color: var(--color-info-body);
  }
  &:where(.callout-muted) {
    --callout-border-color: oklch(from var(--color-info) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --callout-border-color: var(--color-info-bg-active);
    --callout-background: oklch(from var(--color-info) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --callout-background: var(--color-info-surface);
  }
  &:where(.callout-subtle) {
    --callout-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --callout-background: var(--color-info-bg-hover);
  }
}
.callout-ink {
  &:where(:not(.callout-solid, .callout-muted, .callout-subtle)) {
    --callout-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --callout-color: var(--color-ink-fg);
  }
  &:where(.callout-solid) {
    --callout-background: var(--color-ink);
    --callout-color: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --callout-color: var(--color-ink-contrast);
  }
  &:where(.callout-muted, .callout-subtle) {
    --callout-color: oklch(from var(--color-ink) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --callout-color: var(--color-ink-body);
  }
  &:where(.callout-muted) {
    --callout-border-color: oklch(from var(--color-ink) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --callout-border-color: var(--color-ink-bg-active);
    --callout-background: oklch(from var(--color-ink) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --callout-background: var(--color-ink-surface);
  }
  &:where(.callout-subtle) {
    --callout-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --callout-background: var(--color-ink-bg-hover);
  }
}
.callout-placeholder {
  &:where(:not(.callout-solid, .callout-muted, .callout-subtle)) {
    --callout-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --callout-color: var(--color-placeholder-fg);
  }
  &:where(.callout-solid) {
    --callout-background: var(--color-placeholder);
    --callout-color: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --callout-color: var(--color-placeholder-contrast);
  }
  &:where(.callout-muted, .callout-subtle) {
    --callout-color: oklch(from var(--color-placeholder) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --callout-color: var(--color-placeholder-body);
  }
  &:where(.callout-muted) {
    --callout-border-color: oklch(from var(--color-placeholder) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --callout-border-color: var(--color-placeholder-bg-active);
    --callout-background: oklch(from var(--color-placeholder) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --callout-background: var(--color-placeholder-surface);
  }
  &:where(.callout-subtle) {
    --callout-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --callout-background: var(--color-placeholder-bg-hover);
  }
}
.callout-primary {
  &:where(:not(.callout-solid, .callout-muted, .callout-subtle)) {
    --callout-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --callout-color: var(--color-primary-fg);
  }
  &:where(.callout-solid) {
    --callout-background: var(--color-primary);
    --callout-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --callout-color: var(--color-primary-contrast);
  }
  &:where(.callout-muted, .callout-subtle) {
    --callout-color: oklch(from var(--color-primary) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --callout-color: var(--color-primary-body);
  }
  &:where(.callout-muted) {
    --callout-border-color: oklch(from var(--color-primary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --callout-border-color: var(--color-primary-bg-active);
    --callout-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --callout-background: var(--color-primary-surface);
  }
  &:where(.callout-subtle) {
    --callout-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --callout-background: var(--color-primary-bg-hover);
  }
}
.callout-secondary {
  &:where(:not(.callout-solid, .callout-muted, .callout-subtle)) {
    --callout-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --callout-color: var(--color-secondary-fg);
  }
  &:where(.callout-solid) {
    --callout-background: var(--color-secondary);
    --callout-color: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --callout-color: var(--color-secondary-contrast);
  }
  &:where(.callout-muted, .callout-subtle) {
    --callout-color: oklch(from var(--color-secondary) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --callout-color: var(--color-secondary-body);
  }
  &:where(.callout-muted) {
    --callout-border-color: oklch(from var(--color-secondary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --callout-border-color: var(--color-secondary-bg-active);
    --callout-background: oklch(from var(--color-secondary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --callout-background: var(--color-secondary-surface);
  }
  &:where(.callout-subtle) {
    --callout-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --callout-background: var(--color-secondary-bg-hover);
  }
}
.callout-success {
  &:where(:not(.callout-solid, .callout-muted, .callout-subtle)) {
    --callout-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --callout-color: var(--color-success-fg);
  }
  &:where(.callout-solid) {
    --callout-background: var(--color-success);
    --callout-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --callout-color: var(--color-success-contrast);
  }
  &:where(.callout-muted, .callout-subtle) {
    --callout-color: oklch(from var(--color-success) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --callout-color: var(--color-success-body);
  }
  &:where(.callout-muted) {
    --callout-border-color: oklch(from var(--color-success) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --callout-border-color: var(--color-success-bg-active);
    --callout-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --callout-background: var(--color-success-surface);
  }
  &:where(.callout-subtle) {
    --callout-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --callout-background: var(--color-success-bg-hover);
  }
}
.callout-tertiary {
  &:where(:not(.callout-solid, .callout-muted, .callout-subtle)) {
    --callout-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --callout-color: var(--color-tertiary-fg);
  }
  &:where(.callout-solid) {
    --callout-background: var(--color-tertiary);
    --callout-color: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --callout-color: var(--color-tertiary-contrast);
  }
  &:where(.callout-muted, .callout-subtle) {
    --callout-color: oklch(from var(--color-tertiary) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --callout-color: var(--color-tertiary-body);
  }
  &:where(.callout-muted) {
    --callout-border-color: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --callout-border-color: var(--color-tertiary-bg-active);
    --callout-background: oklch(from var(--color-tertiary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --callout-background: var(--color-tertiary-surface);
  }
  &:where(.callout-subtle) {
    --callout-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --callout-background: var(--color-tertiary-bg-hover);
  }
}
.callout-title {
  &:where(:not(.callout-solid, .callout-muted, .callout-subtle)) {
    --callout-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --callout-color: var(--color-title-fg);
  }
  &:where(.callout-solid) {
    --callout-background: var(--color-title);
    --callout-color: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --callout-color: var(--color-title-contrast);
  }
  &:where(.callout-muted, .callout-subtle) {
    --callout-color: oklch(from var(--color-title) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --callout-color: var(--color-title-body);
  }
  &:where(.callout-muted) {
    --callout-border-color: oklch(from var(--color-title) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --callout-border-color: var(--color-title-bg-active);
    --callout-background: oklch(from var(--color-title) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --callout-background: var(--color-title-surface);
  }
  &:where(.callout-subtle) {
    --callout-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --callout-background: var(--color-title-bg-hover);
  }
}
.callout-warning {
  &:where(:not(.callout-solid, .callout-muted, .callout-subtle)) {
    --callout-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --callout-color: var(--color-warning-fg);
  }
  &:where(.callout-solid) {
    --callout-background: var(--color-warning);
    --callout-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --callout-color: var(--color-warning-contrast);
  }
  &:where(.callout-muted, .callout-subtle) {
    --callout-color: oklch(from var(--color-warning) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
    --callout-color: var(--color-warning-body);
  }
  &:where(.callout-muted) {
    --callout-border-color: oklch(from var(--color-warning) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --callout-border-color: var(--color-warning-bg-active);
    --callout-background: oklch(from var(--color-warning) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --callout-background: var(--color-warning-surface);
  }
  &:where(.callout-subtle) {
    --callout-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --callout-background: var(--color-warning-bg-hover);
  }
}
.bubble-red-500 {
  &:where(:not(.bubble-solid, .bubble-outline, .bubble-subtle)) {
    --bubble-border-color: oklch(from var(--color-red-500) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  }
  &:where(.bubble-outline) {
    --bubble-border-color: var(--color-red-500);
    --bubble-background: oklch(from var(--color-red-500) var(--light-threshold-surface) calc(min(c, var(--chorme-surface)) * var(--color-c-factor)) h);
    --bubble-color: oklch(from var(--color-red-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.bubble-solid) {
    --bubble-background: var(--color-red-500);
    --bubble-color: oklch(from var(--color-red-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
  &:where(.bubble-subtle) {
    --bubble-border-color: transparent;
    --bubble-background: oklch(from var(--color-red-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --bubble-color: oklch(from var(--color-red-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-tmp-background: oklch(from var(--color-red-500) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    &:where(.dark, .dark *) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
    @media (prefers-color-scheme: dark) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
  }
}
.bubble-red-800 {
  &:where(:not(.bubble-solid, .bubble-outline, .bubble-subtle)) {
    --bubble-border-color: oklch(from var(--color-red-800) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  }
  &:where(.bubble-outline) {
    --bubble-border-color: var(--color-red-800);
    --bubble-background: oklch(from var(--color-red-800) var(--light-threshold-surface) calc(min(c, var(--chorme-surface)) * var(--color-c-factor)) h);
    --bubble-color: oklch(from var(--color-red-800) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.bubble-solid) {
    --bubble-background: var(--color-red-800);
    --bubble-color: oklch(from var(--color-red-800) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
  &:where(.bubble-subtle) {
    --bubble-border-color: transparent;
    --bubble-background: oklch(from var(--color-red-800) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --bubble-color: oklch(from var(--color-red-800) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --bubble-tmp-background: oklch(from var(--color-red-800) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    &:where(.dark, .dark *) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
    @media (prefers-color-scheme: dark) {
      --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
    }
  }
}
.shell-ghost-error {
  --shell-border-color: transparent;
  --shell-border-color-hover: transparent;
  --shell-border-color-focus: oklch(from var(--color-error-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-background-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-background-hover: var(--color-error-bg-hover);
  --shell-background-focus: var(--shell-background-hover);
  --shell-background-invalid: var(--color-error-bg-hover);
  --shell-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-error-fg);
  --shell-border-width: 0;
  --shell-outline-width: 2px;
  input:where([readonly]) {
    --input-color: oklch(from var(--color-error) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-ghost-highlight {
  --shell-border-color: transparent;
  --shell-border-color-hover: transparent;
  --shell-border-color-focus: oklch(from var(--color-highlight-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-background-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-background-hover: var(--color-highlight-bg-hover);
  --shell-background-focus: var(--shell-background-hover);
  --shell-background-invalid: var(--color-error-bg-hover);
  --shell-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-highlight-fg);
  --shell-border-width: 0;
  --shell-outline-width: 2px;
  input:where([readonly]) {
    --input-color: oklch(from var(--color-highlight) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-ghost-info {
  --shell-border-color: transparent;
  --shell-border-color-hover: transparent;
  --shell-border-color-focus: oklch(from var(--color-info-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-background-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-background-hover: var(--color-info-bg-hover);
  --shell-background-focus: var(--shell-background-hover);
  --shell-background-invalid: var(--color-error-bg-hover);
  --shell-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-info-fg);
  --shell-border-width: 0;
  --shell-outline-width: 2px;
  input:where([readonly]) {
    --input-color: oklch(from var(--color-info) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-ghost-primary {
  --shell-border-color: transparent;
  --shell-border-color-hover: transparent;
  --shell-border-color-focus: oklch(from var(--color-primary-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-background-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-background-hover: var(--color-primary-bg-hover);
  --shell-background-focus: var(--shell-background-hover);
  --shell-background-invalid: var(--color-error-bg-hover);
  --shell-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-primary-fg);
  --shell-border-width: 0;
  --shell-outline-width: 2px;
  input:where([readonly]) {
    --input-color: oklch(from var(--color-primary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-ghost-success {
  --shell-border-color: transparent;
  --shell-border-color-hover: transparent;
  --shell-border-color-focus: oklch(from var(--color-success-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-background-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-background-hover: var(--color-success-bg-hover);
  --shell-background-focus: var(--shell-background-hover);
  --shell-background-invalid: var(--color-error-bg-hover);
  --shell-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-success-fg);
  --shell-border-width: 0;
  --shell-outline-width: 2px;
  input:where([readonly]) {
    --input-color: oklch(from var(--color-success) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-ghost-warning {
  --shell-border-color: transparent;
  --shell-border-color-hover: transparent;
  --shell-border-color-focus: oklch(from var(--color-warning-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-background-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-background-hover: var(--color-warning-bg-hover);
  --shell-background-focus: var(--shell-background-hover);
  --shell-background-invalid: var(--color-error-bg-hover);
  --shell-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-warning-fg);
  --shell-border-width: 0;
  --shell-outline-width: 2px;
  input:where([readonly]) {
    --input-color: oklch(from var(--color-warning) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.btn-outline-caption {
  --btn-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-caption-fg);
  --btn-background: oklch(from var(--color-caption) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-caption-surface);
  --btn-border-color: oklch(from var(--color-caption-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-caption-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-caption-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-caption) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-caption-bg-active);
  }
}
.btn-outline-caution {
  --btn-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-caution-fg);
  --btn-background: oklch(from var(--color-caution) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-caution-surface);
  --btn-border-color: oklch(from var(--color-caution-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-caution-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-caution-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-caution) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-caution-bg-active);
  }
}
.btn-outline-description {
  --btn-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-description-fg);
  --btn-background: oklch(from var(--color-description) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-description-surface);
  --btn-border-color: oklch(from var(--color-description-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-description-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-description-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-description) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-description-bg-active);
  }
}
.btn-outline-error {
  --btn-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-error-fg);
  --btn-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-error-surface);
  --btn-border-color: oklch(from var(--color-error-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-error-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-error-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-error) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-error-bg-active);
  }
}
.btn-outline-highlight {
  --btn-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-highlight-fg);
  --btn-background: oklch(from var(--color-highlight) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-highlight-surface);
  --btn-border-color: oklch(from var(--color-highlight-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-highlight-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-highlight-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-highlight) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-highlight-bg-active);
  }
}
.btn-outline-info {
  --btn-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-info-fg);
  --btn-background: oklch(from var(--color-info) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-info-surface);
  --btn-border-color: oklch(from var(--color-info-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-info-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-info-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-info) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-info-bg-active);
  }
}
.btn-outline-ink {
  --btn-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-ink-fg);
  --btn-background: oklch(from var(--color-ink) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-ink-surface);
  --btn-border-color: oklch(from var(--color-ink-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-ink-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-ink-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-ink) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-ink-bg-active);
  }
}
.btn-outline-placeholder {
  --btn-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-placeholder-fg);
  --btn-background: oklch(from var(--color-placeholder) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-placeholder-surface);
  --btn-border-color: oklch(from var(--color-placeholder-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-placeholder-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-placeholder-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-placeholder-bg-active);
  }
}
.btn-outline-primary {
  --btn-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-primary-fg);
  --btn-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-primary-surface);
  --btn-border-color: oklch(from var(--color-primary-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-primary-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-primary-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-primary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-primary-bg-active);
  }
}
.btn-outline-secondary {
  --btn-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-secondary-fg);
  --btn-background: oklch(from var(--color-secondary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-secondary-surface);
  --btn-border-color: oklch(from var(--color-secondary-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-secondary-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-secondary-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-secondary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-secondary-bg-active);
  }
}
.btn-outline-success {
  --btn-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-success-fg);
  --btn-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-success-surface);
  --btn-border-color: oklch(from var(--color-success-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-success-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-success-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-success) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-success-bg-active);
  }
}
.btn-outline-tertiary {
  --btn-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-tertiary-fg);
  --btn-background: oklch(from var(--color-tertiary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-tertiary-surface);
  --btn-border-color: oklch(from var(--color-tertiary-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-tertiary-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-tertiary-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-tertiary-bg-active);
  }
}
.btn-outline-title {
  --btn-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-title-fg);
  --btn-background: oklch(from var(--color-title) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-title-surface);
  --btn-border-color: oklch(from var(--color-title-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-title-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-title-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-title) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-title-bg-active);
  }
}
.btn-outline-warning {
  --btn-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-warning-fg);
  --btn-background: oklch(from var(--color-warning) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-background: var(--color-warning-surface);
  --btn-border-color: oklch(from var(--color-warning-base) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-warning-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-warning-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-warning) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-warning-bg-active);
  }
}
.btn-subtle-caption {
  --btn-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-caption-fg);
  --btn-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-caption-bg-hover);
  --btn-border-width: 0;
  --btn-tmp-background: oklch(from var(--color-caption) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-tmp-background: var(--color-caption-bg-active);
  --custom-outline-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-caption-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--btn-tmp-background);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
  }
}
.btn-subtle-caution {
  --btn-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-caution-fg);
  --btn-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-caution-bg-hover);
  --btn-border-width: 0;
  --btn-tmp-background: oklch(from var(--color-caution) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-tmp-background: var(--color-caution-bg-active);
  --custom-outline-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-caution-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--btn-tmp-background);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
  }
}
.btn-subtle-description {
  --btn-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-description-fg);
  --btn-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-description-bg-hover);
  --btn-border-width: 0;
  --btn-tmp-background: oklch(from var(--color-description) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-tmp-background: var(--color-description-bg-active);
  --custom-outline-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-description-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--btn-tmp-background);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
  }
}
.btn-subtle-error {
  --btn-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-error-fg);
  --btn-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-error-bg-hover);
  --btn-border-width: 0;
  --btn-tmp-background: oklch(from var(--color-error) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-tmp-background: var(--color-error-bg-active);
  --custom-outline-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-error-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--btn-tmp-background);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
  }
}
.btn-subtle-highlight {
  --btn-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-highlight-fg);
  --btn-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-highlight-bg-hover);
  --btn-border-width: 0;
  --btn-tmp-background: oklch(from var(--color-highlight) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-tmp-background: var(--color-highlight-bg-active);
  --custom-outline-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-highlight-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--btn-tmp-background);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
  }
}
.btn-subtle-info {
  --btn-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-info-fg);
  --btn-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-info-bg-hover);
  --btn-border-width: 0;
  --btn-tmp-background: oklch(from var(--color-info) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-tmp-background: var(--color-info-bg-active);
  --custom-outline-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-info-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--btn-tmp-background);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
  }
}
.btn-subtle-ink {
  --btn-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-ink-fg);
  --btn-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-ink-bg-hover);
  --btn-border-width: 0;
  --btn-tmp-background: oklch(from var(--color-ink) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-tmp-background: var(--color-ink-bg-active);
  --custom-outline-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-ink-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--btn-tmp-background);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
  }
}
.btn-subtle-placeholder {
  --btn-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-placeholder-fg);
  --btn-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-placeholder-bg-hover);
  --btn-border-width: 0;
  --btn-tmp-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-tmp-background: var(--color-placeholder-bg-active);
  --custom-outline-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-placeholder-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--btn-tmp-background);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
  }
}
.btn-subtle-primary {
  --btn-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-primary-fg);
  --btn-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-primary-bg-hover);
  --btn-border-width: 0;
  --btn-tmp-background: oklch(from var(--color-primary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-tmp-background: var(--color-primary-bg-active);
  --custom-outline-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-primary-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--btn-tmp-background);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
  }
}
.btn-subtle-secondary {
  --btn-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-secondary-fg);
  --btn-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-secondary-bg-hover);
  --btn-border-width: 0;
  --btn-tmp-background: oklch(from var(--color-secondary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-tmp-background: var(--color-secondary-bg-active);
  --custom-outline-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-secondary-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--btn-tmp-background);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
  }
}
.btn-subtle-success {
  --btn-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-success-fg);
  --btn-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-success-bg-hover);
  --btn-border-width: 0;
  --btn-tmp-background: oklch(from var(--color-success) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-tmp-background: var(--color-success-bg-active);
  --custom-outline-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-success-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--btn-tmp-background);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
  }
}
.btn-subtle-tertiary {
  --btn-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-tertiary-fg);
  --btn-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-tertiary-bg-hover);
  --btn-border-width: 0;
  --btn-tmp-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-tmp-background: var(--color-tertiary-bg-active);
  --custom-outline-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-tertiary-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--btn-tmp-background);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
  }
}
.btn-subtle-title {
  --btn-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-title-fg);
  --btn-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-title-bg-hover);
  --btn-border-width: 0;
  --btn-tmp-background: oklch(from var(--color-title) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-tmp-background: var(--color-title-bg-active);
  --custom-outline-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-title-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--btn-tmp-background);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
  }
}
.btn-subtle-warning {
  --btn-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-warning-fg);
  --btn-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-background: var(--color-warning-bg-hover);
  --btn-border-width: 0;
  --btn-tmp-background: oklch(from var(--color-warning) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-tmp-background: var(--color-warning-bg-active);
  --custom-outline-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-warning-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--btn-tmp-background);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
  }
}
.rank-\[\#a7dcdf\] {
  &:where(:not(.rank-solid, .rank-outline, .rank-subtle, .rank-muted)) {
    --rank-color: oklch(from #a7dcdf clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-solid) {
    --rank-background: #a7dcdf;
    --rank-color: oklch(from #a7dcdf clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
  &:where(.rank-muted), &:where(.rank-outline) {
    --rank-background: oklch(from #a7dcdf var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --rank-color: oklch(from #a7dcdf clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-*-body);
  }
  &:where(.rank-muted) {
    --rank-border-color: oklch(from #a7dcdf min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-border-color: var(--color-*-bd);
  }
  &:where(.rank-outline) {
    --rank-border-color: oklch(from #a7dcdf clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-subtle) {
    --rank-background: oklch(from #a7dcdf var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --rank-color: oklch(from #a7dcdf clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
}
.rank-\[red\] {
  &:where(:not(.rank-solid, .rank-outline, .rank-subtle, .rank-muted)) {
    --rank-color: oklch(from red clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-solid) {
    --rank-background: red;
    --rank-color: oklch(from red clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
  &:where(.rank-muted), &:where(.rank-outline) {
    --rank-background: oklch(from red var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --rank-color: oklch(from red clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-*-body);
  }
  &:where(.rank-muted) {
    --rank-border-color: oklch(from red min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-border-color: var(--color-*-bd);
  }
  &:where(.rank-outline) {
    --rank-border-color: oklch(from red clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-subtle) {
    --rank-background: oklch(from red var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --rank-color: oklch(from red clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
}
.rank-green-100 {
  &:where(:not(.rank-solid, .rank-outline, .rank-subtle, .rank-muted)) {
    --rank-color: oklch(from var(--color-green-100) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-solid) {
    --rank-background: var(--color-green-100);
    --rank-color: oklch(from var(--color-green-100) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
  &:where(.rank-muted), &:where(.rank-outline) {
    --rank-background: oklch(from var(--color-green-100) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --rank-color: oklch(from var(--color-green-100) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-*-body);
  }
  &:where(.rank-muted) {
    --rank-border-color: oklch(from var(--color-green-100) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-border-color: var(--color-*-bd);
  }
  &:where(.rank-outline) {
    --rank-border-color: oklch(from var(--color-green-100) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-subtle) {
    --rank-background: oklch(from var(--color-green-100) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --rank-color: oklch(from var(--color-green-100) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
}
.rank-green-500 {
  &:where(:not(.rank-solid, .rank-outline, .rank-subtle, .rank-muted)) {
    --rank-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-solid) {
    --rank-background: var(--color-green-500);
    --rank-color: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
  &:where(.rank-muted), &:where(.rank-outline) {
    --rank-background: oklch(from var(--color-green-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --rank-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-*-body);
  }
  &:where(.rank-muted) {
    --rank-border-color: oklch(from var(--color-green-500) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-border-color: var(--color-*-bd);
  }
  &:where(.rank-outline) {
    --rank-border-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-subtle) {
    --rank-background: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --rank-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
}
.rank-green-800 {
  &:where(:not(.rank-solid, .rank-outline, .rank-subtle, .rank-muted)) {
    --rank-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-solid) {
    --rank-background: var(--color-green-800);
    --rank-color: oklch(from var(--color-green-800) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
  &:where(.rank-muted), &:where(.rank-outline) {
    --rank-background: oklch(from var(--color-green-800) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --rank-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-color: var(--color-*-body);
  }
  &:where(.rank-muted) {
    --rank-border-color: oklch(from var(--color-green-800) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --rank-border-color: var(--color-*-bd);
  }
  &:where(.rank-outline) {
    --rank-border-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.rank-subtle) {
    --rank-background: oklch(from var(--color-green-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --rank-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
}
.badge-\[\#ff0000\] {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from #ff0000 clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-background: #ff0000;
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from #ff0000 clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: #ff0000;
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from #ff0000 clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-background: oklch(from #ff0000 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from #ff0000 clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-background: oklch(from #ff0000 var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-border-color: oklch(from #ff0000 min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.badge-\[rgb\(25\,120\,200\)\] {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from rgb(25,120,200) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-background: rgb(25,120,200);
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from rgb(25,120,200) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: rgb(25,120,200);
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from rgb(25,120,200) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-background: oklch(from rgb(25,120,200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from rgb(25,120,200) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-background: oklch(from rgb(25,120,200) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-border-color: oklch(from rgb(25,120,200) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.badge-black {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from var(--color-black) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-background: var(--color-black);
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from var(--color-black) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-black);
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from var(--color-black) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-background: oklch(from var(--color-black) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from var(--color-black) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-background: oklch(from var(--color-black) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-border-color: oklch(from var(--color-black) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.badge-green-100 {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from var(--color-green-100) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-background: var(--color-green-100);
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from var(--color-green-100) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-green-100);
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from var(--color-green-100) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-background: oklch(from var(--color-green-100) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from var(--color-green-100) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-background: oklch(from var(--color-green-100) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-border-color: oklch(from var(--color-green-100) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.badge-green-500 {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-background: var(--color-green-500);
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-green-500);
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-background: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-background: oklch(from var(--color-green-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-border-color: oklch(from var(--color-green-500) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.badge-green-800 {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from var(--color-green-800) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-background: var(--color-green-800);
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-green-800);
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-background: oklch(from var(--color-green-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-background: oklch(from var(--color-green-800) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-border-color: oklch(from var(--color-green-800) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.badge-white {
  &:where(:not(.badge-outline, .badge-subtle, .badge-muted)) {
    --badge-color: oklch(from var(--color-white) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --badge-background: var(--color-white);
  }
  &:where(.badge-outline) {
    --badge-color: oklch(from var(--color-white) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-white);
  }
  &:where(.badge-subtle) {
    --badge-color: oklch(from var(--color-white) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-background: oklch(from var(--color-white) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(.badge-muted) {
    --badge-color: oklch(from var(--color-white) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-background: oklch(from var(--color-white) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
    --badge-border-color: oklch(from var(--color-white) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --badge-border-color: var(--color-*-bd);
  }
}
.btn-ghost-caption {
  --btn-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-caption-fg);
  --btn-background: transparent;
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-caption-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-caption-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-caption) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-caption-bg-active);
  }
}
.btn-ghost-caution {
  --btn-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-caution-fg);
  --btn-background: transparent;
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-caution-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-caution-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-caution) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-caution-bg-active);
  }
}
.btn-ghost-description {
  --btn-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-description-fg);
  --btn-background: transparent;
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-description-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-description-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-description) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-description-bg-active);
  }
}
.btn-ghost-error {
  --btn-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-error-fg);
  --btn-background: transparent;
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-error-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-error-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-error) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-error-bg-active);
  }
}
.btn-ghost-highlight {
  --btn-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-highlight-fg);
  --btn-background: transparent;
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-highlight-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-highlight-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-highlight) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-highlight-bg-active);
  }
}
.btn-ghost-info {
  --btn-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-info-fg);
  --btn-background: transparent;
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-info-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-info-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-info) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-info-bg-active);
  }
}
.btn-ghost-ink {
  --btn-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-ink-fg);
  --btn-background: transparent;
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-ink-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-ink-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-ink) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-ink-bg-active);
  }
}
.btn-ghost-placeholder {
  --btn-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-placeholder-fg);
  --btn-background: transparent;
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-placeholder-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-placeholder-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-placeholder-bg-active);
  }
}
.btn-ghost-primary {
  --btn-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-primary-fg);
  --btn-background: transparent;
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-primary-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-primary-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-primary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-primary-bg-active);
  }
}
.btn-ghost-secondary {
  --btn-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-secondary-fg);
  --btn-background: transparent;
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-secondary-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-secondary-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-secondary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-secondary-bg-active);
  }
}
.btn-ghost-success {
  --btn-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-success-fg);
  --btn-background: transparent;
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-success-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-success-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-success) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-success-bg-active);
  }
}
.btn-ghost-tertiary {
  --btn-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-tertiary-fg);
  --btn-background: transparent;
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-tertiary-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-tertiary-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-tertiary-bg-active);
  }
}
.btn-ghost-title {
  --btn-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-title-fg);
  --btn-background: transparent;
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-title-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-title-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-title) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-title-bg-active);
  }
}
.btn-ghost-warning {
  --btn-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-color: var(--color-warning-fg);
  --btn-background: transparent;
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-warning-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-background: var(--color-warning-bg-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-warning) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --btn-background: var(--color-warning-bg-active);
  }
}
.btn-solid-primary {
  --btn-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --btn-color: var(--color-primary-contrast);
  --btn-background: var(--color-primary);
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: var(--color-primary-outline);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
    --btn-background: var(--color-primary-hover);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-primary) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    --btn-background: var(--color-primary-active);
  }
}
.flag-xl {
  &.flag-triangle {
    --flag-lh-offset: 14px;
    --flag-height: 82px;
    --flag-font-size: 14px;
  }
  &.flag-circle {
    --flag-height: 82px;
    --flag-font-size: 14px;
  }
  &.flag-horn {
    --flag-height: 44px;
    --flag-font-size: 14px;
  }
  &.flag-ribbon {
    --flag-height: 160px;
  }
  &.flag-diamond {
    --flag-height: 44px;
    --flag-font-size: 14px;
  }
}
.pre-blue-200 {
  &:where(:not(.pre-muted, .pre-solid, .pre-outline)) {
    --pre-color: oklch(from var(--color-blue-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-blue-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(.pre-muted) {
    --pre-color: oklch(from var(--color-blue-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-blue-200) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    border: 1px solid oklch(from var(--color-blue-200) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  }
  &:where(.pre-outline) {
    --pre-color: var(--color-blue-200);
    --pre-background: transparent;
    border: 1px solid var(--pre-color);
  }
  &:where(.pre-solid) {
    --pre-color: oklch(from var(--color-blue-200) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --pre-background: var(--color-blue-200);
  }
}
.pre-green-500 {
  &:where(:not(.pre-muted, .pre-solid, .pre-outline)) {
    --pre-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(.pre-muted) {
    --pre-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-green-500) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    border: 1px solid oklch(from var(--color-green-500) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  }
  &:where(.pre-outline) {
    --pre-color: var(--color-green-500);
    --pre-background: transparent;
    border: 1px solid var(--pre-color);
  }
  &:where(.pre-solid) {
    --pre-color: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --pre-background: var(--color-green-500);
  }
}
.pre-indigo-500 {
  &:where(:not(.pre-muted, .pre-solid, .pre-outline)) {
    --pre-color: oklch(from var(--color-indigo-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-indigo-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(.pre-muted) {
    --pre-color: oklch(from var(--color-indigo-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-indigo-500) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    border: 1px solid oklch(from var(--color-indigo-500) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  }
  &:where(.pre-outline) {
    --pre-color: var(--color-indigo-500);
    --pre-background: transparent;
    border: 1px solid var(--pre-color);
  }
  &:where(.pre-solid) {
    --pre-color: oklch(from var(--color-indigo-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --pre-background: var(--color-indigo-500);
  }
}
.pre-red-500 {
  &:where(:not(.pre-muted, .pre-solid, .pre-outline)) {
    --pre-color: oklch(from var(--color-red-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-red-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(.pre-muted) {
    --pre-color: oklch(from var(--color-red-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --pre-background: oklch(from var(--color-red-500) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    border: 1px solid oklch(from var(--color-red-500) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  }
  &:where(.pre-outline) {
    --pre-color: var(--color-red-500);
    --pre-background: transparent;
    border: 1px solid var(--pre-color);
  }
  &:where(.pre-solid) {
    --pre-color: oklch(from var(--color-red-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --pre-background: var(--color-red-500);
  }
}
.shell-ghost-blue-200 {
  --shell-border-color: transparent;
  --shell-border-color-hover: transparent;
  --shell-border-color-focus: oklch(from var(--color-blue-200) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-background-hover: oklch(from var(--color-blue-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-background-focus: var(--shell-background-hover);
  --shell-background-invalid: var(--color-error-bg-hover);
  --shell-color: oklch(from var(--color-blue-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-width: 0;
  --shell-outline-width: 2px;
  input:where([readonly]) {
    --input-color: oklch(from var(--color-blue-200) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-ghost-blue-500 {
  --shell-border-color: transparent;
  --shell-border-color-hover: transparent;
  --shell-border-color-focus: oklch(from var(--color-blue-500) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-background-hover: oklch(from var(--color-blue-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-background-focus: var(--shell-background-hover);
  --shell-background-invalid: var(--color-error-bg-hover);
  --shell-color: oklch(from var(--color-blue-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-width: 0;
  --shell-outline-width: 2px;
  input:where([readonly]) {
    --input-color: oklch(from var(--color-blue-500) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-outline-error {
  --shell-border-color: var(--color-error);
  --shell-border-color-hover: var(--color-error);
  --shell-border-color-focus: var(--color-error);
  --shell-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --shell-background: var(--color-error-surface);
  --shell-background-hover: oklch(from var(--color-error) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-background-hover: var(--color-error-bg-hover);
  --shell-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-error-fg);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-error) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-outline-primary {
  --shell-border-color: var(--color-primary);
  --shell-border-color-hover: var(--color-primary);
  --shell-border-color-focus: var(--color-primary);
  --shell-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --shell-background: var(--color-primary-surface);
  --shell-background-hover: oklch(from var(--color-primary) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-background-hover: var(--color-primary-bg-hover);
  --shell-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-primary-fg);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-primary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-outline-secondary {
  --shell-border-color: var(--color-secondary);
  --shell-border-color-hover: var(--color-secondary);
  --shell-border-color-focus: var(--color-secondary);
  --shell-background: oklch(from var(--color-secondary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --shell-background: var(--color-secondary-surface);
  --shell-background-hover: oklch(from var(--color-secondary) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-background-hover: var(--color-secondary-bg-hover);
  --shell-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-secondary-fg);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-secondary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-outline-success {
  --shell-border-color: var(--color-success);
  --shell-border-color-hover: var(--color-success);
  --shell-border-color-focus: var(--color-success);
  --shell-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --shell-background: var(--color-success-surface);
  --shell-background-hover: oklch(from var(--color-success) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-background-hover: var(--color-success-bg-hover);
  --shell-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-success-fg);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-success) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.aura {
  --aura-angle: -45deg;
  --aura-width: 1px;
  --aura-color: var(--color-primary);
  --aura-track: var(--color-title-bd);
  --aura-background: var(--color-stage);
  --aura-gradient: var(--aura-color) 0%,
    var(--aura-track) 20%,
    var(--aura-track) 80%,
    var(--aura-color) 100%;
  --aura-border-color: linear-gradient(var(--aura-background), var(--aura-background)) padding-box,
    conic-gradient(from calc(var(--aura-angle) * var(--direction-factor-1) + var(--aura-rotate)), var(--aura-gradient)) border-box;
  border: var(--aura-width) solid transparent;
  background: var(--aura-border-color);
}
.bubble-subtle-error {
  --bubble-border-color: transparent;
  --bubble-background: oklch(from var(--color-error-base) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --bubble-background: var(--color-error-surface);
  --bubble-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bubble-color: var(--color-error-fg);
  --bubble-tmp-background: oklch(from var(--color-error-base) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --bubble-tmp-background: var(--color-error-bg);
  &:where(.dark, .dark *) {
    --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
  }
  @media (prefers-color-scheme: dark) {
    --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
  }
}
.bubble-subtle-primary {
  --bubble-border-color: transparent;
  --bubble-background: oklch(from var(--color-primary-base) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --bubble-background: var(--color-primary-surface);
  --bubble-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bubble-color: var(--color-primary-fg);
  --bubble-tmp-background: oklch(from var(--color-primary-base) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --bubble-tmp-background: var(--color-primary-bg);
  &:where(.dark, .dark *) {
    --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
  }
  @media (prefers-color-scheme: dark) {
    --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
  }
}
.bubble-subtle-success {
  --bubble-border-color: transparent;
  --bubble-background: oklch(from var(--color-success-base) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --bubble-background: var(--color-success-surface);
  --bubble-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bubble-color: var(--color-success-fg);
  --bubble-tmp-background: oklch(from var(--color-success-base) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --bubble-tmp-background: var(--color-success-bg);
  &:where(.dark, .dark *) {
    --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
  }
  @media (prefers-color-scheme: dark) {
    --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
  }
}
.rank-muted-error {
  --rank-border-color: oklch(from var(--color-error) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --rank-border-color: var(--color-*-bd);
  --rank-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --rank-background: var(--color-error-surface);
  --rank-color: oklch(from var(--color-error) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --rank-color: var(--color-*-body);
  --rank-border-width: 1px;
  --rank-font-weight: normal;
  --rank-font-size: max(0.75rem, 12px);
}
.rank-muted-primary {
  --rank-border-color: oklch(from var(--color-primary) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --rank-border-color: var(--color-*-bd);
  --rank-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --rank-background: var(--color-primary-surface);
  --rank-color: oklch(from var(--color-primary) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --rank-color: var(--color-*-body);
  --rank-border-width: 1px;
  --rank-font-weight: normal;
  --rank-font-size: max(0.75rem, 12px);
}
.rank-muted-success {
  --rank-border-color: oklch(from var(--color-success) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --rank-border-color: var(--color-*-bd);
  --rank-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --rank-background: var(--color-success-surface);
  --rank-color: oklch(from var(--color-success) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --rank-color: var(--color-*-body);
  --rank-border-width: 1px;
  --rank-font-weight: normal;
  --rank-font-size: max(0.75rem, 12px);
}
.segment-\[\#04afba\] {
  --segment-background: oklch(from #04afba var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --segment-item-background-hover: oklch(from #04afba var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --segment-outline-color: oklch(from #04afba clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not(.segment-dark)) {
    --segment-item-border-color-selected: oklch(from #04afba clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.segment-dark) {
    &:where(.segment-inverted, .segment-flush) {
      --segment-item-color-selected: oklch(from #04afba clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-background-selected: #04afba;
    }
    &:where(:not(.segment-inverted, .segment-flush)) {
      --segment-background: #04afba;
      --segment-item-color: oklch(from #04afba clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-background-hover: oklch(from #04afba calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
    }
  }
}
.segment-\[\#90ced2\] {
  --segment-background: oklch(from #90ced2 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --segment-item-background-hover: oklch(from #90ced2 var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --segment-outline-color: oklch(from #90ced2 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not(.segment-dark)) {
    --segment-item-border-color-selected: oklch(from #90ced2 clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.segment-dark) {
    &:where(.segment-inverted, .segment-flush) {
      --segment-item-color-selected: oklch(from #90ced2 clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-background-selected: #90ced2;
    }
    &:where(:not(.segment-inverted, .segment-flush)) {
      --segment-background: #90ced2;
      --segment-item-color: oklch(from #90ced2 clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-background-hover: oklch(from #90ced2 calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
    }
  }
}
.segment-green-500 {
  --segment-background: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --segment-item-background-hover: oklch(from var(--color-green-500) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --segment-outline-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not(.segment-dark)) {
    --segment-item-border-color-selected: oklch(from var(--color-green-500) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.segment-dark) {
    &:where(.segment-inverted, .segment-flush) {
      --segment-item-color-selected: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-background-selected: var(--color-green-500);
    }
    &:where(:not(.segment-inverted, .segment-flush)) {
      --segment-background: var(--color-green-500);
      --segment-item-color: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-background-hover: oklch(from var(--color-green-500) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
    }
  }
}
.segment-red-200 {
  --segment-background: oklch(from var(--color-red-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --segment-item-background-hover: oklch(from var(--color-red-200) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --segment-outline-color: oklch(from var(--color-red-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not(.segment-dark)) {
    --segment-item-border-color-selected: oklch(from var(--color-red-200) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.segment-dark) {
    &:where(.segment-inverted, .segment-flush) {
      --segment-item-color-selected: oklch(from var(--color-red-200) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-background-selected: var(--color-red-200);
    }
    &:where(:not(.segment-inverted, .segment-flush)) {
      --segment-background: var(--color-red-200);
      --segment-item-color: oklch(from var(--color-red-200) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-background-hover: oklch(from var(--color-red-200) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
    }
  }
}
.segment-red-600 {
  --segment-background: oklch(from var(--color-red-600) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --segment-item-background-hover: oklch(from var(--color-red-600) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --segment-outline-color: oklch(from var(--color-red-600) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not(.segment-dark)) {
    --segment-item-border-color-selected: oklch(from var(--color-red-600) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.segment-dark) {
    &:where(.segment-inverted, .segment-flush) {
      --segment-item-color-selected: oklch(from var(--color-red-600) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-background-selected: var(--color-red-600);
    }
    &:where(:not(.segment-inverted, .segment-flush)) {
      --segment-background: var(--color-red-600);
      --segment-item-color: oklch(from var(--color-red-600) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
      --segment-item-background-hover: oklch(from var(--color-red-600) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
    }
  }
}
.shell-subtle-error {
  --shell-background-invalid: var(--color-error-bg-hover);
  --shell-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-background: var(--color-error-bg-hover);
  --shell-border-color: transparent;
  --shell-border-color-hover: oklch(from var(--color-error-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color-focus: var(--shell-border-color-hover);
  --shell-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-error-fg);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-error) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-subtle-highlight {
  --shell-background-invalid: var(--color-error-bg-hover);
  --shell-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-background: var(--color-highlight-bg-hover);
  --shell-border-color: transparent;
  --shell-border-color-hover: oklch(from var(--color-highlight-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color-focus: var(--shell-border-color-hover);
  --shell-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-highlight-fg);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-highlight) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-subtle-info {
  --shell-background-invalid: var(--color-error-bg-hover);
  --shell-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-background: var(--color-info-bg-hover);
  --shell-border-color: transparent;
  --shell-border-color-hover: oklch(from var(--color-info-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color-focus: var(--shell-border-color-hover);
  --shell-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-info-fg);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-info) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-subtle-primary {
  --shell-background-invalid: var(--color-error-bg-hover);
  --shell-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-background: var(--color-primary-bg-hover);
  --shell-border-color: transparent;
  --shell-border-color-hover: oklch(from var(--color-primary-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color-focus: var(--shell-border-color-hover);
  --shell-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-primary-fg);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-primary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-subtle-success {
  --shell-background-invalid: var(--color-error-bg-hover);
  --shell-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-background: var(--color-success-bg-hover);
  --shell-border-color: transparent;
  --shell-border-color-hover: oklch(from var(--color-success-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color-focus: var(--shell-border-color-hover);
  --shell-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-success-fg);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-success) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-subtle-warning {
  --shell-background-invalid: var(--color-error-bg-hover);
  --shell-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-background: var(--color-warning-bg-hover);
  --shell-border-color: transparent;
  --shell-border-color-hover: oklch(from var(--color-warning-base) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color-focus: var(--shell-border-color-hover);
  --shell-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-warning-fg);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-warning) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.tag-green-100 {
  --tag-color: oklch(from var(--color-green-100) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: oklch(from var(--color-green-100) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-tmp-background-hover: oklch(from var(--color-green-100) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  &:where(:not(.tag-subtle, .tag-ghost, .tag-plain)) {
    --tag-background: oklch(from var(--color-green-100) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-ghost) {
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-subtle) {
    --tag-background: var(--tag-tmp-background-hover);
    --tag-local-background: var(--tag-tmp-background-hover);
    --tag-background-hover: oklch(from var(--color-green-100) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  }
}
.tag-green-500 {
  --tag-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-tmp-background-hover: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  &:where(:not(.tag-subtle, .tag-ghost, .tag-plain)) {
    --tag-background: oklch(from var(--color-green-500) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-ghost) {
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-subtle) {
    --tag-background: var(--tag-tmp-background-hover);
    --tag-local-background: var(--tag-tmp-background-hover);
    --tag-background-hover: oklch(from var(--color-green-500) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  }
}
.tag-green-800 {
  --tag-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-tmp-background-hover: oklch(from var(--color-green-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  &:where(:not(.tag-subtle, .tag-ghost, .tag-plain)) {
    --tag-background: oklch(from var(--color-green-800) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-ghost) {
    --tag-background-hover: var(--tag-tmp-background-hover);
  }
  &:where(.tag-subtle) {
    --tag-background: var(--tag-tmp-background-hover);
    --tag-local-background: var(--tag-tmp-background-hover);
    --tag-background-hover: oklch(from var(--color-green-800) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  }
}
.btn-muted-green-200 {
  --btn-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-background: oklch(from var(--color-green-200) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-border-color: oklch(from var(--color-green-200) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-green-200) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --btn-border-color: oklch(from var(--color-green-200) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-green-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-border-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
}
.btn-muted-green-500 {
  --btn-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-background: oklch(from var(--color-green-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-border-color: oklch(from var(--color-green-500) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-green-500) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --btn-border-color: oklch(from var(--color-green-500) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-border-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
}
.btn-muted-green-800 {
  --btn-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-background: oklch(from var(--color-green-800) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-border-color: oklch(from var(--color-green-800) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-green-800) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
    --btn-border-color: oklch(from var(--color-green-800) var(--light-threshold-bd-hover) calc(var(--chorme-bd-hover) * var(--color-c-factor)) h);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-green-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --btn-border-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-bd-active), l, var(--light-threshold-bd-active) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
}
.btn-vivid-green-200 {
  --btn-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-background: oklch(from var(--color-green-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--color-green-200);
    --btn-color: oklch(from var(--color-green-200) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-green-200) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    --btn-color: oklch(from var(--color-green-200) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
}
.btn-vivid-green-500 {
  --btn-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-background: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--color-green-500);
    --btn-color: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-green-500) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    --btn-color: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
}
.btn-vivid-green-800 {
  --btn-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-background: oklch(from var(--color-green-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--color-green-800);
    --btn-color: oklch(from var(--color-green-800) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-green-800) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
    --btn-color: oklch(from var(--color-green-800) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
}
.flag-sm {
  &.flag-triangle {
    --flag-lh-offset: 4px;
    --flag-height: 32px;
    --flag-font-size: 10px;
  }
  &.flag-circle {
    --flag-height: 32px;
    --flag-font-size: 10px;
  }
  &.flag-horn {
    --flag-height: 20px;
  }
  &.flag-ribbon {
    --flag-height: 80px;
  }
  &.flag-diamond {
    --flag-height: 20px;
  }
}
.rank-outline-error {
  --rank-border-color: oklch(from var(--color-error-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --rank-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --rank-background: var(--color-error-surface);
  --rank-color: oklch(from var(--color-error) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --rank-color: var(--color-*-body);
  --rank-border-width: 1px;
  --rank-font-weight: normal;
  --rank-font-size: max(0.75rem, 12px);
}
.rank-outline-primary {
  --rank-border-color: oklch(from var(--color-primary-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --rank-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --rank-background: var(--color-primary-surface);
  --rank-color: oklch(from var(--color-primary) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --rank-color: var(--color-*-body);
  --rank-border-width: 1px;
  --rank-font-weight: normal;
  --rank-font-size: max(0.75rem, 12px);
}
.rank-outline-success {
  --rank-border-color: oklch(from var(--color-success-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --rank-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --rank-background: var(--color-success-surface);
  --rank-color: oklch(from var(--color-success) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --rank-color: var(--color-*-body);
  --rank-border-width: 1px;
  --rank-font-weight: normal;
  --rank-font-size: max(0.75rem, 12px);
}
.shell-ghost {
  --shell-border-color: transparent;
  --shell-border-color-hover: transparent;
  --shell-border-color-focus: var(--color-primary);
  --shell-background-hover: var(--color-title-bg-hover);
  --shell-background-focus: var(--shell-background-hover);
  --shell-background-invalid: var(--color-error-bg-hover);
  --shell-border-width: 0;
  --shell-outline-width: 2px;
}
.shell-muted-error {
  --shell-border-color: oklch(from var(--color-error) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color: var(--color-error-bd);
  --shell-border-color-hover: oklch(from var(--color-error-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color-focus: var(--shell-border-color-hover);
  --shell-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-error-fg);
  --shell-background: var(--color-error-surface);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-error) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-muted-highlight {
  --shell-border-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color: var(--color-highlight-bd);
  --shell-border-color-hover: oklch(from var(--color-highlight-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color-focus: var(--shell-border-color-hover);
  --shell-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-highlight-fg);
  --shell-background: var(--color-highlight-surface);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-highlight) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-muted-info {
  --shell-border-color: oklch(from var(--color-info) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color: var(--color-info-bd);
  --shell-border-color-hover: oklch(from var(--color-info-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color-focus: var(--shell-border-color-hover);
  --shell-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-info-fg);
  --shell-background: var(--color-info-surface);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-info) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-muted-primary {
  --shell-border-color: oklch(from var(--color-primary) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color: var(--color-primary-bd);
  --shell-border-color-hover: oklch(from var(--color-primary-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color-focus: var(--shell-border-color-hover);
  --shell-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-primary-fg);
  --shell-background: var(--color-primary-surface);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-primary) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-muted-success {
  --shell-border-color: oklch(from var(--color-success) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color: var(--color-success-bd);
  --shell-border-color-hover: oklch(from var(--color-success-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color-focus: var(--shell-border-color-hover);
  --shell-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-success-fg);
  --shell-background: var(--color-success-surface);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-success) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-muted-warning {
  --shell-border-color: oklch(from var(--color-warning) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color: var(--color-warning-bd);
  --shell-border-color-hover: oklch(from var(--color-warning-base) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color-focus: var(--shell-border-color-hover);
  --shell-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-color: var(--color-warning-fg);
  --shell-background: var(--color-warning-surface);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-warning) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.swatch-4 {
  --swatch-font-size: var(--text-3xs);
  --swatch-height: calc(var(--spacing)*4);
  --swatch-border-radius: var(--spacing);
  --swatch-padding: 1px;
  --input-row-height: calc(var(--spacing)*4);
  --input-padding-x: 2px;
  --input-border-radius: var(--spacing);
  --swatch-background-size: 6px;
}
.swatch-5 {
  --swatch-font-size: var(--text-2xs);
  --swatch-height: calc(var(--spacing)*5);
  --swatch-border-radius: var(--spacing);
  --swatch-padding: 2px;
  --input-row-height: calc(var(--spacing)*5);
  --input-padding-x: 2px;
  --input-border-radius: var(--spacing);
  --swatch-background-size: 8px;
}
.swatch-6 {
  --swatch-font-size: max(0.75rem, 12px);
  --swatch-height: calc(var(--spacing)*6);
  --swatch-border-radius: var(--spacing);
  --swatch-padding: 2px;
  --input-row-height: calc(var(--spacing)*6);
  --input-padding-x: 2px;
  --input-border-radius: var(--spacing);
  --swatch-background-size: 8px;
}
.swatch-caption {
  --swatch-color: var(--color-caption);
  --swatch-border-color: oklch(from var(--color-caption) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color: var(--color-caption-bd);
  --swatch-border-color-hover: oklch(from var(--color-caption) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color-hover: var(--color-caption-bd-hover);
  &:where(input) {
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: var(--color-title-bd-hover);
  }
  &:where(.swatch-outline) {
    --swatch-border-color: var(--swatch-color);
  }
}
.swatch-caution {
  --swatch-color: var(--color-caution);
  --swatch-border-color: oklch(from var(--color-caution) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color: var(--color-caution-bd);
  --swatch-border-color-hover: oklch(from var(--color-caution) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color-hover: var(--color-caution-bd-hover);
  &:where(input) {
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: var(--color-title-bd-hover);
  }
  &:where(.swatch-outline) {
    --swatch-border-color: var(--swatch-color);
  }
}
.swatch-description {
  --swatch-color: var(--color-description);
  --swatch-border-color: oklch(from var(--color-description) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color: var(--color-description-bd);
  --swatch-border-color-hover: oklch(from var(--color-description) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color-hover: var(--color-description-bd-hover);
  &:where(input) {
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: var(--color-title-bd-hover);
  }
  &:where(.swatch-outline) {
    --swatch-border-color: var(--swatch-color);
  }
}
.swatch-error {
  --swatch-color: var(--color-error);
  --swatch-border-color: oklch(from var(--color-error) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color: var(--color-error-bd);
  --swatch-border-color-hover: oklch(from var(--color-error) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color-hover: var(--color-error-bd-hover);
  &:where(input) {
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: var(--color-title-bd-hover);
  }
  &:where(.swatch-outline) {
    --swatch-border-color: var(--swatch-color);
  }
}
.swatch-highlight {
  --swatch-color: var(--color-highlight);
  --swatch-border-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color: var(--color-highlight-bd);
  --swatch-border-color-hover: oklch(from var(--color-highlight) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color-hover: var(--color-highlight-bd-hover);
  &:where(input) {
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: var(--color-title-bd-hover);
  }
  &:where(.swatch-outline) {
    --swatch-border-color: var(--swatch-color);
  }
}
.swatch-info {
  --swatch-color: var(--color-info);
  --swatch-border-color: oklch(from var(--color-info) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color: var(--color-info-bd);
  --swatch-border-color-hover: oklch(from var(--color-info) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color-hover: var(--color-info-bd-hover);
  &:where(input) {
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: var(--color-title-bd-hover);
  }
  &:where(.swatch-outline) {
    --swatch-border-color: var(--swatch-color);
  }
}
.swatch-ink {
  --swatch-color: var(--color-ink);
  --swatch-border-color: oklch(from var(--color-ink) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color: var(--color-ink-bd);
  --swatch-border-color-hover: oklch(from var(--color-ink) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color-hover: var(--color-ink-bd-hover);
  &:where(input) {
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: var(--color-title-bd-hover);
  }
  &:where(.swatch-outline) {
    --swatch-border-color: var(--swatch-color);
  }
}
.swatch-placeholder {
  --swatch-color: var(--color-placeholder);
  --swatch-border-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color: var(--color-placeholder-bd);
  --swatch-border-color-hover: oklch(from var(--color-placeholder) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color-hover: var(--color-placeholder-bd-hover);
  &:where(input) {
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: var(--color-title-bd-hover);
  }
  &:where(.swatch-outline) {
    --swatch-border-color: var(--swatch-color);
  }
}
.swatch-primary {
  --swatch-color: var(--color-primary);
  --swatch-border-color: oklch(from var(--color-primary) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color: var(--color-primary-bd);
  --swatch-border-color-hover: oklch(from var(--color-primary) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color-hover: var(--color-primary-bd-hover);
  &:where(input) {
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: var(--color-title-bd-hover);
  }
  &:where(.swatch-outline) {
    --swatch-border-color: var(--swatch-color);
  }
}
.swatch-secondary {
  --swatch-color: var(--color-secondary);
  --swatch-border-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color: var(--color-secondary-bd);
  --swatch-border-color-hover: oklch(from var(--color-secondary) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color-hover: var(--color-secondary-bd-hover);
  &:where(input) {
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: var(--color-title-bd-hover);
  }
  &:where(.swatch-outline) {
    --swatch-border-color: var(--swatch-color);
  }
}
.swatch-success {
  --swatch-color: var(--color-success);
  --swatch-border-color: oklch(from var(--color-success) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color: var(--color-success-bd);
  --swatch-border-color-hover: oklch(from var(--color-success) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color-hover: var(--color-success-bd-hover);
  &:where(input) {
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: var(--color-title-bd-hover);
  }
  &:where(.swatch-outline) {
    --swatch-border-color: var(--swatch-color);
  }
}
.swatch-tertiary {
  --swatch-color: var(--color-tertiary);
  --swatch-border-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color: var(--color-tertiary-bd);
  --swatch-border-color-hover: oklch(from var(--color-tertiary) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color-hover: var(--color-tertiary-bd-hover);
  &:where(input) {
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: var(--color-title-bd-hover);
  }
  &:where(.swatch-outline) {
    --swatch-border-color: var(--swatch-color);
  }
}
.swatch-title {
  --swatch-color: var(--color-title);
  --swatch-border-color: oklch(from var(--color-title) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color: var(--color-title-bd);
  --swatch-border-color-hover: oklch(from var(--color-title) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color-hover: var(--color-title-bd-hover);
  &:where(input) {
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: var(--color-title-bd-hover);
  }
  &:where(.swatch-outline) {
    --swatch-border-color: var(--swatch-color);
  }
}
.swatch-warning {
  --swatch-color: var(--color-warning);
  --swatch-border-color: oklch(from var(--color-warning) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color: var(--color-warning-bd);
  --swatch-border-color-hover: oklch(from var(--color-warning) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color-hover: var(--color-warning-bd-hover);
  &:where(input) {
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: var(--color-title-bd-hover);
  }
  &:where(.swatch-outline) {
    --swatch-border-color: var(--swatch-color);
  }
}
.tag-ghost-error {
  --tag-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-error-fg);
  --tag-border-color: oklch(from var(--color-error) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: var(--color-error-bd);
  --tag-background: transparent;
  --tag-background-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-background-hover: var(--color-error-bg-hover);
  &:where(:not(.tag-selected)) {
    --tag-border-width: 0;
  }
}
.tag-ghost-primary {
  --tag-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-primary-fg);
  --tag-border-color: oklch(from var(--color-primary) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: var(--color-primary-bd);
  --tag-background: transparent;
  --tag-background-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-background-hover: var(--color-primary-bg-hover);
  &:where(:not(.tag-selected)) {
    --tag-border-width: 0;
  }
}
.tag-ghost-success {
  --tag-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-success-fg);
  --tag-border-color: oklch(from var(--color-success) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: var(--color-success-bd);
  --tag-background: transparent;
  --tag-background-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-background-hover: var(--color-success-bg-hover);
  &:where(:not(.tag-selected)) {
    --tag-border-width: 0;
  }
}
.avatar-muted-caption {
  --avatar-border-width: 1px;
  --avatar-background: oklch(from var(--color-caption) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --avatar-background: var(--color-caption-bg);
  --avatar-border-color: oklch(from var(--color-caption) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-caption-bd);
  --avatar-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-caption-fg);
}
.avatar-muted-description {
  --avatar-border-width: 1px;
  --avatar-background: oklch(from var(--color-description) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --avatar-background: var(--color-description-bg);
  --avatar-border-color: oklch(from var(--color-description) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-description-bd);
  --avatar-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-description-fg);
}
.avatar-muted-error {
  --avatar-border-width: 1px;
  --avatar-background: oklch(from var(--color-error) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --avatar-background: var(--color-error-bg);
  --avatar-border-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-error-bd);
  --avatar-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-error-fg);
}
.avatar-muted-highlight {
  --avatar-border-width: 1px;
  --avatar-background: oklch(from var(--color-highlight) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --avatar-background: var(--color-highlight-bg);
  --avatar-border-color: oklch(from var(--color-highlight) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-highlight-bd);
  --avatar-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-highlight-fg);
}
.avatar-muted-info {
  --avatar-border-width: 1px;
  --avatar-background: oklch(from var(--color-info) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --avatar-background: var(--color-info-bg);
  --avatar-border-color: oklch(from var(--color-info) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-info-bd);
  --avatar-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-info-fg);
}
.avatar-muted-placeholder {
  --avatar-border-width: 1px;
  --avatar-background: oklch(from var(--color-placeholder) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --avatar-background: var(--color-placeholder-bg);
  --avatar-border-color: oklch(from var(--color-placeholder) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-placeholder-bd);
  --avatar-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-placeholder-fg);
}
.avatar-muted-primary {
  --avatar-border-width: 1px;
  --avatar-background: oklch(from var(--color-primary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --avatar-background: var(--color-primary-bg);
  --avatar-border-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-primary-bd);
  --avatar-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-primary-fg);
}
.avatar-muted-secondary {
  --avatar-border-width: 1px;
  --avatar-background: oklch(from var(--color-secondary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --avatar-background: var(--color-secondary-bg);
  --avatar-border-color: oklch(from var(--color-secondary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-secondary-bd);
  --avatar-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-secondary-fg);
}
.avatar-muted-success {
  --avatar-border-width: 1px;
  --avatar-background: oklch(from var(--color-success) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --avatar-background: var(--color-success-bg);
  --avatar-border-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-success-bd);
  --avatar-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-success-fg);
}
.avatar-muted-tertiary {
  --avatar-border-width: 1px;
  --avatar-background: oklch(from var(--color-tertiary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --avatar-background: var(--color-tertiary-bg);
  --avatar-border-color: oklch(from var(--color-tertiary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-tertiary-bd);
  --avatar-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-tertiary-fg);
}
.avatar-muted-title {
  --avatar-border-width: 1px;
  --avatar-background: oklch(from var(--color-title) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --avatar-background: var(--color-title-bg);
  --avatar-border-color: oklch(from var(--color-title) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-title-bd);
  --avatar-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-title-fg);
}
.avatar-subtle-caption {
  --avatar-border-width: 0px;
  --avatar-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --avatar-background: var(--color-caption-bg-hover);
  --avatar-border-color: oklch(from var(--color-caption) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-caption-bd);
  --avatar-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-caption-fg);
}
.avatar-subtle-description {
  --avatar-border-width: 0px;
  --avatar-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --avatar-background: var(--color-description-bg-hover);
  --avatar-border-color: oklch(from var(--color-description) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-description-bd);
  --avatar-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-description-fg);
}
.avatar-subtle-error {
  --avatar-border-width: 0px;
  --avatar-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --avatar-background: var(--color-error-bg-hover);
  --avatar-border-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-error-bd);
  --avatar-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-error-fg);
}
.avatar-subtle-highlight {
  --avatar-border-width: 0px;
  --avatar-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --avatar-background: var(--color-highlight-bg-hover);
  --avatar-border-color: oklch(from var(--color-highlight) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-highlight-bd);
  --avatar-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-highlight-fg);
}
.avatar-subtle-info {
  --avatar-border-width: 0px;
  --avatar-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --avatar-background: var(--color-info-bg-hover);
  --avatar-border-color: oklch(from var(--color-info) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-info-bd);
  --avatar-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-info-fg);
}
.avatar-subtle-placeholder {
  --avatar-border-width: 0px;
  --avatar-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --avatar-background: var(--color-placeholder-bg-hover);
  --avatar-border-color: oklch(from var(--color-placeholder) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-placeholder-bd);
  --avatar-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-placeholder-fg);
}
.avatar-subtle-primary {
  --avatar-border-width: 0px;
  --avatar-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --avatar-background: var(--color-primary-bg-hover);
  --avatar-border-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-primary-bd);
  --avatar-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-primary-fg);
}
.avatar-subtle-secondary {
  --avatar-border-width: 0px;
  --avatar-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --avatar-background: var(--color-secondary-bg-hover);
  --avatar-border-color: oklch(from var(--color-secondary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-secondary-bd);
  --avatar-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-secondary-fg);
}
.avatar-subtle-success {
  --avatar-border-width: 0px;
  --avatar-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --avatar-background: var(--color-success-bg-hover);
  --avatar-border-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-success-bd);
  --avatar-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-success-fg);
}
.avatar-subtle-tertiary {
  --avatar-border-width: 0px;
  --avatar-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --avatar-background: var(--color-tertiary-bg-hover);
  --avatar-border-color: oklch(from var(--color-tertiary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-tertiary-bd);
  --avatar-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-tertiary-fg);
}
.avatar-subtle-title {
  --avatar-border-width: 0px;
  --avatar-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --avatar-background: var(--color-title-bg-hover);
  --avatar-border-color: oklch(from var(--color-title) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-border-color: var(--color-title-bd);
  --avatar-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --avatar-color: var(--color-title-fg);
}
.badge-muted-caption {
  --badge-background: oklch(from var(--color-caption) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --badge-background: var(--color-caption-surface);
  --badge-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-caption-fg);
  --badge-border-color: oklch(from var(--color-caption) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-*-bd);
  border: 1px solid var(--badge-border-color);
}
.badge-muted-caution {
  --badge-background: oklch(from var(--color-caution) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --badge-background: var(--color-caution-surface);
  --badge-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-caution-fg);
  --badge-border-color: oklch(from var(--color-caution) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-*-bd);
  border: 1px solid var(--badge-border-color);
}
.badge-muted-description {
  --badge-background: oklch(from var(--color-description) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --badge-background: var(--color-description-surface);
  --badge-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-description-fg);
  --badge-border-color: oklch(from var(--color-description) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-*-bd);
  border: 1px solid var(--badge-border-color);
}
.badge-muted-error {
  --badge-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --badge-background: var(--color-error-surface);
  --badge-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-error-fg);
  --badge-border-color: oklch(from var(--color-error) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-*-bd);
  border: 1px solid var(--badge-border-color);
}
.badge-muted-highlight {
  --badge-background: oklch(from var(--color-highlight) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --badge-background: var(--color-highlight-surface);
  --badge-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-highlight-fg);
  --badge-border-color: oklch(from var(--color-highlight) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-*-bd);
  border: 1px solid var(--badge-border-color);
}
.badge-muted-info {
  --badge-background: oklch(from var(--color-info) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --badge-background: var(--color-info-surface);
  --badge-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-info-fg);
  --badge-border-color: oklch(from var(--color-info) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-*-bd);
  border: 1px solid var(--badge-border-color);
}
.badge-muted-ink {
  --badge-background: oklch(from var(--color-ink) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --badge-background: var(--color-ink-surface);
  --badge-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-ink-fg);
  --badge-border-color: oklch(from var(--color-ink) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-*-bd);
  border: 1px solid var(--badge-border-color);
}
.badge-muted-placeholder {
  --badge-background: oklch(from var(--color-placeholder) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --badge-background: var(--color-placeholder-surface);
  --badge-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-placeholder-fg);
  --badge-border-color: oklch(from var(--color-placeholder) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-*-bd);
  border: 1px solid var(--badge-border-color);
}
.badge-muted-primary {
  --badge-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --badge-background: var(--color-primary-surface);
  --badge-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-primary-fg);
  --badge-border-color: oklch(from var(--color-primary) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-*-bd);
  border: 1px solid var(--badge-border-color);
}
.badge-muted-secondary {
  --badge-background: oklch(from var(--color-secondary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --badge-background: var(--color-secondary-surface);
  --badge-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-secondary-fg);
  --badge-border-color: oklch(from var(--color-secondary) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-*-bd);
  border: 1px solid var(--badge-border-color);
}
.badge-muted-success {
  --badge-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --badge-background: var(--color-success-surface);
  --badge-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-success-fg);
  --badge-border-color: oklch(from var(--color-success) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-*-bd);
  border: 1px solid var(--badge-border-color);
}
.badge-muted-tertiary {
  --badge-background: oklch(from var(--color-tertiary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --badge-background: var(--color-tertiary-surface);
  --badge-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-tertiary-fg);
  --badge-border-color: oklch(from var(--color-tertiary) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-*-bd);
  border: 1px solid var(--badge-border-color);
}
.badge-muted-title {
  --badge-background: oklch(from var(--color-title) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --badge-background: var(--color-title-surface);
  --badge-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-title-fg);
  --badge-border-color: oklch(from var(--color-title) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-*-bd);
  border: 1px solid var(--badge-border-color);
}
.badge-muted-warning {
  --badge-background: oklch(from var(--color-warning) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --badge-background: var(--color-warning-surface);
  --badge-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-warning-fg);
  --badge-border-color: oklch(from var(--color-warning) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-*-bd);
  border: 1px solid var(--badge-border-color);
}
.bookmark-caption {
  --bookmark-color-selected: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bookmark-color-selected: var(--color-caption-fg);
  &:where(.bookmark-inverted) {
    --bookmark-color-selected: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bookmark-color-selected: var(--color-caption-contrast);
    --bookmark-color-hover: var(--color-caption);
    --bookmark-item-background-selected: var(--color-caption);
    --bookmark-shadow: var(--color-caption);
  }
}
.bookmark-caution {
  --bookmark-color-selected: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bookmark-color-selected: var(--color-caution-fg);
  &:where(.bookmark-inverted) {
    --bookmark-color-selected: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bookmark-color-selected: var(--color-caution-contrast);
    --bookmark-color-hover: var(--color-caution);
    --bookmark-item-background-selected: var(--color-caution);
    --bookmark-shadow: var(--color-caution);
  }
}
.bookmark-description {
  --bookmark-color-selected: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bookmark-color-selected: var(--color-description-fg);
  &:where(.bookmark-inverted) {
    --bookmark-color-selected: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bookmark-color-selected: var(--color-description-contrast);
    --bookmark-color-hover: var(--color-description);
    --bookmark-item-background-selected: var(--color-description);
    --bookmark-shadow: var(--color-description);
  }
}
.bookmark-error {
  --bookmark-color-selected: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bookmark-color-selected: var(--color-error-fg);
  &:where(.bookmark-inverted) {
    --bookmark-color-selected: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bookmark-color-selected: var(--color-error-contrast);
    --bookmark-color-hover: var(--color-error);
    --bookmark-item-background-selected: var(--color-error);
    --bookmark-shadow: var(--color-error);
  }
}
.bookmark-highlight {
  --bookmark-color-selected: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bookmark-color-selected: var(--color-highlight-fg);
  &:where(.bookmark-inverted) {
    --bookmark-color-selected: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bookmark-color-selected: var(--color-highlight-contrast);
    --bookmark-color-hover: var(--color-highlight);
    --bookmark-item-background-selected: var(--color-highlight);
    --bookmark-shadow: var(--color-highlight);
  }
}
.bookmark-info {
  --bookmark-color-selected: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bookmark-color-selected: var(--color-info-fg);
  &:where(.bookmark-inverted) {
    --bookmark-color-selected: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bookmark-color-selected: var(--color-info-contrast);
    --bookmark-color-hover: var(--color-info);
    --bookmark-item-background-selected: var(--color-info);
    --bookmark-shadow: var(--color-info);
  }
}
.bookmark-ink {
  --bookmark-color-selected: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bookmark-color-selected: var(--color-ink-fg);
  &:where(.bookmark-inverted) {
    --bookmark-color-selected: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bookmark-color-selected: var(--color-ink-contrast);
    --bookmark-color-hover: var(--color-ink);
    --bookmark-item-background-selected: var(--color-ink);
    --bookmark-shadow: var(--color-ink);
  }
}
.bookmark-placeholder {
  --bookmark-color-selected: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bookmark-color-selected: var(--color-placeholder-fg);
  &:where(.bookmark-inverted) {
    --bookmark-color-selected: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bookmark-color-selected: var(--color-placeholder-contrast);
    --bookmark-color-hover: var(--color-placeholder);
    --bookmark-item-background-selected: var(--color-placeholder);
    --bookmark-shadow: var(--color-placeholder);
  }
}
.bookmark-primary {
  --bookmark-color-selected: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bookmark-color-selected: var(--color-primary-fg);
  &:where(.bookmark-inverted) {
    --bookmark-color-selected: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bookmark-color-selected: var(--color-primary-contrast);
    --bookmark-color-hover: var(--color-primary);
    --bookmark-item-background-selected: var(--color-primary);
    --bookmark-shadow: var(--color-primary);
  }
}
.bookmark-secondary {
  --bookmark-color-selected: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bookmark-color-selected: var(--color-secondary-fg);
  &:where(.bookmark-inverted) {
    --bookmark-color-selected: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bookmark-color-selected: var(--color-secondary-contrast);
    --bookmark-color-hover: var(--color-secondary);
    --bookmark-item-background-selected: var(--color-secondary);
    --bookmark-shadow: var(--color-secondary);
  }
}
.bookmark-success {
  --bookmark-color-selected: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bookmark-color-selected: var(--color-success-fg);
  &:where(.bookmark-inverted) {
    --bookmark-color-selected: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bookmark-color-selected: var(--color-success-contrast);
    --bookmark-color-hover: var(--color-success);
    --bookmark-item-background-selected: var(--color-success);
    --bookmark-shadow: var(--color-success);
  }
}
.bookmark-tertiary {
  --bookmark-color-selected: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bookmark-color-selected: var(--color-tertiary-fg);
  &:where(.bookmark-inverted) {
    --bookmark-color-selected: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bookmark-color-selected: var(--color-tertiary-contrast);
    --bookmark-color-hover: var(--color-tertiary);
    --bookmark-item-background-selected: var(--color-tertiary);
    --bookmark-shadow: var(--color-tertiary);
  }
}
.bookmark-title {
  --bookmark-color-selected: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bookmark-color-selected: var(--color-title-fg);
  &:where(.bookmark-inverted) {
    --bookmark-color-selected: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bookmark-color-selected: var(--color-title-contrast);
    --bookmark-color-hover: var(--color-title);
    --bookmark-item-background-selected: var(--color-title);
    --bookmark-shadow: var(--color-title);
  }
}
.bookmark-warning {
  --bookmark-color-selected: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bookmark-color-selected: var(--color-warning-fg);
  &:where(.bookmark-inverted) {
    --bookmark-color-selected: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bookmark-color-selected: var(--color-warning-contrast);
    --bookmark-color-hover: var(--color-warning);
    --bookmark-item-background-selected: var(--color-warning);
    --bookmark-shadow: var(--color-warning);
  }
}
.btn-link-\[blue\] {
  --btn-border-width: 0;
  --btn-background: transparent;
  --btn-padding-x: 0;
  text-decoration: underline;
  &:where(:not([disabled]):hover) {
    --btn-background: transparent;
  }
  &:where(:not([disabled]):active) {
    --btn-background: transparent;
  }
  --btn-color: blue;
}
.btn-link-error {
  --btn-border-width: 0;
  --btn-background: transparent;
  --btn-padding-x: 0;
  text-decoration: underline;
  &:where(:not([disabled]):hover) {
    --btn-background: transparent;
  }
  &:where(:not([disabled]):active) {
    --btn-background: transparent;
  }
  --btn-color: var(--color-error);
}
.btn-link-green-500 {
  --btn-border-width: 0;
  --btn-background: transparent;
  --btn-padding-x: 0;
  text-decoration: underline;
  &:where(:not([disabled]):hover) {
    --btn-background: transparent;
  }
  &:where(:not([disabled]):active) {
    --btn-background: transparent;
  }
  --btn-color: var(--color-green-500);
}
.btn-link-highlight {
  --btn-border-width: 0;
  --btn-background: transparent;
  --btn-padding-x: 0;
  text-decoration: underline;
  &:where(:not([disabled]):hover) {
    --btn-background: transparent;
  }
  &:where(:not([disabled]):active) {
    --btn-background: transparent;
  }
  --btn-color: var(--color-highlight);
}
.btn-link-info {
  --btn-border-width: 0;
  --btn-background: transparent;
  --btn-padding-x: 0;
  text-decoration: underline;
  &:where(:not([disabled]):hover) {
    --btn-background: transparent;
  }
  &:where(:not([disabled]):active) {
    --btn-background: transparent;
  }
  --btn-color: var(--color-info);
}
.btn-link-primary {
  --btn-border-width: 0;
  --btn-background: transparent;
  --btn-padding-x: 0;
  text-decoration: underline;
  &:where(:not([disabled]):hover) {
    --btn-background: transparent;
  }
  &:where(:not([disabled]):active) {
    --btn-background: transparent;
  }
  --btn-color: var(--color-primary);
}
.btn-link-success {
  --btn-border-width: 0;
  --btn-background: transparent;
  --btn-padding-x: 0;
  text-decoration: underline;
  &:where(:not([disabled]):hover) {
    --btn-background: transparent;
  }
  &:where(:not([disabled]):active) {
    --btn-background: transparent;
  }
  --btn-color: var(--color-success);
}
.btn-subtle-green-200 {
  --btn-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-background: oklch(from var(--color-green-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-border-width: 0;
  --btn-tmp-background: oklch(from var(--color-green-200) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --custom-outline-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--btn-tmp-background);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
  }
}
.btn-subtle-green-500 {
  --btn-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-background: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-border-width: 0;
  --btn-tmp-background: oklch(from var(--color-green-500) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --custom-outline-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--btn-tmp-background);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
  }
}
.btn-subtle-green-800 {
  --btn-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-background: oklch(from var(--color-green-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --btn-border-width: 0;
  --btn-tmp-background: oklch(from var(--color-green-800) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --custom-outline-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not([disabled]):hover) {
    --btn-background: var(--btn-tmp-background);
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
  }
}
.btn-vivid {
  :where(&) {
    --btn-color: var(--color-title);
    --btn-background: var(--color-title-bg-hover);
    --btn-border-width: 0;
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-title);
      --btn-color: var(--color-title-contrast);
    }
    &:where(:not([disabled]):active) {
      --btn-background: var(--color-title-active);
      --btn-color: var(--color-title-contrast);
    }
  }
}
.callout-\[\#acaa20\] {
  &:where(:not(.callout-solid, .callout-muted, .callout-subtle)) {
    --callout-color: oklch(from #acaa20 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.callout-solid) {
    --callout-background: #acaa20;
    --callout-color: oklch(from #acaa20 clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
  &:where(.callout-muted, .callout-subtle) {
    --callout-color: oklch(from #acaa20 var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  }
  &:where(.callout-muted) {
    --callout-border-color: oklch(from #acaa20 var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --callout-background: oklch(from #acaa20 var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  }
  &:where(.callout-subtle) {
    --callout-background: oklch(from #acaa20 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
}
.callout-\[blue\] {
  &:where(:not(.callout-solid, .callout-muted, .callout-subtle)) {
    --callout-color: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.callout-solid) {
    --callout-background: blue;
    --callout-color: oklch(from blue clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
  &:where(.callout-muted, .callout-subtle) {
    --callout-color: oklch(from blue var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  }
  &:where(.callout-muted) {
    --callout-border-color: oklch(from blue var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --callout-background: oklch(from blue var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  }
  &:where(.callout-subtle) {
    --callout-background: oklch(from blue var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
}
.callout-green-200 {
  &:where(:not(.callout-solid, .callout-muted, .callout-subtle)) {
    --callout-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.callout-solid) {
    --callout-background: var(--color-green-200);
    --callout-color: oklch(from var(--color-green-200) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
  &:where(.callout-muted, .callout-subtle) {
    --callout-color: oklch(from var(--color-green-200) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  }
  &:where(.callout-muted) {
    --callout-border-color: oklch(from var(--color-green-200) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --callout-background: oklch(from var(--color-green-200) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  }
  &:where(.callout-subtle) {
    --callout-background: oklch(from var(--color-green-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
}
.callout-green-500 {
  &:where(:not(.callout-solid, .callout-muted, .callout-subtle)) {
    --callout-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  }
  &:where(.callout-solid) {
    --callout-background: var(--color-green-500);
    --callout-color: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
  &:where(.callout-muted, .callout-subtle) {
    --callout-color: oklch(from var(--color-green-500) var(--light-threshold-body) calc(var(--chorme-body) * var(--color-c-factor)) h);
  }
  &:where(.callout-muted) {
    --callout-border-color: oklch(from var(--color-green-500) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
    --callout-background: oklch(from var(--color-green-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  }
  &:where(.callout-subtle) {
    --callout-background: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
}
.pagination-caption {
  --pagination-color-hover: var(--color-caption);
  --pagination-color-selected: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pagination-color-selected: var(--color-caption-contrast);
  --pagination-background-hover: oklch(from var(--color-caption) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --pagination-background-hover: var(--color-caption-bg);
  &:where(.pagination-plain) {
    --pagination-background-hover: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pagination-background-hover: var(--color-caption-bg-hover);
  }
}
.pagination-caution {
  --pagination-color-hover: var(--color-caution);
  --pagination-color-selected: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pagination-color-selected: var(--color-caution-contrast);
  --pagination-background-hover: oklch(from var(--color-caution) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --pagination-background-hover: var(--color-caution-bg);
  &:where(.pagination-plain) {
    --pagination-background-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pagination-background-hover: var(--color-caution-bg-hover);
  }
}
.pagination-description {
  --pagination-color-hover: var(--color-description);
  --pagination-color-selected: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pagination-color-selected: var(--color-description-contrast);
  --pagination-background-hover: oklch(from var(--color-description) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --pagination-background-hover: var(--color-description-bg);
  &:where(.pagination-plain) {
    --pagination-background-hover: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pagination-background-hover: var(--color-description-bg-hover);
  }
}
.pagination-error {
  --pagination-color-hover: var(--color-error);
  --pagination-color-selected: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pagination-color-selected: var(--color-error-contrast);
  --pagination-background-hover: oklch(from var(--color-error) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --pagination-background-hover: var(--color-error-bg);
  &:where(.pagination-plain) {
    --pagination-background-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pagination-background-hover: var(--color-error-bg-hover);
  }
}
.pagination-highlight {
  --pagination-color-hover: var(--color-highlight);
  --pagination-color-selected: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pagination-color-selected: var(--color-highlight-contrast);
  --pagination-background-hover: oklch(from var(--color-highlight) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --pagination-background-hover: var(--color-highlight-bg);
  &:where(.pagination-plain) {
    --pagination-background-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pagination-background-hover: var(--color-highlight-bg-hover);
  }
}
.pagination-info {
  --pagination-color-hover: var(--color-info);
  --pagination-color-selected: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pagination-color-selected: var(--color-info-contrast);
  --pagination-background-hover: oklch(from var(--color-info) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --pagination-background-hover: var(--color-info-bg);
  &:where(.pagination-plain) {
    --pagination-background-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pagination-background-hover: var(--color-info-bg-hover);
  }
}
.pagination-ink {
  --pagination-color-hover: var(--color-ink);
  --pagination-color-selected: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pagination-color-selected: var(--color-ink-contrast);
  --pagination-background-hover: oklch(from var(--color-ink) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --pagination-background-hover: var(--color-ink-bg);
  &:where(.pagination-plain) {
    --pagination-background-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pagination-background-hover: var(--color-ink-bg-hover);
  }
}
.pagination-placeholder {
  --pagination-color-hover: var(--color-placeholder);
  --pagination-color-selected: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pagination-color-selected: var(--color-placeholder-contrast);
  --pagination-background-hover: oklch(from var(--color-placeholder) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --pagination-background-hover: var(--color-placeholder-bg);
  &:where(.pagination-plain) {
    --pagination-background-hover: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pagination-background-hover: var(--color-placeholder-bg-hover);
  }
}
.pagination-primary {
  --pagination-color-hover: var(--color-primary);
  --pagination-color-selected: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pagination-color-selected: var(--color-primary-contrast);
  --pagination-background-hover: oklch(from var(--color-primary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --pagination-background-hover: var(--color-primary-bg);
  &:where(.pagination-plain) {
    --pagination-background-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pagination-background-hover: var(--color-primary-bg-hover);
  }
}
.pagination-secondary {
  --pagination-color-hover: var(--color-secondary);
  --pagination-color-selected: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pagination-color-selected: var(--color-secondary-contrast);
  --pagination-background-hover: oklch(from var(--color-secondary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --pagination-background-hover: var(--color-secondary-bg);
  &:where(.pagination-plain) {
    --pagination-background-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pagination-background-hover: var(--color-secondary-bg-hover);
  }
}
.pagination-success {
  --pagination-color-hover: var(--color-success);
  --pagination-color-selected: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pagination-color-selected: var(--color-success-contrast);
  --pagination-background-hover: oklch(from var(--color-success) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --pagination-background-hover: var(--color-success-bg);
  &:where(.pagination-plain) {
    --pagination-background-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pagination-background-hover: var(--color-success-bg-hover);
  }
}
.pagination-tertiary {
  --pagination-color-hover: var(--color-tertiary);
  --pagination-color-selected: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pagination-color-selected: var(--color-tertiary-contrast);
  --pagination-background-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --pagination-background-hover: var(--color-tertiary-bg);
  &:where(.pagination-plain) {
    --pagination-background-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pagination-background-hover: var(--color-tertiary-bg-hover);
  }
}
.pagination-title {
  --pagination-color-hover: var(--color-title);
  --pagination-color-selected: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pagination-color-selected: var(--color-title-contrast);
  --pagination-background-hover: oklch(from var(--color-title) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --pagination-background-hover: var(--color-title-bg);
  &:where(.pagination-plain) {
    --pagination-background-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pagination-background-hover: var(--color-title-bg-hover);
  }
}
.pagination-warning {
  --pagination-color-hover: var(--color-warning);
  --pagination-color-selected: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pagination-color-selected: var(--color-warning-contrast);
  --pagination-background-hover: oklch(from var(--color-warning) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --pagination-background-hover: var(--color-warning-bg);
  &:where(.pagination-plain) {
    --pagination-background-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
    --pagination-background-hover: var(--color-warning-bg-hover);
  }
}
.progress-caption {
  --progress-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --progress-background: var(--color-caption-bg-hover);
  --progress-background-bar: var(--color-caption);
  --progress-color: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --progress-color: var(--color-caption-contrast);
  --progress-color-track: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --progress-color-track: var(--color-caption-fg);
}
.progress-caution {
  --progress-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --progress-background: var(--color-caution-bg-hover);
  --progress-background-bar: var(--color-caution);
  --progress-color: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --progress-color: var(--color-caution-contrast);
  --progress-color-track: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --progress-color-track: var(--color-caution-fg);
}
.progress-description {
  --progress-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --progress-background: var(--color-description-bg-hover);
  --progress-background-bar: var(--color-description);
  --progress-color: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --progress-color: var(--color-description-contrast);
  --progress-color-track: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --progress-color-track: var(--color-description-fg);
}
.progress-error {
  --progress-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --progress-background: var(--color-error-bg-hover);
  --progress-background-bar: var(--color-error);
  --progress-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --progress-color: var(--color-error-contrast);
  --progress-color-track: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --progress-color-track: var(--color-error-fg);
}
.progress-highlight {
  --progress-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --progress-background: var(--color-highlight-bg-hover);
  --progress-background-bar: var(--color-highlight);
  --progress-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --progress-color: var(--color-highlight-contrast);
  --progress-color-track: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --progress-color-track: var(--color-highlight-fg);
}
.progress-info {
  --progress-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --progress-background: var(--color-info-bg-hover);
  --progress-background-bar: var(--color-info);
  --progress-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --progress-color: var(--color-info-contrast);
  --progress-color-track: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --progress-color-track: var(--color-info-fg);
}
.progress-ink {
  --progress-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --progress-background: var(--color-ink-bg-hover);
  --progress-background-bar: var(--color-ink);
  --progress-color: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --progress-color: var(--color-ink-contrast);
  --progress-color-track: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --progress-color-track: var(--color-ink-fg);
}
.progress-placeholder {
  --progress-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --progress-background: var(--color-placeholder-bg-hover);
  --progress-background-bar: var(--color-placeholder);
  --progress-color: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --progress-color: var(--color-placeholder-contrast);
  --progress-color-track: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --progress-color-track: var(--color-placeholder-fg);
}
.progress-primary {
  --progress-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --progress-background: var(--color-primary-bg-hover);
  --progress-background-bar: var(--color-primary);
  --progress-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --progress-color: var(--color-primary-contrast);
  --progress-color-track: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --progress-color-track: var(--color-primary-fg);
}
.progress-secondary {
  --progress-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --progress-background: var(--color-secondary-bg-hover);
  --progress-background-bar: var(--color-secondary);
  --progress-color: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --progress-color: var(--color-secondary-contrast);
  --progress-color-track: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --progress-color-track: var(--color-secondary-fg);
}
.progress-success {
  --progress-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --progress-background: var(--color-success-bg-hover);
  --progress-background-bar: var(--color-success);
  --progress-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --progress-color: var(--color-success-contrast);
  --progress-color-track: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --progress-color-track: var(--color-success-fg);
}
.progress-tertiary {
  --progress-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --progress-background: var(--color-tertiary-bg-hover);
  --progress-background-bar: var(--color-tertiary);
  --progress-color: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --progress-color: var(--color-tertiary-contrast);
  --progress-color-track: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --progress-color-track: var(--color-tertiary-fg);
}
.progress-title {
  --progress-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --progress-background: var(--color-title-bg-hover);
  --progress-background-bar: var(--color-title);
  --progress-color: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --progress-color: var(--color-title-contrast);
  --progress-color-track: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --progress-color-track: var(--color-title-fg);
}
.progress-warning {
  --progress-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --progress-background: var(--color-warning-bg-hover);
  --progress-background-bar: var(--color-warning);
  --progress-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --progress-color: var(--color-warning-contrast);
  --progress-color-track: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --progress-color-track: var(--color-warning-fg);
}
.shell-outline-blue-500 {
  --shell-border-color: var(--color-blue-500);
  --shell-border-color-hover: var(--color-blue-500);
  --shell-border-color-focus: var(--color-blue-500);
  --shell-background: oklch(from var(--color-blue-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --shell-background-hover: oklch(from var(--color-blue-500) var(--light-threshold-bg) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-color: oklch(from var(--color-blue-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-blue-500) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-subtle-blue-200 {
  --shell-background-invalid: var(--color-error-bg-hover);
  --shell-background: oklch(from var(--color-blue-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-border-color: transparent;
  --shell-border-color-hover: oklch(from var(--color-blue-200) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color-focus: var(--shell-border-color-hover);
  --shell-color: oklch(from var(--color-blue-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-blue-200) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-subtle-blue-500 {
  --shell-background-invalid: var(--color-error-bg-hover);
  --shell-background: oklch(from var(--color-blue-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-border-color: transparent;
  --shell-border-color-hover: oklch(from var(--color-blue-500) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color-focus: var(--shell-border-color-hover);
  --shell-color: oklch(from var(--color-blue-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-blue-500) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-subtle-pink-400 {
  --shell-background-invalid: var(--color-error-bg-hover);
  --shell-background: oklch(from var(--color-pink-400) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --shell-border-color: transparent;
  --shell-border-color-hover: oklch(from var(--color-pink-400) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color-focus: var(--shell-border-color-hover);
  --shell-color: oklch(from var(--color-pink-400) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-pink-400) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.step-caption {
  --step-color-selected: var(--color-caption);
  --step-color-selected-text: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --step-color-selected-text: var(--color-caption-fg);
  --step-color-header-selected: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --step-color-header-selected: var(--color-caption-contrast);
  &:where(.step-solid) {
    --step-color-selected-text: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --step-color-selected-text: var(--color-caption-contrast);
  }
}
.step-caution {
  --step-color-selected: var(--color-caution);
  --step-color-selected-text: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --step-color-selected-text: var(--color-caution-fg);
  --step-color-header-selected: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --step-color-header-selected: var(--color-caution-contrast);
  &:where(.step-solid) {
    --step-color-selected-text: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --step-color-selected-text: var(--color-caution-contrast);
  }
}
.step-description {
  --step-color-selected: var(--color-description);
  --step-color-selected-text: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --step-color-selected-text: var(--color-description-fg);
  --step-color-header-selected: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --step-color-header-selected: var(--color-description-contrast);
  &:where(.step-solid) {
    --step-color-selected-text: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --step-color-selected-text: var(--color-description-contrast);
  }
}
.step-error {
  --step-color-selected: var(--color-error);
  --step-color-selected-text: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --step-color-selected-text: var(--color-error-fg);
  --step-color-header-selected: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --step-color-header-selected: var(--color-error-contrast);
  &:where(.step-solid) {
    --step-color-selected-text: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --step-color-selected-text: var(--color-error-contrast);
  }
}
.step-highlight {
  --step-color-selected: var(--color-highlight);
  --step-color-selected-text: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --step-color-selected-text: var(--color-highlight-fg);
  --step-color-header-selected: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --step-color-header-selected: var(--color-highlight-contrast);
  &:where(.step-solid) {
    --step-color-selected-text: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --step-color-selected-text: var(--color-highlight-contrast);
  }
}
.step-info {
  --step-color-selected: var(--color-info);
  --step-color-selected-text: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --step-color-selected-text: var(--color-info-fg);
  --step-color-header-selected: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --step-color-header-selected: var(--color-info-contrast);
  &:where(.step-solid) {
    --step-color-selected-text: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --step-color-selected-text: var(--color-info-contrast);
  }
}
.step-ink {
  --step-color-selected: var(--color-ink);
  --step-color-selected-text: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --step-color-selected-text: var(--color-ink-fg);
  --step-color-header-selected: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --step-color-header-selected: var(--color-ink-contrast);
  &:where(.step-solid) {
    --step-color-selected-text: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --step-color-selected-text: var(--color-ink-contrast);
  }
}
.step-placeholder {
  --step-color-selected: var(--color-placeholder);
  --step-color-selected-text: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --step-color-selected-text: var(--color-placeholder-fg);
  --step-color-header-selected: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --step-color-header-selected: var(--color-placeholder-contrast);
  &:where(.step-solid) {
    --step-color-selected-text: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --step-color-selected-text: var(--color-placeholder-contrast);
  }
}
.step-primary {
  --step-color-selected: var(--color-primary);
  --step-color-selected-text: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --step-color-selected-text: var(--color-primary-fg);
  --step-color-header-selected: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --step-color-header-selected: var(--color-primary-contrast);
  &:where(.step-solid) {
    --step-color-selected-text: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --step-color-selected-text: var(--color-primary-contrast);
  }
}
.step-secondary {
  --step-color-selected: var(--color-secondary);
  --step-color-selected-text: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --step-color-selected-text: var(--color-secondary-fg);
  --step-color-header-selected: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --step-color-header-selected: var(--color-secondary-contrast);
  &:where(.step-solid) {
    --step-color-selected-text: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --step-color-selected-text: var(--color-secondary-contrast);
  }
}
.step-success {
  --step-color-selected: var(--color-success);
  --step-color-selected-text: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --step-color-selected-text: var(--color-success-fg);
  --step-color-header-selected: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --step-color-header-selected: var(--color-success-contrast);
  &:where(.step-solid) {
    --step-color-selected-text: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --step-color-selected-text: var(--color-success-contrast);
  }
}
.step-tertiary {
  --step-color-selected: var(--color-tertiary);
  --step-color-selected-text: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --step-color-selected-text: var(--color-tertiary-fg);
  --step-color-header-selected: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --step-color-header-selected: var(--color-tertiary-contrast);
  &:where(.step-solid) {
    --step-color-selected-text: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --step-color-selected-text: var(--color-tertiary-contrast);
  }
}
.step-title {
  --step-color-selected: var(--color-title);
  --step-color-selected-text: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --step-color-selected-text: var(--color-title-fg);
  --step-color-header-selected: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --step-color-header-selected: var(--color-title-contrast);
  &:where(.step-solid) {
    --step-color-selected-text: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --step-color-selected-text: var(--color-title-contrast);
  }
}
.step-warning {
  --step-color-selected: var(--color-warning);
  --step-color-selected-text: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --step-color-selected-text: var(--color-warning-fg);
  --step-color-header-selected: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --step-color-header-selected: var(--color-warning-contrast);
  &:where(.step-solid) {
    --step-color-selected-text: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --step-color-selected-text: var(--color-warning-contrast);
  }
}
.swatch-muted-error {
  :where(&) {
    --swatch-color: var(--color-error);
    --swatch-border-color: oklch(from var(--color-error) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --swatch-border-color: var(--color-error-bd);
    --swatch-border-color-hover: oklch(from var(--color-error) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --swatch-border-color-hover: var(--color-error-bd-hover);
    &:where(input) {
      --input-border-color: var(--color-title-bd);
      --input-border-color-hover: var(--color-title-bd-hover);
    }
  }
}
.swatch-muted-info {
  :where(&) {
    --swatch-color: var(--color-info);
    --swatch-border-color: oklch(from var(--color-info) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --swatch-border-color: var(--color-info-bd);
    --swatch-border-color-hover: oklch(from var(--color-info) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --swatch-border-color-hover: var(--color-info-bd-hover);
    &:where(input) {
      --input-border-color: var(--color-title-bd);
      --input-border-color-hover: var(--color-title-bd-hover);
    }
  }
}
.swatch-muted-primary {
  :where(&) {
    --swatch-color: var(--color-primary);
    --swatch-border-color: oklch(from var(--color-primary) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --swatch-border-color: var(--color-primary-bd);
    --swatch-border-color-hover: oklch(from var(--color-primary) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --swatch-border-color-hover: var(--color-primary-bd-hover);
    &:where(input) {
      --input-border-color: var(--color-title-bd);
      --input-border-color-hover: var(--color-title-bd-hover);
    }
  }
}
.swatch-muted-success {
  :where(&) {
    --swatch-color: var(--color-success);
    --swatch-border-color: oklch(from var(--color-success) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --swatch-border-color: var(--color-success-bd);
    --swatch-border-color-hover: oklch(from var(--color-success) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
    --swatch-border-color-hover: var(--color-success-bd-hover);
    &:where(input) {
      --input-border-color: var(--color-title-bd);
      --input-border-color-hover: var(--color-title-bd-hover);
    }
  }
}
.swatch-outline-error {
  :where(&) {
    --swatch-color: var(--color-error);
    &:where(:not([type=color])) {
      --swatch-border-width: 2px;
      --swatch-border-color: var(--swatch-color);
      --swatch-border-color-hover: oklch(from var(--swatch-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
    }
    &:where([type=color]) {
      --input-border-color: currentColor;
      --input-border-color-hover: currentColor;
      --input-border-width: 2px;
    }
  }
}
.swatch-outline-info {
  :where(&) {
    --swatch-color: var(--color-info);
    &:where(:not([type=color])) {
      --swatch-border-width: 2px;
      --swatch-border-color: var(--swatch-color);
      --swatch-border-color-hover: oklch(from var(--swatch-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
    }
    &:where([type=color]) {
      --input-border-color: currentColor;
      --input-border-color-hover: currentColor;
      --input-border-width: 2px;
    }
  }
}
.swatch-outline-primary {
  :where(&) {
    --swatch-color: var(--color-primary);
    &:where(:not([type=color])) {
      --swatch-border-width: 2px;
      --swatch-border-color: var(--swatch-color);
      --swatch-border-color-hover: oklch(from var(--swatch-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
    }
    &:where([type=color]) {
      --input-border-color: currentColor;
      --input-border-color-hover: currentColor;
      --input-border-width: 2px;
    }
  }
}
.swatch-outline-success {
  :where(&) {
    --swatch-color: var(--color-success);
    &:where(:not([type=color])) {
      --swatch-border-width: 2px;
      --swatch-border-color: var(--swatch-color);
      --swatch-border-color-hover: oklch(from var(--swatch-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
    }
    &:where([type=color]) {
      --input-border-color: currentColor;
      --input-border-color-hover: currentColor;
      --input-border-width: 2px;
    }
  }
}
.tag-subtle-error {
  --tag-border-width: 0;
  --tag-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-error-fg);
  --tag-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-background: var(--color-error-bg-hover);
  --tag-background-hover: oklch(from var(--color-error) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --tag-background-hover: var(--color-error-bg-active);
}
.tag-subtle-info {
  --tag-border-width: 0;
  --tag-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-info-fg);
  --tag-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-background: var(--color-info-bg-hover);
  --tag-background-hover: oklch(from var(--color-info) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --tag-background-hover: var(--color-info-bg-active);
}
.tag-subtle-primary {
  --tag-border-width: 0;
  --tag-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-primary-fg);
  --tag-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-background: var(--color-primary-bg-hover);
  --tag-background-hover: oklch(from var(--color-primary) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --tag-background-hover: var(--color-primary-bg-active);
}
.tag-subtle-success {
  --tag-border-width: 0;
  --tag-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-success-fg);
  --tag-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --tag-background: var(--color-success-bg-hover);
  --tag-background-hover: oklch(from var(--color-success) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --tag-background-hover: var(--color-success-bg-active);
}
.blockquote-caption {
  --blockquote-background: oklch(from var(--color-caption) var(--light-threshold-bg) calc(var(--chorme-bgr) * var(--color-c-factor)) h / var(--opacity-bg));
  --blockquote-background: var(--color-caption-bg);
  --blockquote-border-color: var(--color-caption);
  &:where(.blockquote-quote), &:where(.blockquote-card) {
    --blockquote-background: transparent;
    --blockquote-border-color: oklch(from var(--color-caption) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --blockquote-border-color: var(--color-caption-bd);
  }
}
.blockquote-caution {
  --blockquote-background: oklch(from var(--color-caution) var(--light-threshold-bg) calc(var(--chorme-bgr) * var(--color-c-factor)) h / var(--opacity-bg));
  --blockquote-background: var(--color-caution-bg);
  --blockquote-border-color: var(--color-caution);
  &:where(.blockquote-quote), &:where(.blockquote-card) {
    --blockquote-background: transparent;
    --blockquote-border-color: oklch(from var(--color-caution) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --blockquote-border-color: var(--color-caution-bd);
  }
}
.blockquote-description {
  --blockquote-background: oklch(from var(--color-description) var(--light-threshold-bg) calc(var(--chorme-bgr) * var(--color-c-factor)) h / var(--opacity-bg));
  --blockquote-background: var(--color-description-bg);
  --blockquote-border-color: var(--color-description);
  &:where(.blockquote-quote), &:where(.blockquote-card) {
    --blockquote-background: transparent;
    --blockquote-border-color: oklch(from var(--color-description) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --blockquote-border-color: var(--color-description-bd);
  }
}
.blockquote-error {
  --blockquote-background: oklch(from var(--color-error) var(--light-threshold-bg) calc(var(--chorme-bgr) * var(--color-c-factor)) h / var(--opacity-bg));
  --blockquote-background: var(--color-error-bg);
  --blockquote-border-color: var(--color-error);
  &:where(.blockquote-quote), &:where(.blockquote-card) {
    --blockquote-background: transparent;
    --blockquote-border-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --blockquote-border-color: var(--color-error-bd);
  }
}
.blockquote-highlight {
  --blockquote-background: oklch(from var(--color-highlight) var(--light-threshold-bg) calc(var(--chorme-bgr) * var(--color-c-factor)) h / var(--opacity-bg));
  --blockquote-background: var(--color-highlight-bg);
  --blockquote-border-color: var(--color-highlight);
  &:where(.blockquote-quote), &:where(.blockquote-card) {
    --blockquote-background: transparent;
    --blockquote-border-color: oklch(from var(--color-highlight) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --blockquote-border-color: var(--color-highlight-bd);
  }
}
.blockquote-info {
  --blockquote-background: oklch(from var(--color-info) var(--light-threshold-bg) calc(var(--chorme-bgr) * var(--color-c-factor)) h / var(--opacity-bg));
  --blockquote-background: var(--color-info-bg);
  --blockquote-border-color: var(--color-info);
  &:where(.blockquote-quote), &:where(.blockquote-card) {
    --blockquote-background: transparent;
    --blockquote-border-color: oklch(from var(--color-info) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --blockquote-border-color: var(--color-info-bd);
  }
}
.blockquote-ink {
  --blockquote-background: oklch(from var(--color-ink) var(--light-threshold-bg) calc(var(--chorme-bgr) * var(--color-c-factor)) h / var(--opacity-bg));
  --blockquote-background: var(--color-ink-bg);
  --blockquote-border-color: var(--color-ink);
  &:where(.blockquote-quote), &:where(.blockquote-card) {
    --blockquote-background: transparent;
    --blockquote-border-color: oklch(from var(--color-ink) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --blockquote-border-color: var(--color-ink-bd);
  }
}
.blockquote-placeholder {
  --blockquote-background: oklch(from var(--color-placeholder) var(--light-threshold-bg) calc(var(--chorme-bgr) * var(--color-c-factor)) h / var(--opacity-bg));
  --blockquote-background: var(--color-placeholder-bg);
  --blockquote-border-color: var(--color-placeholder);
  &:where(.blockquote-quote), &:where(.blockquote-card) {
    --blockquote-background: transparent;
    --blockquote-border-color: oklch(from var(--color-placeholder) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --blockquote-border-color: var(--color-placeholder-bd);
  }
}
.blockquote-primary {
  --blockquote-background: oklch(from var(--color-primary) var(--light-threshold-bg) calc(var(--chorme-bgr) * var(--color-c-factor)) h / var(--opacity-bg));
  --blockquote-background: var(--color-primary-bg);
  --blockquote-border-color: var(--color-primary);
  &:where(.blockquote-quote), &:where(.blockquote-card) {
    --blockquote-background: transparent;
    --blockquote-border-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --blockquote-border-color: var(--color-primary-bd);
  }
}
.blockquote-secondary {
  --blockquote-background: oklch(from var(--color-secondary) var(--light-threshold-bg) calc(var(--chorme-bgr) * var(--color-c-factor)) h / var(--opacity-bg));
  --blockquote-background: var(--color-secondary-bg);
  --blockquote-border-color: var(--color-secondary);
  &:where(.blockquote-quote), &:where(.blockquote-card) {
    --blockquote-background: transparent;
    --blockquote-border-color: oklch(from var(--color-secondary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --blockquote-border-color: var(--color-secondary-bd);
  }
}
.blockquote-success {
  --blockquote-background: oklch(from var(--color-success) var(--light-threshold-bg) calc(var(--chorme-bgr) * var(--color-c-factor)) h / var(--opacity-bg));
  --blockquote-background: var(--color-success-bg);
  --blockquote-border-color: var(--color-success);
  &:where(.blockquote-quote), &:where(.blockquote-card) {
    --blockquote-background: transparent;
    --blockquote-border-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --blockquote-border-color: var(--color-success-bd);
  }
}
.blockquote-tertiary {
  --blockquote-background: oklch(from var(--color-tertiary) var(--light-threshold-bg) calc(var(--chorme-bgr) * var(--color-c-factor)) h / var(--opacity-bg));
  --blockquote-background: var(--color-tertiary-bg);
  --blockquote-border-color: var(--color-tertiary);
  &:where(.blockquote-quote), &:where(.blockquote-card) {
    --blockquote-background: transparent;
    --blockquote-border-color: oklch(from var(--color-tertiary) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --blockquote-border-color: var(--color-tertiary-bd);
  }
}
.blockquote-title {
  --blockquote-background: oklch(from var(--color-title) var(--light-threshold-bg) calc(var(--chorme-bgr) * var(--color-c-factor)) h / var(--opacity-bg));
  --blockquote-background: var(--color-title-bg);
  --blockquote-border-color: var(--color-title);
  &:where(.blockquote-quote), &:where(.blockquote-card) {
    --blockquote-background: transparent;
    --blockquote-border-color: oklch(from var(--color-title) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --blockquote-border-color: var(--color-title-bd);
  }
}
.blockquote-warning {
  --blockquote-background: oklch(from var(--color-warning) var(--light-threshold-bg) calc(var(--chorme-bgr) * var(--color-c-factor)) h / var(--opacity-bg));
  --blockquote-background: var(--color-warning-bg);
  --blockquote-border-color: var(--color-warning);
  &:where(.blockquote-quote), &:where(.blockquote-card) {
    --blockquote-background: transparent;
    --blockquote-border-color: oklch(from var(--color-warning) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
    --blockquote-border-color: var(--color-warning-bd);
  }
}
.btn-ghost {
  :where(&) {
    --btn-color: var(--color-title);
    --btn-background: transparent;
    --btn-border-width: 0;
    --btn-outline-color: var(--color-title-outline);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-title-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: var(--color-title-bg-active);
    }
  }
}
.btn-ghost-green-200 {
  --btn-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-background: transparent;
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-green-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-green-200) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  }
}
.btn-ghost-green-500 {
  --btn-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-background: transparent;
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-green-500) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  }
}
.btn-ghost-green-800 {
  --btn-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-background: transparent;
  --btn-border-width: 0;
  --custom-outline-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-green-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-green-800) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  }
}
.btn-link {
  --btn-border-width: 0;
  --btn-background: transparent;
  --btn-padding-x: 0;
  text-decoration: underline;
  &:where(:not([disabled]):hover) {
    --btn-background: transparent;
  }
  &:where(:not([disabled]):active) {
    --btn-background: transparent;
  }
}
.btn-outline {
  :where(&) {
    --btn-color: var(--color-title);
    --btn-background: var(--color-title-surface);
    --btn-border-color: var(--color-title);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-title-bg-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: var(--color-title-bg-active);
    }
    &:where(:not([disabled]):focus-visible) {
      --btn-outline-color: var(--color-title-outline);
    }
  }
}
.btn-outline-\[\#ff0000\] {
  --btn-color: oklch(from #ff0000 clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-background: oklch(from #ff0000 var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-border-color: oklch(from #ff0000 min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from #ff0000 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from #ff0000 var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  }
}
.btn-outline-\[blue\] {
  --btn-color: oklch(from blue clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-background: oklch(from blue var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-border-color: oklch(from blue min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from blue var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from blue var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  }
}
.btn-outline-green-200 {
  --btn-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-background: oklch(from var(--color-green-200) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-border-color: oklch(from var(--color-green-200) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-green-200) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-green-200) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  }
}
.btn-outline-green-500 {
  --btn-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-background: oklch(from var(--color-green-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-border-color: oklch(from var(--color-green-500) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-green-500) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  }
}
.btn-outline-green-800 {
  --btn-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --btn-background: oklch(from var(--color-green-800) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --btn-border-color: oklch(from var(--color-green-800) min(l, var(--light-threshold-fg)) calc(c * var(--color-c-factor)) h);
  --custom-outline-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(:not([disabled]):hover) {
    --btn-background: oklch(from var(--color-green-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
  &:where(:not([disabled]):active) {
    --btn-background: oklch(from var(--color-green-800) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  }
}
.btn-solid {
  :where(&) {
    --btn-color: var(--color-title-contrast);
    --btn-background: var(--color-title);
    --btn-border-width: 0;
    &:where(:not([disabled]):hover) {
      --btn-background: var(--color-title-hover);
    }
    &:where(:not([disabled]):active) {
      --btn-background: var(--color-title-active);
    }
    &:where(:focus-visible) {
      --btn-outline-color: var(--color-title-outline);
    }
  }
}
.btn-subtle {
  :where(&) {
    --btn-color: var(--color-title);
    --btn-background: var(--color-title-bg-hover);
    --btn-border-width: 0;
    --btn-tmp-background: var(--color-title-bg-active);
    &:where(:not([disabled]):hover) {
      --btn-background: var(--btn-tmp-background);
    }
    &:where(:not([disabled]):active) {
      --btn-background: oklch(from var(--btn-tmp-background) calc(l - 0.04) c h);
    }
  }
}
.bubble-subtle-blue-100 {
  --bubble-border-color: transparent;
  --bubble-background: oklch(from var(--color-blue-100) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --bubble-color: oklch(from var(--color-blue-100) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bubble-tmp-background: oklch(from var(--color-blue-100) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  &:where(.dark, .dark *) {
    --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
  }
  @media (prefers-color-scheme: dark) {
    --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
  }
}
.bubble-subtle-blue-500 {
  --bubble-border-color: transparent;
  --bubble-background: oklch(from var(--color-blue-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --bubble-color: oklch(from var(--color-blue-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bubble-tmp-background: oklch(from var(--color-blue-500) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  &:where(.dark, .dark *) {
    --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
  }
  @media (prefers-color-scheme: dark) {
    --bubble-background: linear-gradient(var(--bubble-tmp-background), var(--bubble-tmp-background)), var(--color-stage);
  }
}
.buoy-muted-error {
  --buoy-color-label: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --buoy-color-label: var(--color-error-fg);
  --buoy-border-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --buoy-border-color: var(--color-error-bd);
  --buoy-background-label: -oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --buoy-background-label: var(--color-error-surface);
}
.buoy-muted-primary {
  --buoy-color-label: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --buoy-color-label: var(--color-primary-fg);
  --buoy-border-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --buoy-border-color: var(--color-primary-bd);
  --buoy-background-label: -oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --buoy-background-label: var(--color-primary-surface);
}
.buoy-muted-success {
  --buoy-color-label: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --buoy-color-label: var(--color-success-fg);
  --buoy-border-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --buoy-border-color: var(--color-success-bd);
  --buoy-background-label: -oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --buoy-background-label: var(--color-success-surface);
}
.flag-lg {
  &.flag-triangle {
    --flag-lh-offset: 10px;
    --flag-height: 62px;
  }
  &.flag-circle {
    --flag-height: 62px;
  }
  &.flag-horn {
    --flag-height: 36px;
  }
  &.flag-ribbon {
    --flag-height: 120px;
  }
  &.flag-diamond {
    --flag-height: 36px;
  }
}
.kbd-caption {
  --kbd-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --kbd-color: var(--color-caption-fg);
  --kbd-border-color: oklch(from var(--color-caption) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --kbd-border-color: var(--color-caption-bd);
  --kbd-background: oklch(from var(--color-caption) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --kbd-background: var(--color-caption-bg);
}
.kbd-caution {
  --kbd-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --kbd-color: var(--color-caution-fg);
  --kbd-border-color: oklch(from var(--color-caution) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --kbd-border-color: var(--color-caution-bd);
  --kbd-background: oklch(from var(--color-caution) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --kbd-background: var(--color-caution-bg);
}
.kbd-description {
  --kbd-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --kbd-color: var(--color-description-fg);
  --kbd-border-color: oklch(from var(--color-description) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --kbd-border-color: var(--color-description-bd);
  --kbd-background: oklch(from var(--color-description) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --kbd-background: var(--color-description-bg);
}
.kbd-error {
  --kbd-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --kbd-color: var(--color-error-fg);
  --kbd-border-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --kbd-border-color: var(--color-error-bd);
  --kbd-background: oklch(from var(--color-error) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --kbd-background: var(--color-error-bg);
}
.kbd-highlight {
  --kbd-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --kbd-color: var(--color-highlight-fg);
  --kbd-border-color: oklch(from var(--color-highlight) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --kbd-border-color: var(--color-highlight-bd);
  --kbd-background: oklch(from var(--color-highlight) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --kbd-background: var(--color-highlight-bg);
}
.kbd-info {
  --kbd-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --kbd-color: var(--color-info-fg);
  --kbd-border-color: oklch(from var(--color-info) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --kbd-border-color: var(--color-info-bd);
  --kbd-background: oklch(from var(--color-info) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --kbd-background: var(--color-info-bg);
}
.kbd-ink {
  --kbd-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --kbd-color: var(--color-ink-fg);
  --kbd-border-color: oklch(from var(--color-ink) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --kbd-border-color: var(--color-ink-bd);
  --kbd-background: oklch(from var(--color-ink) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --kbd-background: var(--color-ink-bg);
}
.kbd-placeholder {
  --kbd-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --kbd-color: var(--color-placeholder-fg);
  --kbd-border-color: oklch(from var(--color-placeholder) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --kbd-border-color: var(--color-placeholder-bd);
  --kbd-background: oklch(from var(--color-placeholder) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --kbd-background: var(--color-placeholder-bg);
}
.kbd-primary {
  --kbd-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --kbd-color: var(--color-primary-fg);
  --kbd-border-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --kbd-border-color: var(--color-primary-bd);
  --kbd-background: oklch(from var(--color-primary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --kbd-background: var(--color-primary-bg);
}
.kbd-secondary {
  --kbd-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --kbd-color: var(--color-secondary-fg);
  --kbd-border-color: oklch(from var(--color-secondary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --kbd-border-color: var(--color-secondary-bd);
  --kbd-background: oklch(from var(--color-secondary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --kbd-background: var(--color-secondary-bg);
}
.kbd-success {
  --kbd-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --kbd-color: var(--color-success-fg);
  --kbd-border-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --kbd-border-color: var(--color-success-bd);
  --kbd-background: oklch(from var(--color-success) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --kbd-background: var(--color-success-bg);
}
.kbd-tertiary {
  --kbd-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --kbd-color: var(--color-tertiary-fg);
  --kbd-border-color: oklch(from var(--color-tertiary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --kbd-border-color: var(--color-tertiary-bd);
  --kbd-background: oklch(from var(--color-tertiary) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --kbd-background: var(--color-tertiary-bg);
}
.kbd-title {
  --kbd-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --kbd-color: var(--color-title-fg);
  --kbd-border-color: oklch(from var(--color-title) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --kbd-border-color: var(--color-title-bd);
  --kbd-background: oklch(from var(--color-title) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --kbd-background: var(--color-title-bg);
}
.kbd-warning {
  --kbd-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --kbd-color: var(--color-warning-fg);
  --kbd-border-color: oklch(from var(--color-warning) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --kbd-border-color: var(--color-warning-bd);
  --kbd-background: oklch(from var(--color-warning) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --kbd-background: var(--color-warning-bg);
}
.rank-muted {
  :where(&) {
    --rank-background: var(--color-description-surface);
    --rank-color: var(--color-description);
    --rank-border-color: var(--color-description-bd);
    --rank-border-width: 1px;
    --rank-font-size: max(0.75rem, 12px);
    --rank-font-weight: normal;
  }
}
.rank-outline {
  :where(&) {
    --rank-background: var(--color-description-surface);
    --rank-color: var(--color-description);
    --rank-border-color: var(--color-description);
    --rank-border-width: 1px;
    --rank-font-size: max(0.75rem, 12px);
    --rank-font-weight: normal;
  }
}
.rank-subtle-error {
  --rank-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --rank-background: var(--color-error-bg-hover);
  --rank-color: oklch(from var(--color-error) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --rank-color: var(--color-error-body);
  --rank-font-weight: normal;
  --rank-font-size: max(0.75rem, 12px);
}
.rank-subtle-primary {
  --rank-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --rank-background: var(--color-primary-bg-hover);
  --rank-color: oklch(from var(--color-primary) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --rank-color: var(--color-primary-body);
  --rank-font-weight: normal;
  --rank-font-size: max(0.75rem, 12px);
}
.rank-subtle-success {
  --rank-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --rank-background: var(--color-success-bg-hover);
  --rank-color: oklch(from var(--color-success) clamp(var(--light-threshold-body) * var(--scheme-factor-2), l, var(--light-threshold-body) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --rank-color: var(--color-success-body);
  --rank-font-weight: normal;
  --rank-font-size: max(0.75rem, 12px);
}
.segment-dark {
  :where(&) {
    --segment-item-border-color-selected: transparent;
    &:where(.segment-inverted, .segment-flush) {
      --segment-item-color-selected: var(--color-title-contrast);
      --segment-item-background-selected: var(--color-title);
    }
    &:where(:not(.segment-inverted, .segment-flush)) {
      --segment-background: var(--color-title);
      --segment-item-color: var(--color-title-contrast);
      --segment-item-background-hover: var(--color-title-hover);
    }
  }
}
.swatch-blue-600 {
  --swatch-color: var(--color-blue-600);
  --swatch-border-color: oklch(from var(--color-blue-600) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color-hover: oklch(from var(--color-blue-600) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(input) {
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: var(--color-title-bd-hover);
  }
  &:where(.swatch-outline) {
    --swatch-border-color: var(--swatch-color);
  }
}
.swatch-green-200 {
  --swatch-color: var(--color-green-200);
  --swatch-border-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color-hover: oklch(from var(--color-green-200) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(input) {
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: var(--color-title-bd-hover);
  }
  &:where(.swatch-outline) {
    --swatch-border-color: var(--swatch-color);
  }
}
.swatch-green-600 {
  --swatch-color: var(--color-green-600);
  --swatch-border-color: oklch(from var(--color-green-600) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color-hover: oklch(from var(--color-green-600) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(input) {
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: var(--color-title-bd-hover);
  }
  &:where(.swatch-outline) {
    --swatch-border-color: var(--swatch-color);
  }
}
.swatch-outline {
  :where(&) {
    &:where(:not([type=color])) {
      --swatch-border-width: 2px;
      --swatch-border-color: var(--swatch-color);
      --swatch-border-color-hover: oklch(from var(--swatch-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
    }
    &:where([type=color]) {
      --input-border-color: currentColor;
      --input-border-color-hover: currentColor;
      --input-border-width: 2px;
    }
  }
}
.swatch-purple-600 {
  --swatch-color: var(--color-purple-600);
  --swatch-border-color: oklch(from var(--color-purple-600) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color-hover: oklch(from var(--color-purple-600) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(input) {
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: var(--color-title-bd-hover);
  }
  &:where(.swatch-outline) {
    --swatch-border-color: var(--swatch-color);
  }
}
.swatch-red-600 {
  --swatch-color: var(--color-red-600);
  --swatch-border-color: oklch(from var(--color-red-600) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --swatch-border-color-hover: oklch(from var(--color-red-600) clamp(var(--light-threshold-bd-hover), l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(input) {
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: var(--color-title-bd-hover);
  }
  &:where(.swatch-outline) {
    --swatch-border-color: var(--swatch-color);
  }
}
.tag-plain-error {
  --tag-border-width: 0;
  --tag-padding-x: 0;
  --tag-background: transparent;
  --tag-background-hover: transparent;
  --tag-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-error-fg);
}
.tag-plain-primary {
  --tag-border-width: 0;
  --tag-padding-x: 0;
  --tag-background: transparent;
  --tag-background-hover: transparent;
  --tag-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-primary-fg);
}
.tag-plain-success {
  --tag-border-width: 0;
  --tag-padding-x: 0;
  --tag-background: transparent;
  --tag-background-hover: transparent;
  --tag-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-success-fg);
}
.badge-muted-\[\#ff0000\] {
  --badge-background: oklch(from #ff0000 var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --badge-color: oklch(from #ff0000 clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: oklch(from #ff0000 min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-*-bd);
  border: 1px solid var(--badge-border-color);
}
.badge-muted-black {
  --badge-background: oklch(from var(--color-black) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --badge-color: oklch(from var(--color-black) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: oklch(from var(--color-black) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-*-bd);
  border: 1px solid var(--badge-border-color);
}
.badge-muted-green-500 {
  --badge-background: oklch(from var(--color-green-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --badge-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: oklch(from var(--color-green-500) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-*-bd);
  border: 1px solid var(--badge-border-color);
}
.badge-muted-white {
  --badge-background: oklch(from var(--color-white) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --badge-color: oklch(from var(--color-white) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: oklch(from var(--color-white) min(l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-*-bd);
  border: 1px solid var(--badge-border-color);
}
.badge-outline-caption {
  --badge-background: transparent;
  --badge-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-caption-fg);
  --badge-border-color: var(--color-caption);
  border: 1px solid var(--badge-border-color);
}
.badge-outline-caution {
  --badge-background: transparent;
  --badge-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-caution-fg);
  --badge-border-color: var(--color-caution);
  border: 1px solid var(--badge-border-color);
}
.badge-outline-description {
  --badge-background: transparent;
  --badge-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-description-fg);
  --badge-border-color: var(--color-description);
  border: 1px solid var(--badge-border-color);
}
.badge-outline-error {
  --badge-background: transparent;
  --badge-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-error-fg);
  --badge-border-color: var(--color-error);
  border: 1px solid var(--badge-border-color);
}
.badge-outline-highlight {
  --badge-background: transparent;
  --badge-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-highlight-fg);
  --badge-border-color: var(--color-highlight);
  border: 1px solid var(--badge-border-color);
}
.badge-outline-info {
  --badge-background: transparent;
  --badge-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-info-fg);
  --badge-border-color: var(--color-info);
  border: 1px solid var(--badge-border-color);
}
.badge-outline-ink {
  --badge-background: transparent;
  --badge-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-ink-fg);
  --badge-border-color: var(--color-ink);
  border: 1px solid var(--badge-border-color);
}
.badge-outline-placeholder {
  --badge-background: transparent;
  --badge-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-placeholder-fg);
  --badge-border-color: var(--color-placeholder);
  border: 1px solid var(--badge-border-color);
}
.badge-outline-primary {
  --badge-background: transparent;
  --badge-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-primary-fg);
  --badge-border-color: var(--color-primary);
  border: 1px solid var(--badge-border-color);
}
.badge-outline-secondary {
  --badge-background: transparent;
  --badge-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-secondary-fg);
  --badge-border-color: var(--color-secondary);
  border: 1px solid var(--badge-border-color);
}
.badge-outline-success {
  --badge-background: transparent;
  --badge-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-success-fg);
  --badge-border-color: var(--color-success);
  border: 1px solid var(--badge-border-color);
}
.badge-outline-tertiary {
  --badge-background: transparent;
  --badge-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-tertiary-fg);
  --badge-border-color: var(--color-tertiary);
  border: 1px solid var(--badge-border-color);
}
.badge-outline-title {
  --badge-background: transparent;
  --badge-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-title-fg);
  --badge-border-color: var(--color-title);
  border: 1px solid var(--badge-border-color);
}
.badge-outline-warning {
  --badge-background: transparent;
  --badge-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-warning-fg);
  --badge-border-color: var(--color-warning);
  border: 1px solid var(--badge-border-color);
}
.bookmark-\[\#ff0000\] {
  --bookmark-color-selected: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(.bookmark-inverted) {
    --bookmark-color-selected: oklch(from #ff0000 clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bookmark-color-hover: #ff0000;
    --bookmark-item-background-selected: #ff0000;
    --bookmark-shadow: #ff0000;
  }
}
.bookmark-green-100 {
  --bookmark-color-selected: oklch(from var(--color-green-100) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(.bookmark-inverted) {
    --bookmark-color-selected: oklch(from var(--color-green-100) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bookmark-color-hover: var(--color-green-100);
    --bookmark-item-background-selected: var(--color-green-100);
    --bookmark-shadow: var(--color-green-100);
  }
}
.bookmark-green-500 {
  --bookmark-color-selected: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(.bookmark-inverted) {
    --bookmark-color-selected: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bookmark-color-hover: var(--color-green-500);
    --bookmark-item-background-selected: var(--color-green-500);
    --bookmark-shadow: var(--color-green-500);
  }
}
.bookmark-green-800 {
  --bookmark-color-selected: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  &:where(.bookmark-inverted) {
    --bookmark-color-selected: oklch(from var(--color-green-800) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
    --bookmark-color-hover: var(--color-green-800);
    --bookmark-item-background-selected: var(--color-green-800);
    --bookmark-shadow: var(--color-green-800);
  }
}
.buoy-outline-error {
  --buoy-color-label: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --buoy-color-label: var(--color-error-fg);
  --buoy-border-color: var(--color-error);
  --buoy-background-label: -oklch(from var(--color-error) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --buoy-background-label: var(--color-error-surface);
}
.buoy-outline-primary {
  --buoy-color-label: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --buoy-color-label: var(--color-primary-fg);
  --buoy-border-color: var(--color-primary);
  --buoy-background-label: -oklch(from var(--color-primary) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --buoy-background-label: var(--color-primary-surface);
}
.buoy-outline-success {
  --buoy-color-label: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --buoy-color-label: var(--color-success-fg);
  --buoy-border-color: var(--color-success);
  --buoy-background-label: -oklch(from var(--color-success) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
  --buoy-background-label: var(--color-success-surface);
}
.check-4 {
  --check-input-size: 12px;
  --check-input-size-in: 6px;
  --check-border-radius: var(--spacing);
  &:where(.check-subtle, .check-ghost, .check-outline, .check-muted, .check-tick) {
    --check-font-size: var(--text-3xs);
    --check-height: calc(var(--spacing)*4);
  }
}
.check-5 {
  --check-input-size: 14px;
  --check-input-size-in: 6px;
  --check-border-radius: var(--spacing);
  &:where(.check-subtle, .check-ghost, .check-outline, .check-muted, .check-tick) {
    --check-font-size: var(--text-2xs);
    --check-height: calc(var(--spacing)*5);
  }
}
.check-6 {
  --check-input-size: 16px;
  --check-input-size-in: 8px;
  --check-border-radius: var(--spacing);
  &:where(.check-subtle, .check-ghost, .check-outline, .check-muted, .check-tick) {
    --check-font-size: max(0.75rem, 12px);
    --check-height: calc(var(--spacing)*6);
  }
}
.entry-muted {
  --entry-padding-x: calc(var(--entry-height)/3);
  --entry-border-color: var(--color-title-bd);
  --entry-border-width: 1px;
  &:where(.entry-multiline) {
    --entry-padding-x: 1em;
  }
  border: var(--entry-border-width) solid var(--entry-border-color);
}
.rank-solid-error {
  --rank-background: var(--color-error);
  --rank-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --rank-color: var(--color-error-contrast);
  --rank-font-weight: normal;
  --rank-font-size: max(0.75rem, 12px);
}
.rank-solid-primary {
  --rank-background: var(--color-primary);
  --rank-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --rank-color: var(--color-primary-contrast);
  --rank-font-weight: normal;
  --rank-font-size: max(0.75rem, 12px);
}
.rank-solid-success {
  --rank-background: var(--color-success);
  --rank-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --rank-color: var(--color-success-contrast);
  --rank-font-weight: normal;
  --rank-font-size: max(0.75rem, 12px);
}
.rank-solid-warning {
  --rank-background: var(--color-warning);
  --rank-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --rank-color: var(--color-warning-contrast);
  --rank-font-weight: normal;
  --rank-font-size: max(0.75rem, 12px);
}
.shell-muted-blue-200 {
  --shell-border-color: oklch(from var(--color-blue-200) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color-hover: oklch(from var(--color-blue-200) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color-focus: var(--shell-border-color-hover);
  --shell-color: oklch(from var(--color-blue-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-blue-200) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-muted-blue-500 {
  --shell-border-color: oklch(from var(--color-blue-500) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color-hover: oklch(from var(--color-blue-500) min(l, var(--light-threshold-bd-hover) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --shell-border-color-focus: var(--shell-border-color-hover);
  --shell-color: oklch(from var(--color-blue-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  input:where([readonly]) {
    --input-color: oklch(from var(--color-blue-500) calc(l* var(--light-readonly)) calc(c * 0.8) h);
  }
}
.shell-subtle {
  --shell-background: var(--color-title-bg-hover);
  --shell-background-invalid: var(--color-error-bg-hover);
  --shell-border-color: transparent;
  --shell-border-hover: var(--color-title-bd-hover);
  --shell-border-focus: var(--color-primary);
}
.swatch-7 {
  --swatch-font-size: max(0.75rem, 12px);
  --swatch-height: calc(var(--spacing)*7);
  --swatch-padding: 3px;
  --input-row-height: calc(var(--spacing)*7);
  --input-padding-x: 3px;
}
.switch-caption {
  --switch-indeterminate-bg: oklch(from var(--color-caption) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --switch-indeterminate-bg: var(--color-caption-bd);
  --switch-background-checked: var(--color-caption);
  --switch-color-checked: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --switch-color-checked: var(--color-caption-contrast);
}
.switch-caution {
  --switch-indeterminate-bg: oklch(from var(--color-caution) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --switch-indeterminate-bg: var(--color-caution-bd);
  --switch-background-checked: var(--color-caution);
  --switch-color-checked: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --switch-color-checked: var(--color-caution-contrast);
}
.switch-description {
  --switch-indeterminate-bg: oklch(from var(--color-description) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --switch-indeterminate-bg: var(--color-description-bd);
  --switch-background-checked: var(--color-description);
  --switch-color-checked: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --switch-color-checked: var(--color-description-contrast);
}
.switch-error {
  --switch-indeterminate-bg: oklch(from var(--color-error) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --switch-indeterminate-bg: var(--color-error-bd);
  --switch-background-checked: var(--color-error);
  --switch-color-checked: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --switch-color-checked: var(--color-error-contrast);
}
.switch-highlight {
  --switch-indeterminate-bg: oklch(from var(--color-highlight) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --switch-indeterminate-bg: var(--color-highlight-bd);
  --switch-background-checked: var(--color-highlight);
  --switch-color-checked: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --switch-color-checked: var(--color-highlight-contrast);
}
.switch-info {
  --switch-indeterminate-bg: oklch(from var(--color-info) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --switch-indeterminate-bg: var(--color-info-bd);
  --switch-background-checked: var(--color-info);
  --switch-color-checked: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --switch-color-checked: var(--color-info-contrast);
}
.switch-ink {
  --switch-indeterminate-bg: oklch(from var(--color-ink) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --switch-indeterminate-bg: var(--color-ink-bd);
  --switch-background-checked: var(--color-ink);
  --switch-color-checked: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --switch-color-checked: var(--color-ink-contrast);
}
.switch-placeholder {
  --switch-indeterminate-bg: oklch(from var(--color-placeholder) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --switch-indeterminate-bg: var(--color-placeholder-bd);
  --switch-background-checked: var(--color-placeholder);
  --switch-color-checked: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --switch-color-checked: var(--color-placeholder-contrast);
}
.switch-primary {
  --switch-indeterminate-bg: oklch(from var(--color-primary) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --switch-indeterminate-bg: var(--color-primary-bd);
  --switch-background-checked: var(--color-primary);
  --switch-color-checked: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --switch-color-checked: var(--color-primary-contrast);
}
.switch-secondary {
  --switch-indeterminate-bg: oklch(from var(--color-secondary) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --switch-indeterminate-bg: var(--color-secondary-bd);
  --switch-background-checked: var(--color-secondary);
  --switch-color-checked: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --switch-color-checked: var(--color-secondary-contrast);
}
.switch-success {
  --switch-indeterminate-bg: oklch(from var(--color-success) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --switch-indeterminate-bg: var(--color-success-bd);
  --switch-background-checked: var(--color-success);
  --switch-color-checked: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --switch-color-checked: var(--color-success-contrast);
}
.switch-tertiary {
  --switch-indeterminate-bg: oklch(from var(--color-tertiary) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --switch-indeterminate-bg: var(--color-tertiary-bd);
  --switch-background-checked: var(--color-tertiary);
  --switch-color-checked: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --switch-color-checked: var(--color-tertiary-contrast);
}
.switch-title {
  --switch-indeterminate-bg: oklch(from var(--color-title) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --switch-indeterminate-bg: var(--color-title-bd);
  --switch-background-checked: var(--color-title);
  --switch-color-checked: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --switch-color-checked: var(--color-title-contrast);
}
.switch-warning {
  --switch-indeterminate-bg: oklch(from var(--color-warning) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --switch-indeterminate-bg: var(--color-warning-bd);
  --switch-background-checked: var(--color-warning);
  --switch-color-checked: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --switch-color-checked: var(--color-warning-contrast);
}
.tree-tight {
  --tree-node-padding-x: 0.4em;
  --tree-node-padding-y: 2px;
  --tree-leading: calc(1em * (calc(var(--spacing) * 5)/var(--tree-font-size)));
  --tree-font-size: var(--text-xs);
  --tree-node-border-radius: calc(var(--spacing) * 1);
}
.avatar-muted-green-500 {
  --avatar-border-width: 1px;
  --avatar-background: oklch(from var(--color-green-500) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --avatar-border-color: oklch(from var(--color-green-500) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.avatar-muted-green-800 {
  --avatar-border-width: 1px;
  --avatar-background: oklch(from var(--color-green-800) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  --avatar-border-color: oklch(from var(--color-green-800) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.avatar-subtle-green-500 {
  --avatar-border-width: 0px;
  --avatar-background: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --avatar-border-color: oklch(from var(--color-green-500) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.avatar-subtle-green-800 {
  --avatar-border-width: 0px;
  --avatar-background: oklch(from var(--color-green-800) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --avatar-border-color: oklch(from var(--color-green-800) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  --avatar-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.badge-outline-\[\#ff0000\] {
  --badge-background: transparent;
  --badge-color: oklch(from #ff0000 clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: #ff0000;
  border: 1px solid var(--badge-border-color);
}
.badge-outline-black {
  --badge-background: transparent;
  --badge-color: oklch(from var(--color-black) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-black);
  border: 1px solid var(--badge-border-color);
}
.badge-outline-green-500 {
  --badge-background: transparent;
  --badge-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-green-500);
  border: 1px solid var(--badge-border-color);
}
.badge-outline-white {
  --badge-background: transparent;
  --badge-color: oklch(from var(--color-white) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-border-color: var(--color-white);
  border: 1px solid var(--badge-border-color);
}
.badge-subtle-caption {
  --badge-background: oklch(from var(--color-caption) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --badge-background: var(--color-caption-bg-hover);
  --badge-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-caption-fg);
}
.badge-subtle-caution {
  --badge-background: oklch(from var(--color-caution) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --badge-background: var(--color-caution-bg-hover);
  --badge-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-caution-fg);
}
.badge-subtle-description {
  --badge-background: oklch(from var(--color-description) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --badge-background: var(--color-description-bg-hover);
  --badge-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-description-fg);
}
.badge-subtle-error {
  --badge-background: oklch(from var(--color-error) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --badge-background: var(--color-error-bg-hover);
  --badge-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-error-fg);
}
.badge-subtle-highlight {
  --badge-background: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --badge-background: var(--color-highlight-bg-hover);
  --badge-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-highlight-fg);
}
.badge-subtle-info {
  --badge-background: oklch(from var(--color-info) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --badge-background: var(--color-info-bg-hover);
  --badge-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-info-fg);
}
.badge-subtle-ink {
  --badge-background: oklch(from var(--color-ink) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --badge-background: var(--color-ink-bg-hover);
  --badge-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-ink-fg);
}
.badge-subtle-placeholder {
  --badge-background: oklch(from var(--color-placeholder) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --badge-background: var(--color-placeholder-bg-hover);
  --badge-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-placeholder-fg);
}
.badge-subtle-primary {
  --badge-background: oklch(from var(--color-primary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --badge-background: var(--color-primary-bg-hover);
  --badge-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-primary-fg);
}
.badge-subtle-secondary {
  --badge-background: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --badge-background: var(--color-secondary-bg-hover);
  --badge-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-secondary-fg);
}
.badge-subtle-success {
  --badge-background: oklch(from var(--color-success) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --badge-background: var(--color-success-bg-hover);
  --badge-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-success-fg);
}
.badge-subtle-tertiary {
  --badge-background: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --badge-background: var(--color-tertiary-bg-hover);
  --badge-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-tertiary-fg);
}
.badge-subtle-title {
  --badge-background: oklch(from var(--color-title) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --badge-background: var(--color-title-bg-hover);
  --badge-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-title-fg);
}
.badge-subtle-warning {
  --badge-background: oklch(from var(--color-warning) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --badge-background: var(--color-warning-bg-hover);
  --badge-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --badge-color: var(--color-warning-fg);
}
.blockquote-green-100 {
  --blockquote-background: oklch(from var(--color-green-100) var(--light-threshold-bg) calc(var(--chorme-bgr) * var(--color-c-factor)) h / var(--opacity-bg));
  --blockquote-border-color: var(--color-green-100);
  &:where(.blockquote-quote), &:where(.blockquote-card) {
    --blockquote-background: transparent;
    --blockquote-border-color: oklch(from var(--color-green-100) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  }
}
.blockquote-green-500 {
  --blockquote-background: oklch(from var(--color-green-500) var(--light-threshold-bg) calc(var(--chorme-bgr) * var(--color-c-factor)) h / var(--opacity-bg));
  --blockquote-border-color: var(--color-green-500);
  &:where(.blockquote-quote), &:where(.blockquote-card) {
    --blockquote-background: transparent;
    --blockquote-border-color: oklch(from var(--color-green-500) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  }
}
.blockquote-green-800 {
  --blockquote-background: oklch(from var(--color-green-800) var(--light-threshold-bg) calc(var(--chorme-bgr) * var(--color-c-factor)) h / var(--opacity-bg));
  --blockquote-border-color: var(--color-green-800);
  &:where(.blockquote-quote), &:where(.blockquote-card) {
    --blockquote-background: transparent;
    --blockquote-border-color: oklch(from var(--color-green-800) var(--light-threshold-bd) calc(var(--chorme-bd) * var(--color-c-factor)) h);
  }
}
.bubble-muted-error {
  --bubble-border-color: oklch(from var(--color-error) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --bubble-border-color: var(--color-error-bd);
  --bubble-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bubble-color: var(--color-error-fg);
}
.bubble-muted-primary {
  --bubble-border-color: oklch(from var(--color-primary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --bubble-border-color: var(--color-primary-bd);
  --bubble-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bubble-color: var(--color-primary-fg);
}
.bubble-muted-success {
  --bubble-border-color: oklch(from var(--color-success) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --bubble-border-color: var(--color-success-bd);
  --bubble-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bubble-color: var(--color-success-fg);
}
.bubble-outline-error {
  --bubble-border-color: var(--color-error);
  --bubble-background: oklch(from var(--color-error) var(--light-threshold-surface) calc(min(c, var(--chorme-surface)) * var(--color-c-factor)) h);
  --bubble-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bubble-color: var(--color-error-fg);
}
.bubble-outline-primary {
  --bubble-border-color: var(--color-primary);
  --bubble-background: oklch(from var(--color-primary) var(--light-threshold-surface) calc(min(c, var(--chorme-surface)) * var(--color-c-factor)) h);
  --bubble-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bubble-color: var(--color-primary-fg);
}
.bubble-outline-success {
  --bubble-border-color: var(--color-success);
  --bubble-background: oklch(from var(--color-success) var(--light-threshold-surface) calc(min(c, var(--chorme-surface)) * var(--color-c-factor)) h);
  --bubble-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --bubble-color: var(--color-success-fg);
}
.bubble-subtle {
  :where(&) {
    --bubble-border-color: transparent;
    --bubble-background: var(--color-title-surface);
    &:where(.dark, .dark *) {
      --bubble-background: linear-gradient(var(--color-title-bg), var(--color-title-bg)), var(--color-stage);
    }
    @media (prefers-color-scheme: dark) {
      --bubble-background: linear-gradient(var(--color-title-bg), var(--color-title-bg)), var(--color-stage);
    }
  }
}
.buoy-solid-error {
  --buoy-background-label: var(--color-error);
  --buoy-border-color: var(--buoy-background-label);
  --buoy-color-label: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --buoy-color-label: var(--color-error-contrast);
}
.buoy-solid-primary {
  --buoy-background-label: var(--color-primary);
  --buoy-border-color: var(--buoy-background-label);
  --buoy-color-label: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --buoy-color-label: var(--color-primary-contrast);
}
.buoy-solid-success {
  --buoy-background-label: var(--color-success);
  --buoy-border-color: var(--buoy-background-label);
  --buoy-color-label: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --buoy-color-label: var(--color-success-contrast);
}
.check-7 {
  --check-input-size: 16px;
  --check-input-size-in: 8px;
  &:where(.check-subtle, .check-ghost, .check-outline, .check-muted, .check-tick) {
    --check-font-size: max(0.75rem, 12px);
    --check-height: calc(var(--spacing)*7);
  }
}
.check-14 {
  --check-input-size: 20px;
  --check-input-size-in: 10px;
  &:where(.check-subtle, .check-ghost, .check-outline, .check-muted, .check-tick) {
    --check-font-size: 1rem;
    --check-height: calc(var(--spacing)*14);
  }
}
.check-15 {
  --check-input-size: 20px;
  --check-input-size-in: 10px;
  &:where(.check-subtle, .check-ghost, .check-outline, .check-muted, .check-tick) {
    --check-font-size: 1rem;
    --check-height: calc(var(--spacing)*15);
  }
}
.divider-caption {
  --divider-background: oklch(from var(--color-caption) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --divider-background: var(--color-caption-bd);
  --divider-color: oklch(from var(--color-caption) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --divider-color: var(--color-caption-fg);
}
.divider-caution {
  --divider-background: oklch(from var(--color-caution) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --divider-background: var(--color-caution-bd);
  --divider-color: oklch(from var(--color-caution) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --divider-color: var(--color-caution-fg);
}
.divider-description {
  --divider-background: oklch(from var(--color-description) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --divider-background: var(--color-description-bd);
  --divider-color: oklch(from var(--color-description) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --divider-color: var(--color-description-fg);
}
.divider-error {
  --divider-background: oklch(from var(--color-error) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --divider-background: var(--color-error-bd);
  --divider-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --divider-color: var(--color-error-fg);
}
.divider-highlight {
  --divider-background: oklch(from var(--color-highlight) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --divider-background: var(--color-highlight-bd);
  --divider-color: oklch(from var(--color-highlight) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --divider-color: var(--color-highlight-fg);
}
.divider-info {
  --divider-background: oklch(from var(--color-info) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --divider-background: var(--color-info-bd);
  --divider-color: oklch(from var(--color-info) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --divider-color: var(--color-info-fg);
}
.divider-ink {
  --divider-background: oklch(from var(--color-ink) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --divider-background: var(--color-ink-bd);
  --divider-color: oklch(from var(--color-ink) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --divider-color: var(--color-ink-fg);
}
.divider-placeholder {
  --divider-background: oklch(from var(--color-placeholder) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --divider-background: var(--color-placeholder-bd);
  --divider-color: oklch(from var(--color-placeholder) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --divider-color: var(--color-placeholder-fg);
}
.divider-primary {
  --divider-background: oklch(from var(--color-primary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --divider-background: var(--color-primary-bd);
  --divider-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --divider-color: var(--color-primary-fg);
}
.divider-secondary {
  --divider-background: oklch(from var(--color-secondary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --divider-background: var(--color-secondary-bd);
  --divider-color: oklch(from var(--color-secondary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --divider-color: var(--color-secondary-fg);
}
.divider-success {
  --divider-background: oklch(from var(--color-success) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --divider-background: var(--color-success-bd);
  --divider-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --divider-color: var(--color-success-fg);
}
.divider-tertiary {
  --divider-background: oklch(from var(--color-tertiary) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --divider-background: var(--color-tertiary-bd);
  --divider-color: oklch(from var(--color-tertiary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --divider-color: var(--color-tertiary-fg);
}
.divider-title {
  --divider-background: oklch(from var(--color-title) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --divider-background: var(--color-title-bd);
  --divider-color: oklch(from var(--color-title) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --divider-color: var(--color-title-fg);
}
.divider-warning {
  --divider-background: oklch(from var(--color-warning) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --divider-background: var(--color-warning-bd);
  --divider-color: oklch(from var(--color-warning) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --divider-color: var(--color-warning-fg);
}
.pagination-\[\#ff0000\] {
  --pagination-color-hover: #ff0000;
  --pagination-color-selected: oklch(from #ff0000 clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pagination-background-hover: oklch(from #ff0000 var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  &:where(.pagination-plain) {
    --pagination-background-hover: oklch(from #ff0000 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
}
.pagination-\[blue\] {
  --pagination-color-hover: blue;
  --pagination-color-selected: oklch(from blue clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pagination-background-hover: oklch(from blue var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  &:where(.pagination-plain) {
    --pagination-background-hover: oklch(from blue var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
}
.pagination-green-500 {
  --pagination-color-hover: var(--color-green-500);
  --pagination-color-selected: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pagination-background-hover: oklch(from var(--color-green-500) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  &:where(.pagination-plain) {
    --pagination-background-hover: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
}
.pagination-indigo-500 {
  --pagination-color-hover: var(--color-indigo-500);
  --pagination-color-selected: oklch(from var(--color-indigo-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pagination-background-hover: oklch(from var(--color-indigo-500) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  &:where(.pagination-plain) {
    --pagination-background-hover: oklch(from var(--color-indigo-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  }
}
.progress-\[\#ff0000\] {
  --progress-background: oklch(from #ff0000 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --progress-background-bar: #ff0000;
  --progress-color: oklch(from #ff0000 clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --progress-color-track: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.progress-\[blue\] {
  --progress-background: oklch(from blue var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --progress-background-bar: blue;
  --progress-color: oklch(from blue clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --progress-color-track: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.progress-blue-500 {
  --progress-background: oklch(from var(--color-blue-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --progress-background-bar: var(--color-blue-500);
  --progress-color: oklch(from var(--color-blue-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --progress-color-track: oklch(from var(--color-blue-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.progress-green-500 {
  --progress-background: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --progress-background-bar: var(--color-green-500);
  --progress-color: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --progress-color-track: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.rank-solid {
  :where(&) {
    --rank-background: var(--color-description);
    --rank-color: var(--color-description-contrast);
    --rank-font-size: max(0.75rem, 12px);
    --rank-font-weight: normal;
  }
}
.rank-subtle {
  :where(&) {
    --rank-background: var(--color-description-bg);
    --rank-color: var(--color-description);
    --rank-font-size: max(0.75rem, 12px);
    --rank-font-weight: normal;
  }
}
.shell-outline {
  --shell-border-color: var(--color-title);
  --shell-border-color-hover: var(--color-title);
  --shell-background: var(--color-title-surface);
  --shell-background-hover: var(--color-title-bg-hover);
}
.step-blue-500 {
  --step-color-selected: var(--color-blue-500);
  --step-color-selected-text: oklch(from var(--color-blue-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --step-color-header-selected: oklch(from var(--color-blue-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  &:where(.step-solid) {
    --step-color-selected-text: oklch(from var(--color-blue-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  }
}
.step-solid {
  :where(&) {
    --step-background-selected: var(--step-color-selected);
    --step-background-deselected: var(--step-color-deselected);
    --step-color-selected-text: var(--color-primary-contrast);
    --step-color-deselected-text: var(--color-caption-contrast);
  }
}
.swatch-12 {
  --swatch-height: calc(var(--spacing)*12);
  --input-row-height: calc(var(--spacing)*12);
  --swatch-background-size: 16px;
  --swatch-background-size: 14px;
}
.swatch-14 {
  --swatch-font-size: 1rem;
  --swatch-height: calc(var(--spacing)*14);
  --input-row-height: calc(var(--spacing)*14);
  --swatch-background-size: 16px;
}
.swatch-15 {
  --swatch-font-size: 1rem;
  --swatch-height: calc(var(--spacing)*15);
  --input-row-height: calc(var(--spacing)*15);
  --swatch-background-size: 16px;
}
.switch-rounded {
  --switch-border-radius: var(--spacing);
  --switch-thumb-radius: calc(var(--switch-border-radius)/2);
  &:where(.switch-3xl, .switch-4xl, .switch-5xl) {
    --switch-border-radius: var(--default-border-radius);
    --switch-thumb-radius: calc(var(--switch-border-radius)*0.75);
  }
}
.tag-muted-error {
  --tag-color: oklch(from var(--color-error) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-error-fg);
  --tag-border-color: oklch(from var(--color-error) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: var(--color-error-bd);
}
.tag-muted-primary {
  --tag-color: oklch(from var(--color-primary) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-primary-fg);
  --tag-border-color: oklch(from var(--color-primary) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: var(--color-primary-bd);
}
.tag-muted-success {
  --tag-color: oklch(from var(--color-success) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-color: var(--color-success-fg);
  --tag-border-color: oklch(from var(--color-success) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --tag-border-color: var(--color-success-bd);
}
.tag-plain {
  --tag-border-width: 0;
  --tag-padding-x: 0;
  --tag-background: transparent;
  --tag-background-hover: transparent;
}
.tree-snug {
  --tree-node-padding-x: 0.4em;
  --tree-node-padding-y: 2px;
  --tree-leading: calc(1em * (calc(var(--spacing) * 5)/var(--tree-font-size)));
  --tree-node-border-radius: calc(var(--spacing) * 1);
}
.alarm-caption {
  --alarm-background: var(--color-caption);
  --alarm-color: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --alarm-color: var(--color-caption-contrast);
}
.alarm-caution {
  --alarm-background: var(--color-caution);
  --alarm-color: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --alarm-color: var(--color-caution-contrast);
}
.alarm-description {
  --alarm-background: var(--color-description);
  --alarm-color: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --alarm-color: var(--color-description-contrast);
}
.alarm-error {
  --alarm-background: var(--color-error);
  --alarm-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --alarm-color: var(--color-error-contrast);
}
.alarm-highlight {
  --alarm-background: var(--color-highlight);
  --alarm-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --alarm-color: var(--color-highlight-contrast);
}
.alarm-info {
  --alarm-background: var(--color-info);
  --alarm-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --alarm-color: var(--color-info-contrast);
}
.alarm-ink {
  --alarm-background: var(--color-ink);
  --alarm-color: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --alarm-color: var(--color-ink-contrast);
}
.alarm-placeholder {
  --alarm-background: var(--color-placeholder);
  --alarm-color: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --alarm-color: var(--color-placeholder-contrast);
}
.alarm-primary {
  --alarm-background: var(--color-primary);
  --alarm-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --alarm-color: var(--color-primary-contrast);
}
.alarm-secondary {
  --alarm-background: var(--color-secondary);
  --alarm-color: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --alarm-color: var(--color-secondary-contrast);
}
.alarm-success {
  --alarm-background: var(--color-success);
  --alarm-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --alarm-color: var(--color-success-contrast);
}
.alarm-tertiary {
  --alarm-background: var(--color-tertiary);
  --alarm-color: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --alarm-color: var(--color-tertiary-contrast);
}
.alarm-title {
  --alarm-background: var(--color-title);
  --alarm-color: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --alarm-color: var(--color-title-contrast);
}
.alarm-warning {
  --alarm-background: var(--color-warning);
  --alarm-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --alarm-color: var(--color-warning-contrast);
}
.aura-caption {
  --aura-color: var(--color-caption);
  --aura-track: oklch(from var(--color-caption) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --aura-track: var(--color-caption-bd);
}
.aura-description {
  --aura-color: var(--color-description);
  --aura-track: oklch(from var(--color-description) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --aura-track: var(--color-description-bd);
}
.aura-error {
  --aura-color: var(--color-error);
  --aura-track: oklch(from var(--color-error) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --aura-track: var(--color-error-bd);
}
.aura-mono-error {
  --aura-color: var(--color-error);
  --aura-track: oklch(from var(--color-error) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --aura-track: var(--color-error-bd);
}
.aura-mono-primary {
  --aura-color: var(--color-primary);
  --aura-track: oklch(from var(--color-primary) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --aura-track: var(--color-primary-bd);
}
.aura-primary {
  --aura-color: var(--color-primary);
  --aura-track: oklch(from var(--color-primary) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --aura-track: var(--color-primary-bd);
}
.aura-success {
  --aura-color: var(--color-success);
  --aura-track: oklch(from var(--color-success) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --aura-track: var(--color-success-bd);
}
.aura-title {
  --aura-color: var(--color-title);
  --aura-track: oklch(from var(--color-title) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --aura-track: var(--color-title-bd);
}
.aura-warning {
  --aura-color: var(--color-warning);
  --aura-track: oklch(from var(--color-warning) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --aura-track: var(--color-warning-bd);
}
.avatar-4 {
  --avatar-font-size: var(--text-3xs);
  --avatar-height: calc(var(--spacing)*4);
  --avatar-border-radius: var(--spacing);
}
.avatar-5 {
  --avatar-font-size: var(--text-2xs);
  --avatar-height: calc(var(--spacing)*5);
  --avatar-border-radius: var(--spacing);
}
.avatar-6 {
  --avatar-font-size: max(0.75rem, 12px);
  --avatar-height: calc(var(--spacing)*6);
  --avatar-border-radius: var(--spacing);
}
.avatar-caption {
  --avatar-background: var(--color-caption);
  --avatar-color: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --avatar-color: var(--color-caption-contrast);
}
.avatar-description {
  --avatar-background: var(--color-description);
  --avatar-color: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --avatar-color: var(--color-description-contrast);
}
.avatar-error {
  --avatar-background: var(--color-error);
  --avatar-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --avatar-color: var(--color-error-contrast);
}
.avatar-highlight {
  --avatar-background: var(--color-highlight);
  --avatar-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --avatar-color: var(--color-highlight-contrast);
}
.avatar-info {
  --avatar-background: var(--color-info);
  --avatar-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --avatar-color: var(--color-info-contrast);
}
.avatar-placeholder {
  --avatar-background: var(--color-placeholder);
  --avatar-color: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --avatar-color: var(--color-placeholder-contrast);
}
.avatar-primary {
  --avatar-background: var(--color-primary);
  --avatar-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --avatar-color: var(--color-primary-contrast);
}
.avatar-secondary {
  --avatar-background: var(--color-secondary);
  --avatar-color: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --avatar-color: var(--color-secondary-contrast);
}
.avatar-success {
  --avatar-background: var(--color-success);
  --avatar-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --avatar-color: var(--color-success-contrast);
}
.avatar-tertiary {
  --avatar-background: var(--color-tertiary);
  --avatar-color: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --avatar-color: var(--color-tertiary-contrast);
}
.avatar-title {
  --avatar-background: var(--color-title);
  --avatar-color: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --avatar-color: var(--color-title-contrast);
}
.badge-2xs {
  --badge-height: 14px;
  --badge-font-size: 10px;
  &:empty {
    --badge-height: 6px;
  }
}
.badge-outline {
  :where(&) {
    --badge-color: var(--color-error);
    --badge-background: transparent;
    border: 1px solid var(--badge-border-color);
  }
}
.badge-rounded {
  &:where(.badge-xl) {
    --badge-border-radius: var(--default-border-radius);
  }
  &:where(:not(.badge-xl)) {
    --badge-border-radius: var(--spacing);
  }
  --badge-padding-x: calc(var(--badge-height)/4);
}
.badge-solid-caption {
  --badge-color: oklch(from var(--color-caption) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --badge-color: var(--color-caption-contrast);
  --badge-background: var(--color-caption);
}
.badge-solid-caution {
  --badge-color: oklch(from var(--color-caution) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --badge-color: var(--color-caution-contrast);
  --badge-background: var(--color-caution);
}
.badge-solid-description {
  --badge-color: oklch(from var(--color-description) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --badge-color: var(--color-description-contrast);
  --badge-background: var(--color-description);
}
.badge-solid-error {
  --badge-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --badge-color: var(--color-error-contrast);
  --badge-background: var(--color-error);
}
.badge-solid-highlight {
  --badge-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --badge-color: var(--color-highlight-contrast);
  --badge-background: var(--color-highlight);
}
.badge-solid-info {
  --badge-color: oklch(from var(--color-info) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --badge-color: var(--color-info-contrast);
  --badge-background: var(--color-info);
}
.badge-solid-ink {
  --badge-color: oklch(from var(--color-ink) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --badge-color: var(--color-ink-contrast);
  --badge-background: var(--color-ink);
}
.badge-solid-placeholder {
  --badge-color: oklch(from var(--color-placeholder) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --badge-color: var(--color-placeholder-contrast);
  --badge-background: var(--color-placeholder);
}
.badge-solid-primary {
  --badge-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --badge-color: var(--color-primary-contrast);
  --badge-background: var(--color-primary);
}
.badge-solid-secondary {
  --badge-color: oklch(from var(--color-secondary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --badge-color: var(--color-secondary-contrast);
  --badge-background: var(--color-secondary);
}
.badge-solid-success {
  --badge-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --badge-color: var(--color-success-contrast);
  --badge-background: var(--color-success);
}
.badge-solid-tertiary {
  --badge-color: oklch(from var(--color-tertiary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --badge-color: var(--color-tertiary-contrast);
  --badge-background: var(--color-tertiary);
}
.badge-solid-title {
  --badge-color: oklch(from var(--color-title) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --badge-color: var(--color-title-contrast);
  --badge-background: var(--color-title);
}
.badge-solid-warning {
  --badge-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --badge-color: var(--color-warning-contrast);
  --badge-background: var(--color-warning);
}
.badge-xs {
  --badge-height: 16px;
  --badge-font-size: 10px;
  &:empty {
    --badge-height: 6px;
  }
}
.btn-4 {
  --btn-font-size: var(--text-3xs);
  --btn-height: calc(var(--spacing)*4);
  --btn-border-radius: var(--spacing);
}
.btn-5 {
  --btn-font-size: var(--text-2xs);
  --btn-height: calc(var(--spacing)*5);
  --btn-border-radius: var(--spacing);
}
.btn-6 {
  --btn-font-size: max(0.75rem, 12px);
  --btn-height: calc(var(--spacing)*6);
  --btn-border-radius: var(--spacing);
}
.btns-4 {
  >* {
    --btn-border-radius: var(--spacing);
  }
  >* {
    --btn-font-size: var(--text-3xs);
    --btn-height: calc(var(--spacing)*4);
  }
}
.btns-5 {
  >* {
    --btn-border-radius: var(--spacing);
  }
  >* {
    --btn-font-size: var(--text-2xs);
    --btn-height: calc(var(--spacing)*5);
  }
}
.btns-6 {
  >* {
    --btn-border-radius: var(--spacing);
  }
  >* {
    --btn-font-size: max(0.75rem, 12px);
    --btn-height: calc(var(--spacing)*6);
  }
}
.bubble-solid {
  :where(&) {
    --bubble-border-width: 0;
    --bubble-background: var(--color-title);
    --bubble-color: var(--color-title-contrast);
  }
}
.bubble-solid-error {
  --bubble-background: var(--color-error);
  --bubble-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --bubble-color: var(--color-error-contrast);
}
.bubble-solid-highlight {
  --bubble-background: var(--color-highlight);
  --bubble-color: oklch(from var(--color-highlight) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --bubble-color: var(--color-highlight-contrast);
}
.bubble-solid-primary {
  --bubble-background: var(--color-primary);
  --bubble-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --bubble-color: var(--color-primary-contrast);
}
.bubble-solid-success {
  --bubble-background: var(--color-success);
  --bubble-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --bubble-color: var(--color-success-contrast);
}
.buoy-muted-\[blue\] {
  --buoy-color-label: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --buoy-border-color: oklch(from blue var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --buoy-background-label: -oklch(from blue var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
}
.buoy-muted-green-500 {
  --buoy-color-label: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --buoy-border-color: oklch(from var(--color-green-500) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --buoy-background-label: -oklch(from var(--color-green-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
}
.buoy-outline-\[blue\] {
  --buoy-color-label: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --buoy-border-color: blue;
  --buoy-background-label: -oklch(from blue var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
}
.buoy-outline-green-500 {
  --buoy-color-label: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --buoy-border-color: var(--color-green-500);
  --buoy-background-label: -oklch(from var(--color-green-500) var(--light-threshold-surface) calc(var(--chorme-surface) * var(--color-c-factor)) h / var(--scheme-factor-3));
}
.buoy-solid {
  :where(&) {
    --buoy-background-label: var(--color-description);
    --buoy-border-color: var(--color-description);
    --buoy-color-label: var(--color-description-contrast);
  }
}
.buoy-solid-\[blue\] {
  --buoy-background-label: blue;
  --buoy-border-color: var(--buoy-background-label);
  --buoy-color-label: oklch(from blue clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.buoy-solid-green-200 {
  --buoy-background-label: var(--color-green-200);
  --buoy-border-color: var(--buoy-background-label);
  --buoy-color-label: oklch(from var(--color-green-200) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.buoy-solid-green-500 {
  --buoy-background-label: var(--color-green-500);
  --buoy-border-color: var(--buoy-background-label);
  --buoy-color-label: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.check-8 {
  --check-input-size: 18px;
  --check-input-size-in: 10px;
  &:where(.check-subtle, .check-ghost, .check-outline, .check-muted, .check-tick) {
    --check-height: calc(var(--spacing)*8);
  }
}
.code-solid-error {
  --code-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --code-color: var(--color-error-contrast);
  --code-background: var(--color-error);
}
.code-solid-primary {
  --code-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --code-color: var(--color-primary-contrast);
  --code-background: var(--color-primary);
}
.code-solid-success {
  --code-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --code-color: var(--color-success-contrast);
  --code-background: var(--color-success);
}
.code-solid-warning {
  --code-color: oklch(from var(--color-warning) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --code-color: var(--color-warning-contrast);
  --code-background: var(--color-warning);
}
.flag-error {
  --flag-color: oklch(from var(--color-error-base) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --flag-color: var(--color-error-contrast);
  --flag-background: var(--color-error);
}
.flag-highlight {
  --flag-color: oklch(from var(--color-highlight-base) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --flag-color: var(--color-highlight-contrast);
  --flag-background: var(--color-highlight);
}
.flag-info {
  --flag-color: oklch(from var(--color-info-base) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --flag-color: var(--color-info-contrast);
  --flag-background: var(--color-info);
}
.flag-primary {
  --flag-color: oklch(from var(--color-primary-base) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --flag-color: var(--color-primary-contrast);
  --flag-background: var(--color-primary);
}
.flag-secondary {
  --flag-color: oklch(from var(--color-secondary-base) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --flag-color: var(--color-secondary-contrast);
  --flag-background: var(--color-secondary);
}
.flag-success {
  --flag-color: oklch(from var(--color-success-base) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --flag-color: var(--color-success-contrast);
  --flag-background: var(--color-success);
}
.flag-title {
  --flag-color: oklch(from var(--color-title-base) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --flag-color: var(--color-title-contrast);
  --flag-background: var(--color-title);
}
.input-4 {
  --input-font-size: var(--text-3xs);
  --input-row-height: calc(var(--spacing)*4);
  --input-border-radius: var(--spacing);
}
.input-5 {
  --input-font-size: var(--text-2xs);
  --input-row-height: calc(var(--spacing)*5);
  --input-border-radius: var(--spacing);
}
.input-6 {
  --input-font-size: max(0.75rem, 12px);
  --input-row-height: calc(var(--spacing)*6);
  --input-border-radius: var(--spacing);
}
.kbd-7 {
  --kbd-font-size: max(0.75rem, 12px);
  --kbd-height: calc(var(--spacing)*7);
  --kbd-border-radius: calc(var(--spacing) * 2);
}
.kbd-14 {
  --kbd-font-size: 1rem;
  --kbd-height: calc(var(--spacing)*14);
  --kbd-border-radius: calc(var(--spacing) * 2);
}
.kbd-15 {
  --kbd-font-size: 1rem;
  --kbd-height: calc(var(--spacing)*15);
  --kbd-border-radius: calc(var(--spacing) * 2);
}
.kbd-\[\#ff0000\] {
  --kbd-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --kbd-border-color: oklch(from #ff0000 var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --kbd-background: oklch(from #ff0000 var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
}
.kbd-blue-200 {
  --kbd-color: oklch(from var(--color-blue-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --kbd-border-color: oklch(from var(--color-blue-200) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --kbd-background: oklch(from var(--color-blue-200) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
}
.kbd-blue-500 {
  --kbd-color: oklch(from var(--color-blue-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --kbd-border-color: oklch(from var(--color-blue-500) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --kbd-background: oklch(from var(--color-blue-500) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
}
.lamp-4 {
  --lamp-font-size: max(0.5rem,8px);
  --lamp-height: calc(var(--spacing)*4);
  --lamp-item-height: 1px;
}
.lamp-5 {
  --lamp-font-size: max(0.625rem,10px);
  --lamp-height: calc(var(--spacing)*5);
  --lamp-item-height: 1px;
}
.lamp-6 {
  --lamp-font-size: max(0.625rem,10px);
  --lamp-height: calc(var(--spacing)*6);
  --lamp-item-height: 1px;
}
.lamp-14 {
  --lamp-font-size: 1rem;
  --lamp-height: calc(var(--spacing)*14);
  --lamp-item-height: 4px;
}
.lamp-15 {
  --lamp-font-size: 1rem;
  --lamp-height: calc(var(--spacing)*15);
  --lamp-item-height: 4px;
}
.link-\[\#ff0000\] {
  --link-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --link-hover: oklch(from var(--link-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
  --link-active: oklch(from var(--link-color) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
}
.link-\[blue\] {
  --link-color: oklch(from blue clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --link-hover: oklch(from var(--link-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
  --link-active: oklch(from var(--link-color) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
}
.link-caption {
  --link-color: oklch(from var(--color-caption-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --link-hover: oklch(from var(--link-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
  --link-active: oklch(from var(--link-color) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
}
.link-caution {
  --link-color: oklch(from var(--color-caution-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --link-hover: oklch(from var(--link-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
  --link-active: oklch(from var(--link-color) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
}
.link-description {
  --link-color: oklch(from var(--color-description-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --link-hover: oklch(from var(--link-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
  --link-active: oklch(from var(--link-color) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
}
.link-error {
  --link-color: oklch(from var(--color-error-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --link-hover: oklch(from var(--link-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
  --link-active: oklch(from var(--link-color) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
}
.link-green-200 {
  --link-color: oklch(from var(--color-green-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --link-hover: oklch(from var(--link-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
  --link-active: oklch(from var(--link-color) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
}
.link-green-500 {
  --link-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --link-hover: oklch(from var(--link-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
  --link-active: oklch(from var(--link-color) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
}
.link-green-800 {
  --link-color: oklch(from var(--color-green-800) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --link-hover: oklch(from var(--link-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
  --link-active: oklch(from var(--link-color) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
}
.link-highlight {
  --link-color: oklch(from var(--color-highlight-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --link-hover: oklch(from var(--link-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
  --link-active: oklch(from var(--link-color) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
}
.link-info {
  --link-color: oklch(from var(--color-info-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --link-hover: oklch(from var(--link-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
  --link-active: oklch(from var(--link-color) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
}
.link-ink {
  --link-color: oklch(from var(--color-ink-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --link-hover: oklch(from var(--link-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
  --link-active: oklch(from var(--link-color) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
}
.link-placeholder {
  --link-color: oklch(from var(--color-placeholder-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --link-hover: oklch(from var(--link-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
  --link-active: oklch(from var(--link-color) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
}
.link-primary {
  --link-color: oklch(from var(--color-primary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --link-hover: oklch(from var(--link-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
  --link-active: oklch(from var(--link-color) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
}
.link-secondary {
  --link-color: oklch(from var(--color-secondary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --link-hover: oklch(from var(--link-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
  --link-active: oklch(from var(--link-color) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
}
.link-success {
  --link-color: oklch(from var(--color-success-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --link-hover: oklch(from var(--link-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
  --link-active: oklch(from var(--link-color) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
}
.link-tertiary {
  --link-color: oklch(from var(--color-tertiary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --link-hover: oklch(from var(--link-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
  --link-active: oklch(from var(--link-color) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
}
.link-title {
  --link-color: oklch(from var(--color-title-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --link-hover: oklch(from var(--link-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
  --link-active: oklch(from var(--link-color) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
}
.link-warning {
  --link-color: oklch(from var(--color-warning-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --link-hover: oklch(from var(--link-color) calc(l + (1 - l) * 0.25) calc(c * var(--color-c-factor)) h);
  --link-active: oklch(from var(--link-color) calc(l * 0.9) calc(c * var(--color-c-factor)) h);
}
.pagination-4 {
  --pagination-height: calc(var(--spacing)*4);
  --pagination-font-size: var(--text-2xs);
  &:where(:not(.pagination-square, .pagination-pill, .pagination-fluid)) {
    --pagination-border-radius: var(--spacing);
  }
}
.pagination-5 {
  --pagination-height: calc(var(--spacing)*5);
  --pagination-font-size: var(--text-2xs);
  &:where(:not(.pagination-square, .pagination-pill, .pagination-fluid)) {
    --pagination-border-radius: var(--spacing);
  }
}
.pagination-6 {
  --pagination-height: calc(var(--spacing)*6);
  --pagination-font-size: max(0.75rem, 12px);
  &:where(:not(.pagination-square, .pagination-pill, .pagination-fluid)) {
    --pagination-border-radius: var(--spacing);
  }
}
.pagination-14 {
  --pagination-height: calc(var(--spacing)*14);
  --pagination-font-size: 1rem;
  --pagination-margin-x: 4px;
}
.pagination-15 {
  --pagination-height: calc(var(--spacing)*15);
  --pagination-font-size: 1rem;
  --pagination-margin-x: 8px;
}
.pre-muted-\[\#ff6b6b\] {
  --pre-color: oklch(from #ff6b6b clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --pre-background: oklch(from #ff6b6b var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  border: 1px solid oklch(from #ff6b6b var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
}
.pre-muted-indigo-500 {
  --pre-color: oklch(from var(--color-indigo-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --pre-background: oklch(from var(--color-indigo-500) var(--light-threshold-bg) calc(var(--chorme-bg) * var(--color-c-factor)) h / var(--opacity-bg));
  border: 1px solid oklch(from var(--color-indigo-500) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
}
.pre-outline-\[\#ff6b6b\] {
  --pre-color: #ff6b6b;
  --pre-background: transparent;
  border: 1px solid var(--pre-color);
}
.pre-outline-\[blue\] {
  --pre-color: blue;
  --pre-background: transparent;
  border: 1px solid var(--pre-color);
}
.pre-outline-error {
  --pre-color: var(--color-error);
  --pre-background: transparent;
  border: 1px solid var(--pre-color);
}
.pre-outline-indigo-500 {
  --pre-color: var(--color-indigo-500);
  --pre-background: transparent;
  border: 1px solid var(--pre-color);
}
.pre-outline-info {
  --pre-color: var(--color-info);
  --pre-background: transparent;
  border: 1px solid var(--pre-color);
}
.pre-outline-primary {
  --pre-color: var(--color-primary);
  --pre-background: transparent;
  border: 1px solid var(--pre-color);
}
.pre-outline-success {
  --pre-color: var(--color-success);
  --pre-background: transparent;
  border: 1px solid var(--pre-color);
}
.pre-solid-error {
  --pre-color: oklch(from var(--color-error) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pre-color: var(--color-error-contrast);
  --pre-background: var(--color-error);
}
.pre-solid-primary {
  --pre-color: oklch(from var(--color-primary) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pre-color: var(--color-primary-contrast);
  --pre-background: var(--color-primary);
}
.pre-solid-success {
  --pre-color: oklch(from var(--color-success) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pre-color: var(--color-success-contrast);
  --pre-background: var(--color-success);
}
.rating-caption {
  --rating-item-color: oklch(from var(--color-caption-base) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --rating-item-color: var(--color-caption-bg-active);
  --rating-item-color-checked: var(--color-caption);
}
.rating-caution {
  --rating-item-color: oklch(from var(--color-caution-base) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --rating-item-color: var(--color-caution-bg-active);
  --rating-item-color-checked: var(--color-caution);
}
.rating-description {
  --rating-item-color: oklch(from var(--color-description-base) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --rating-item-color: var(--color-description-bg-active);
  --rating-item-color-checked: var(--color-description);
}
.rating-error {
  --rating-item-color: oklch(from var(--color-error-base) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --rating-item-color: var(--color-error-bg-active);
  --rating-item-color-checked: var(--color-error);
}
.rating-highlight {
  --rating-item-color: oklch(from var(--color-highlight-base) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --rating-item-color: var(--color-highlight-bg-active);
  --rating-item-color-checked: var(--color-highlight);
}
.rating-info {
  --rating-item-color: oklch(from var(--color-info-base) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --rating-item-color: var(--color-info-bg-active);
  --rating-item-color-checked: var(--color-info);
}
.rating-ink {
  --rating-item-color: oklch(from var(--color-ink-base) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --rating-item-color: var(--color-ink-bg-active);
  --rating-item-color-checked: var(--color-ink);
}
.rating-placeholder {
  --rating-item-color: oklch(from var(--color-placeholder-base) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --rating-item-color: var(--color-placeholder-bg-active);
  --rating-item-color-checked: var(--color-placeholder);
}
.rating-primary {
  --rating-item-color: oklch(from var(--color-primary-base) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --rating-item-color: var(--color-primary-bg-active);
  --rating-item-color-checked: var(--color-primary);
}
.rating-secondary {
  --rating-item-color: oklch(from var(--color-secondary-base) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --rating-item-color: var(--color-secondary-bg-active);
  --rating-item-color-checked: var(--color-secondary);
}
.rating-success {
  --rating-item-color: oklch(from var(--color-success-base) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --rating-item-color: var(--color-success-bg-active);
  --rating-item-color-checked: var(--color-success);
}
.rating-tertiary {
  --rating-item-color: oklch(from var(--color-tertiary-base) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --rating-item-color: var(--color-tertiary-bg-active);
  --rating-item-color-checked: var(--color-tertiary);
}
.rating-title {
  --rating-item-color: oklch(from var(--color-title-base) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --rating-item-color: var(--color-title-bg-active);
  --rating-item-color-checked: var(--color-title);
}
.rating-warning {
  --rating-item-color: oklch(from var(--color-warning-base) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --rating-item-color: var(--color-warning-bg-active);
  --rating-item-color-checked: var(--color-warning);
}
.segment-4 {
  --segment-font-size: var(--text-3xs);
  --segment-height: calc(var(--spacing)*4);
  --segment-border-radius: var(--spacing);
}
.segment-5 {
  --segment-font-size: var(--text-2xs);
  --segment-height: calc(var(--spacing)*5);
  --segment-border-radius: var(--spacing);
}
.segment-6 {
  --segment-font-size: max(0.75rem, 12px);
  --segment-height: calc(var(--spacing)*6);
  --segment-border-radius: var(--spacing);
}
.segment-14 {
  --segment-font-size: 1rem;
  --segment-height: calc(var(--spacing)*14);
  --segment-border-width: 6px;
}
.segment-15 {
  --segment-font-size: 1rem;
  --segment-height: calc(var(--spacing)*15);
  --segment-border-width: 6px;
}
.shell-4 {
  --shell-row-height: calc(var(--spacing)*4);
  --shell-font-size: var(--text-3xs);
  --shell-border-radius: var(--spacing);
}
.shell-5 {
  --shell-row-height: calc(var(--spacing)*5);
  --shell-font-size: var(--text-2xs);
  --shell-border-radius: var(--spacing);
}
.shell-6 {
  --shell-font-size: max(0.75rem, 12px);
  --shell-border-radius: var(--spacing);
  --shell-row-height: calc(var(--spacing)*6);
}
.status-ring-black {
  --status-color-dot: var(--color-black);
  &:before {
    background: transparent;
    border: 2px solid var(--status-color-dot);
  }
}
.status-ring-caption {
  --status-color-dot: var(--color-caption);
  &:before {
    background: transparent;
    border: 2px solid var(--status-color-dot);
  }
}
.status-ring-caution {
  --status-color-dot: var(--color-caution);
  &:before {
    background: transparent;
    border: 2px solid var(--status-color-dot);
  }
}
.status-ring-description {
  --status-color-dot: var(--color-description);
  &:before {
    background: transparent;
    border: 2px solid var(--status-color-dot);
  }
}
.status-ring-error {
  --status-color-dot: var(--color-error);
  &:before {
    background: transparent;
    border: 2px solid var(--status-color-dot);
  }
}
.status-ring-info {
  --status-color-dot: var(--color-info);
  &:before {
    background: transparent;
    border: 2px solid var(--status-color-dot);
  }
}
.status-ring-ink {
  --status-color-dot: var(--color-ink);
  &:before {
    background: transparent;
    border: 2px solid var(--status-color-dot);
  }
}
.status-ring-placeholder {
  --status-color-dot: var(--color-placeholder);
  &:before {
    background: transparent;
    border: 2px solid var(--status-color-dot);
  }
}
.status-ring-primary {
  --status-color-dot: var(--color-primary);
  &:before {
    background: transparent;
    border: 2px solid var(--status-color-dot);
  }
}
.status-ring-secondary {
  --status-color-dot: var(--color-secondary);
  &:before {
    background: transparent;
    border: 2px solid var(--status-color-dot);
  }
}
.status-ring-success {
  --status-color-dot: var(--color-success);
  &:before {
    background: transparent;
    border: 2px solid var(--status-color-dot);
  }
}
.status-ring-title {
  --status-color-dot: var(--color-title);
  &:before {
    background: transparent;
    border: 2px solid var(--status-color-dot);
  }
}
.status-ring-warning {
  --status-color-dot: var(--color-warning);
  &:before {
    background: transparent;
    border: 2px solid var(--status-color-dot);
  }
}
.swatch-10 {
  --swatch-height: calc(var(--spacing)*10);
  --input-row-height: calc(var(--spacing)*10);
  --swatch-background-size: 12px;
}
.swatch-11 {
  --swatch-height: calc(var(--spacing)*11);
  --input-row-height: calc(var(--spacing)*11);
  --swatch-background-size: 12px;
}
.swatch-13 {
  --swatch-height: calc(var(--spacing)*13);
  --input-row-height: calc(var(--spacing)*13);
  --swatch-background-size: 14px;
}
.switch-2xl {
  --switch-height: 26px;
  --switch-font-size: 0.875rem;
  --switch-border-width: 3px;
}
.switch-3xl {
  --switch-height: 28px;
  --switch-font-size: 0.875rem;
  --switch-border-width: 3px;
}
.switch-4xl {
  --switch-height: 30px;
  --switch-font-size: 1rem;
  --switch-border-width: 4px;
}
.switch-5xl {
  --switch-height: 32px;
  --switch-font-size: 1rem;
  --switch-border-width: 4px;
}
.switch-\[\#ff0000\] {
  --switch-indeterminate-bg: oklch(from #ff0000 clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --switch-background-checked: #ff0000;
  --switch-color-checked: oklch(from #ff0000 clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.switch-blue-200 {
  --switch-indeterminate-bg: oklch(from var(--color-blue-200) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --switch-background-checked: var(--color-blue-200);
  --switch-color-checked: oklch(from var(--color-blue-200) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.switch-blue-500 {
  --switch-indeterminate-bg: oklch(from var(--color-blue-500) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
  --switch-background-checked: var(--color-blue-500);
  --switch-color-checked: oklch(from var(--color-blue-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.tag-4 {
  --tag-font-size: var(--text-3xs);
  --tag-height: calc(var(--spacing)*4);
  --tag-border-radius: var(--spacing);
}
.tag-5 {
  --tag-font-size: var(--text-2xs);
  --tag-height: calc(var(--spacing)*5);
  --tag-border-radius: var(--spacing);
}
.tag-6 {
  --tag-font-size: max(0.75rem, 12px);
  --tag-height: calc(var(--spacing)*6);
  --tag-border-radius: var(--spacing);
}
.tag-ghost {
  :where(&) {
    --tag-background: transparent;
    --tag-background-hover: var(--color-title-bg-hover);
    &:where(:not(.tag-selected)) {
      --tag-border-width: 0;
    }
  }
}
.tag-subtle {
  :where(&) {
    --tag-border-width: 0;
    --tag-background: var(--tag-local-background, var(--color-title-bg-hover));
    --tag-background-hover: var(--color-title-bg-active);
  }
}
.tools-4 {
  --tools-font-size: var(--text-3xs);
  --tools-height: calc(var(--spacing)*4);
  --tools-border-radius: var(--spacing);
}
.tools-5 {
  --tools-font-size: var(--text-2xs);
  --tools-height: calc(var(--spacing)*5);
  --tools-border-radius: var(--spacing);
}
.tools-6 {
  --tools-font-size: max(0.75rem, 12px);
  --tools-height: calc(var(--spacing)*6);
  --tools-border-radius: var(--spacing);
}
.tree-loose {
  --tree-font-size: 1rem;
  --tree-note-font-size: 0.875rem;
  --tree-node-padding-y: calc((calc(var(--spacing) * 10) - var(--tree-leading))/2);
}
.tree-pill {
  --tree-node-border-radius: calc(infinity * 1px);
  &:where(.tree-tight, .tree-snug, .tree-compact) {
    --tree-node-padding-x: calc(0.4em *1.5);
  }
  &:where(:not(.tree-tight, .tree-snug, .tree-compact)) {
    --tree-node-padding-x: calc(0.8em *1.5);
  }
}
.alarm-\[\#12ffab\] {
  --alarm-background: #12ffab;
  --alarm-color: oklch(from #12ffab clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.alarm-black {
  --alarm-background: var(--color-black);
  --alarm-color: oklch(from var(--color-black) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.alarm-green-500 {
  --alarm-background: var(--color-green-500);
  --alarm-color: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.alarm-indigo-500 {
  --alarm-background: var(--color-indigo-500);
  --alarm-color: oklch(from var(--color-indigo-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.alarm-red-100 {
  --alarm-background: var(--color-red-100);
  --alarm-color: oklch(from var(--color-red-100) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.alarm-red-800 {
  --alarm-background: var(--color-red-800);
  --alarm-color: oklch(from var(--color-red-800) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.alarm-white {
  --alarm-background: var(--color-white);
  --alarm-color: oklch(from var(--color-white) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.animate-infinite {
  --: ;
  animation-iteration-count: infinite;
}
.animate-once {
  --: ;
  animation-iteration-count: 1;
}
.aura-\(color\:--color-green-600\) {
  --aura-color: var(--color-green-600);
  --aura-track: oklch(from var(--color-green-600) clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.aura-\[orange\] {
  --aura-color: orange;
  --aura-track: oklch(from orange clamp(var(--light-threshold-bd), l, var(--light-threshold-bd) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.aura-duotone {
  --aura-hue-offset: 120;
  --aura-gradient: var(--aura-color),
    oklch(from var(--aura-color) l c calc(h + var(--aura-hue-offset))),
    var(--aura-color);
}
.aura-duotone-error {
  --aura-hue-offset: 120;
  --aura-gradient: var(--color-error),
    oklch(from var(--color-error) l c calc(h + var(--aura-hue-offset))),
    var(--color-error);
}
.aura-duotone-success {
  --aura-hue-offset: 120;
  --aura-gradient: var(--color-success),
    oklch(from var(--color-success) l c calc(h + var(--aura-hue-offset))),
    var(--color-success);
}
.aura-multi {
  --aura-hue-offset: 60;
  --aura-gradient: var(--aura-color),
    oklch(from var(--aura-color) l c calc(h + var(--aura-hue-offset))),
    oklch(from var(--aura-color) l c calc(h + var(--aura-hue-offset)*2)),
    oklch(from var(--aura-color) l c calc(h + var(--aura-hue-offset)*3)),
    oklch(from var(--aura-color) l c calc(h + var(--aura-hue-offset)*4)),
    oklch(from var(--aura-color) l c calc(h + var(--aura-hue-offset)*5)),
    var(--aura-color);
}
.aura-tritone {
  --aura-hue-offset: 80;
  --aura-gradient: var(--aura-color),
    oklch(from var(--aura-color) l c calc(h + var(--aura-hue-offset))),
    oklch(from var(--aura-color) l c calc(h + var(--aura-hue-offset)*2)),
    var(--aura-color);
}
.aura-tritone-highlight {
  --aura-hue-offset: 80;
  --aura-gradient: var(--color-highlight),
    oklch(from var(--color-highlight) l c calc(h + var(--aura-hue-offset))),
    oklch(from var(--color-highlight) l c calc(h + var(--aura-hue-offset)*2)),
    var(--color-highlight),;
}
.aura-tritone-warning {
  --aura-hue-offset: 80;
  --aura-gradient: var(--color-warning),
    oklch(from var(--color-warning) l c calc(h + var(--aura-hue-offset))),
    oklch(from var(--color-warning) l c calc(h + var(--aura-hue-offset)*2)),
    var(--color-warning),;
}
.avatar-7 {
  --avatar-font-size: max(0.75rem, 12px);
  --avatar-height: calc(var(--spacing)*7);
}
.avatar-14 {
  --avatar-font-size: 1rem;
  --avatar-height: calc(var(--spacing)*14);
}
.avatar-15 {
  --avatar-font-size: 1rem;
  --avatar-height: calc(var(--spacing)*15);
}
.avatar-16 {
  --avatar-font-size: 1rem;
  --avatar-height: calc(var(--spacing)*16);
}
.avatar-17 {
  --avatar-font-size: 1rem;
  --avatar-height: calc(var(--spacing)*17);
}
.avatar-18 {
  --avatar-font-size: 1rem;
  --avatar-height: calc(var(--spacing)*18);
}
.avatar-19 {
  --avatar-font-size: 1rem;
  --avatar-height: calc(var(--spacing)*19);
}
.avatar-20 {
  --avatar-font-size: 1rem;
  --avatar-height: calc(var(--spacing)*20);
}
.avatar-21 {
  --avatar-font-size: 1rem;
  --avatar-height: calc(var(--spacing)*21);
}
.avatar-22 {
  --avatar-font-size: 1rem;
  --avatar-height: calc(var(--spacing)*22);
}
.avatar-23 {
  --avatar-font-size: 1rem;
  --avatar-height: calc(var(--spacing)*23);
}
.avatar-24 {
  --avatar-font-size: 1rem;
  --avatar-height: calc(var(--spacing)*24);
}
.avatar-25 {
  --avatar-font-size: 1rem;
  --avatar-height: calc(var(--spacing)*25);
}
.avatar-26 {
  --avatar-font-size: 1rem;
  --avatar-height: calc(var(--spacing)*26);
}
.avatar-27 {
  --avatar-font-size: 1rem;
  --avatar-height: calc(var(--spacing)*27);
}
.avatar-28 {
  --avatar-font-size: 1rem;
  --avatar-height: calc(var(--spacing)*28);
}
.avatar-29 {
  --avatar-font-size: 1rem;
  --avatar-height: calc(var(--spacing)*29);
}
.avatar-30 {
  --avatar-font-size: 1rem;
  --avatar-height: calc(var(--spacing)*30);
}
.avatar-\[\#ff0000\] {
  --avatar-background: #ff0000;
  --avatar-color: oklch(from #ff0000 clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.avatar-\[rgb\(125\,23\,200\)\] {
  --avatar-background: rgb(125,23,200);
  --avatar-color: oklch(from rgb(125,23,200) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.avatar-green-500 {
  --avatar-background: var(--color-green-500);
  --avatar-color: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.avatar-indigo-500 {
  --avatar-background: var(--color-indigo-500);
  --avatar-color: oklch(from var(--color-indigo-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.avatar-orange-500 {
  --avatar-background: var(--color-orange-500);
  --avatar-color: oklch(from var(--color-orange-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.avatar-rounded {
  &:where(.avatar-5, .avatar-6) {
    --avatar-border-radius: var(--spacing);
  }
  &:where(:not(.avatar-5, .avatar-6)) {
    --avatar-border-radius: var(--default-border-radius);
  }
}
.avatar-scoop {
  --avatar-border-radius: calc(var(--avatar-height)/6);
  corner-shape: superellipse(-0.4);
}
.badge-sm {
  --badge-height: 18px;
  &:empty {
    --badge-height: 6px;
  }
}
.badge-solid-\[\#ff0000\] {
  --badge-color: oklch(from #ff0000 clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --badge-background: #ff0000;
}
.badge-solid-black {
  --badge-color: oklch(from var(--color-black) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --badge-background: var(--color-black);
}
.badge-solid-green-500 {
  --badge-color: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --badge-background: var(--color-green-500);
}
.badge-solid-white {
  --badge-color: oklch(from var(--color-white) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --badge-background: var(--color-white);
}
.badge-square {
  --badge-border-radius: 0;
  --badge-padding-x: calc(var(--badge-height)/4);
}
.badge-subtle-\[\#ff0000\] {
  --badge-background: oklch(from #ff0000 var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --badge-color: oklch(from #ff0000 clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.badge-subtle-black {
  --badge-background: oklch(from var(--color-black) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --badge-color: oklch(from var(--color-black) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.badge-subtle-green-500 {
  --badge-background: oklch(from var(--color-green-500) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --badge-color: oklch(from var(--color-green-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.badge-subtle-white {
  --badge-background: oklch(from var(--color-white) var(--light-threshold-bg-hover) calc(var(--chorme-bg-hover) * var(--color-c-factor)) h / var(--opacity-bg-hover));
  --badge-color: oklch(from var(--color-white) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.bg-whisper-between {
  --bg-1-at: 0% 40%;
  --bg-2-at: 200% 50%;
}
.bg-whisper-duotone {
  --bg-angle: 180;
  --bg-3-a: 0;
}
.bg-whisper-mono {
  --bg-2-a: 0;
  --bg-3-a: 0;
}
.bg-whisper-tritone {
  --bg-angle: 90;
  --bg-3-a: var(--bg-1-a);
}
.bookmark-4 {
  --bookmark-font-size: var(--text-3xs);
  --bookmark-height: calc(var(--spacing)*4);
}
.bookmark-5 {
  --bookmark-font-size: var(--text-2xs);
  --bookmark-height: calc(var(--spacing)*5);
}
.bookmark-6 {
  --bookmark-font-size: max(0.75rem, 12px);
  --bookmark-height: calc(var(--spacing)*6);
}
.bookmark-7 {
  --bookmark-font-size: max(0.75rem, 12px);
  --bookmark-height: calc(var(--spacing)*7);
}
.bookmark-14 {
  --bookmark-font-size: 1rem;
  --bookmark-height: calc(var(--spacing)*14);
}
.bookmark-15 {
  --bookmark-font-size: 1rem;
  --bookmark-height: calc(var(--spacing)*15);
}
.btn-7 {
  --btn-font-size: max(0.75rem, 12px);
  --btn-height: calc(var(--spacing)*7);
}
.btn-14 {
  --btn-font-size: 1rem;
  --btn-height: calc(var(--spacing)*14);
}
.btn-15 {
  --btn-font-size: 1rem;
  --btn-height: calc(var(--spacing)*15);
}
.btn-pill {
  --btn-border-radius: calc(infinity * 1px);
  --btn-padding-x: calc(var(--btn-height)/2);
}
.btns-7 {
  >* {
    --btn-font-size: max(0.75rem, 12px);
    --btn-height: calc(var(--spacing)*7);
  }
}
.btns-14 {
  >* {
    --btn-font-size: 1rem;
    --btn-height: calc(var(--spacing)*14);
  }
}
.btns-15 {
  >* {
    --btn-font-size: 1rem;
    --btn-height: calc(var(--spacing)*15);
  }
}
.btns-pill {
  >* {
    --btn-border-radius: calc(infinity * 1px);
    --btn-padding-x: calc(var(--btn-height)/2);
  }
}
.btns-rounded {
  &:where(.btns-4,.btns-5, .btns-6) {
    >* {
      --btn-border-radius: var(--spacing);
    }
  }
  &:where(:not(.btns-4,.btns-5, .btns-6)) {
    >* {
      --btn-border-radius: var(--default-border-radius);
    }
  }
}
.bubble-muted-red-100 {
  --bubble-border-color: oklch(from var(--color-red-100) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --bubble-color: oklch(from var(--color-red-100) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.bubble-muted-red-500 {
  --bubble-border-color: oklch(from var(--color-red-500) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --bubble-color: oklch(from var(--color-red-500) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.bubble-outline {
  :where(&) {
    --bubble-border-color: var(--color-title);
    --bubble-background: oklch(from var(--color-title) var(--light-threshold-surface) calc(min(c, var(--chorme-surface)) * var(--color-c-factor)) h);
  }
}
.bubble-solid-\[\#ff0000\] {
  --bubble-background: #ff0000;
  --bubble-color: oklch(from #ff0000 clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.bubble-solid-\[blue\] {
  --bubble-background: blue;
  --bubble-color: oklch(from blue clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.bubble-solid-green-500 {
  --bubble-background: var(--color-green-500);
  --bubble-color: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.bubble-solid-green-800 {
  --bubble-background: var(--color-green-800);
  --bubble-color: oklch(from var(--color-green-800) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
}
.buoy-4 {
  --buoy-font-size: var(--text-3xs);
  --buoy-height: calc(var(--spacing)*4);
}
.buoy-5 {
  --buoy-font-size: var(--text-2xs);
  --buoy-height: calc(var(--spacing)*5);
}
.buoy-6 {
  --buoy-font-size: max(0.75rem, 12px);
  --buoy-height: calc(var(--spacing)*6);
}
.buoy-7 {
  --buoy-font-size: max(0.75rem, 12px);
  --buoy-height: calc(var(--spacing)*7);
}
.buoy-8 {
  --buoy-font-size: 0.875rem;
  --buoy-height: calc(var(--spacing)*8);
}
.buoy-9 {
  --buoy-font-size: 0.875rem;
  --buoy-height: calc(var(--spacing)*9);
}
.buoy-10 {
  --buoy-font-size: 0.875rem;
  --buoy-height: calc(var(--spacing)*10);
}
.buoy-11 {
  --buoy-font-size: 0.875rem;
  --buoy-height: calc(var(--spacing)*11);
}
.buoy-12 {
  --buoy-font-size: 0.875rem;
  --buoy-height: calc(var(--spacing)*12);
}
.buoy-13 {
  --buoy-font-size: 0.875rem;
  --buoy-height: calc(var(--spacing)*13);
}
.buoy-14 {
  --buoy-font-size: 1rem;
  --buoy-height: calc(var(--spacing)*14);
}
.buoy-15 {
  --buoy-font-size: 1rem;
  --buoy-height: calc(var(--spacing)*15);
}
.buoy-muted {
  :where(&) {
    --buoy-border-color: var(--color-description-bd);
    --buoy-background-label: var(--color-description-bg);
  }
}
.buoy-outline {
  :where(&) {
    --buoy-border-color: var(--color-description);
    --buoy-background-label: var(--color-description-bg);
  }
}
.buoy-pill {
  --buoy-border-radius: calc(infinity * 1px);
  --buoy-padding-x: calc(var(--buoy-height)/2);
}
.buoy-rounded {
  &:where(.buoy-4, .buoy-5, .buoy-6) {
    --buoy-border-radius: var(--spacing);
  }
  &:where(:not(.buoy-4, .buoy-5, .buoy-6)) {
    --buoy-border-radius: var(--default-border-radius);
  }
}
.callout-2xs {
  --callout-font-size: min(0.75rem,12px);
  --callout-padding-x: 0.5em;
}
.callout-xs {
  --callout-font-size: min(0.75rem,12px);
  --callout-padding-x: 0.75em;
}
.check-pill {
  &:where(.check-subtle, .check-ghost, .check-outline, .check-muted, .check-tick) {
    --check-border-radius: calc(infinity * 1px);
    --check-padding-x: calc(var(--check-height)/2);
  }
}
.check-rounded {
  &:where(.check-subtle, .check-ghost, .check-outline, .check-muted, .check-tick) {
    &:where(:not(.check-4, .check-5, .check-6)) {
      --check-border-radius: var(--default-border-radius);
    }
    &:where(.check-4, .check-5, .check-6) {
      --check-border-radius: var(--spacing);
    }
  }
}
.code-solid {
  :where(&) {
    --code-color: var(--color-title-contrast);
    --code-background: var(--color-title);
  }
}
.code-solid-\[\#ff0000\] {
  --code-color: oklch(from #ff0000 clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --code-background: #ff0000;
}
.code-solid-green-500 {
  --code-color: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --code-background: var(--color-green-500);
}
.code-solid-indigo-500 {
  --code-color: oklch(from var(--color-indigo-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --code-background: var(--color-indigo-500);
}
.divider-1 {
  --divider-size: 1px;
  --divider-font-size: 12px;
}
.divider-2 {
  --divider-size: 2px;
  --divider-font-size: 14px;
}
.divider-3 {
  --divider-size: 3px;
  --divider-font-size: 14px;
}
.divider-4 {
  --divider-size: 4px;
  --divider-font-size: 14px;
}
.divider-5 {
  --divider-size: 5px;
  --divider-font-size: 14px;
}
.divider-6 {
  --divider-size: 6px;
  --divider-font-size: 14px;
}
.divider-7 {
  --divider-size: 7px;
  --divider-font-size: 14px;
}
.divider-8 {
  --divider-size: 8px;
  --divider-font-size: 16px;
}
.divider-9 {
  --divider-size: 9px;
  --divider-font-size: 16px;
}
.divider-10 {
  --divider-size: 10px;
  --divider-font-size: 16px;
}
.divider-\[\#ff0000\] {
  --divider-background: oklch(from #ff0000 var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --divider-color: oklch(from #ff0000 clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.divider-blue-200 {
  --divider-background: oklch(from var(--color-blue-200) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --divider-color: oklch(from var(--color-blue-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.divider-blue-500 {
  --divider-background: oklch(from var(--color-blue-500) var(--light-threshold-bd) calc(c * var(--color-c-factor)) h);
  --divider-color: oklch(from var(--color-blue-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.emphasis-\[\#ff0000\] {
  --: ;
  --emphasis-color: #ff0000;
}
.emphasis-amber-500 {
  --: ;
  --emphasis-color: var(--color-amber-500);
}
.emphasis-blue-600 {
  --: ;
  --emphasis-color: var(--color-blue-600);
}
.emphasis-dot {
  --: ;
  --emphasis-style: dot;
}
.emphasis-double-circle {
  --: ;
  --emphasis-style: double-circle;
}
.emphasis-error {
  --: ;
  --emphasis-color: var(--color-error);
}
.emphasis-green-500 {
  --: ;
  --emphasis-color: var(--color-green-500);
}
.emphasis-open {
  --: ;
  --emphasis-fill: open;
}
.emphasis-sesame {
  --: ;
  --emphasis-style: sesame;
}
.emphasis-triangle {
  --: ;
  --emphasis-style: triangle;
}
.entry-4 {
  --entry-font-size: var(--text-3xs);
  &:where(:not(.entry-multiline)) {
    --entry-height: calc(var(--spacing)*4);
  }
}
.entry-5 {
  --entry-font-size: var(--text-2xs);
  &:where(:not(.entry-multiline)) {
    --entry-height: calc(var(--spacing)*5);
  }
}
.entry-6 {
  --entry-font-size: max(0.75rem, 12px);
  &:where(:not(.entry-multiline)) {
    --entry-height: calc(var(--spacing)*6);
  }
}
.entry-7 {
  --entry-font-size: max(0.75rem, 12px);
  &:where(:not(.entry-multiline)) {
    --entry-height: calc(var(--spacing)*7);
  }
}
.entry-14 {
  --entry-font-size: 1rem;
  &:where(:not(.entry-multiline)) {
    --entry-height: calc(var(--spacing)*14);
  }
}
.entry-15 {
  --entry-font-size: 1rem;
  &:where(:not(.entry-multiline)) {
    --entry-height: calc(var(--spacing)*15);
  }
}
.entry-pill {
  &:where(:not(.entry-multiline)) {
    --entry-border-radius: calc(infinity * 1px);
    --entry-padding-x: calc(var(--entry-height)/2);
  }
}
.entry-rounded {
  &:where(.entry-5, .entry-6) {
    --entry-border-radius: var(--spacing);
  }
  &:where(:not(.entry-5, .entry-6)) {
    --entry-border-radius: var(--default-border-radius);
  }
}
.flag-\[\#12eded\] {
  --flag-color: oklch(from #12eded clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --flag-background: #12eded;
}
.flag-\[rgba\(0\,0\,0\,0\.5\)\] {
  --flag-color: oklch(from rgba(0,0,0,0.5) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --flag-background: rgba(0,0,0,0.5);
}
.flag-red-500 {
  --flag-color: oklch(from var(--color-red-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --flag-background: var(--color-red-500);
}
.gilt-duotone {
  --gilt-hue-offset: 40;
  --gilt-2: oklch(from var(--gilt-1) l c calc(h + var(--gilt-hue-offset)));
}
.input-7 {
  --input-font-size: max(0.75rem, 12px);
  --input-row-height: calc(var(--spacing)*7);
}
.input-14 {
  --input-font-size: 1rem;
  --input-row-height: calc(var(--spacing)*14);
}
.input-15 {
  --input-font-size: 1rem;
  --input-row-height: calc(var(--spacing)*15);
}
.input-rounded {
  &:where(.input-4, .input-5, .input-6) {
    --input-border-radius: var(--spacing);
  }
  &:where(:not(.input-4, .input-5, .input-6)) {
    --input-border-radius: var(--default-border-radius);
  }
}
.kbd-4 {
  --kbd-font-size: var(--text-2xs);
  --kbd-height: calc(var(--spacing)*4);
}
.kbd-5 {
  --kbd-font-size: max(0.75rem, 12px);
  --kbd-height: calc(var(--spacing)*5);
}
.kbd-6 {
  --kbd-font-size: max(0.75rem, 12px);
  --kbd-height: calc(var(--spacing)*6);
}
.kbd-8 {
  --kbd-height: calc(var(--spacing)*8);
  --kbd-border-radius: calc(var(--spacing) * 2);
}
.kbd-9 {
  --kbd-height: calc(var(--spacing)*9);
  --kbd-border-radius: calc(var(--spacing) * 2);
}
.kbd-10 {
  --kbd-height: calc(var(--spacing)*10);
  --kbd-border-radius: calc(var(--spacing) * 2);
}
.kbd-11 {
  --kbd-height: calc(var(--spacing)*11);
  --kbd-border-radius: calc(var(--spacing) * 2);
}
.kbd-12 {
  --kbd-height: calc(var(--spacing)*12);
  --kbd-border-radius: calc(var(--spacing) * 2);
}
.kbd-13 {
  --kbd-height: calc(var(--spacing)*13);
  --kbd-border-radius: calc(var(--spacing) * 2);
}
.kbd-pill {
  --kbd-border-radius: calc(infinity * 1px);
  --kbd-padding-x: 0.75em;
}
.kbd-rounded {
  &:where(:not(.kbd-4, .kbd-5, .kbd-6)) {
    --kbd-border-radius: var(--default-border-radius);
  }
  &:where(.kbd-4, .kbd-5, .kbd-6) {
    --kbd-border-radius: var(--spacing);
  }
}
.lamp-7 {
  --lamp-font-size: max(0.625rem,12px);
  --lamp-height: calc(var(--spacing)*7);
}
.lamp-12 {
  --lamp-height: calc(var(--spacing)*12);
  --lamp-item-height: 3px;
}
.lamp-13 {
  --lamp-height: calc(var(--spacing)*13);
  --lamp-item-height: 3px;
}
.pagination-7 {
  --pagination-height: calc(var(--spacing)*7);
  --pagination-font-size: max(0.75rem, 12px);
}
.pagination-13 {
  --pagination-height: calc(var(--spacing)*13);
  --pagination-margin-x: 4px;
}
.poster-rounded {
  &:where(:not(.poster-1, .poster-2, .poster-3, .poster-4, .poster-5)) {
    --poster-border-radius: var(--default-border-radius);
  }
  &:where(.poster-1, .poster-2, .poster-3, .poster-4, .poster-5) {
    --poster-border-radius: var(--spacing);
  }
}
.poster-scoop {
  --: ;
  corner-shape: superellipse(-0.4);
}
.pre-muted {
  :where(&) {
    --pre-background: var(--color-title-bg);
    border: 1px solid var(--color-title-bd);
  }
}
.pre-outline {
  :where(&) {
    --pre-background: transparent;
    border: 1px solid var(--pre-color);
  }
}
.pre-solid {
  :where(&) {
    --pre-color: var(--color-title-contrast);
    --pre-background: var(--color-title);
  }
}
.pre-solid-\[\#ff0000\] {
  --pre-color: oklch(from #ff0000 clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pre-background: #ff0000;
}
.pre-solid-green-500 {
  --pre-color: oklch(from var(--color-green-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pre-background: var(--color-green-500);
}
.pre-solid-indigo-500 {
  --pre-color: oklch(from var(--color-indigo-500) clamp(var(--light-min), (var(--light-threshold-contrast) - l) * 100, var(--light-max)) 0 0);
  --pre-background: var(--color-indigo-500);
}
.progress-2xl {
  --progress-height: calc(var(--spacing) * 7);
  --progress-font-size: 0.875rem;
}
.progress-4xl {
  --progress-height: calc(var(--spacing) * 9);
  --progress-font-size: 0.75rem;
}
.progress-5xl {
  --progress-height: calc(var(--spacing) * 10);
  --progress-font-size: 0.75rem;
}
.progress-rounded {
  &:where(:not(.progress-4xl, .progress-5xl)) {
    --progress-border-radius: calc(var(--spacing) * 1);
  }
  &:where(.progress-4xl, .progress-5xl) {
    --progress-border-radius: calc(var(--spacing) * 2);
  }
}
.progress-xl {
  --progress-height: calc(var(--spacing) * 6);
  --progress-font-size: 0.875rem;
}
.rank-2xs {
  --rank-font-size: var(--text-3xs);
  --rank-height: max(0.75rem, 12px);
}
.rank-4xl {
  --rank-height: calc(var(--spacing)*7);
  --rank-border-radius: var(--default-border-radius);
}
.rank-5xl {
  --rank-height: calc(var(--spacing)*8);
  --rank-border-radius: var(--default-border-radius);
}
.rank-lg {
  --rank-font-size: max(0.75rem, 12px);
  --rank-height: calc(var(--spacing)*4);
}
.rank-md {
  --rank-font-size: var(--text-2xs);
  --rank-height: calc(var(--spacing)*4);
}
.rank-rounded {
  &:where(.rank-3xl, .rank-4xl, .rank-5xl) {
    --rank-border-radius: var(--default-border-radius);
  }
  &:where(:not(.rank-3xl, .rank-4xl, .rank-5xl)) {
    --rank-border-radius: var(--spacing);
  }
}
.rank-sm {
  --rank-font-size: var(--text-2xs);
  --rank-height: max(0.875rem, 14px);
}
.rank-xs {
  --rank-font-size: var(--text-3xs);
  --rank-height: max(0.875rem, 14px);
}
.rating-4 {
  --rating-height: calc(var(--spacing) * 4);
  --rating-font-size: var(--text-3xs);
}
.rating-5 {
  --rating-height: calc(var(--spacing) * 5);
  --rating-font-size: var(--text-2xs);
}
.rating-6 {
  --rating-height: calc(var(--spacing) * 6);
  --rating-font-size: 0.75rem;
}
.rating-7 {
  --rating-height: calc(var(--spacing) * 7);
  --rating-font-size: 0.75rem;
}
.rating-14 {
  --rating-height: calc(var(--spacing) * 14);
  --rating-font-size: 1rem;
}
.rating-15 {
  --rating-height: calc(var(--spacing) * 15);
  --rating-font-size: 1rem;
}
.rating-\[\#ff6600\] {
  --rating-item-color: oklch(from #ff6600 var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --rating-item-color-checked: #ff6600;
}
.rating-indigo-500 {
  --rating-item-color: oklch(from var(--color-indigo-500) var(--light-threshold-bg-active) calc(var(--chorme-bg-active) * var(--color-c-factor)) h / var(--opacity-bg-active));
  --rating-item-color-checked: var(--color-indigo-500);
}
.segment-7 {
  --segment-font-size: max(0.75rem, 12px);
  --segment-height: calc(var(--spacing)*7);
}
.segment-11 {
  --segment-height: calc(var(--spacing)*11);
  --segment-border-width: 4px;
}
.segment-12 {
  --segment-height: calc(var(--spacing)*12);
  --segment-border-width: 4px;
}
.segment-13 {
  --segment-height: calc(var(--spacing)*13);
  --segment-border-width: 4px;
}
.segment-pill {
  --segment-border-radius: calc(infinity * 1px);
  --segment-item-padding-x: calc(var(--segment-height)/2);
}
.shell-7 {
  --shell-font-size: max(0.75rem, 12px);
  --shell-row-height: calc(var(--spacing)*7);
}
.shell-14 {
  --shell-font-size: 1rem;
  --shell-row-height: calc(var(--spacing)*14);
}
.shell-15 {
  --shell-font-size: 1rem;
  --shell-row-height: calc(var(--spacing)*15);
}
.shell-pill {
  --shell-padding-x: calc(var(--shell-row-height)/2);
  --shell-border-radius: calc(infinity * 1px);
}
.shell-rounded {
  &:where(.shell-4, .shell-5, .shell-6) {
    --shell-border-radius: var(--spacing);
  }
  &:where(:not(.shell-4, .shell-5, .shell-6)) {
    --shell-border-radius: var(--default-border-radius);
  }
}
.shimmer-start {
  --shimmer-animation: shimmer-rtl;
  :dir(rtl) {
    --shimmer-animation: shimmer-ltr;
  }
}
.sketch-divider-1px {
  &:where(:not(.sketch-divider-v)) {
    --sketch-divider-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' fill='none' stroke-linecap='round' stroke='black' stroke-width='1px' preserveAspectRatio='none'%3E%3Cpath d='M1,4.93c3,1.07,8,2.07,15,2.07,9,0,14.76-3.89,27-5,11-1,28,4,40.69,3.93,6.43-.03,10.31.07,15.31-1'/%3E%3C/svg%3E");
  }
  &:where(.sketch-divider-v) {
    --sketch-divider-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' fill='none' stroke-linecap='round' stroke='black' stroke-width='1px' preserveAspectRatio='none'%3E%3Cpath d='M5.92,98.92c-1.07-3-3-8-3-15,0-9,2.89-14.76,4-27,1-11-3-28-2.93-40.69.03-6.43.57-11.73,1-15.31'/%3E%3C/svg%3E");
  }
}
.spinner-1 {
  --spinner-height: calc(var(--spacing)*1);
  --spinner-track-width: 1px;
}
.spinner-2 {
  --spinner-height: calc(var(--spacing)*2);
  --spinner-track-width: 1px;
}
.spinner-3 {
  --spinner-height: calc(var(--spacing)*3);
  --spinner-track-width: 2px;
}
.spinner-4 {
  --spinner-height: calc(var(--spacing)*4);
  --spinner-track-width: 2px;
}
.spinner-9 {
  --spinner-height: calc(var(--spacing)*9);
  --spinner-track-width: 4px;
}
.spinner-10 {
  --spinner-height: calc(var(--spacing)*10);
  --spinner-track-width: 4px;
}
.spinner-11 {
  --spinner-height: calc(var(--spacing)*11);
  --spinner-track-width: 5px;
}
.spinner-12 {
  --spinner-height: calc(var(--spacing)*12);
  --spinner-track-width: 5px;
}
.spinner-13 {
  --spinner-height: calc(var(--spacing)*13);
  --spinner-track-width: 5px;
}
.spinner-14 {
  --spinner-height: calc(var(--spacing)*14);
  --spinner-track-width: 6px;
}
.spinner-15 {
  --spinner-height: calc(var(--spacing)*15);
  --spinner-track-width: 6px;
}
.spinner-\[\#ff6b6b\] {
  --spinner-thumb-color: #ff6b6b;
  --spinner-track-color: oklch(from #ff6b6b l c h / 0.2);
}
.spinner-blue-500 {
  --spinner-thumb-color: var(--color-blue-500);
  --spinner-track-color: oklch(from var(--color-blue-500) l c h / 0.2);
}
.spinner-caption {
  --spinner-thumb-color: var(--color-caption);
  --spinner-track-color: oklch(from var(--color-caption) l c h / 0.2);
}
.spinner-caution {
  --spinner-thumb-color: var(--color-caution);
  --spinner-track-color: oklch(from var(--color-caution) l c h / 0.2);
}
.spinner-description {
  --spinner-thumb-color: var(--color-description);
  --spinner-track-color: oklch(from var(--color-description) l c h / 0.2);
}
.spinner-error {
  --spinner-thumb-color: var(--color-error);
  --spinner-track-color: oklch(from var(--color-error) l c h / 0.2);
}
.spinner-green-500 {
  --spinner-thumb-color: var(--color-green-500);
  --spinner-track-color: oklch(from var(--color-green-500) l c h / 0.2);
}
.spinner-highlight {
  --spinner-thumb-color: var(--color-highlight);
  --spinner-track-color: oklch(from var(--color-highlight) l c h / 0.2);
}
.spinner-info {
  --spinner-thumb-color: var(--color-info);
  --spinner-track-color: oklch(from var(--color-info) l c h / 0.2);
}
.spinner-ink {
  --spinner-thumb-color: var(--color-ink);
  --spinner-track-color: oklch(from var(--color-ink) l c h / 0.2);
}
.spinner-placeholder {
  --spinner-thumb-color: var(--color-placeholder);
  --spinner-track-color: oklch(from var(--color-placeholder) l c h / 0.2);
}
.spinner-primary {
  --spinner-thumb-color: var(--color-primary);
  --spinner-track-color: oklch(from var(--color-primary) l c h / 0.2);
}
.spinner-secondary {
  --spinner-thumb-color: var(--color-secondary);
  --spinner-track-color: oklch(from var(--color-secondary) l c h / 0.2);
}
.spinner-success {
  --spinner-thumb-color: var(--color-success);
  --spinner-track-color: oklch(from var(--color-success) l c h / 0.2);
}
.spinner-tertiary {
  --spinner-thumb-color: var(--color-tertiary);
  --spinner-track-color: oklch(from var(--color-tertiary) l c h / 0.2);
}
.spinner-title {
  --spinner-thumb-color: var(--color-title);
  --spinner-track-color: oklch(from var(--color-title) l c h / 0.2);
}
.spinner-warning {
  --spinner-thumb-color: var(--color-warning);
  --spinner-track-color: oklch(from var(--color-warning) l c h / 0.2);
}
.status-3 {
  --status-height: 3;
  --status-height: calc(var(--spacing) * 3);
}
.status-4 {
  --status-height: 4;
  --status-height: calc(var(--spacing) * 4);
}
.status-5 {
  --status-height: 5;
  --status-height: calc(var(--spacing) * 5);
}
.status-6 {
  --status-height: 6;
  --status-height: calc(var(--spacing) * 6);
}
.status-8 {
  --status-height: 8;
  --status-height: calc(var(--spacing) * 8);
}
.status-ring {
  &:before {
    background: transparent;
    border: 2px solid var(--status-color-dot);
  }
}
.swatch-8 {
  --swatch-height: calc(var(--spacing)*8);
  --input-row-height: calc(var(--spacing)*8);
}
.swatch-9 {
  --swatch-height: calc(var(--spacing)*9);
  --input-row-height: calc(var(--spacing)*9);
}
.swatch-circle {
  --swatch-border-radius: calc(infinity * 1px);
  --input-border-radius: calc(infinity * 1px);
}
.swatch-fluid {
  --swatch-border-radius: calc(var(--swatch-height)/6);
  --input-border-radius: calc(var(--swatch-height)/6);
}
.swatch-muted {
  :where(&) {
    --swatch-color: var(--color-title);
    --swatch-border-color: var(--color-title-bd);
  }
}
.swatch-pill {
  --swatch-border-radius: calc(infinity * 1px);
  --input-border-radius: calc(infinity * 1px);
}
.swatch-rounded {
  &:where(:not(.swatch-4, .swatch-5, .swatch-6)) {
    --swatch-border-radius: var(--default-border-radius);
    --input-border-radius: var(--default-border-radius);
  }
}
.swatch-square {
  --swatch-border-radius: 0;
  --input-border-radius: 0;
}
.switch-2xs {
  --switch-height: 14px;
  --switch-font-size: 0.75rem;
}
.switch-lg {
  --switch-height: 22px;
  --switch-font-size: 0.875rem;
}
.switch-md {
  --switch-height: 20px;
  --switch-font-size: 0.875rem;
}
.switch-sm {
  --switch-height: 18px;
  --switch-font-size: 0.875rem;
}
.switch-square {
  --switch-border-radius: 0;
  --switch-thumb-radius: 0;
}
.switch-xl {
  --switch-height: 24px;
  --switch-font-size: 0.875rem;
}
.switch-xs {
  --switch-height: 16px;
  --switch-font-size: 0.75rem;
}
.table-bordered {
  --: ;
  border-inline: 1px solid var(--table-border-color);
}
.table-borderless {
  --: ;
  border-block: none;
}
.tag-7 {
  --tag-font-size: max(0.75rem, 12px);
  --tag-height: calc(var(--spacing)*7);
}
.tag-14 {
  --tag-font-size: 1rem;
  --tag-height: calc(var(--spacing)*14);
}
.tag-15 {
  --tag-font-size: 1rem;
  --tag-height: calc(var(--spacing)*15);
}
.tag-pill {
  --tag-border-radius: calc(infinity * 1px);
  --tag-padding-x: calc(var(--tag-height)/3);
}
.tag-rounded {
  &:where(:not(.tag-4, .tag-5, .tag-6)) {
    --tag-border-radius: var(--default-border-radius);
  }
  &:where(.tag-4, .tag-5, .tag-6) {
    --tag-border-radius: var(--spacing);
  }
}
.tools-7 {
  --tools-font-size: max(0.75rem, 12px);
  --tools-height: calc(var(--spacing)*7);
}
.tools-14 {
  --tools-font-size: 1rem;
  --tools-height: calc(var(--spacing)*14);
}
.tools-15 {
  --tools-font-size: 1rem;
  --tools-height: calc(var(--spacing)*15);
}
.transition-all-fastest {
  --: ;
  transition: var(--transition-all-fastest);
}
.transition-all-slowest {
  --: ;
  transition: var(--transition-all-slowest);
}
.tree-compact {
  --tree-node-padding-x: 0.4em;
  --tree-node-padding-y: 2px;
}
.tree-hoverable {
  --tree-arrow-background-hover: transparent;
  --tree-node-background-hover: var(--color-title-bg-hover);
}
.tree-padded {
  --tree-padding-x: 1em;
  --tree-padding-y: 1em;
}
.tree-rounded {
  &:where(.tree-tight, .tree-snug) {
    --tree-node-border-radius: calc(var(--spacing) * 1);
  }
  &:where(:not(.tree-tight, .tree-snug)) {
    --tree-node-border-radius: calc(var(--spacing) * 2);
  }
}
.\[--custom-item-color\:var\(--color-blue-200\)\] {
  --custom-item-color: var(--color-blue-200);
}
.\[--custom-item-color\:var\(--color-green-200\)\] {
  --custom-item-color: var(--color-green-200);
}
.\[--custom-item-color\:var\(--color-indigo-200\)\] {
  --custom-item-color: var(--color-indigo-200);
}
.\[--custom-item-color\:var\(--color-orange-200\)\] {
  --custom-item-color: var(--color-orange-200);
}
.\[--custom-item-color\:var\(--color-red-200\)\] {
  --custom-item-color: var(--color-red-200);
}
.\[--divider-size\:20px\] {
  --divider-size: 20px;
}
.\[--kbd-font-size\:1\.5rem\] {
  --kbd-font-size: 1.5rem;
}
.aura-3 {
  --aura-width: calc(1px * 3);
}
.aura-5 {
  --aura-width: calc(1px * 5);
}
.aura-8 {
  --aura-width: calc(1px * 8);
}
.aura-multi-\[\#ae25be\,\#32ecdf\,\#edfa01\,\#ae25be\] {
  --aura-gradient: #ae25be,#32ecdf,#edfa01,#ae25be;
}
.aura-multi-\[red\,green\,blue\,red\] {
  --aura-gradient: red,green,blue,red;
}
.aura-size-3 {
  --aura-width: calc(1px * 3);
}
.aura-size-5 {
  --aura-width: calc(1px * 5);
}
.aura-size-8 {
  --aura-width: calc(1px * 8);
}
.aura-size-12 {
  --aura-width: calc(1px * 12);
}
.aura-size-16 {
  --aura-width: calc(1px * 16);
}
.avatar-8 {
  --avatar-height: calc(var(--spacing)*8);
}
.avatar-9 {
  --avatar-height: calc(var(--spacing)*9);
}
.avatar-10 {
  --avatar-height: calc(var(--spacing)*10);
}
.avatar-11 {
  --avatar-height: calc(var(--spacing)*11);
}
.avatar-12 {
  --avatar-height: calc(var(--spacing)*12);
}
.avatar-13 {
  --avatar-height: calc(var(--spacing)*13);
}
.avatar-circle {
  --avatar-border-radius: calc(infinity * 1px);
}
.avatar-fluid {
  --avatar-border-radius: calc(var(--avatar-height)/6);
}
.avatar-pill {
  --avatar-border-radius: calc(infinity * 1px);
}
.avatar-square {
  --avatar-border-radius: 0;
}
.badge-2xl {
  --badge-height: 28px;
}
.badge-glassy {
  --badge-opacity: 80%;
}
.badge-lg {
  --badge-height: 22px;
}
.badge-md {
  --badge-height: 20px;
}
.badge-pill {
  --badge-border-radius: calc(infinity * 1px);
}
.badge-xl {
  --badge-height: 24px;
}
.bg-polka-2 {
  --bg-size: 2;
}
.bg-polka-green-500 {
  --bg-color: var(--color-green-500);
}
.bg-whisper-center {
  --bg-1-at: 40% 36%;
}
.bookmark-8 {
  --bookmark-height: calc(var(--spacing)*8);
}
.bookmark-9 {
  --bookmark-height: calc(var(--spacing)*9);
}
.bookmark-10 {
  --bookmark-height: calc(var(--spacing)*10);
}
.bookmark-11 {
  --bookmark-height: calc(var(--spacing)*11);
}
.bookmark-12 {
  --bookmark-height: calc(var(--spacing)*12);
}
.bookmark-13 {
  --bookmark-height: calc(var(--spacing)*13);
}
.btn-8 {
  --btn-height: calc(var(--spacing)*8);
}
.btn-9 {
  --btn-height: calc(var(--spacing)*9);
}
.btn-10 {
  --btn-height: calc(var(--spacing)*10);
}
.btn-11 {
  --btn-height: calc(var(--spacing)*11);
}
.btn-12 {
  --btn-height: calc(var(--spacing)*12);
}
.btn-13 {
  --btn-height: calc(var(--spacing)*13);
}
.btn-fluid {
  --btn-border-radius: calc(var(--btn-height)/6);
}
.btn-rounded {
  &:where(:not(.btn-5, .btn-6)) {
    --btn-border-radius: var(--default-border-radius);
  }
}
.btn-square {
  --btn-border-radius: 0;
}
.btns-8 {
  >* {
    --btn-height: calc(var(--spacing)*8);
  }
}
.btns-9 {
  >* {
    --btn-height: calc(var(--spacing)*9);
  }
}
.btns-10 {
  >* {
    --btn-height: calc(var(--spacing)*10);
  }
}
.btns-11 {
  >* {
    --btn-height: calc(var(--spacing)*11);
  }
}
.btns-12 {
  >* {
    --btn-height: calc(var(--spacing)*12);
  }
}
.btns-13 {
  >* {
    --btn-height: calc(var(--spacing)*13);
  }
}
.btns-fluid {
  >* {
    --btn-border-radius: calc(var(--btn-height)/6);
  }
}
.btns-square {
  >* {
    --btn-border-radius: 0;
  }
}
.buoy-fluid {
  --buoy-border-radius: calc(var(--buoy-height)/6);
}
.buoy-square {
  --buoy-border-radius: 0;
}
.callout-2xl {
  --callout-font-size: 1.375rem;
}
.callout-3xl {
  --callout-font-size: 1.5rem;
}
.callout-4xl {
  --callout-font-size: 1.625rem;
}
.callout-5xl {
  --callout-font-size: 1.75rem;
}
.callout-lg {
  --callout-font-size: 1.125rem;
}
.callout-md {
  --callout-font-size: 1rem;
}
.callout-sm {
  --callout-font-size: 0.875rem;
}
.callout-xl {
  --callout-font-size: 1.25rem;
}
.check-9 {
  &:where(.check-subtle, .check-ghost, .check-outline, .check-muted, .check-tick) {
    --check-height: calc(var(--spacing)*9);
  }
}
.check-10 {
  &:where(.check-subtle, .check-ghost, .check-outline, .check-muted, .check-tick) {
    --check-height: calc(var(--spacing)*10);
  }
}
.check-11 {
  &:where(.check-subtle, .check-ghost, .check-outline, .check-muted, .check-tick) {
    --check-height: calc(var(--spacing)*11);
  }
}
.check-12 {
  &:where(.check-subtle, .check-ghost, .check-outline, .check-muted, .check-tick) {
    --check-height: calc(var(--spacing)*12);
  }
}
.check-13 {
  &:where(.check-subtle, .check-ghost, .check-outline, .check-muted, .check-tick) {
    --check-height: calc(var(--spacing)*13);
  }
}
.check-bold {
  --check-input-border-width: 2px;
}
.check-fluid {
  &:where(.check-subtle, .check-ghost, .check-outline, .check-muted, .check-tick) {
    --check-border-radius: calc(var(--check-height)/6);
  }
}
.check-multiline {
  --check-align-items: flex-start;
}
.check-reverse {
  --check-direction: row-reverse;
}
.check-square {
  &:where(.check-subtle, .check-ghost, .check-outline, .check-muted, .check-tick) {
    --check-border-radius: 0;
  }
}
.dropmenu-downward-end {
  --: ;
}
.dropmenu-inline {
  --: ;
}
.droppanel-inline {
  --: ;
}
.entry-8 {
  &:where(:not(.entry-multiline)) {
    --entry-height: calc(var(--spacing)*8);
  }
}
.entry-9 {
  &:where(:not(.entry-multiline)) {
    --entry-height: calc(var(--spacing)*9);
  }
}
.entry-10 {
  &:where(:not(.entry-multiline)) {
    --entry-height: calc(var(--spacing)*10);
  }
}
.entry-11 {
  &:where(:not(.entry-multiline)) {
    --entry-height: calc(var(--spacing)*11);
  }
}
.entry-12 {
  &:where(:not(.entry-multiline)) {
    --entry-height: calc(var(--spacing)*12);
  }
}
.entry-13 {
  &:where(:not(.entry-multiline)) {
    --entry-height: calc(var(--spacing)*13);
  }
}
.entry-padded {
  --entry-padding-x: var(--default-gap);
}
.gilt-\[\#ff6600\] {
  --gilt-1: #ff6600;
}
.gilt-\[blue\] {
  --gilt-1: blue;
}
.gilt-bottom {
  --gilt-angle: -15;
}
.gilt-caution {
  --gilt-1: var(--color-caution);
}
.gilt-end {
  --gilt-angle: -105;
}
.gilt-error {
  --gilt-1: var(--color-error);
}
.gilt-highlight {
  --gilt-1: var(--color-highlight);
}
.gilt-info {
  --gilt-1: var(--color-info);
}
.gilt-pink-500 {
  --gilt-1: var(--color-pink-500);
}
.gilt-primary {
  --gilt-1: var(--color-primary);
}
.gilt-secondary {
  --gilt-1: var(--color-secondary);
}
.gilt-start {
  --gilt-angle: 105;
}
.gilt-success {
  --gilt-1: var(--color-success);
}
.gilt-tertiary {
  --gilt-1: var(--color-tertiary);
}
.gilt-title {
  --gilt-1: var(--color-title);
}
.gilt-top {
  --gilt-angle: 165;
}
.gilt-warning {
  --gilt-1: var(--color-warning);
}
.icon-6 {
  --icon-size: calc(var(--spacing) * 6);
}
.icon-10 {
  --icon-size: calc(var(--spacing) * 10);
}
.icon-20 {
  --icon-size: calc(var(--spacing) * 20);
}
.icon-\[28px\] {
  --icon-size: 28px;
}
.icon-check {
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>');
}
.icon-check-circle {
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><path d="M12 2 A10 10 0 1 1 12 22 A10 10 0 1 1 12 2 Z"/><polyline points="16 10 11 15 8 12"/></svg>');
}
.icon-check-circle-fill {
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round"><path fill-rule="evenodd" fill="black" d="M12 1 C5.93 1 1 5.93 1 12 s4.93 11 11 11 11-4.93 11-11 S18.07 1 12 1Z M 16 9 A 1 1 0 0 0 15.292969 9.2929688 L 11 13.585938 L 8.7070312 11.292969 A 1 1 0 0 0 7.2929688 11.292969 A 1 1 0 0 0 7.2929688 12.707031 L 10.292969 15.707031 A 1.0001 1.0001 0 0 0 11.707031 15.707031 L 16.707031 10.707031 A 1 1 0 0 0 16.707031 9.2929688 A 1 1 0 0 0 16 9 z " /></svg>');
}
.icon-chevron-down {
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>');
}
.icon-chevron-down-circle {
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><path d="M12 2 A10 10 0 1 1 12 22 A10 10 0 1 1 12 2 Z"/><polyline points="15 11 12 14 9 11"/></svg>');
}
.icon-chevron-down-circle-fill {
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round"><path fill-rule="evenodd" fill="black" d="M12 1 C5.93 1 1 5.93 1 12 s4.93 11 11 11 11-4.93 11-11 S18.07 1 12 1Z M 9 10 A 1 1 0 0 0 8.2929688 10.292969 A 1 1 0 0 0 8.2929688 11.707031 L 11.292969 14.707031 A 1.0001 1.0001 0 0 0 12.707031 14.707031 L 15.707031 11.707031 A 1 1 0 0 0 15.707031 10.292969 A 1 1 0 0 0 14.292969 10.292969 L 12 12.585938 L 9.7070312 10.292969 A 1 1 0 0 0 9 10 z " /></svg>');
}
.icon-close {
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>');
}
.icon-close-circle {
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><path d="M12 2 A10 10 0 1 1 12 22 A10 10 0 1 1 12 2 Z"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>');
}
.icon-close-circle-fill {
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round"><path fill-rule="evenodd" fill="black" d="M12 1 C5.93 1 1 5.93 1 12 s4.93 11 11 11 11-4.93 11-11 S18.07 1 12 1Z M 9 8 A 1 1 0 0 0 8.2929688 8.2929688 A 1 1 0 0 0 8.2929688 9.7070312 L 10.585938 12 L 8.2929688 14.292969 A 1 1 0 0 0 8.2929688 15.707031 A 1 1 0 0 0 9.7070312 15.707031 L 12 13.414062 L 14.292969 15.707031 A 1 1 0 0 0 15.707031 15.707031 A 1 1 0 0 0 15.707031 14.292969 L 13.414062 12 L 15.707031 9.7070312 A 1 1 0 0 0 15.707031 8.2929688 A 1 1 0 0 0 15 8 A 1 1 0 0 0 14.292969 8.2929688 L 12 10.585938 L 9.7070312 8.2929688 A 1 1 0 0 0 9 8 z " /></svg>');
}
.icon-info {
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><line x1="12" y1="21" x2="12" y2="8"/><line x1="12" y1="3" x2="12" y2="3"/></svg>');
}
.icon-info-circle {
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><path d="M12 2 A10 10 0 1 1 12 22 A10 10 0 1 1 12 2 Z"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="8"/></svg>');
}
.icon-info-circle-fill {
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round"><path fill-rule="evenodd" fill="black" d="M12 1 C5.93 1 1 5.93 1 12 s4.93 11 11 11 11-4.93 11-11 S18.07 1 12 1Z M 12 7 A 1 1 0 0 0 11 8 A 1 1 0 0 0 12 9 A 1 1 0 0 0 13 8 A 1 1 0 0 0 12 7 z M 12 11 A 1 1 0 0 0 11 12 L 11 16 A 1 1 0 0 0 12 17 A 1 1 0 0 0 13 16 L 13 12 A 1 1 0 0 0 12 11 z " /></svg>');
}
.icon-plus {
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>');
}
.icon-plus-circle {
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"> <path d="M12 2 A10 10 0 1 1 12 22 A10 10 0 1 1 12 2 Z"/><line x1="9" y1="12" x2="15" y2="12"/><line x1="12" y1="15" x2="12" y2="9"/></svg>');
}
.icon-plus-circle-fill {
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round"><path fill-rule="evenodd" fill="black" d="M12 1 C5.93 1 1 5.93 1 12 s4.93 11 11 11 11-4.93 11-11 S18.07 1 12 1Z M 12 8 A 1 1 0 0 0 11 9 L 11 11 L 9 11 A 1 1 0 0 0 8 12 A 1 1 0 0 0 9 13 L 11 13 L 11 15 A 1 1 0 0 0 12 16 A 1 1 0 0 0 13 15 L 13 13 L 15 13 A 1 1 0 0 0 16 12 A 1 1 0 0 0 15 11 L 13 11 L 13 9 A 1 1 0 0 0 12 8 z " /></svg>');
}
.icon-warning {
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><line x1="12" y1="3" x2="12" y2="16"/><line x1="12" y1="21" x2="12" y2="21"/></svg>');
}
.icon-warning-circle {
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><path d="M12 2 A10 10 0 1 1 12 22 A10 10 0 1 1 12 2 Z"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>');
}
.icon-warning-circle-fill {
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round"><path fill-rule="evenodd" fill="black" d="M12 1 C5.93 1 1 5.93 1 12 s4.93 11 11 11 11-4.93 11-11 S18.07 1 12 1Z M 11.9375 5.9960938 C 10.386527 5.9937517 8.7719547 6.889939 8.1464844 8.6679688 A 1 1 0 0 0 8.7578125 9.9433594 A 1 1 0 0 0 10.033203 9.3320312 C 10.439152 8.178038 11.348784 7.8675149 12.257812 8.0234375 C 13.16684 8.1793601 13.921744 8.7747353 13.919922 9.9980469 A 1.0001 1.0001 0 0 0 13.919922 10 C 13.919922 10.5 13.487227 11.003307 12.865234 11.417969 C 12.243242 11.83263 11.603516 12.050781 11.603516 12.050781 A 1 1 0 0 0 10.970703 13.316406 A 1 1 0 0 0 12.236328 13.949219 C 12.236328 13.949219 13.096602 13.66737 13.974609 13.082031 C 14.85221 12.496964 15.918932 11.50079 15.919922 10.001953 L 15.919922 10 C 15.922111 7.8470075 14.32219 6.3488728 12.595703 6.0527344 C 12.379824 6.0157053 12.159068 5.9964283 11.9375 5.9960938 z M 12 16 A 1 1 0 0 0 11 17 A 1 1 0 0 0 12 18 L 12.009766 18 A 1 1 0 0 0 13.009766 17 A 1 1 0 0 0 12.009766 16 L 12 16 z " /></svg>');
}
.icon-warning-triangle {
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><path d="M10.29,2.86L1.82,17c-.55.96-.22,2.18.73,2.73.3.17.63.26.98.27h16.94c1.1-.01,1.99-.92,1.98-2.02,0-.34-.1-.68-.27-.98L13.71,2.86c-.57-.94-1.8-1.25-2.75-.67-.28.17-.51.4-.67.67Z"/><line x1="12" y1="8" x2="12" y2="12"/><line  x1="12" y1="16" x2="12.01" y2="16"/></svg>');
}
.icon-warning-triangle-fill {
  --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round"><path fill-rule="evenodd" fill="black" d="M23.04,16.49L14.56,2.44c-.42-.69-1.07-1.17-1.85-1.36-.78-.19-1.58-.07-2.27.35-.41.25-.76.6-1.01,1.01,0,0,0,0,0,0L.95,16.5c-.4.69-.51,1.5-.3,2.28.21.77.7,1.42,1.4,1.82.45.26.95.4,1.48.4h16.95c1.65-.02,2.99-1.38,2.97-3.03,0-.51-.15-1.02-.41-1.48Z M 12 7 A 1 1 0 0 0 11 8 L 11 12 A 1 1 0 0 0 12 13 A 1 1 0 0 0 13 12 L 13 8 A 1 1 0 0 0 12 7 z M 12 15 A 1 1 0 0 0 11 16 A 1 1 0 0 0 12 17 L 12.009766 17 A 1 1 0 0 0 13.009766 16 A 1 1 0 0 0 12.009766 15 L 12 15 z " /></svg>');
}
.input-8 {
  --input-row-height: calc(var(--spacing)*8);
}
.input-9 {
  --input-row-height: calc(var(--spacing)*9);
}
.input-10 {
  --input-row-height: calc(var(--spacing)*10);
}
.input-11 {
  --input-row-height: calc(var(--spacing)*11);
}
.input-12 {
  --input-row-height: calc(var(--spacing)*12);
}
.input-13 {
  --input-row-height: calc(var(--spacing)*13);
}
.input-fluid {
  --input-border-radius: calc(var(--input-row-height)/6);
}
.input-full {
  --input-width: 100%;
}
.input-ratio-2 {
  --input-width: calc(var(--input-row-height) * 2);
}
.input-ratio-3 {
  --input-width: calc(var(--input-row-height) * 3);
}
.input-ratio-\[3\] {
  --input-width: calc(var(--input-row-height) * 3);
}
.input-scale {
  --input-width: var(--default-width-input);
}
.input-scale-2 {
  --input-width: calc(var(--default-width-input) * 2);
}
.input-scale-\[1\.5\] {
  --input-width: calc(var(--default-width-input) * 1.5);
}
.input-scale-\[2\.5\] {
  --input-width: calc(var(--default-width-input) * 2.5);
}
.input-square {
  --input-border-radius: 0;
}
.kbd-fluid {
  --kbd-border-radius: calc(1lh*var(--kbd-line-height)/6);
}
.kbd-square {
  --kbd-border-radius: 0;
}
.lamp-8 {
  --lamp-height: calc(var(--spacing)*8);
}
.lamp-9 {
  --lamp-height: calc(var(--spacing)*9);
}
.lamp-10 {
  --lamp-height: calc(var(--spacing)*10);
}
.lamp-11 {
  --lamp-height: calc(var(--spacing)*11);
}
.lamp-blue-200 {
  --lamp-color-selected: oklch(from var(--color-blue-200) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.lamp-blue-500 {
  --lamp-color-selected: oklch(from var(--color-blue-500) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.lamp-caption {
  --lamp-outline-color: var(--color-title);
}
.lamp-caption {
  --lamp-color-selected: oklch(from var(--color-caption-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.lamp-caution {
  --lamp-color-selected: oklch(from var(--color-caution-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.lamp-description {
  --lamp-outline-color: var(--color-title);
}
.lamp-description {
  --lamp-color-selected: oklch(from var(--color-description-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.lamp-error {
  --lamp-color-selected: oklch(from var(--color-error-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.lamp-highlight {
  --lamp-color-selected: oklch(from var(--color-highlight-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.lamp-info {
  --lamp-color-selected: oklch(from var(--color-info-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.lamp-ink {
  --lamp-color-selected: oklch(from var(--color-ink-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.lamp-placeholder {
  --lamp-outline-color: var(--color-title);
}
.lamp-placeholder {
  --lamp-color-selected: oklch(from var(--color-placeholder-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.lamp-primary {
  --lamp-color-selected: oklch(from var(--color-primary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.lamp-secondary {
  --lamp-color-selected: oklch(from var(--color-secondary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.lamp-success {
  --lamp-color-selected: oklch(from var(--color-success-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.lamp-tertiary {
  --lamp-color-selected: oklch(from var(--color-tertiary-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.lamp-title {
  --lamp-color-selected: oklch(from var(--color-title-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.lamp-warning {
  --lamp-color-selected: oklch(from var(--color-warning-base) clamp(var(--light-threshold-fg)* var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.otp-gutter-1 {
  --otp-gap: calc(var(--spacing) * 1);
}
.otp-gutter-6 {
  --otp-gap: calc(var(--spacing) * 6);
}
.otp-gutter-\[60px\] {
  --otp-gap: 60px;
}
.overflow-touch {
  -webkit-overflow-scrolling: touch;
}
.pagination-8 {
  --pagination-height: calc(var(--spacing)*8);
}
.pagination-9 {
  --pagination-height: calc(var(--spacing)*9);
}
.pagination-10 {
  --pagination-height: calc(var(--spacing)*10);
}
.pagination-11 {
  --pagination-height: calc(var(--spacing)*11);
}
.pagination-12 {
  --pagination-height: calc(var(--spacing)*12);
}
.pagination-fluid {
  --pagination-border-radius: calc(var(--pagination-height)/6);
}
.pagination-pill {
  --pagination-border-radius: calc(infinity * 1px);
}
.pagination-rounded {
  &:where(:not(.pagination-4, .pagination-5, .pagination-6)) {
    --pagination-border-radius: var(--default-border-radius);
  }
}
.pagination-square {
  --pagination-border-radius: 0;
}
.poster-1x1 {
  --poster-aspect-ratio: 1/1;
}
.poster-1x2 {
  --poster-aspect-ratio: 1/2;
}
.poster-1x3 {
  --poster-aspect-ratio: 1/3;
}
.poster-2x1 {
  --poster-aspect-ratio: 2/1;
}
.poster-2x3 {
  --poster-aspect-ratio: 2/3;
}
.poster-3x1 {
  --poster-aspect-ratio: 3/1;
}
.poster-3x2 {
  --poster-aspect-ratio: 3/2;
}
.poster-3x4 {
  --poster-aspect-ratio: 3/4;
}
.poster-4x3 {
  --poster-aspect-ratio: 4/3;
}
.poster-4x5 {
  --poster-aspect-ratio: 4/5;
}
.poster-5x4 {
  --poster-aspect-ratio: 5/4;
}
.poster-5x7 {
  --poster-aspect-ratio: 5/7;
}
.poster-7x5 {
  --poster-aspect-ratio: 7/5;
}
.poster-9x16 {
  --poster-aspect-ratio: 9/16;
}
.poster-9x21 {
  --poster-aspect-ratio: 9/21;
}
.poster-10 {
  --poster-height: calc(var(--spacing)* 10);
}
.poster-16x9 {
  --poster-aspect-ratio: 16/9;
}
.poster-20 {
  --poster-height: calc(var(--spacing)* 20);
}
.poster-21x9 {
  --poster-aspect-ratio: 21/9;
}
.poster-30 {
  --poster-height: calc(var(--spacing)* 30);
}
.poster-40 {
  --poster-height: calc(var(--spacing)* 40);
}
.poster-50 {
  --poster-height: calc(var(--spacing)* 50);
}
.poster-60 {
  --poster-height: calc(var(--spacing)* 60);
}
.poster-80 {
  --poster-height: calc(var(--spacing)* 80);
}
.poster-\[40px\] {
  --poster-height: 40px;
}
.poster-fluid {
  --poster-border-radius: clamp(var(--spacing), calc(var(--poster-height)/8), calc(var(--spacing)*10));
}
.poster-pill {
  --poster-border-radius: calc(infinity * 1px);
}
.poster-square {
  --poster-border-radius: 0;
}
.progress-3xl {
  --progress-height: calc(var(--spacing) * 8);
}
.progress-20 {
  --progress-value: calc(1% * 20);
}
.progress-25 {
  --progress-value: calc(1% * 25);
}
.progress-30 {
  --progress-value: calc(1% * 30);
}
.progress-32 {
  --progress-value: calc(1% * 32);
}
.progress-35 {
  --progress-value: calc(1% * 35);
}
.progress-40 {
  --progress-value: calc(1% * 40);
}
.progress-45 {
  --progress-value: calc(1% * 45);
}
.progress-55 {
  --progress-value: calc(1% * 55);
}
.progress-60 {
  --progress-value: calc(1% * 60);
}
.progress-65 {
  --progress-value: calc(1% * 65);
}
.progress-67 {
  --progress-value: calc(1% * 67);
}
.progress-70 {
  --progress-value: calc(1% * 70);
}
.progress-75 {
  --progress-value: calc(1% * 75);
}
.progress-80 {
  --progress-value: calc(1% * 80);
}
.progress-85 {
  --progress-value: calc(1% * 85);
}
.progress-89 {
  --progress-value: calc(1% * 89);
}
.progress-90 {
  --progress-value: calc(1% * 90);
}
.progress-100 {
  --progress-value: calc(1% * 100);
}
.progress-\[46\%\] {
  --progress-value: 46%;
}
.progress-\[60\%\] {
  --progress-value: 60%;
}
.progress-fluid {
  --progress-border-radius: calc(var(--progress-height)/6);
}
.progress-gradient {
  :where(&) {
    --progress-image: linear-gradient(calc(90deg + var(--direction-factor-4)),
                oklch(from var(--progress-background-bar) calc(l * (1.5 - var(--scheme-factor-2))) calc(c * 0.5) h),
                var(--progress-background-bar));
  }
}
.progress-lg {
  --progress-height: calc(var(--spacing) * 5);
}
.progress-md {
  --progress-height: calc(var(--spacing) * 4);
}
.progress-pill {
  --progress-border-radius: calc(infinity * 1px);
}
.progress-square {
  --progress-border-radius: 0;
}
.rank-2xl {
  --rank-height: calc(var(--spacing)*5);
}
.rank-3xl {
  --rank-height: calc(var(--spacing)*6);
}
.rank-circle {
  --rank-border-radius: calc(infinity * 1px);
}
.rank-fluid {
  --rank-border-radius: calc(var(--rank-height)/6);
}
.rank-pill {
  --rank-border-radius: calc(infinity * 1px);
}
.rank-plain-error {
  --rank-color: oklch(from var(--color-error-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.rank-plain-primary {
  --rank-color: oklch(from var(--color-primary-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.rank-plain-success {
  --rank-color: oklch(from var(--color-success-base) clamp(var(--light-threshold-fg) * var(--scheme-factor-2), l, var(--light-threshold-fg) * var(--scheme-factor-4)) calc(c * var(--color-c-factor)) h);
}
.rank-square {
  --rank-border-radius: 0;
}
.rank-xl {
  --rank-height: calc(var(--spacing)*4);
}
.rating-8 {
  --rating-height: calc(var(--spacing) * 8);
}
.rating-9 {
  --rating-height: calc(var(--spacing) * 9);
}
.rating-10 {
  --rating-height: calc(var(--spacing) * 10);
}
.rating-11 {
  --rating-height: calc(var(--spacing) * 11);
}
.rating-12 {
  --rating-height: calc(var(--spacing) * 12);
}
.rating-13 {
  --rating-height: calc(var(--spacing) * 13);
}
.rating-gutter {
  --rating-gap: calc(var(--spacing) * 1);
}
.rating-gutter-4 {
  --rating-gap: calc(var(--spacing) * 4);
}
.rating-gutter-6 {
  --rating-gap: calc(var(--spacing) * 6);
}
.segment-8 {
  --segment-height: calc(var(--spacing)*8);
}
.segment-9 {
  --segment-height: calc(var(--spacing)*9);
}
.segment-10 {
  --segment-height: calc(var(--spacing)*10);
}
.segment-fluid {
  --segment-border-radius: calc(var(--segment-height)/4);
}
.segment-rounded {
  &:where(:not(.segment-4, .segment-5, .segment-6)) {
    --segment-border-radius: var(--default-border-radius);
  }
}
.segment-square {
  --segment-border-radius: 0;
}
.shell-8 {
  --shell-row-height: calc(var(--spacing)*8);
}
.shell-9 {
  --shell-row-height: calc(var(--spacing)*9);
}
.shell-10 {
  --shell-row-height: calc(var(--spacing)*10);
}
.shell-11 {
  --shell-row-height: calc(var(--spacing)*11);
}
.shell-12 {
  --shell-row-height: calc(var(--spacing)*12);
}
.shell-13 {
  --shell-row-height: calc(var(--spacing)*13);
}
.shell-fluid {
  --shell-border-radius: calc(var(--shell-row-height)/6);
}
.shell-full {
  --shell-width: 100%;
}
.shell-ratio-2 {
  --shell-width: calc(var(--default-height-input) * 2);
}
.shell-scale {
  --shell-width: var(--default-width-input);
}
.shell-scale-2 {
  --shell-width: calc(var(--default-width-input) * 2);
}
.shell-square {
  --shell-border-radius: 0;
}
.shimmer-\[\#48dbfb\] {
  --shimmer-color: #48dbfb;
}
.shimmer-\[\#feca57\] {
  --shimmer-color: #feca57;
}
.shimmer-\[\#ff6b6b\] {
  --shimmer-color: #ff6b6b;
}
.shimmer-blue-500 {
  --shimmer-color: var(--color-blue-500);
}
.shimmer-caption {
  --shimmer-color: var(--color-caption);
}
.shimmer-caution {
  --shimmer-color: var(--color-caution);
}
.shimmer-description {
  --shimmer-color: var(--color-description);
}
.shimmer-error {
  --shimmer-color: var(--color-error);
}
.shimmer-green-500 {
  --shimmer-color: var(--color-green-500);
}
.shimmer-highlight {
  --shimmer-color: var(--color-highlight);
}
.shimmer-info {
  --shimmer-color: var(--color-info);
}
.shimmer-ink {
  --shimmer-color: var(--color-ink);
}
.shimmer-placeholder {
  --shimmer-color: var(--color-placeholder);
}
.shimmer-primary {
  --shimmer-color: var(--color-primary);
}
.shimmer-purple-500 {
  --shimmer-color: var(--color-purple-500);
}
.shimmer-red-500 {
  --shimmer-color: var(--color-red-500);
}
.shimmer-secondary {
  --shimmer-color: var(--color-secondary);
}
.shimmer-success {
  --shimmer-color: var(--color-success);
}
.shimmer-tertiary {
  --shimmer-color: var(--color-tertiary);
}
.shimmer-title {
  --shimmer-color: var(--color-title);
}
.shimmer-warning {
  --shimmer-color: var(--color-warning);
}
.shimmer-white {
  --shimmer-color: var(--color-white);
}
.sketch-circling-1px {
  --sketch-circling-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 24' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M47,4c-7-2-20.1-3.18-31-1C11,4-.15,8.1,1,15c1,6,19.48,8.31,30,7,8-1,18.97-6.12,18-10s-12-6-15-6'  stroke='black' stroke-width='1px' fill='none' stroke-linecap='round' /%3E%3C/svg%3E");
}
.sketch-circling-error {
  --sketch-circling-color: var(--color-error);
}
.sketch-circling-primary {
  --sketch-circling-color: var(--color-primary);
}
.sketch-circling-warning {
  --sketch-circling-color: var(--color-warning);
}
.sketch-divider-error {
  --sketch-divider-color: var(--color-error);
}
.sketch-divider-primary {
  --sketch-divider-color: var(--color-primary);
}
.sketch-divider-success {
  --sketch-divider-color: var(--color-success);
}
.sketch-mark-error {
  --sketch-mark-color: var(--color-error);
}
.sketch-mark-success {
  --sketch-mark-color: var(--color-success);
}
.sketch-mark-warning {
  --sketch-mark-color: var(--color-warning);
}
.sketch-through-1px {
  --sketch-through-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M2,13.08c7.12-.57,16.25-1.26,30-1.04,10.46.17,21.28,1.68,31,1.96,8.84.25,18.85-.68,35-1.96' stroke='black' stroke-width='1px' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sketch-through-error {
  --sketch-through-color: var(--color-error);
}
.sketch-through-primary {
  --sketch-through-color: var(--color-primary);
}
.sketch-through-success {
  --sketch-through-color: var(--color-success);
}
.sketch-underline-1px {
  --sketch-underline-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M1,22c5.37.74,9.78,1.22,17,1,8.57-.27,13.18-1.98,21-2,9.66-.03,10.09,2.17,19,2,8.68-.16,10.34-1.28,19-2,4.81-.4,12-1,22,1' stroke='black' stroke-width='1px' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sketch-underline-error {
  --sketch-underline-color: var(--color-error);
}
.sketch-underline-primary {
  --sketch-underline-color: var(--color-primary);
}
.sketch-underline-success {
  --sketch-underline-color: var(--color-success);
}
.sketch-wrong-1px {
  --sketch-wrong-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M2,2 C32.67,8 63.33,15 94,19 M8,21 C36.67,15 69.33,8 98,2' stroke='black' stroke-width='1px' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sketch-wrong-error {
  --sketch-wrong-color: var(--color-error);
}
.sketch-wrong-primary {
  --sketch-wrong-color: var(--color-primary);
}
.sketch-wrong-warning {
  --sketch-wrong-color: var(--color-warning);
}
.spacer-1 {
  --spacer-size: calc(var(--spacing) * 1);
}
.spacer-2 {
  --spacer-size: calc(var(--spacing) * 2);
}
.spacer-3 {
  --spacer-size: calc(var(--spacing) * 3);
}
.spacer-4 {
  --spacer-size: calc(var(--spacing) * 4);
}
.spacer-5 {
  --spacer-size: calc(var(--spacing) * 5);
}
.spacer-6 {
  --spacer-size: calc(var(--spacing) * 6);
}
.spacer-8 {
  --spacer-size: calc(var(--spacing) * 8);
}
.spacer-10 {
  --spacer-size: calc(var(--spacing) * 10);
}
.spacer-12 {
  --spacer-size: calc(var(--spacing) * 12);
}
.spacer-16 {
  --spacer-size: calc(var(--spacing) * 16);
}
.spacer-20 {
  --spacer-size: calc(var(--spacing) * 20);
}
.spinner-5 {
  --spinner-height: calc(var(--spacing)*5);
}
.spinner-6 {
  --spinner-height: calc(var(--spacing)*6);
}
.spinner-7 {
  --spinner-height: calc(var(--spacing)*7);
}
.spinner-8 {
  --spinner-height: calc(var(--spacing)*8);
}
.stats-7 {
  --stats-font-size: calc(var(--spacing)*7);
}
.stats-8 {
  --stats-font-size: calc(var(--spacing)*8);
}
.stats-9 {
  --stats-font-size: calc(var(--spacing)*9);
}
.stats-10 {
  --stats-font-size: calc(var(--spacing)*10);
}
.stats-11 {
  --stats-font-size: calc(var(--spacing)*11);
}
.stats-12 {
  --stats-font-size: calc(var(--spacing)*12);
}
.stats-13 {
  --stats-font-size: calc(var(--spacing)*13);
}
.stats-14 {
  --stats-font-size: calc(var(--spacing)*14);
}
.stats-15 {
  --stats-font-size: calc(var(--spacing)*15);
}
.status-\[\#ff6b6b\] {
  --status-color-dot: #ff6b6b;
}
.status-\[8px\] {
  --status-height: 8px;
}
.status-\[12px\] {
  --status-height: 12px;
}
.status-\[16px\] {
  --status-height: 16px;
}
.status-\[20px\] {
  --status-height: 20px;
}
.status-\[24px\] {
  --status-height: 24px;
}
.status-\[red\] {
  --status-color-dot: red;
}
.status-black {
  --status-color-dot: var(--color-black);
}
.status-blue-500 {
  --status-color-dot: var(--color-blue-500);
}
.status-caption {
  --status-color-dot: var(--color-caption);
}
.status-caution {
  --status-color-dot: var(--color-caution);
}
.status-circle {
  --status-border-radius: calc(infinity * 1px);
}
.status-description {
  --status-color-dot: var(--color-description);
}
.status-error {
  --status-color-dot: var(--color-error);
}
.status-fluid {
  --status-border-radius: calc(var(--status-height)/4);
}
.status-green-500 {
  --status-color-dot: var(--color-green-500);
}
.status-highlight {
  --status-color-dot: var(--color-highlight);
}
.status-info {
  --status-color-dot: var(--color-info);
}
.status-ink {
  --status-color-dot: var(--color-ink);
}
.status-pill {
  --status-border-radius: calc(infinity * 1px);
}
.status-placeholder {
  --status-color-dot: var(--color-placeholder);
}
.status-primary {
  --status-color-dot: var(--color-primary);
}
.status-rounded {
  --status-border-radius: var(--spacing);
}
.status-secondary {
  --status-color-dot: var(--color-secondary);
}
.status-square {
  --status-border-radius: 0;
}
.status-success {
  --status-color-dot: var(--color-success);
}
.status-tertiary {
  --status-color-dot: var(--color-tertiary);
}
.status-title {
  --status-color-dot: var(--color-title);
}
.status-warning {
  --status-color-dot: var(--color-warning);
}
.status-white {
  --status-color-dot: var(--color-white);
}
.switch-indeterminate {
  &:where(:not(:has(input:checked))) {
    --switch-background: var(--switch-indeterminate-bg);
  }
}
.table-center {
  --table-align: center;
}
.table-end {
  --table-align: end;
}
.table-right {
  --table-align: right;
}
.table-start {
  --table-align: start;
}
.tag-8 {
  --tag-height: calc(var(--spacing)*8);
}
.tag-9 {
  --tag-height: calc(var(--spacing)*9);
}
.tag-10 {
  --tag-height: calc(var(--spacing)*10);
}
.tag-11 {
  --tag-height: calc(var(--spacing)*11);
}
.tag-12 {
  --tag-height: calc(var(--spacing)*12);
}
.tag-13 {
  --tag-height: calc(var(--spacing)*13);
}
.tag-compact {
  --tag-padding-x: calc(1em / 3);
}
.tag-fluid {
  --tag-border-radius: calc(var(--tag-height)/6);
}
.tag-selected {
  --tag-border-color: var(--tag-color);
}
.tag-square {
  --tag-border-radius: 0;
}
.tools-8 {
  --tools-height: calc(var(--spacing)*8);
}
.tools-9 {
  --tools-height: calc(var(--spacing)*9);
}
.tools-10 {
  --tools-height: calc(var(--spacing)*10);
}
.tools-11 {
  --tools-height: calc(var(--spacing)*11);
}
.tools-12 {
  --tools-height: calc(var(--spacing)*12);
}
.tools-13 {
  --tools-height: calc(var(--spacing)*13);
}
.tree-relaxed {
  --tree-node-padding-y: calc((calc(var(--spacing) * 9) - var(--tree-leading))/2);
}
.tree-square {
  --tree-node-border-radius: 0;
}
@layer base {
  :root, :host {
    --spacing: 0.25rem;
    --default-gap: calc(var(--spacing) * 4);
    --default-accent-color: var(--color-primary);
    --default-border-color: var(--color-title-bd);
    --default-border-radius: calc(var(--spacing) * 2);
    --default-transition-duration: var(--duration-normal);
    --default-opacity-disabled: 0.5;
    --default-mask: oklch(from var(--color-black) l c h / 0.88);
    --default-outline-offset: 2px;
    --default-outline-width: 2px;
    --default-outline-color: var(--color-primary);
    --default-height-input: calc(var(--spacing) * 8);
    --default-width-input: calc(var(--spacing) * 100);
    --default-size-check: 18px;
    --direction-factor-1: 1;
    --direction-factor-2: 0;
    --direction-factor-3: 1;
    --direction-factor-4: 0deg;
    --scheme-factor-1: 1;
    --scheme-factor-2: 0;
    --scheme-factor-3: 1;
    --scheme-factor-4: 1;
    --light-threshold-surface: 0.99;
    --light-threshold-bg: 0.98;
    --light-threshold-bg-hover: 0.96;
    --light-threshold-bg-active: 0.93;
    --light-threshold-bd: 0.89;
    --light-threshold-bd-hover: 0.80;
    --light-threshold-bd-active: 0.69;
    --light-threshold-fg: 0.62;
    --light-threshold-fg-hover: 0.69;
    --light-threshold-fg-active: 0.74;
    --light-threshold-body: 0.48;
    --light-threshold-body-hover: 0.62;
    --light-threshold-body-active: 0.48;
    --light-readonly: 1.2;
    --opacity-bg: 1;
    --opacity-bg-hover: 1;
    --opacity-bg-active: 1;
    --chorme-surface: 0.007;
    --chorme-bg: 0.017;
    --chorme-bg-hover: 0.028;
    --chorme-bg-active: 0.052;
    --chorme-bd: 0.068;
    --chorme-bd-hover: 0.111;
    --chorme-bd-active: 0.115;
    --chorme-body: 0.15;
    --light-threshold-contrast: 0.82;
    --light-min: 0.17;
    --light-max: 1;
  }
  [dir="ltr"] {
    --direction-factor-1: 1;
    --direction-factor-2: 0;
    --direction-factor-3: 1;
    --direction-factor-4: 0deg;
  }
  [dir="rtl"] {
    --direction-factor-1: -1;
    --direction-factor-2: 1;
    --direction-factor-3: 0;
    --direction-factor-4: 180deg;
  }
  .light {
    --scheme-factor-1: 1;
    --scheme-factor-2: 0;
    --scheme-factor-3: 1;
    --scheme-factor-4: 1;
    --light-threshold-surface: 0.99;
    --light-threshold-bg: 0.98;
    --light-threshold-bg-hover: 0.96;
    --light-threshold-bg-active: 0.93;
    --light-threshold-bd: 0.89;
    --light-threshold-bd-hover: 0.80;
    --light-threshold-bd-active: 0.69;
    --light-threshold-fg: 0.62;
    --light-threshold-fg-hover: 0.69;
    --light-threshold-fg-active: 0.74;
    --light-threshold-body: 0.48;
    --light-threshold-body-hover: 0.62;
    --light-threshold-body-active: 0.48;
    --light-readonly: 1.2;
    --opacity-bg: 1;
    --opacity-bg-hover: 1;
    --opacity-bg-active: 1;
    --chorme-surface: 0.007;
    --chorme-bg: 0.017;
    --chorme-bg-hover: 0.028;
    --chorme-bg-active: 0.052;
    --chorme-bd: 0.068;
    --chorme-bd-hover: 0.111;
    --chorme-bd-active: 0.115;
    --chorme-body: 0.15;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --scheme-factor-1: -1;
      --scheme-factor-2: 1;
      --scheme-factor-3: 0;
      --scheme-factor-4: 100;
      --light-threshold-surface: 0;
      --light-threshold-bg: l;
      --light-threshold-bg-hover: l;
      --light-threshold-bg-active: l;
      --light-threshold-bd: 0.33;
      --light-threshold-bd-hover: 0.48;
      --light-threshold-bd-active: 0.62;
      --light-threshold-fg: 0.85;
      --light-threshold-fg-hover: 0.89;
      --light-threshold-fg-active: 0.8;
      --light-threshold-body: 0.93;
      --light-threshold-body-hover: 0.96;
      --light-threshold-body-active: 0.89;
      --light-readonly: 0.8;
      --opacity-bg: 0.04;
      --opacity-bg-hover: 0.08;
      --opacity-bg-active: 0.12;
      --chorme-surface: c;
      --chorme-bg: c;
      --chorme-bg-hover: c;
      --chorme-bg-active: c;
      --chorme-bd: 0.079;
      --chorme-bd-hover: 0.085;
      --chorme-bd-active: 0.085;
      --chorme-body: 0.056;
    }
  }
  .dark {
    --scheme-factor-1: -1;
    --scheme-factor-2: 1;
    --scheme-factor-3: 0;
    --scheme-factor-4: 100;
    --light-threshold-surface: 0;
    --light-threshold-bg: l;
    --light-threshold-bg-hover: l;
    --light-threshold-bg-active: l;
    --light-threshold-bd: 0.33;
    --light-threshold-bd-hover: 0.48;
    --light-threshold-bd-active: 0.62;
    --light-threshold-fg: 0.85;
    --light-threshold-fg-hover: 0.89;
    --light-threshold-fg-active: 0.8;
    --light-threshold-body: 0.93;
    --light-threshold-body-hover: 0.96;
    --light-threshold-body-active: 0.89;
    --light-readonly: 0.8;
    --opacity-bg: 0.04;
    --opacity-bg-hover: 0.08;
    --opacity-bg-active: 0.12;
    --chorme-surface: c;
    --chorme-bg: c;
    --chorme-bg-hover: c;
    --chorme-bg-active: c;
    --chorme-bd: 0.079;
    --chorme-bd-hover: 0.085;
    --chorme-bd-active: 0.085;
    --chorme-body: 0.056;
  }
  :root {
    color-scheme: light dark;
  }
  html {
    background-color: var(--color-stage);
    color: var(--color-title);
    scrollbar-gutter: stable;
  }
  @media (hover: hover) {
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      background: transparent;
    }
    ::-webkit-scrollbar-track {
      background-color: oklch(from var(--color-title) l c h / 0.04);
    }
    ::-webkit-scrollbar-thumb {
      background-color: var(--color-title-bd);
    }
    ::-webkit-scrollbar-thumb:hover {
      background-color: var(--color-title-bd-hover);
    }
    ::-webkit-scrollbar-thumb:active {
      background-color: var(--color-title-bd-active);
    }
    ::-webkit-scrollbar-corner {
      background-color: oklch(from var(--color-title) l c h / 0.01);
    }
    @-moz-document url-prefix() {
      * {
        scrollbar-gutter: auto;
        scrollbar-width: thin;
      }
    }
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  :focus {
    outline: none;
  }
  :focus-visible {
    outline: var(--custom-outline-width, var(--default-outline-width)) solid var(--custom-outline-color, var(--default-outline-color));
    outline-offset: var(--custom-outline-offset, var(--default-outline-offset));
  }
  ::placeholder {
    color: var(--color-placeholder);
  }
  input, textarea, select {
    --input-border-radius: var(--default-border-radius);
    color: inherit;
    border-radius: var(--input-border-radius);
    &:where(:disabled) {
      opacity: var(--default-opacity-disabled);
    }
  }
  input::-ms-clear, input::-ms-reveal {
    opacity: var(--default-opacity-disabled);
  }
  select, input:where(:not([type=radio], [type=checkbox], [type=button], [type=submit], [type=reset])) {
    --input-row-height: var(--default-height-input);
    height: var(--input-row-height);
  }
  textarea {
    --input-row-height: var(--default-height-input);
    --input-padding-y: calc((var(--input-row-height) - var(--input-border-width)*2 - var(--input-font-size)*var(--leading-normal))/2);
    padding-block: var(--input-padding-y);
  }
  select, input:where(:not([type=color], [type=radio], [type=checkbox], [type=button], [type=submit], [type=reset])), textarea {
    --input-width: var(--default-width-input);
    width: var(--input-width);
    min-width: 0;
    max-width: 100%;
  }
  select, input:where(:not([type=range], [type=radio], [type=checkbox], [type=button], [type=submit], [type=reset])), textarea {
    --input-border-width: 1px;
    --input-border-color: var(--color-title-bd);
    --input-border-color-hover: var(--color-title-bd-hover);
    --input-border-color-focus: var(--color-primary);
    --input-color-invalid: var(--color-error);
    --input-border-color-invalid: var(--input-color-invalid);
    --input-background: transparent;
    --input-background-hover: var(--input-background);
    --input-background-focus: var(--input-background-hover);
    --input-background-invalid: var(--color-error-surface);
    --input-padding-x: calc(var(--input-row-height)/4);
    --input-outline-width: 1px;
    border: var(--input-border-width) solid var(--input-border-color);
    background-color: var(--input-background);
    padding-inline: var(--input-padding-x);
    --: ;
    transition: var(--transition-all-normal);
    &:focus-visible {
      --input-border-color: var(--input-border-color-focus);
      background-color: var(--input-background-focus);
      outline: none;
      &:where(:not(:user-invalid)) {
        border-color: var(--input-border-color-focus);
        box-shadow: 0 0 0 4px var(--input-border-color-focus), 0 0 0 var(--input-outline-width) var(--input-border-color-focus);
        @supports (color: color-mix(in lab, red, red)) {
          box-shadow: 0 0 0 4px color-mix(in oklab, var(--input-border-color-focus) 20%, transparent), 0 0 0 var(--input-outline-width) var(--input-border-color-focus);
        }
      }
      &:where(:user-invalid) {
        border-color: var(--input-border-color-invalid);
        box-shadow: 0 0 0 4px var(--input-color-invalid), 0 0 0 var(--input-outline-width) var(--input-color-invalid);
        @supports (color: color-mix(in lab, red, red)) {
          box-shadow: 0 0 0 4px color-mix(in oklab, var(--input-color-invalid) 20%, transparent), 0 0 0 var(--input-outline-width) var(--input-color-invalid);
        }
      }
    }
    &:user-invalid {
      color: var(--input-color-invalid);
      border-color: var(--shell-border-color-hover);
      background-color: var(--input-background-invalid);
    }
  }
  input:where(:not([type=color], [type=range], [type=file], [type=radio], [type=checkbox], [type=button], [type=submit], [type=reset])), textarea {
    &:where([readonly]) {
      --input-color-readonly: var(--color-description);
    }
    &:where(:not(:placeholder-shown, :focus-visible)[placeholder]) {
      border-color: var(--input-border-color-hover);
      background-color: var(--input-background-hover);
    }
  }
  select, input:where(:not([type=color], [type=radio], [type=checkbox], [type=button], [type=submit], [type=reset])), textarea {
    --input-font-size: 0.875rem;
    --input-color: var(--color-title);
    color: var(--input-color-readonly, var(--input-color));
    font-size: var(--input-font-size);
    &:where(:not([type=range], [disabled], :focus-visible, :user-invalid):hover) {
      border-color: var(--input-border-color-hover);
      background-color: var(--input-background-hover);
    }
  }
  input:where([type=radio], [type=checkbox]) {
    margin: 0;
  }
  input:where([type="file"]) {
    &::file-selector-button {
      height: 100%;
      color: inherit;
      border: none;
      background: transparent;
      padding-inline-start: 0;
      padding-bottom: 0;
      margin-inline-end: 0;
      padding-inline-end: 1.2em;
      background-image: radial-gradient(circle, oklch(from currentColor l c h /0.14) 70%, transparent 72%);
      background-position: calc(100%*var(--direction-factor-3) - (0.6em - 3px)*var(--direction-factor-1)) center;
      background-size: 6px 6px;
      background-repeat: no-repeat;
      cursor: pointer;
      --: ;
      transition: var(--transition-all-normal);
    }
    &:where(:not([disabled])) {
      cursor: pointer;
    }
    &[disabled] {
      &::file-selector-button {
        cursor: not-allowed;
      }
    }
  }
  input:where([type=search]) {
    &::-webkit-search-cancel-button {
      filter: grayscale(100%);
      opacity: var(--default-opacity-disabled);
      cursor: pointer;
      --: ;
      transition: var(--transition-all-normal);
    }
    &:hover::-webkit-search-cancel-button {
      opacity: 1;
    }
  }
  input:where([type=color]) {
    --input-padding-x: var(--spacing);
    min-width: auto;
    width: var(--input-row-height);
    padding-block: var(--input-padding-x);
    &::-webkit-color-swatch-wrapper {
      padding: 0;
    }
    &::-webkit-color-swatch {
      border: none;
      border-radius: calc(var(--input-border-radius)/2);
    }
    &::-moz-color-swatch {
      border: none;
      border-radius: calc(var(--input-border-radius)/2);
    }
    &:where(:not(:disabled, :focus-visible):hover) {
      border-color: var(--input-border-color-hover);
      cursor: pointer;
    }
  }
  input:where([type=datetime-local], [type=date], [type=month], [type=week], [type=time]) {
    &::-webkit-datetime-edit-text {
      margin-inline-end: var(--spacing);
      color: var(--color-caption);
    }
    &::-webkit-datetime-edit-month-field, &::-webkit-datetime-edit-day-field, &::-webkit-datetime-edit-year-field, &::-webkit-datetime-edit-week-field, &::-webkit-datetime-edit-hour-field, &::-webkit-datetime-edit-minute-field {
      margin-inline-end: var(--spacing);
      border-radius: var(--spacing);
      padding: 0 var(--spacing);
      --: ;
      transition: var(--transition-all-normal);
    }
    &::-webkit-calendar-picker-indicator {
      opacity: var(--default-opacity-disabled);
      padding: 0;
      --: ;
      transition: var(--transition-all-normal);
    }
    &:hover::-webkit-calendar-picker-indicator {
      opacity: 1;
    }
  }
  select:where([multiple], [size]:not([size="0"], [size="1"])) {
    --input-count: 5;
    line-height: var(--input-row-height);
    padding: 0;
    overflow: auto;
  }
  @supports not (appearance: base-select) {
    select:where([multiple]:not([size])) {
      min-height: calc((var(--input-row-height) + 1px)*var(--input-count) + 1px);
    }
  }
  select:where([size]:not([size="0"], [size="1"])) {
    height: auto;
  }
  select {
    --input-divider-border-color: var(--color-title-bd);
    --input-option-bg-checked: var(--color-title-bg-hover);
    --input-option-bg-hover: var(--color-title-bg-hover);
    --input-option-bg-disabled: var(--color-placeholder);
    >* {
      border-block-end: 1px solid var(--input-divider-border-color);
      &:last-child {
        border-width: 0;
      }
    }
    option {
      --custom-outline-color: var(--input-color);
      --custom-outline-offset: 0;
      color: var(--color-title);
      background-color: var(--color-stage);
      padding-inline: var(--input-padding-x);
      height: var(--input-row-height);
      display: flex;
      align-items: center;
      --: ;
      transition: var(--transition-all-normal);
      &:checked {
        color: var(--input-color);
        background-color: var(--input-option-bg-checked);
      }
    }
    &:where([disabled]) option {
      color: var(--input-option-bg-disabled);
    }
    &:where(:not([disabled])) option:where(:not(:checked)):hover {
      background-color: var(--input-option-bg-hover);
    }
    optgroup {
      color: var(--color-title);
      background-color: var(--color-stage);
      padding-inline: var(--input-padding-x);
      margin-top: var(--input-padding-x);
      option {
        margin-inline: calc(-1 * var(--input-padding-x));
        padding-inline-start: calc(var(--input-padding-x) + 1em);
        border-block-end: 1px solid var(--input-divider-border-color);
        &:last-child {
          border-width: 0;
        }
        &:first-child {
          margin-top: var(--spacing);
        }
      }
    }
  }
  @supports (appearance: base-select) {
    select {
      appearance: base-select;
      optgroup {
        border: none;
        padding-inline: 0;
        option {
          padding-inline-start: var(--input-padding-x);
        }
      }
      optgroup option, option {
        border: none;
        margin: calc(var(--spacing) * 1);
        border-radius: calc(var(--input-border-radius)/2);
      }
    }
    select:where([multiple]) {
      height: auto;
      max-height: calc((var(--input-row-height) + calc(var(--spacing) * 1)) * var(--input-count) + calc(var(--spacing) * 1) + 2px);
    }
    select:where(:not([multiple]), [size="0"], [size="1"]) {
      appearance: base-select;
      display: flex;
      align-items: center;
      line-height: 1em;
      &::picker(select) {
        appearance: base-select;
        border: 1px solid var(--color-title-bd);
        border-radius: inherit;
        margin-block: calc(var(--spacing) * 2);
        background-color: var(--color-stage);
        --tw-shadow: 1px 1px 0.75rem var(--tw-shadow-color, oklch(from var(--color-black) l c h / 0.12));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
      &::picker-icon {
        color: currentColor;
        opacity: 0.5;
        content: '';
        mask-image: var(--icon-mask-image);
        display: inline-block;
        height: 1em;
        aspect-ratio: 1/1;
        text-align: center;
        background-color: currentColor;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        --: ;
        transition: var(--transition-all-normal);
        --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>');
      }
      &:open::picker-icon {
        --: ;
        rotate: 180deg;
      }
      option:focus-visible {
        outline: none;
        background-color: var(--input-option-bg-hover);
      }
    }
  }
  input:where([type=range]) {
    --input-color: var(--color-primary);
    --input-track-height: 0.5em;
    --input-thumb-height: 1.5em;
    --input-track-color: var(--color-title-bg-active);
    --input-track-color-hover: oklch(from var(--input-color) var(--light-threshold-bd) min(c, calc(var(--chorme-bd) * var(--color-c-factor))) h);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    &:where(:not([disabled])):hover {
      --input-track-color: var(--input-track-color-hover);
    }
    &::-webkit-slider-runnable-track {
      height: var(--input-track-height);
      background: var(--input-track-color);
      border-radius: var(--input-track-height);
      --: ;
      transition: var(--transition-all-normal);
    }
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      margin-top: calc((var(--input-track-height) - var(--input-thumb-height)) / 2);
      height: var(--input-thumb-height);
      width: var(--input-thumb-height);
      background-color: var(--color-stage);
      border: 2px solid var(--input-color);
      border-radius: var(--input-thumb-height);
      --: ;
      transition: var(--transition-all-normal);
    }
    &:where(:not([disabled])):hover::-webkit-slider-thumb {
      transform: scale(1.2);
      box-shadow: 0 0 0 var(--spacing) var(--input-color);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: 0 0 0 var(--spacing) color-mix(in oklab, var(--input-color) 20%, transparent);
      }
    }
    &::-moz-range-track {
      height: var(--input-track-height);
      background: var(--input-track-color);
      border-radius: var(--input-track-height);
      --: ;
      transition: var(--transition-all-normal);
    }
    &::-moz-range-progress {
      background-color: var(--input-color);
      height: var(--input-track-height);
      border-radius: var(--input-track-height);
      --: ;
      transition: var(--transition-all-normal);
    }
    &::-moz-range-thumb {
      height: var(--input-thumb-height);
      width: var(--input-thumb-height);
      background-color: var(--color-stage);
      border: 2px solid var(--input-color);
      border-radius: 50%;
      box-sizing: border-box;
      --: ;
      transition: var(--transition-all-normal);
    }
    &:where(:not([disabled])):hover::-moz-range-thumb {
      transform: scale(1.2);
      box-shadow: 0 0 0 var(--spacing) var(--input-color);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: 0 0 0 var(--spacing) color-mix(in oklab, var(--input-color) 20%, transparent);
      }
    }
  }
  meter {
    --meter-height: 0.375rem;
    --meter-track-bg: var(--color-title-bg-hover);
    --meter-step-1: var(--color-success);
    --meter-step-2: var(--color-warning);
    --meter-step-3: var(--color-error);
    block-size: var(--meter-height);
    &::-webkit-meter-bar {
      height: var(--meter-height);
      background-color: var(--meter-track-bg);
      border: none;
    }
    &::-webkit-meter-optimum-value, &::-webkit-meter-suboptimum-value, &::-webkit-meter-even-less-good-value {
      border-radius: var(--meter-height);
      --: ;
      transition: var(--transition-all-normal);
    }
    &::-webkit-meter-optimum-value {
      background: var(--meter-step-1);
    }
    &::-webkit-meter-suboptimum-value {
      background: var(--meter-step-2);
    }
    &::-webkit-meter-even-less-good-value {
      background: var(--meter-step-3);
    }
  }
  progress, progress::-webkit-progress-bar, progress::-webkit-progress-value {
    border-radius: var(--progress-height);
  }
  progress {
    --progress-min-width: calc(var(--default-height-input)*3);
    --progress-height: 0.375rem;
    --progress-width: var(--default-width-input);
    --progress-track-color: var(--color-title-bg-hover);
    --progress-thumb-color: var(--color-primary);
    width: var(--progress-width);
    min-width: var(--progress-min-width);
    height: var(--progress-height);
    border: none;
    vertical-align: middle;
    &::-webkit-progress-bar {
      background-color: var(--progress-track-color);
    }
    &::-webkit-progress-value {
      background-color: var(--progress-thumb-color);
      --: ;
      transition: var(--transition-all-normal);
    }
    &::-moz-progress-bar {
      background: var(--progress-thumb-color);
      border-radius: var(--progress-height);
    }
  }
  form {
    position: relative;
  }
  fieldset {
    border: 1px solid var(--color-title-bd);
    border-radius: calc(var(--spacing)*4);
    padding: var(--default-gap);
    td {
      padding: var(--spacing);
    }
  }
  legend {
    padding: 0 calc(var(--spacing)*2);
    font-size: 0.75rem;
  }
  label {
    gap: var(--spacing);
  }
  hr {
    background-color: var(--color-title-bd);
  }
  code {
    --code-color: currentColor;
    --code-background: var(--color-title-bg-active);
    --code-padding-x: var(--spacing);
    --code-border-radius: var(--spacing);
    color: var(--code-color);
    background-color: var(--code-background);
    padding-inline: var(--code-padding-x);
    border-radius: var(--code-border-radius);
    display: inline-flex;
    gap: var(--spacing);
    line-height: calc(1lh - 2px);
  }
  pre {
    --pre-font-size: var(--text-sm);
    --pre-background: var(--color-title-bg);
    --pre-padding: var(--default-gap);
    --pre-border-radius: var(--default-border-radius);
    --pre-color: currentColor;
    color: var(--pre-color);
    font-size: var(--pre-font-size);
    background-color: var(--pre-background);
    padding: var(--pre-padding);
    border-radius: var(--pre-border-radius);
    &>code {
      --code-color: var(--color-title);
      --code-background: transparent;
      --code-padding-x: 0;
      --code-border-radius: 0;
      min-height: var(--default-height-input);
    }
  }
  kbd {
    --kbd-color: var(--color-description);
    --kbd-font-size: var(--text-sm);
    --kbd-height: fit-content;
    --kbd-line-height: var(--leading-normal);
    --kbd-background: var(--color-caption-surface);
    --kbd-border-color: var(--color-caption);
    --kbd-border-width: 1px;
    --kbd-padding-x: 0.5em;
    --kbd-border-radius: var(--spacing);
    font-size: var(--kbd-font-size);
    color: var(--kbd-color);
    line-height: var(--kbd-line-height);
    height: var(--kbd-height);
    background-color: var(--kbd-background);
    border: var(--kbd-border-width) solid var(--kbd-border-color);
    border-block-end-width: calc(var(--kbd-border-width) + 1px);
    padding-inline: var(--kbd-padding-x);
    border-radius: var(--kbd-border-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  ul {
    list-style: none;
  }
  li {
    position: relative;
  }
  ul:where(:not(.reset-ul)), ol:where(:not(.reset-ul)) {
    --list-padding-x: 2em;
    --list-margin-y: 0;
    --list-dot-size: var(--spacing);
    --list-dot-background: var(--color-caption);
    margin-block: var(--list-margin-y);
    padding-inline-start: var(--list-padding-x);
  }
  ul:where(:not(.reset-ul))>li:before {
    content: '';
    width: var(--list-dot-size);
    height: var(--list-dot-size);
    border-radius: var(--list-dot-size);
    background-color: var(--list-dot-background);
    position: absolute;
    inset-inline-start: calc(var(--list-padding-x)/-2);
    inset-block-start: calc((1lh - var(--list-dot-size))/2);
  }
  dl:where(:not(.reset-dl)) {
    --list-dot-size: var(--spacing);
    --list-dot-background: var(--color-caption);
    --list-margin-y: 1rem;
    --list-padding-y: 1rem;
    --list-padding-x: 1em;
    --list-gap: calc(var(--spacing)*2);
    margin-block-start: var(--list-margin-y);
    margin-block-end: var(--list-margin-y);
    padding-block: var(--list-padding-y);
    padding-inline-start: var(--list-padding-x);
    padding-inline-end: 0;
    dt {
      font-weight: bolder;
      position: relative;
    }
    dt:before {
      content: '';
      width: var(--list-dot-size);
      height: var(--list-dot-size);
      border-radius: var(--list-dot-size);
      background-color: var(--list-dot-background);
      position: absolute;
      inset-inline-start: calc(-1*var(--list-padding-x));
      inset-block-start: calc((1lh - var(--list-dot-size))/2);
    }
    dd {
      margin-inline-start: 0;
    }
    dd+dt {
      margin-block-start: var(--list-gap);
    }
  }
  blockquote {
    --blockquote-background: var(--color-primary-bg);
    --blockquote-border-color: var(--color-primary-bd-active);
    --blockquote-border-width: 3px;
    display: flex;
    flex-direction: column;
    background-color: var(--blockquote-background);
    border-inline-start: var(--blockquote-border-width) solid var(--blockquote-border-color);
    padding: 0 var(--default-gap);
    margin: var(--default-gap) 0;
  }
  cite:lang(zh), cite:lang(ja), cite:lang(ko), cite:lang(hi), cite:lang(ar), cite:lang(fa), cite:lang(ur), cite:lang(ps), cite:lang(mr), cite:lang(ne), cite:lang(bn), cite:lang(pa), cite:lang(gu), cite:lang(ta), cite:lang(te), cite:lang(kn), cite:lang(ml), cite:lang(si), cite:lang(th), cite:lang(lo), cite:lang(km), cite:lang(my), cite:lang(bo), cite:lang(he), cite:lang(am), cite:lang(ti) {
    font-style: normal;
    text-decoration: 1px underline dashed;
    text-underline-offset: .2em;
  }
  em:lang(zh) {
    font-style: normal;
    text-emphasis: filled circle;
    text-emphasis-position: under right;
  }
  em:lang(ja) {
    font-style: normal;
    text-emphasis: filled circle;
    text-emphasis-position: over right;
  }
  em:lang(ko), em:lang(ar), em:lang(hi), em:lang(fa), em:lang(ur), em:lang(ps), em:lang(mr), em:lang(ne), em:lang(bn), em:lang(pa), em:lang(gu), em:lang(ta), em:lang(te), em:lang(kn), em:lang(ml), em:lang(si), em:lang(th), em:lang(lo), em:lang(km), em:lang(my), em:lang(bo), em:lang(he), em:lang(am), em:lang(ti) {
    font-style: normal;
    font-weight: bolder;
  }
  dfn:lang(zh), dfn:lang(ja), dfn:lang(ko), dfn:lang(hi), dfn:lang(ar), dfn:lang(fa), dfn:lang(ur), dfn:lang(ps), dfn:lang(mr), dfn:lang(ne), dfn:lang(bn), dfn:lang(pa), dfn:lang(gu), dfn:lang(ta), dfn:lang(te), dfn:lang(kn), dfn:lang(ml), dfn:lang(si), dfn:lang(th), dfn:lang(lo), dfn:lang(km), dfn:lang(my), dfn:lang(bo), dfn:lang(he), dfn:lang(am), dfn:lang(ti) {
    font-style: normal;
    font-weight: bolder;
  }
  ruby>rt {
    padding: 0 var(--spacing);
    font-size: 0.75em;
  }
  address {
    font-style: normal;
  }
  time {
    color: var(--color-description);
    display: inline-block;
  }
  mark {
    background-color: var(--color-highlight);
  }
  details {
    border: 1px solid var(--color-title-bd);
    border-radius: var(--default-border-radius);
    >summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: calc(var(--spacing)*2);
      height: 2.5em;
      padding-inline: 1em;
      position: relative;
      &:after {
        content: '';
        color: var(--color-caption);
        mask-image: var(--icon-mask-image);
        cursor: pointer;
        display: inline-block;
        height: 1em;
        aspect-ratio: 1/1;
        text-align: center;
        background-color: currentColor;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        --: ;
        transition: var(--transition-all-normal);
        --icon-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>');
      }
      +* {
        padding: 1em;
      }
    }
    &[open]>summary:after {
      --: ;
      rotate: 180deg;
    }
  }
  dialog {
    --dialog-padding: var(--default-gap);
    --dialog-tools-margin: calc(var(--spacing)*2);
    background: var(--color-stage);
    max-width: calc(100dvw - var(--default-gap)*4);
    max-height: calc(100dvh - var(--default-gap)*4);
    border-radius: calc(var(--default-border-radius)*2);
    scale: 0.9;
    opacity: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--default-border-color);
    box-shadow: var(--shadow-bubble);
    pointer-events: none;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 600;
    translate: -50% -50%;
    --: ;
    transition: var(--transition-all-normal);
    &::backdrop {
      display: block;
      background: var(--default-mask);
    }
    &[open], &:target {
      pointer-events: auto;
      scale: 1;
      opacity: 1;
      &::backdrop {
        --: ;
        animation: fade-in var(--custom-duration, var(--duration-normal)) ease-out both;
      }
    }
    [data-role=header] {
      display: flex;
      gap: 0.5em;
      padding: var(--dialog-padding);
      [data-role=title] {
        flex: 1;
        display: flex;
        gap: 0.5em;
      }
    }
    [data-role=tools] {
      position: absolute;
      inset-block-start: var(--dialog-tools-margin);
      inset-inline-end: var(--dialog-tools-margin);
    }
    [data-role=body] {
      flex: 1;
      margin: var(--dialog-padding);
      max-height: calc(100dvh - var(--default-height-input)*6);
      overflow-y: auto;
      overflow-x: hidden;
    }
    [data-role=footer] {
      padding: var(--dialog-padding);
      display: flex;
      justify-content: flex-end;
      gap: 0.5em;
    }
  }
  table {
    --table-width: auto;
    --table-font-size: max(0.875rem, 14px);
    --table-background: transparent;
    --table-color-stripe: var(--color-caption-bg);
    --table-color-hover: var(--color-title-bg);
    --table-color-focus: var(--color-primary);
    --table-color-select: var(--color-primary-bg);
    --table-border-color: var(--table-wrapper-bd, var(--color-title-bd));
    --table-align: start;
    --table-padding: calc(var(--spacing)*2);
    font-size: var(--table-font-size);
    width: var(--table-width);
    border-block: 1px solid var(--table-border-color);
    background-color: var(--table-background);
    position: relative;
    z-index: 0;
    transition: background-color var(--duration-faster) linear, box-shadow var(--duration-faster) linear, border-color var(--duration-faster) linear;
    tr {
      border-block-end: 1px solid var(--table-border-color);
      transition: background-color var(--duration-faster) linear;
    }
    tfoot tr {
      border-block-start: 1px solid var(--table-border-color);
    }
    tbody tr:last-child {
      border: none;
    }
    th, td {
      box-sizing: border-box;
      position: relative;
      text-align: var(--table-align);
    }
    td {
      padding: var(--table-padding);
      font-size: var(--table-font-size);
    }
    thead td, th {
      color: var(--color-description);
      font-weight: normal;
      padding: calc(var(--table-padding)/2) var(--table-padding);
      font-size: max(0.75rem, 12px);
    }
    th label {
      font-weight: bolder;
      white-space: nowrap;
      flex: auto;
      width: 0;
    }
    td {
      transition: background-color var(--duration-faster) linear, box-shadow var(--duration-faster) linear, outline-color var(--duration-faster) linear;
    }
  }
}
:root {
  --color-c-light: 1;
  --color-c-dark: 0.8;
  --color-c-factor: var(--color-c-light);
}
.light {
  --color-c-factor: var(--color-c-light);
  --color-stage: var(--color-stage-light);
}
@media (prefers-color-scheme: dark) {
  :root, :host {
    --color-c-factor: var(--color-c-dark);
    --color-stage: var(--color-stage-dark);
  }
}
.dark {
  --color-c-factor: var(--color-c-dark);
  --color-stage: var(--color-stage-dark);
}
@media (prefers-color-scheme: dark) {
  :root, :host {
    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.25) c h);
    --color-primary-active: oklch(from var(--color-primary)  calc(l * 0.9) c h);
    --color-primary-body: oklch(from var(--color-primary) min(var(--light-threshold-body),l) c h);
    --color-primary-surface: transparent;
    --color-primary-fg: oklch(from var(--color-primary) min(var(--light-threshold-fg),l) c h);
    --color-primary-bg: oklch(from var(--color-primary) var(--light-threshold-bg) c h / var(--opacity-bg));
    --color-primary-bg-hover: oklch(from var(--color-primary) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
    --color-primary-bg-active: oklch(from var(--color-primary) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
    --color-primary-bd: oklch(from var(--color-primary) var(--light-threshold-bd) min(c ,0.12) h);
    --color-primary-bd-hover: oklch(from var(--color-primary) var(--light-threshold-bd-hover) min(c ,0.14) h);
    --color-primary-bd-active: oklch(from var(--color-primary) var(--light-threshold-bd-active) min(c ,0.16) h);
    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.25) c h);
    --color-secondary-active: oklch(from var(--color-secondary)  calc(l * 0.9) c h);
    --color-secondary-body: oklch(from var(--color-secondary) min(var(--light-threshold-body),l) c h);
    --color-secondary-surface: transparent;
    --color-secondary-fg: oklch(from var(--color-secondary) min(var(--light-threshold-fg),l) c h);
    --color-secondary-bg: oklch(from var(--color-secondary) var(--light-threshold-bg) c h / var(--opacity-bg));
    --color-secondary-bg-hover: oklch(from var(--color-secondary) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
    --color-secondary-bg-active: oklch(from var(--color-secondary) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
    --color-secondary-bd: oklch(from var(--color-secondary) var(--light-threshold-bd) min(c ,0.12) h);
    --color-secondary-bd-hover: oklch(from var(--color-secondary) var(--light-threshold-bd-hover) min(c ,0.14) h);
    --color-secondary-bd-active: oklch(from var(--color-secondary) var(--light-threshold-bd-active) min(c ,0.16) h);
    --color-tertiary-hover: oklch(from var(--color-tertiary) calc(l + (1 - l) * 0.25) c h);
    --color-tertiary-active: oklch(from var(--color-tertiary)  calc(l * 0.9) c h);
    --color-tertiary-body: oklch(from var(--color-tertiary) min(var(--light-threshold-body),l) c h);
    --color-tertiary-surface: transparent;
    --color-tertiary-fg: oklch(from var(--color-tertiary) min(var(--light-threshold-fg),l) c h);
    --color-tertiary-bg: oklch(from var(--color-tertiary) var(--light-threshold-bg) c h / var(--opacity-bg));
    --color-tertiary-bg-hover: oklch(from var(--color-tertiary) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
    --color-tertiary-bg-active: oklch(from var(--color-tertiary) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
    --color-tertiary-bd: oklch(from var(--color-tertiary) var(--light-threshold-bd) min(c ,0.12) h);
    --color-tertiary-bd-hover: oklch(from var(--color-tertiary) var(--light-threshold-bd-hover) min(c ,0.14) h);
    --color-tertiary-bd-active: oklch(from var(--color-tertiary) var(--light-threshold-bd-active) min(c ,0.16) h);
    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.25) c h);
    --color-success-active: oklch(from var(--color-success)  calc(l * 0.9) c h);
    --color-success-body: oklch(from var(--color-success) min(var(--light-threshold-body),l) c h);
    --color-success-surface: transparent;
    --color-success-fg: oklch(from var(--color-success) min(var(--light-threshold-fg),l) c h);
    --color-success-bg: oklch(from var(--color-success) var(--light-threshold-bg) c h / var(--opacity-bg));
    --color-success-bg-hover: oklch(from var(--color-success) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
    --color-success-bg-active: oklch(from var(--color-success) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
    --color-success-bd: oklch(from var(--color-success) var(--light-threshold-bd) min(c ,0.12) h);
    --color-success-bd-hover: oklch(from var(--color-success) var(--light-threshold-bd-hover) min(c ,0.14) h);
    --color-success-bd-active: oklch(from var(--color-success) var(--light-threshold-bd-active) min(c ,0.16) h);
    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.25) c h);
    --color-info-active: oklch(from var(--color-info)  calc(l * 0.9) c h);
    --color-info-body: oklch(from var(--color-info) min(var(--light-threshold-body),l) c h);
    --color-info-surface: transparent;
    --color-info-fg: oklch(from var(--color-info) min(var(--light-threshold-fg),l) c h);
    --color-info-bg: oklch(from var(--color-info) var(--light-threshold-bg) c h / var(--opacity-bg));
    --color-info-bg-hover: oklch(from var(--color-info) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
    --color-info-bg-active: oklch(from var(--color-info) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
    --color-info-bd: oklch(from var(--color-info) var(--light-threshold-bd) min(c ,0.12) h);
    --color-info-bd-hover: oklch(from var(--color-info) var(--light-threshold-bd-hover) min(c ,0.14) h);
    --color-info-bd-active: oklch(from var(--color-info) var(--light-threshold-bd-active) min(c ,0.16) h);
    --color-highlight-hover: oklch(from var(--color-highlight) calc(l + (1 - l) * 0.25) c h);
    --color-highlight-active: oklch(from var(--color-highlight)  calc(l * 0.9) c h);
    --color-highlight-body: oklch(from var(--color-highlight) min(var(--light-threshold-body),l) c h);
    --color-highlight-surface: transparent;
    --color-highlight-fg: oklch(from var(--color-highlight) min(var(--light-threshold-fg),l) c h);
    --color-highlight-bg: oklch(from var(--color-highlight) var(--light-threshold-bg) c h / var(--opacity-bg));
    --color-highlight-bg-hover: oklch(from var(--color-highlight) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
    --color-highlight-bg-active: oklch(from var(--color-highlight) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
    --color-highlight-bd: oklch(from var(--color-highlight) var(--light-threshold-bd) min(c ,0.12) h);
    --color-highlight-bd-hover: oklch(from var(--color-highlight) var(--light-threshold-bd-hover) min(c ,0.14) h);
    --color-highlight-bd-active: oklch(from var(--color-highlight) var(--light-threshold-bd-active) min(c ,0.16) h);
    --color-error-hover: oklch(from var(--color-error) calc(l + (1 - l) * 0.25) c h);
    --color-error-active: oklch(from var(--color-error)  calc(l * 0.9) c h);
    --color-error-body: oklch(from var(--color-error) min(var(--light-threshold-body),l) c h);
    --color-error-surface: transparent;
    --color-error-fg: oklch(from var(--color-error) min(var(--light-threshold-fg),l) c h);
    --color-error-bg: oklch(from var(--color-error) var(--light-threshold-bg) c h / var(--opacity-bg));
    --color-error-bg-hover: oklch(from var(--color-error) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
    --color-error-bg-active: oklch(from var(--color-error) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
    --color-error-bd: oklch(from var(--color-error) var(--light-threshold-bd) min(c ,0.12) h);
    --color-error-bd-hover: oklch(from var(--color-error) var(--light-threshold-bd-hover) min(c ,0.14) h);
    --color-error-bd-active: oklch(from var(--color-error) var(--light-threshold-bd-active) min(c ,0.16) h);
    --color-warning-hover: oklch(from var(--color-warning) calc(l + (1 - l) * 0.25) c h);
    --color-warning-active: oklch(from var(--color-warning)  calc(l * 0.9) c h);
    --color-warning-body: oklch(from var(--color-warning) min(var(--light-threshold-body),l) c h);
    --color-warning-surface: transparent;
    --color-warning-fg: oklch(from var(--color-warning) min(var(--light-threshold-fg),l) c h);
    --color-warning-bg: oklch(from var(--color-warning) var(--light-threshold-bg) c h / var(--opacity-bg));
    --color-warning-bg-hover: oklch(from var(--color-warning) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
    --color-warning-bg-active: oklch(from var(--color-warning) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
    --color-warning-bd: oklch(from var(--color-warning) var(--light-threshold-bd) min(c ,0.12) h);
    --color-warning-bd-hover: oklch(from var(--color-warning) var(--light-threshold-bd-hover) min(c ,0.14) h);
    --color-warning-bd-active: oklch(from var(--color-warning) var(--light-threshold-bd-active) min(c ,0.16) h);
    --color-caution-hover: oklch(from var(--color-caution) calc(l + (1 - l) * 0.25) c h);
    --color-caution-active: oklch(from var(--color-caution)  calc(l * 0.9) c h);
    --color-caution-body: oklch(from var(--color-caution) min(var(--light-threshold-body),l) c h);
    --color-caution-surface: transparent;
    --color-caution-fg: oklch(from var(--color-caution) min(var(--light-threshold-fg),l) c h);
    --color-caution-bg: oklch(from var(--color-caution) var(--light-threshold-bg) c h / var(--opacity-bg));
    --color-caution-bg-hover: oklch(from var(--color-caution) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
    --color-caution-bg-active: oklch(from var(--color-caution) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
    --color-caution-bd: oklch(from var(--color-caution) var(--light-threshold-bd) min(c ,0.12) h);
    --color-caution-bd-hover: oklch(from var(--color-caution) var(--light-threshold-bd-hover) min(c ,0.14) h);
    --color-caution-bd-active: oklch(from var(--color-caution) var(--light-threshold-bd-active) min(c ,0.16) h);
    --color-title-base: oklch(from var(--color-ink-base) var(--light-threshold-body) c h);
    --color-title: oklch(from var(--color-title-base) l calc(c * var(--color-c-factor,1)) h);
    --color-title-hover: oklch(from var(--color-title) calc(l + (1 - l) * 0.25) c h);
    --color-title-active: oklch(from var(--color-title)  calc(l * 0.9) c h);
    --color-title-body: oklch(from var(--color-title) min(var(--light-threshold-body),l) c h);
    --color-title-surface: transparent;
    --color-title-fg: oklch(from var(--color-title) min(var(--light-threshold-fg),l) c h);
    --color-title-bg: oklch(from var(--color-title) var(--light-threshold-bg) c h / var(--opacity-bg));
    --color-title-bg-hover: oklch(from var(--color-title) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
    --color-title-bg-active: oklch(from var(--color-title) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
    --color-title-bd: oklch(from var(--color-title) var(--light-threshold-bd) min(c ,0.12) h);
    --color-title-bd-hover: oklch(from var(--color-title) var(--light-threshold-bd-hover) min(c ,0.14) h);
    --color-title-bd-active: oklch(from var(--color-title) var(--light-threshold-bd-active) min(c ,0.16) h);
    --color-description-base: oklch(from var(--color-title) calc(l * 0.85) c h);
    --color-description: var(--color-description-base);
    --color-description-hover: oklch(from var(--color-description) calc(l + (1 - l) * 0.25) c h);
    --color-description-active: oklch(from var(--color-description) calc(l * 0.9) c h);
    --color-description-body: var(--color-description);
    --color-description-fg: var(--color-description);
    --color-caption-base: oklch(from var(--color-title) calc(l * 0.65) c h);
    --color-caption: var(--color-caption-base);
    --color-caption-hover: oklch(from var(--color-caption) calc(l + (1 - l) * 0.25) c h);
    --color-caption-active: oklch(from var(--color-caption) calc(l * 0.9) c h);
    --color-caption-body: var(--color-caption);
    --color-caption-fg: var(--color-caption);
    --color-placeholder-base: oklch(from var(--color-title) calc(l * 0.5) c h);
    --color-placeholder: var(--color-placeholder-base);
    --color-placeholder-hover: oklch(from var(--color-placeholder) calc(l + (1 - l) * 0.25) c h);
    --color-placeholder-active: oklch(from var(--color-placeholder) calc(l * 0.9) c h);
    --color-placeholder-body: var(--color-placeholder);
    --color-placeholder-fg: var(--color-placeholder);
    --color-ink-hover: oklch(from var(--color-ink) calc(l + (1 - l) * 0.25) c h);
    --color-ink-active: oklch(from var(--color-ink)  calc(l * 0.9) c h);
    --color-ink-body: oklch(from var(--color-ink) min(var(--light-threshold-body),l) c h);
    --color-ink-surface: transparent;
    --color-ink-fg: oklch(from var(--color-ink) min(var(--light-threshold-fg),l) c h);
    --color-ink-bg: oklch(from var(--color-ink) var(--light-threshold-bg) c h / var(--opacity-bg));
    --color-ink-bg-hover: oklch(from var(--color-ink) var(--light-threshold-bg-hover) c h / var(--opacity-bg-hover));
    --color-ink-bg-active: oklch(from var(--color-ink) var(--light-threshold-bg-active) c h / var(--opacity-bg-active));
    --color-ink-bd: oklch(from var(--color-ink) var(--light-threshold-bd) min(c ,0.12) h);
    --color-ink-bd-hover: oklch(from var(--color-ink) var(--light-threshold-bd-hover) min(c ,0.14) h);
    --color-ink-bd-active: oklch(from var(--color-ink) var(--light-threshold-bd-active) min(c ,0.16) h);
  }
}
@layer base {
  input:where([type="button"], [type="submit"], [type="reset"]), button {
    --btn-border-radius: var(--default-border-radius);
    --btn-font-size: 0.875rem;
    --btn-color: var(--color-title);
    --btn-leading: var(--leading-normal);
    --btn-height: calc(var(--spacing)*8);
    --btn-padding-x: calc(var(--btn-height)/3);
    --btn-border-width: 1px;
    --btn-border-color: var(--color-title-bd);
    --btn-background: var(--color-title-surface);
    --btn-outline-color: var(--color-primary);
    --btn-gap: 0.4em;
    border-radius: var(--btn-border-radius);
    font-size: var(--btn-font-size);
    color: var(--btn-color);
    line-height: var(--btn-leading);
    border: var(--btn-border-width) solid var(--btn-border-color);
    height: var(--btn-height);
    padding-inline: var(--btn-padding-x);
    background-color: var(--btn-background);
    opacity: inherit;
    cursor: pointer;
    gap: var(--btn-gap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --: ;
    transition: var(--transition-all-normal);
    &:where([disabled]) {
      cursor: not-allowed;
      opacity: var(--default-opacity-disabled, 0.5);
    }
    &:where(:not([disabled]):hover) {
      --btn-border-color: var(--color-primary);
      --btn-color: var(--color-primary);
    }
    &:where(:not([disabled]):active) {
      --btn-color: var(--color-primary-hover);
    }
    &:where(:not([disabled]):focus-visible) {
      --btn-border-color: var(--color-primary);
      outline-color: var(--btn-outline-color);
    }
  }
}
:root {
  --i18n-valid: "Validation passed";
  --i18n-invalid: "Validation failed";
  --i18n-required: "This field is required";
  --i18n-outofrange: "Value is out of range";
  --i18n-wrongemail: "Please enter a valid email";
  --i18n-wrongurl: "Please enter a valid URL";
  --i18n-wrongformat: "Invalid format";
}
:root {
  --i18n-no-avatar: "Null";
}
:root {
  --i18n-no-poster: "No image available";
}
:root {
  --i18n-no-data: "No Data";
}
@property --aura-rotate {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@keyframes check-halo {
  0% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--check-halo-color) 0%, transparent), 0 0 0 0 color-mix(in oklab, var(--check-halo-color) 0%, transparent);
  }
  40% {
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--check-halo-color) 10%, transparent), 0 0 0 3px color-mix(in oklab, var(--check-halo-color) 30%, transparent);
  }
  100% {
    box-shadow: 0 0 0 12px color-mix(in oklab, var(--check-halo-color) 0%, transparent), 0 0 0 6px color-mix(in oklab, var(--check-halo-color) 0%, transparent);
  }
}
@keyframes progress-stripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: calc(35px * var(--direction-factor-1)) calc(35px * var(--direction-factor-1));
  }
}
@keyframes progress-stripes-reverse {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: calc(-35px * var(--direction-factor-1)) calc(-35px * var(--direction-factor-1));
  }
}
@keyframes progress-gradient {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: calc(-200% * var(--direction-factor-1)) 100%;
  }
}
@keyframes progress-gradient-reverse {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: calc(200% * var(--direction-factor-1)) 100%;
  }
}
@keyframes progress-spinner {
  0% {
    inset-inline-start: -150%;
    inset-inline-end: 150%;
  }
  100% {
    inset-inline-start: 150%;
    inset-inline-end: 0%;
  }
}
@keyframes skeleton-shimmer {
  from {
    background-position: calc(180%*var(--direction-factor-1)) 0;
  }
  to {
    background-position: calc(-120%*var(--direction-factor-1)) 0;
  }
}
@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
@keyframes alarm-wave-1 {
  0% {
    transform: scale(1);
    opacity: .9;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes alarm-wave-2 {
  0% {
    transform: scale(1);
    opacity: .9;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes alarm-wave-3 {
  0% {
    transform: scale(1);
    opacity: .9;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}
@keyframes alarm-wave-4 {
  0% {
    transform: scale(1);
    opacity: .9;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}
@keyframes alarm-wave-5 {
  0% {
    transform: scale(1);
    opacity: .9;
  }
  100% {
    transform: scale(3.5);
    opacity: 0;
  }
}
@keyframes alarm-wave-6 {
  0% {
    transform: scale(1);
    opacity: .9;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}
@keyframes blob-morph {
  0%, 100% {
    border-radius: 49% 51% 48% 52% / 57% 44% 56% 43%;
  }
  34% {
    border-radius: 63% 37% 37% 63% / 43% 37% 63% 57%;
  }
  67% {
    border-radius: 53% 47% 34% 66% / 63% 46% 54% 37%;
  }
}
@keyframes blob-morph1 {
  0%, 100% {
    border-radius: 48% 52% 47% 53% / 55% 45% 55% 45%;
  }
  33% {
    border-radius: 55% 45% 42% 58% / 60% 40% 50% 50%;
  }
  66% {
    border-radius: 45% 55% 58% 42% / 50% 60% 40% 60%;
  }
}
@keyframes blob-morph2 {
  0%, 100% {
    border-radius: 50% 50% 48% 52% / 52% 48% 52% 48%;
  }
  25% {
    border-radius: 60% 40% 45% 55% / 55% 45% 60% 40%;
  }
  50% {
    border-radius: 45% 55% 60% 40% / 40% 60% 45% 55%;
  }
  75% {
    border-radius: 55% 45% 50% 50% / 60% 40% 55% 45%;
  }
}
@keyframes blob-morph3 {
  0%, 100% {
    border-radius: 52% 48% 50% 50% / 60% 40% 55% 45%;
  }
  30% {
    border-radius: 65% 35% 40% 60% / 50% 60% 40% 50%;
  }
  60% {
    border-radius: 40% 60% 60% 40% / 55% 45% 65% 35%;
  }
}
@keyframes blob-morph4 {
  0%, 100% {
    border-radius: 50% 50% 48% 52% / 55% 45% 55% 45%;
  }
  20% {
    border-radius: 58% 42% 45% 55% / 60% 40% 50% 50%;
  }
  40% {
    border-radius: 42% 58% 60% 40% / 50% 60% 40% 60%;
  }
  60% {
    border-radius: 55% 45% 40% 60% / 45% 55% 60% 40%;
  }
  80% {
    border-radius: 47% 53% 52% 48% / 58% 42% 52% 48%;
  }
}
@keyframes rotate-ccw-360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes rotate-cw-360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes remind-x {
  0% {
    transform: translateX(2px);
  }
  50% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(2px);
  }
}
@keyframes remind-y {
  0% {
    transform: translateY(2px);
  }
  50% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(2px);
  }
}
@keyframes float-y {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(6px);
  }
  75% {
    transform: translateY(-14px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes float-x {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(calc(-10px * var(--direction-factor-1)));
  }
  50% {
    transform: translateX(calc(6px * var(--direction-factor-1)));
  }
  75% {
    transform: translateX(calc(-14px * var(--direction-factor-1)));
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes bounce-y {
  from, 20%, 53%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }
  90% {
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
@keyframes bounce-x {
  from, 20%, 53%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(-30px, 0, 0) scaleX(1.1);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(-15px, 0, 0) scaleX(1.05);
  }
  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleX(0.95);
  }
  90% {
    transform: translate3d(-4px, 0, 0) scaleX(1.02);
  }
}
@keyframes blink {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes heartbeat {
  from, 50%, to {
    transform: scale3d(1, 1, 1);
  }
  25%, 75% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
}
@keyframes shake-x {
  from, to {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shake-y {
  from, to {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(0, -10px, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(0, 10px, 0);
  }
}
@keyframes shake-z {
  0%, to {
    transform: rotate(0);
  }
  20% {
    transform: rotate(calc(-2deg * var(--direction-factor-1)));
  }
  40% {
    transform: rotate(calc(2deg * var(--direction-factor-1)));
  }
  60% {
    transform: rotate(calc(-2deg * var(--direction-factor-1)));
  }
  80% {
    transform: rotate(calc(2deg * var(--direction-factor-1)));
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translate3d(0, 20%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fade-out-up {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 20%, 0);
  }
}
@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translate3d(0, -20%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fade-out-down {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translate3d(0, -20%, 0);
  }
}
@keyframes fade-in-start {
  from {
    opacity: 0;
    transform: translate3d(calc(20% * var(--direction-factor-1)), 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fade-out-start {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translate3d(calc(20% * var(--direction-factor-1)), 0, 0);
  }
}
@keyframes fade-in-end {
  from {
    opacity: 0;
    transform: translate3d(calc(-20% * var(--direction-factor-1)), 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fade-out-end {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translate3d(calc(-20% * var(--direction-factor-1)), 0, 0);
  }
}
@keyframes ease-in {
  0% {
    transform: scale(1, 0);
    opacity: 0;
  }
  100% {
    transform: scale(1, 1);
    opacity: 1;
  }
}
@keyframes ease-in-top {
  0% {
    transform: scale(1, 0);
    opacity: 0;
    transform-origin: center 100%;
  }
  100% {
    transform: scale(1, 1);
    opacity: 1;
    transform-origin: center 100%;
  }
}
@keyframes ease-in-bottom {
  0% {
    transform: scale(1, 0);
    opacity: 0;
    transform-origin: center 0%;
  }
  100% {
    transform: scale(1, 1);
    opacity: 1;
    transform-origin: center 0%;
  }
}
@keyframes ease-out {
  0% {
    transform: scale(1, 1);
    opacity: 1;
  }
  100% {
    transform: scale(1, 0);
    opacity: 0;
  }
}
@keyframes ease-out-top {
  0% {
    transform: scale(1, 1);
    opacity: 1;
    transform-origin: center 100%;
  }
  100% {
    transform: scale(1, 0);
    opacity: 0;
    transform-origin: center 100%;
  }
}
@keyframes ease-out-bottom {
  0% {
    transform: scale(1, 1);
    opacity: 1;
    transform-origin: center 0%;
  }
  100% {
    transform: scale(1, 0);
    opacity: 0;
    transform-origin: center 0%;
  }
}
@keyframes ease-in-start {
  0% {
    transform: scale(0, 1);
    opacity: 0;
    transform-origin: calc(100% - 100% * var(--direction-factor-2)) center;
  }
  100% {
    transform: scale(1, 1);
    opacity: 1;
  }
}
@keyframes ease-in-end {
  0% {
    transform: scale(0, 1);
    opacity: 0;
    transform-origin: calc(100% * var(--direction-factor-2)) center;
  }
  100% {
    transform: scale(1, 1);
    opacity: 1;
  }
}
@keyframes ease-out-start {
  0% {
    transform: scale(1, 1);
    opacity: 1;
    transform-origin: calc(100% - 100% * var(--direction-factor-2)) center;
  }
  100% {
    transform: scale(0, 1);
    opacity: 0;
  }
}
@keyframes ease-out-end {
  0% {
    transform: scale(1, 1);
    opacity: 1;
    transform-origin: calc(100% * var(--direction-factor-2)) center;
  }
  100% {
    transform: scale(0, 1);
    opacity: 0;
  }
}
@keyframes spring-in {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  45% {
    transform: scale(1.02);
    opacity: 1;
  }
  80% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes spring-out {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(0.98);
  }
  55% {
    transform: scale(1.02);
    opacity: 1;
  }
  100% {
    transform: scale(0.7);
    opacity: 0;
  }
}
@keyframes scale-in {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}
@keyframes fly-in-start {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 50%, 0) rotate(-30deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fly-out-start {
  0% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, 50%, 0) rotate(-30deg);
  }
}
@keyframes fly-in-end {
  0% {
    opacity: 0;
    transform: translate3d(50%, 50%, 0) rotate(30deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fly-out-end {
  0% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translate3d(50%, 50%, 0) rotate(30deg);
  }
}
@keyframes fly-in-up {
  0% {
    opacity: 0;
    transform: translate3d(0%, -100%, 0) rotate(-30deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fly-out-up {
  0% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translate3d(0%, -100%, 0) rotate(-30deg);
  }
}
@keyframes fly-in-down {
  0% {
    opacity: 0;
    transform: translate3d(0%, 100%, 0) rotate(30deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fly-out-down {
  0% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translate3d(0%, 100%, 0) rotate(30deg);
  }
}
@keyframes rotate-in {
  0% {
    transform: scale(0.5) rotate(180deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
@keyframes rotate-out {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.5) rotate(180deg);
    opacity: 0;
  }
}
@keyframes aura-angle-spin {
  to {
    --aura-rotate: 360deg;
  }
}
@keyframes shimmer-ltr {
  0% {
    background-position: 150% center;
  }
  100% {
    background-position: -50% center;
  }
}
@keyframes shimmer-rtl {
  0% {
    background-position: -50% center;
  }
  100% {
    background-position: 150% center;
  }
}
@keyframes shimmer-ttb {
  0% {
    background-position: center 150%;
  }
  100% {
    background-position: center -50%;
  }
}
@keyframes shimmer-btt {
  0% {
    background-position: center -50%;
  }
  100% {
    background-position: center 150%;
  }
}
@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-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
      --aura-rotate: 0deg;
    }
  }
}