/* @generated by HTS Design System; source-sha256=77cb21c67286008b401c5e9981f7d9806efc7d10710f5e453bc3d97554a049dc; do not edit. */
@layer hts.tokens, hts.reset, hts.base, hts.components, hts.utilities, hts.overrides;
@layer hts.tokens {
  :where([data-hts-root]) {
    --hts-color-amber-100: #fef3c7;
    --hts-color-amber-300: #fcd34d;
    --hts-color-amber-800: #92400e;
    --hts-color-amber-950: #451a03;
    --hts-color-blue-050: #e7f6fa;
    --hts-color-blue-600: #0b6f92;
    --hts-color-blue-700: #075a78;
    --hts-color-blue-800: #06475e;
    --hts-color-cobalt-100: #dbeafe;
    --hts-color-cobalt-300: #93c5fd;
    --hts-color-cobalt-600: #1d4ed8;
    --hts-color-cobalt-800: #0b2f9f;
    --hts-color-cobalt-950: #06184e;
    --hts-color-green-100: #d1fae5;
    --hts-color-green-300: #6ee7b7;
    --hts-color-green-700: #047857;
    --hts-color-green-950: #022c22;
    --hts-color-ink-700: #283a45;
    --hts-color-ink-800: #13242f;
    --hts-color-ink-900: #0b1720;
    --hts-color-ink-950: #000d14;
    --hts-color-ink-alpha-06: #000d140f;
    --hts-color-ink-alpha-07: #000d1412;
    --hts-color-ink-alpha-12: #000d141f;
    --hts-color-ink-alpha-18: #000d142e;
    --hts-color-ink-alpha-24: #000d143d;
    --hts-color-ink-alpha-32: #000d1452;
    --hts-color-ink-alpha-40: #000d1466;
    --hts-color-ink-alpha-48: #000d147a;
    --hts-color-ink-alpha-64: #000d14a3;
    --hts-color-navy-950: #172554;
    --hts-color-orange-100: #ffe7dc;
    --hts-color-orange-500: #ff7a3d;
    --hts-color-orange-600: #e85d22;
    --hts-color-orange-700: #b83f0a;
    --hts-color-red-100: #fee2e2;
    --hts-color-red-300: #fca5a5;
    --hts-color-red-700: #b91c1c;
    --hts-color-red-950: #450a0a;
    --hts-color-slate-025: #f6f8f9;
    --hts-color-slate-100: #eef2f4;
    --hts-color-slate-200: #dce3e7;
    --hts-color-slate-300: #b8c4cb;
    --hts-color-slate-400: #8a99a3;
    --hts-color-slate-600: #5f707b;
    --hts-color-slate-700: #40515c;
    --hts-color-white: #fff;
    --hts-dimension-breakpoint-lg: 75rem;
    --hts-dimension-breakpoint-md: 62rem;
    --hts-dimension-breakpoint-sm: 48rem;
    --hts-dimension-breakpoint-xl: 90rem;
    --hts-dimension-breakpoint-xs: 30rem;
    --hts-dimension-control-lg: 52px;
    --hts-dimension-control-md: 44px;
    --hts-dimension-control-sm: 36px;
    --hts-dimension-icon-lg: 24px;
    --hts-dimension-icon-md: 20px;
    --hts-dimension-icon-sm: 16px;
    --hts-dimension-icon-xl: 32px;
    --hts-dimension-layout-gap: clamp(1rem, 2vw, 1.5rem);
    --hts-dimension-layout-gutter: clamp(1rem, 2vw, 2rem);
    --hts-dimension-layout-narrow-max: 48rem;
    --hts-dimension-layout-page-max: 90rem;
    --hts-dimension-layout-readable-max: 68ch;
    --hts-dimension-space-0: 0px;
    --hts-dimension-space-1: 4px;
    --hts-dimension-space-10: 40px;
    --hts-dimension-space-12: 48px;
    --hts-dimension-space-16: 64px;
    --hts-dimension-space-2: 8px;
    --hts-dimension-space-20: 80px;
    --hts-dimension-space-24: 96px;
    --hts-dimension-space-3: 12px;
    --hts-dimension-space-4: 16px;
    --hts-dimension-space-5: 20px;
    --hts-dimension-space-6: 24px;
    --hts-dimension-space-8: 32px;
    --hts-duration-base: .18s;
    --hts-duration-fast: .12s;
    --hts-duration-reduced: .01ms;
    --hts-duration-slow: .24s;
    --hts-easing-emphasized: cubic-bezier(.2, .8, .2, 1);
    --hts-easing-standard: cubic-bezier(.2, 0, 0, 1);
    --hts-elevation-dark-lg: 0px 24px 60px 0px var(--hts-color-ink-alpha-48);
    --hts-elevation-dark-md: 0px 12px 28px 0px var(--hts-color-ink-alpha-40);
    --hts-elevation-dark-sm: 0px 4px 12px 0px var(--hts-color-ink-alpha-32);
    --hts-elevation-dark-xs: 0px 1px 2px 0px var(--hts-color-ink-alpha-24);
    --hts-elevation-light-lg: 0px 24px 60px 0px var(--hts-color-ink-alpha-18);
    --hts-elevation-light-md: 0px 12px 28px 0px var(--hts-color-ink-alpha-12);
    --hts-elevation-light-sm: 0px 4px 12px 0px var(--hts-color-ink-alpha-07);
    --hts-elevation-light-xs: 0px 1px 2px 0px var(--hts-color-ink-alpha-06);
    --hts-shape-border-hairline: 1px;
    --hts-shape-border-strong: 2px;
    --hts-shape-focus-ring-offset: 2px;
    --hts-shape-focus-ring-width: 2px;
    --hts-shape-radius-lg: 14px;
    --hts-shape-radius-md: 10px;
    --hts-shape-radius-pill: 9999px;
    --hts-shape-radius-sm: 6px;
    --hts-shape-radius-xl: 20px;
    --hts-stacking-content: 10;
    --hts-stacking-dropdown: 100;
    --hts-stacking-modal: 400;
    --hts-stacking-overlay: 300;
    --hts-stacking-sticky: 200;
    --hts-stacking-toast: 500;
    --hts-type-family-hts: "Geist Variable", "Vazirmatn Variable", "Tahoma", "Arial", sans-serif;
    --hts-type-family-mono: "IBM Plex Mono", "Vazirmatn Variable", ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
    --hts-type-family-wecamp: "Plus Jakarta Sans Variable", "Vazirmatn Variable", "Tahoma", "Arial", sans-serif;
    --hts-type-line-height-en-body: 24px;
    --hts-type-line-height-en-body-lg: 28px;
    --hts-type-line-height-en-body-sm: 20px;
    --hts-type-line-height-en-caption: 16px;
    --hts-type-line-height-en-display-lg: 1.05;
    --hts-type-line-height-en-display-sm: 1.1;
    --hts-type-line-height-en-label: 20px;
    --hts-type-line-height-en-mono-sm: 20px;
    --hts-type-line-height-en-title-lg: 38px;
    --hts-type-line-height-en-title-md: 32px;
    --hts-type-line-height-en-title-sm: 28px;
    --hts-type-line-height-fa-body: 24px;
    --hts-type-line-height-fa-body-lg: 28px;
    --hts-type-line-height-fa-body-sm: 22px;
    --hts-type-line-height-fa-caption: 18px;
    --hts-type-line-height-fa-display-lg: 1.25;
    --hts-type-line-height-fa-display-sm: 1.25;
    --hts-type-line-height-fa-label: 22px;
    --hts-type-line-height-fa-mono-sm: 20px;
    --hts-type-line-height-fa-title-lg: 38px;
    --hts-type-line-height-fa-title-md: 32px;
    --hts-type-line-height-fa-title-sm: 28px;
    --hts-type-size-body: 16px;
    --hts-type-size-body-lg: 18px;
    --hts-type-size-body-sm: 14px;
    --hts-type-size-caption: 12px;
    --hts-type-size-display-lg: clamp(48px, 6vw, 60px);
    --hts-type-size-display-sm: clamp(36px, 4vw, 48px);
    --hts-type-size-label: 14px;
    --hts-type-size-mono-sm: 13px;
    --hts-type-size-title-lg: 30px;
    --hts-type-size-title-md: 24px;
    --hts-type-size-title-sm: 20px;
    --hts-type-tracking-en-body: 0px;
    --hts-type-tracking-en-body-lg: 0px;
    --hts-type-tracking-en-body-sm: 0px;
    --hts-type-tracking-en-caption: .2px;
    --hts-type-tracking-en-display-lg: -1.2px;
    --hts-type-tracking-en-display-sm: -.8px;
    --hts-type-tracking-en-label: .1px;
    --hts-type-tracking-en-mono-sm: 0px;
    --hts-type-tracking-en-title-lg: -.4px;
    --hts-type-tracking-en-title-md: -.3px;
    --hts-type-tracking-en-title-sm: -.2px;
    --hts-type-tracking-fa-body: 0px;
    --hts-type-tracking-fa-body-lg: 0px;
    --hts-type-tracking-fa-body-sm: 0px;
    --hts-type-tracking-fa-caption: 0px;
    --hts-type-tracking-fa-display-lg: 0px;
    --hts-type-tracking-fa-display-sm: 0px;
    --hts-type-tracking-fa-label: 0px;
    --hts-type-tracking-fa-mono-sm: 0px;
    --hts-type-tracking-fa-title-lg: 0px;
    --hts-type-tracking-fa-title-md: 0px;
    --hts-type-tracking-fa-title-sm: 0px;
    --hts-type-weight-body: 400;
    --hts-type-weight-body-lg: 400;
    --hts-type-weight-body-sm: 400;
    --hts-type-weight-caption: 500;
    --hts-type-weight-display-lg: 600;
    --hts-type-weight-display-sm: 600;
    --hts-type-weight-label: 600;
    --hts-type-weight-mono-sm: 400;
    --hts-type-weight-title-lg: 600;
    --hts-type-weight-title-md: 600;
    --hts-type-weight-title-sm: 600;
    --hts-border-hairline: var(--hts-shape-border-hairline);
    --hts-border-strong: var(--hts-shape-border-strong);
    --hts-breakpoint-lg: var(--hts-dimension-breakpoint-lg);
    --hts-breakpoint-md: var(--hts-dimension-breakpoint-md);
    --hts-breakpoint-sm: var(--hts-dimension-breakpoint-sm);
    --hts-breakpoint-xl: var(--hts-dimension-breakpoint-xl);
    --hts-breakpoint-xs: var(--hts-dimension-breakpoint-xs);
    --hts-color-action-danger-background: var(--hts-color-red-700);
    --hts-color-action-danger-foreground: var(--hts-color-white);
    --hts-color-action-primary-background: var(--hts-color-blue-600);
    --hts-color-action-primary-background-hover: var(--hts-color-blue-700);
    --hts-color-action-primary-foreground: var(--hts-color-white);
    --hts-color-border: var(--hts-color-slate-200);
    --hts-color-border-interactive: var(--hts-color-slate-600);
    --hts-color-canvas: var(--hts-color-slate-025);
    --hts-color-focus-ring: var(--hts-color-blue-600);
    --hts-color-overlay-background: var(--hts-color-ink-alpha-64);
    --hts-color-selection-background: var(--hts-color-blue-050);
    --hts-color-selection-foreground: var(--hts-color-ink-950);
    --hts-color-status-danger-background: var(--hts-color-red-100);
    --hts-color-status-danger-foreground: var(--hts-color-red-700);
    --hts-color-status-info-background: var(--hts-color-cobalt-100);
    --hts-color-status-info-foreground: var(--hts-color-cobalt-600);
    --hts-color-status-success-background: var(--hts-color-green-100);
    --hts-color-status-success-foreground: var(--hts-color-green-700);
    --hts-color-status-warning-background: var(--hts-color-amber-100);
    --hts-color-status-warning-foreground: var(--hts-color-amber-800);
    --hts-color-surface: var(--hts-color-white);
    --hts-color-surface-raised: var(--hts-color-slate-100);
    --hts-color-text-inverse: var(--hts-color-white);
    --hts-color-text-muted: var(--hts-color-slate-600);
    --hts-color-text-primary: var(--hts-color-ink-950);
    --hts-color-text-secondary: var(--hts-color-slate-700);
    --hts-focus-ring-offset: var(--hts-shape-focus-ring-offset);
    --hts-focus-ring-width: var(--hts-shape-focus-ring-width);
    --hts-font-family-body: var(--hts-type-family-hts);
    --hts-font-family-display: var(--hts-type-family-hts);
    --hts-font-family-mono: var(--hts-type-family-mono);
    --hts-font-line-height-body: var(--hts-type-line-height-en-body);
    --hts-font-line-height-body-lg: var(--hts-type-line-height-en-body-lg);
    --hts-font-line-height-body-sm: var(--hts-type-line-height-en-body-sm);
    --hts-font-line-height-caption: var(--hts-type-line-height-en-caption);
    --hts-font-line-height-display-lg: var(--hts-type-line-height-en-display-lg);
    --hts-font-line-height-display-sm: var(--hts-type-line-height-en-display-sm);
    --hts-font-line-height-label: var(--hts-type-line-height-en-label);
    --hts-font-line-height-mono-sm: var(--hts-type-line-height-en-mono-sm);
    --hts-font-line-height-title-lg: var(--hts-type-line-height-en-title-lg);
    --hts-font-line-height-title-md: var(--hts-type-line-height-en-title-md);
    --hts-font-line-height-title-sm: var(--hts-type-line-height-en-title-sm);
    --hts-font-size-body: var(--hts-type-size-body);
    --hts-font-size-body-lg: var(--hts-type-size-body-lg);
    --hts-font-size-body-sm: var(--hts-type-size-body-sm);
    --hts-font-size-caption: var(--hts-type-size-caption);
    --hts-font-size-display-lg: var(--hts-type-size-display-lg);
    --hts-font-size-display-sm: var(--hts-type-size-display-sm);
    --hts-font-size-label: var(--hts-type-size-label);
    --hts-font-size-mono-sm: var(--hts-type-size-mono-sm);
    --hts-font-size-title-lg: var(--hts-type-size-title-lg);
    --hts-font-size-title-md: var(--hts-type-size-title-md);
    --hts-font-size-title-sm: var(--hts-type-size-title-sm);
    --hts-font-tracking-body: var(--hts-type-tracking-en-body);
    --hts-font-tracking-body-lg: var(--hts-type-tracking-en-body-lg);
    --hts-font-tracking-body-sm: var(--hts-type-tracking-en-body-sm);
    --hts-font-tracking-caption: var(--hts-type-tracking-en-caption);
    --hts-font-tracking-display-lg: var(--hts-type-tracking-en-display-lg);
    --hts-font-tracking-display-sm: var(--hts-type-tracking-en-display-sm);
    --hts-font-tracking-label: var(--hts-type-tracking-en-label);
    --hts-font-tracking-mono-sm: var(--hts-type-tracking-en-mono-sm);
    --hts-font-tracking-title-lg: var(--hts-type-tracking-en-title-lg);
    --hts-font-tracking-title-md: var(--hts-type-tracking-en-title-md);
    --hts-font-tracking-title-sm: var(--hts-type-tracking-en-title-sm);
    --hts-font-weight-body: var(--hts-type-weight-body);
    --hts-font-weight-body-lg: var(--hts-type-weight-body-lg);
    --hts-font-weight-body-sm: var(--hts-type-weight-body-sm);
    --hts-font-weight-caption: var(--hts-type-weight-caption);
    --hts-font-weight-display-lg: var(--hts-type-weight-display-lg);
    --hts-font-weight-display-sm: var(--hts-type-weight-display-sm);
    --hts-font-weight-label: var(--hts-type-weight-label);
    --hts-font-weight-mono-sm: var(--hts-type-weight-mono-sm);
    --hts-font-weight-title-lg: var(--hts-type-weight-title-lg);
    --hts-font-weight-title-md: var(--hts-type-weight-title-md);
    --hts-font-weight-title-sm: var(--hts-type-weight-title-sm);
    --hts-layout-gap: var(--hts-dimension-layout-gap);
    --hts-layout-gutter: var(--hts-dimension-layout-gutter);
    --hts-layout-narrow-max: var(--hts-dimension-layout-narrow-max);
    --hts-layout-page-max: var(--hts-dimension-layout-page-max);
    --hts-layout-readable-max: var(--hts-dimension-layout-readable-max);
    --hts-motion-duration-base: var(--hts-duration-base);
    --hts-motion-duration-fast: var(--hts-duration-fast);
    --hts-motion-duration-reduced: var(--hts-duration-reduced);
    --hts-motion-duration-slow: var(--hts-duration-slow);
    --hts-motion-easing-emphasized: var(--hts-easing-emphasized);
    --hts-motion-easing-standard: var(--hts-easing-standard);
    --hts-radius-lg: var(--hts-shape-radius-lg);
    --hts-radius-md: var(--hts-shape-radius-md);
    --hts-radius-pill: var(--hts-shape-radius-pill);
    --hts-radius-sm: var(--hts-shape-radius-sm);
    --hts-radius-xl: var(--hts-shape-radius-xl);
    --hts-shadow-lg: var(--hts-elevation-light-lg);
    --hts-shadow-md: var(--hts-elevation-light-md);
    --hts-shadow-sm: var(--hts-elevation-light-sm);
    --hts-shadow-xs: var(--hts-elevation-light-xs);
    --hts-size-control-default: var(--hts-dimension-control-md);
    --hts-size-control-lg: var(--hts-dimension-control-lg);
    --hts-size-control-md: var(--hts-dimension-control-md);
    --hts-size-control-sm: var(--hts-dimension-control-sm);
    --hts-size-icon-lg: var(--hts-dimension-icon-lg);
    --hts-size-icon-md: var(--hts-dimension-icon-md);
    --hts-size-icon-sm: var(--hts-dimension-icon-sm);
    --hts-size-icon-xl: var(--hts-dimension-icon-xl);
    --hts-space-0: var(--hts-dimension-space-0);
    --hts-space-1: var(--hts-dimension-space-1);
    --hts-space-10: var(--hts-dimension-space-10);
    --hts-space-12: var(--hts-dimension-space-12);
    --hts-space-16: var(--hts-dimension-space-16);
    --hts-space-2: var(--hts-dimension-space-2);
    --hts-space-20: var(--hts-dimension-space-20);
    --hts-space-24: var(--hts-dimension-space-24);
    --hts-space-3: var(--hts-dimension-space-3);
    --hts-space-4: var(--hts-dimension-space-4);
    --hts-space-5: var(--hts-dimension-space-5);
    --hts-space-6: var(--hts-dimension-space-6);
    --hts-space-8: var(--hts-dimension-space-8);
    --hts-space-control-block: var(--hts-dimension-space-3);
    --hts-space-control-inline: var(--hts-dimension-space-4);
    --hts-space-layout-block: var(--hts-dimension-space-4);
    --hts-space-layout-inline: var(--hts-dimension-space-3);
    --hts-z-index-content: var(--hts-stacking-content);
    --hts-z-index-dropdown: var(--hts-stacking-dropdown);
    --hts-z-index-modal: var(--hts-stacking-modal);
    --hts-z-index-overlay: var(--hts-stacking-overlay);
    --hts-z-index-sticky: var(--hts-stacking-sticky);
    --hts-z-index-toast: var(--hts-stacking-toast);
  }

  :where([data-hts-root][data-hts-theme="wecamp"][data-hts-mode="light"]) {
    --hts-color-action-danger-background: var(--hts-color-red-700);
    --hts-color-action-danger-foreground: var(--hts-color-white);
    --hts-color-action-primary-background: var(--hts-color-cobalt-800);
    --hts-color-action-primary-background-hover: var(--hts-color-cobalt-950);
    --hts-color-action-primary-foreground: var(--hts-color-white);
    --hts-color-border: var(--hts-color-slate-200);
    --hts-color-border-interactive: var(--hts-color-slate-600);
    --hts-color-canvas: var(--hts-color-slate-025);
    --hts-color-focus-ring: var(--hts-color-cobalt-800);
    --hts-color-overlay-background: var(--hts-color-ink-alpha-64);
    --hts-color-selection-background: var(--hts-color-blue-050);
    --hts-color-selection-foreground: var(--hts-color-ink-950);
    --hts-color-status-danger-background: var(--hts-color-red-100);
    --hts-color-status-danger-foreground: var(--hts-color-red-700);
    --hts-color-status-info-background: var(--hts-color-cobalt-100);
    --hts-color-status-info-foreground: var(--hts-color-cobalt-600);
    --hts-color-status-success-background: var(--hts-color-green-100);
    --hts-color-status-success-foreground: var(--hts-color-green-700);
    --hts-color-status-warning-background: var(--hts-color-amber-100);
    --hts-color-status-warning-foreground: var(--hts-color-amber-800);
    --hts-color-surface: var(--hts-color-white);
    --hts-color-surface-raised: var(--hts-color-slate-100);
    --hts-color-text-inverse: var(--hts-color-white);
    --hts-color-text-muted: var(--hts-color-slate-600);
    --hts-color-text-primary: var(--hts-color-ink-950);
    --hts-color-text-secondary: var(--hts-color-slate-700);
    --hts-font-family-body: var(--hts-type-family-wecamp);
    --hts-font-family-display: var(--hts-type-family-wecamp);
    --hts-font-family-mono: var(--hts-type-family-mono);
    --hts-shadow-lg: var(--hts-elevation-light-lg);
    --hts-shadow-md: var(--hts-elevation-light-md);
    --hts-shadow-sm: var(--hts-elevation-light-sm);
    --hts-shadow-xs: var(--hts-elevation-light-xs);
  }

  :where([data-hts-root][data-hts-theme="wecamp"][data-hts-mode="dark"]) {
    --hts-color-action-danger-background: var(--hts-color-red-300);
    --hts-color-action-danger-foreground: var(--hts-color-ink-950);
    --hts-color-action-primary-background: var(--hts-color-cobalt-300);
    --hts-color-action-primary-background-hover: var(--hts-color-cobalt-100);
    --hts-color-action-primary-foreground: var(--hts-color-ink-950);
    --hts-color-border: var(--hts-color-ink-700);
    --hts-color-border-interactive: var(--hts-color-slate-300);
    --hts-color-canvas: var(--hts-color-ink-950);
    --hts-color-focus-ring: var(--hts-color-cobalt-300);
    --hts-color-overlay-background: var(--hts-color-ink-alpha-64);
    --hts-color-selection-background: var(--hts-color-blue-800);
    --hts-color-selection-foreground: var(--hts-color-white);
    --hts-color-status-danger-background: var(--hts-color-red-950);
    --hts-color-status-danger-foreground: var(--hts-color-red-300);
    --hts-color-status-info-background: var(--hts-color-navy-950);
    --hts-color-status-info-foreground: var(--hts-color-cobalt-300);
    --hts-color-status-success-background: var(--hts-color-green-950);
    --hts-color-status-success-foreground: var(--hts-color-green-300);
    --hts-color-status-warning-background: var(--hts-color-amber-950);
    --hts-color-status-warning-foreground: var(--hts-color-amber-300);
    --hts-color-surface: var(--hts-color-ink-900);
    --hts-color-surface-raised: var(--hts-color-ink-800);
    --hts-color-text-inverse: var(--hts-color-ink-950);
    --hts-color-text-muted: var(--hts-color-slate-300);
    --hts-color-text-primary: var(--hts-color-white);
    --hts-color-text-secondary: var(--hts-color-slate-200);
    --hts-font-family-body: var(--hts-type-family-wecamp);
    --hts-font-family-display: var(--hts-type-family-wecamp);
    --hts-font-family-mono: var(--hts-type-family-mono);
    --hts-shadow-lg: var(--hts-elevation-dark-lg);
    --hts-shadow-md: var(--hts-elevation-dark-md);
    --hts-shadow-sm: var(--hts-elevation-dark-sm);
    --hts-shadow-xs: var(--hts-elevation-dark-xs);
  }

  :where([data-hts-root][data-hts-density="comfortable"]) {
    --hts-size-control-default: var(--hts-dimension-control-md);
    --hts-space-control-block: var(--hts-dimension-space-3);
    --hts-space-control-inline: var(--hts-dimension-space-4);
    --hts-space-layout-block: var(--hts-dimension-space-4);
    --hts-space-layout-inline: var(--hts-dimension-space-3);
  }

  :where([data-hts-root][data-hts-density="compact"]) {
    --hts-size-control-default: var(--hts-dimension-control-sm);
    --hts-space-control-block: var(--hts-dimension-space-2);
    --hts-space-control-inline: var(--hts-dimension-space-3);
    --hts-space-layout-block: var(--hts-dimension-space-3);
    --hts-space-layout-inline: var(--hts-dimension-space-2);
  }

  :where([data-hts-root]):lang(fa) {
    --hts-font-line-height-body: var(--hts-type-line-height-fa-body);
    --hts-font-line-height-body-lg: var(--hts-type-line-height-fa-body-lg);
    --hts-font-line-height-body-sm: var(--hts-type-line-height-fa-body-sm);
    --hts-font-line-height-caption: var(--hts-type-line-height-fa-caption);
    --hts-font-line-height-display-lg: var(--hts-type-line-height-fa-display-lg);
    --hts-font-line-height-display-sm: var(--hts-type-line-height-fa-display-sm);
    --hts-font-line-height-label: var(--hts-type-line-height-fa-label);
    --hts-font-line-height-mono-sm: var(--hts-type-line-height-fa-mono-sm);
    --hts-font-line-height-title-lg: var(--hts-type-line-height-fa-title-lg);
    --hts-font-line-height-title-md: var(--hts-type-line-height-fa-title-md);
    --hts-font-line-height-title-sm: var(--hts-type-line-height-fa-title-sm);
    --hts-font-tracking-body: var(--hts-type-tracking-fa-body);
    --hts-font-tracking-body-lg: var(--hts-type-tracking-fa-body-lg);
    --hts-font-tracking-body-sm: var(--hts-type-tracking-fa-body-sm);
    --hts-font-tracking-caption: var(--hts-type-tracking-fa-caption);
    --hts-font-tracking-display-lg: var(--hts-type-tracking-fa-display-lg);
    --hts-font-tracking-display-sm: var(--hts-type-tracking-fa-display-sm);
    --hts-font-tracking-label: var(--hts-type-tracking-fa-label);
    --hts-font-tracking-mono-sm: var(--hts-type-tracking-fa-mono-sm);
    --hts-font-tracking-title-lg: var(--hts-type-tracking-fa-title-lg);
    --hts-font-tracking-title-md: var(--hts-type-tracking-fa-title-md);
    --hts-font-tracking-title-sm: var(--hts-type-tracking-fa-title-sm);
  }
}

@font-face {
  font-family: Plus Jakarta Sans Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/plus-jakarta-sans-latin-variable.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Vazirmatn Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/vazirmatn-arabic-variable.woff2") format("woff2");
  unicode-range: U+6??, U+750-77F, U+870-88E, U+890-891, U+897-8E1, U+8E3-8FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer hts.reset {
  :where([data-hts-root]), :where([data-hts-root]) *, :where([data-hts-root]):before, :where([data-hts-root]):after, :where([data-hts-root]) :before, :where([data-hts-root]) :after {
    box-sizing: border-box;
  }

  :where([data-hts-root]) :is(button, input, optgroup, select, textarea) {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
  }

  :where([data-hts-root]) :is(canvas, img, picture, svg, video) {
    max-inline-size: 100%;
    display: block;
  }

  :where([data-hts-root]) :is(img, video) {
    block-size: auto;
  }
}

@layer hts.base {
  :where([data-hts-root]) {
    color: var(--hts-color-text-primary);
    color-scheme: light;
    font-family: var(--hts-font-family-body);
    font-size: var(--hts-font-size-body);
    font-weight: var(--hts-font-weight-body);
    letter-spacing: var(--hts-font-tracking-body);
    line-height: var(--hts-font-line-height-body);
  }

  :where([data-hts-root]):where([data-hts-mode="dark"]) {
    color-scheme: dark;
  }

  :where([data-hts-root]):is(html, body) {
    background-color: var(--hts-color-canvas);
  }

  :where([data-hts-root])::selection, :where([data-hts-root]) ::selection {
    background-color: var(--hts-color-selection-background);
    color: var(--hts-color-selection-foreground);
  }

  :where([data-hts-root]) :is(button, input, optgroup, select, textarea) {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
  }

  :where([data-hts-root]) :focus-visible {
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: var(--hts-focus-ring-offset);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white);
  }
}

@media (forced-colors: active) {
  @layer hts.base {
    :where([data-hts-root]) {
      forced-color-adjust: auto;
    }

    :where([data-hts-root]) :focus-visible {
      box-shadow: none;
      outline-color: highlight;
    }

    :where([data-hts-root])::selection, :where([data-hts-root]) ::selection {
      color: highlighttext;
      background-color: highlight;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer hts.base {
    :where([data-hts-root]), :where([data-hts-root]) *, :where([data-hts-root]):before, :where([data-hts-root]):after, :where([data-hts-root]) :before, :where([data-hts-root]) :after {
      animation-duration: var(--hts-motion-duration-reduced) !important;
      scroll-behavior: auto !important;
      animation-iteration-count: 1 !important;
    }
  }
}

@layer hts.components {
  :where([data-hts-root]) .hts-accordion {
    gap: var(--hts-space-2);
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    color: var(--hts-color-text-primary);
    display: grid;
    container-type: inline-size;
  }

  :where([data-hts-root]) .hts-accordion-item {
    box-sizing: border-box;
    min-inline-size: var(--hts-space-0);
    border: var(--hts-border-hairline) solid var(--hts-color-border);
    border-radius: var(--hts-radius-md);
    background-color: var(--hts-color-surface);
    max-inline-size: 100%;
    overflow: hidden;
  }

  :where([data-hts-root]) .hts-accordion-item[data-state="open"], :where([data-hts-root]) .hts-accordion-item[open] {
    border-color: var(--hts-color-border-interactive);
    box-shadow: var(--hts-shadow-xs);
  }

  :where([data-hts-root]) .hts-accordion-heading {
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    margin: var(--hts-space-0);
  }

  :where([data-hts-root]) .hts-accordion-trigger {
    appearance: none;
    inline-size: 100%;
    min-block-size: var(--hts-size-control-default);
    min-inline-size: var(--hts-size-control-default);
    max-inline-size: 100%;
    margin: var(--hts-space-0);
    padding-block: var(--hts-space-2);
    padding-inline: var(--hts-space-control-inline);
    justify-content: space-between;
    align-items: center;
    gap: var(--hts-space-3);
    overflow-wrap: anywhere;
    color: var(--hts-color-text-primary);
    font-family: var(--hts-font-family-body);
    font-size: var(--hts-font-size-label);
    font-weight: var(--hts-font-weight-label);
    letter-spacing: var(--hts-font-tracking-label);
    line-height: var(--hts-font-line-height-label);
    text-align: start;
    white-space: normal;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    background-color: #0000;
    border: 0;
    display: flex;
  }

  :where([data-hts-root]) .hts-accordion-trigger:where([aria-disabled="true"]) {
    cursor: default;
  }

  :where([data-hts-root]) .hts-accordion-trigger:hover {
    background-color: var(--hts-color-surface-raised);
  }

  :where([data-hts-root]) .hts-accordion-trigger:active {
    box-shadow: inset 0 0 0 var(--hts-border-hairline) currentcolor;
  }

  :where([data-hts-root]) .hts-accordion-trigger:focus-visible {
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: calc(-1 * var(--hts-focus-ring-width));
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white);
    position: relative;
  }

  :where([data-hts-root]) .hts-accordion-trigger:disabled {
    box-shadow: none;
    color: var(--hts-color-text-muted);
    cursor: not-allowed;
    opacity: .6;
    background-color: #0000;
  }

  :where([data-hts-root]) .hts-accordion-trigger::-webkit-details-marker {
    display: none;
  }

  :where([data-hts-root]) .hts-accordion-label {
    min-inline-size: var(--hts-space-0);
    overflow-wrap: anywhere;
    max-inline-size: 100%;
  }

  :where([data-hts-root]) .hts-accordion-indicator {
    color: currentColor;
    transition: transform var(--hts-motion-duration-fast)
      var(--hts-motion-easing-standard);
    flex: none;
    transform: rotate(0);
  }

  :where([data-hts-root]) .hts-accordion-trigger[data-state="open"] > :where(.hts-accordion-indicator), :where([data-hts-root]) .hts-accordion-item[open] > :where(.hts-accordion-trigger) > :where(.hts-accordion-indicator) {
    transform: rotate(180deg);
  }

  :where([data-hts-root]) .hts-accordion-content {
    min-inline-size: var(--hts-space-0);
    border-block-start: var(--hts-border-hairline) solid var(--hts-color-border);
    background-color: var(--hts-color-surface);
    max-inline-size: 100%;
    color: var(--hts-color-text-primary);
    overflow: hidden;
  }

  :where([data-hts-root]) .hts-accordion-content-body {
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    padding-block: var(--hts-space-4);
    padding-inline: var(--hts-space-control-inline);
    overflow-wrap: anywhere;
  }

  @container (inline-size < 30rem) {
    :where([data-hts-root]) .hts-accordion-trigger, :where([data-hts-root]) .hts-accordion-content-body {
      padding-inline: var(--hts-space-3);
    }
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-accordion {
      color: canvastext;
      forced-color-adjust: auto;
    }

    :where([data-hts-root]) .hts-accordion-item {
      box-shadow: none;
      background-color: canvas;
      border-color: canvastext;
    }

    :where([data-hts-root]) .hts-accordion-trigger {
      color: buttontext;
      background-color: buttonface;
    }

    :where([data-hts-root]) .hts-accordion-trigger:disabled {
      color: graytext;
      opacity: 1;
      background-color: buttonface;
    }

    :where([data-hts-root]) .hts-accordion-trigger:focus-visible {
      box-shadow: none;
      outline-color: highlight;
    }

    :where([data-hts-root]) .hts-accordion-content {
      color: canvastext;
      background-color: canvas;
      border-color: canvastext;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where([data-hts-root]) .hts-accordion-indicator {
      transition-duration: var(--hts-motion-duration-reduced);
    }
  }

  :where([data-hts-root]) .hts-alert {
    grid-template-columns: max-content
      minmax(var(--hts-space-0), 1fr)
      max-content;
    align-items: start;
    gap: var(--hts-space-2) var(--hts-space-3);
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    margin: var(--hts-space-0);
    padding: var(--hts-space-4);
    border: var(--hts-border-hairline) solid var(--hts-color-border);
    border-radius: var(--hts-radius-md);
    background-color: var(--hts-color-surface);
    box-shadow: var(--hts-shadow-xs);
    color: var(--hts-color-text-primary);
    overflow-wrap: anywhere;
    display: grid;
    overflow: hidden;
    container-type: inline-size;
  }

  :where([data-hts-root]) .hts-alert:where([data-tone="info"]) {
    border-color: var(--hts-color-status-info-foreground);
    background-color: var(--hts-color-status-info-background);
    color: var(--hts-color-status-info-foreground);
  }

  :where([data-hts-root]) .hts-alert:where([data-tone="success"]) {
    border-color: var(--hts-color-status-success-foreground);
    background-color: var(--hts-color-status-success-background);
    color: var(--hts-color-status-success-foreground);
  }

  :where([data-hts-root]) .hts-alert:where([data-tone="warning"]) {
    border-color: var(--hts-color-status-warning-foreground);
    background-color: var(--hts-color-status-warning-background);
    color: var(--hts-color-status-warning-foreground);
  }

  :where([data-hts-root]) .hts-alert:where([data-tone="danger"]) {
    border-color: var(--hts-color-status-danger-foreground);
    background-color: var(--hts-color-status-danger-background);
    color: var(--hts-color-status-danger-foreground);
  }

  :where([data-hts-root]) .hts-alert > .hts-alert-icon {
    min-block-size: var(--hts-size-icon-md);
    color: inherit;
    grid-column: 1;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  :where([data-hts-root]) .hts-alert > .hts-alert-content {
    gap: var(--hts-space-1);
    min-inline-size: var(--hts-space-0);
    grid-column: 2;
    max-inline-size: 100%;
    display: grid;
  }

  :where([data-hts-root]) .hts-alert:where(:not(:has( > .hts-alert-icon))) > .hts-alert-content {
    grid-column: 1 / span 2;
  }

  :where([data-hts-root]) .hts-alert:where(:not(:has( > .hts-alert-action))) > .hts-alert-content {
    grid-column-end: -1;
  }

  :where([data-hts-root]) .hts-alert > .hts-alert-content > .hts-alert-title, :where([data-hts-root]) .hts-alert > .hts-alert-content > .hts-alert-body {
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    color: inherit;
    overflow-wrap: anywhere;
  }

  :where([data-hts-root]) .hts-alert > .hts-alert-action {
    justify-content: flex-end;
    align-items: center;
    gap: var(--hts-space-2);
    min-inline-size: var(--hts-space-0);
    flex-wrap: wrap;
    grid-column: 3;
    max-inline-size: 100%;
    display: flex;
  }

  @container (inline-size < 30rem) {
    :where([data-hts-root]) .hts-alert > .hts-alert-action {
      grid-area: 2 / 2 / auto / -1;
      justify-content: flex-start;
    }

    :where([data-hts-root]) .hts-alert:where(:not(:has( > .hts-alert-icon))) > .hts-alert-action {
      grid-column: 1 / -1;
    }
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-alert {
      box-shadow: none;
      color: canvastext;
      forced-color-adjust: auto;
      background-color: canvas;
      border-color: canvastext;
    }

    :where([data-hts-root]) .hts-alert > .hts-alert-icon, :where([data-hts-root]) .hts-alert > .hts-alert-content > .hts-alert-title, :where([data-hts-root]) .hts-alert > .hts-alert-content > .hts-alert-body {
      color: canvastext;
    }
  }

  :where([data-hts-root]) .hts-badge {
    background-color: var(--hts-color-surface-raised);
    border-color: var(--hts-color-border);
    border-radius: var(--hts-radius-pill);
    border-style: solid;
    border-width: var(--hts-border-hairline);
    color: var(--hts-color-text-primary);
    font-family: var(--hts-font-family-body);
    font-size: var(--hts-font-size-label);
    font-weight: var(--hts-font-weight-label);
    letter-spacing: var(--hts-font-tracking-label);
    line-height: var(--hts-font-line-height-label);
    overflow-wrap: anywhere;
    max-inline-size: 100%;
    padding-block: var(--hts-space-1);
    padding-inline: var(--hts-space-3);
    text-align: center;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  :where([data-hts-root]) .hts-badge[data-size="sm"] {
    font-size: var(--hts-font-size-caption);
    font-weight: var(--hts-font-weight-caption);
    letter-spacing: var(--hts-font-tracking-caption);
    line-height: var(--hts-font-line-height-caption);
    padding-block: var(--hts-space-1);
    padding-inline: var(--hts-space-2);
  }

  :where([data-hts-root]) .hts-badge[data-size="md"] {
    font-size: var(--hts-font-size-label);
    font-weight: var(--hts-font-weight-label);
    letter-spacing: var(--hts-font-tracking-label);
    line-height: var(--hts-font-line-height-label);
    padding-block: var(--hts-space-1);
    padding-inline: var(--hts-space-3);
  }

  :where([data-hts-root]) .hts-badge[data-tone="neutral"] {
    background-color: var(--hts-color-surface-raised);
    border-color: var(--hts-color-border);
    color: var(--hts-color-text-primary);
  }

  :where([data-hts-root]) .hts-badge[data-tone="info"] {
    background-color: var(--hts-color-status-info-background);
    border-color: var(--hts-color-status-info-foreground);
    color: var(--hts-color-status-info-foreground);
  }

  :where([data-hts-root]) .hts-badge[data-tone="success"] {
    background-color: var(--hts-color-status-success-background);
    border-color: var(--hts-color-status-success-foreground);
    color: var(--hts-color-status-success-foreground);
  }

  :where([data-hts-root]) .hts-badge[data-tone="warning"] {
    background-color: var(--hts-color-status-warning-background);
    border-color: var(--hts-color-status-warning-foreground);
    color: var(--hts-color-status-warning-foreground);
  }

  :where([data-hts-root]) .hts-badge[data-tone="danger"] {
    background-color: var(--hts-color-status-danger-background);
    border-color: var(--hts-color-status-danger-foreground);
    color: var(--hts-color-status-danger-foreground);
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-badge {
      color: canvastext;
      forced-color-adjust: auto;
      background-color: canvas;
      border-color: canvastext;
    }
  }

  :where([data-hts-root]) .hts-breadcrumb {
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    color: var(--hts-color-text-primary);
    container-type: inline-size;
  }

  :where([data-hts-root]) .hts-breadcrumb-list {
    align-items: center;
    gap: var(--hts-space-1) var(--hts-space-2);
    box-sizing: border-box;
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    margin: var(--hts-space-0);
    padding: var(--hts-space-0);
    flex-wrap: wrap;
    list-style: none;
    display: flex;
  }

  :where([data-hts-root]) .hts-breadcrumb-item {
    align-items: center;
    gap: var(--hts-space-1);
    box-sizing: border-box;
    min-inline-size: var(--hts-space-0);
    flex: 0 auto;
    max-inline-size: 100%;
    display: inline-flex;
  }

  :where([data-hts-root]) .hts-breadcrumb-link {
    min-block-size: var(--hts-size-control-sm);
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    padding-block: var(--hts-space-1);
    overflow-wrap: anywhere;
    align-items: center;
    display: inline-flex;
  }

  :where([data-hts-root]) .hts-breadcrumb-current {
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    color: var(--hts-color-text-primary);
    font-weight: var(--hts-font-weight-label);
    overflow-wrap: anywhere;
  }

  :where([data-hts-root]) .hts-breadcrumb .hts-breadcrumb-separator {
    color: var(--hts-color-text-muted);
    pointer-events: none;
    flex: none;
  }

  @container (inline-size < 30rem) {
    :where([data-hts-root]) .hts-breadcrumb-list {
      column-gap: var(--hts-space-1);
    }
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-breadcrumb {
      color: canvastext;
      forced-color-adjust: auto;
    }

    :where([data-hts-root]) .hts-breadcrumb-current {
      color: canvastext;
    }

    :where([data-hts-root]) .hts-breadcrumb .hts-breadcrumb-separator {
      color: graytext;
    }
  }

  :where([data-hts-root]) .hts-button {
    appearance: none;
    min-block-size: var(--hts-size-control-default);
    min-inline-size: var(--hts-size-control-default);
    max-inline-size: 100%;
    margin: var(--hts-space-0);
    padding-block: var(--hts-space-1);
    padding-inline: var(--hts-space-control-inline);
    justify-content: center;
    align-items: center;
    gap: var(--hts-space-2);
    overflow-wrap: anywhere;
    border: var(--hts-border-hairline) solid
      var(--hts-color-action-primary-background);
    border-radius: var(--hts-radius-md);
    background-color: var(--hts-color-action-primary-background);
    box-shadow: none;
    color: var(--hts-color-action-primary-foreground);
    font-size: var(--hts-font-size-label);
    font-weight: var(--hts-font-weight-label);
    letter-spacing: var(--hts-font-tracking-label);
    line-height: var(--hts-font-line-height-label);
    text-align: center;
    white-space: normal;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    transition: background-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      border-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      color var(--hts-motion-duration-fast) var(--hts-motion-easing-standard),
      box-shadow var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard);
    text-decoration: none;
    display: inline-flex;
  }

  :where([data-hts-root]) .hts-button:where([data-size="sm"]) {
    min-block-size: var(--hts-size-control-sm);
    min-inline-size: var(--hts-size-control-sm);
    padding-inline: var(--hts-space-3);
  }

  :where([data-hts-root]) .hts-button:where([data-size="md"]) {
    min-block-size: var(--hts-size-control-default);
    min-inline-size: var(--hts-size-control-default);
    padding-inline: var(--hts-space-control-inline);
  }

  :where([data-hts-root]) .hts-button:where([data-size="lg"]) {
    min-block-size: var(--hts-size-control-lg);
    min-inline-size: var(--hts-size-control-lg);
    padding-inline: var(--hts-space-5);
  }

  :where([data-hts-root]) .hts-button:where([data-variant="primary"]) {
    border-color: var(--hts-color-action-primary-background);
    background-color: var(--hts-color-action-primary-background);
    color: var(--hts-color-action-primary-foreground);
  }

  :where([data-hts-root]) .hts-button:where([data-variant="secondary"]) {
    border-color: var(--hts-color-border-interactive);
    background-color: var(--hts-color-surface);
    color: var(--hts-color-text-primary);
  }

  :where([data-hts-root]) .hts-button:where([data-variant="quiet"]) {
    color: var(--hts-color-text-primary);
    background-color: #0000;
    border-color: #0000;
  }

  :where([data-hts-root]) .hts-button:where([data-variant="danger"]) {
    border-color: var(--hts-color-action-danger-background);
    background-color: var(--hts-color-action-danger-background);
    color: var(--hts-color-action-danger-foreground);
  }

  :where([data-hts-root]) .hts-button:where([data-state="loading"][aria-disabled="true"]) {
    box-shadow: none;
    cursor: progress;
  }

  :where([data-hts-root]) .hts-button:where([data-variant="primary"][data-state="loading"][aria-disabled="true"]) {
    border-color: var(--hts-color-action-primary-background);
    background-color: var(--hts-color-action-primary-background);
    color: var(--hts-color-action-primary-foreground);
  }

  :where([data-hts-root]) .hts-button:where([data-variant="secondary"][data-state="loading"][aria-disabled="true"]) {
    border-color: var(--hts-color-border-interactive);
    background-color: var(--hts-color-surface);
    color: var(--hts-color-text-primary);
  }

  :where([data-hts-root]) .hts-button:where([data-variant="quiet"][data-state="loading"][aria-disabled="true"]) {
    color: var(--hts-color-text-primary);
    background-color: #0000;
    border-color: #0000;
  }

  :where([data-hts-root]) .hts-button:where([data-variant="danger"][data-state="loading"][aria-disabled="true"]) {
    border-color: var(--hts-color-action-danger-background);
    background-color: var(--hts-color-action-danger-background);
    color: var(--hts-color-action-danger-foreground);
  }

  :where([data-hts-root]) .hts-button:where([data-state="loading"][aria-disabled="true"]):after {
    inline-size: var(--hts-size-icon-sm);
    block-size: var(--hts-size-icon-sm);
    border: var(--hts-border-strong) dotted currentcolor;
    border-radius: var(--hts-radius-pill);
    content: "";
    flex: none;
  }

  :where([data-hts-root]) .hts-button:disabled {
    border-color: var(--hts-color-border);
    background-color: var(--hts-color-surface-raised);
    box-shadow: none;
    color: var(--hts-color-text-muted);
    cursor: not-allowed;
  }

  :where([data-hts-root]) .hts-button:where(:not(:disabled, [data-state="loading"])):hover {
    box-shadow: var(--hts-shadow-xs);
  }

  :where([data-hts-root]) .hts-button:where([data-variant="primary"]:not(:disabled, [data-state="loading"])):hover {
    border-color: var(--hts-color-action-primary-background-hover);
    background-color: var(--hts-color-action-primary-background-hover);
  }

  :where([data-hts-root]) .hts-button:where([data-variant="secondary"]:not(:disabled, [data-state="loading"])):hover, :where([data-hts-root]) .hts-button:where([data-variant="quiet"]:not(:disabled, [data-state="loading"])):hover {
    background-color: var(--hts-color-surface-raised);
  }

  :where([data-hts-root]) .hts-button:where([data-variant="danger"]:not(:disabled, [data-state="loading"])):hover {
    border-color: var(--hts-color-action-danger-background);
    background-color: var(--hts-color-action-danger-background);
    box-shadow: var(--hts-shadow-sm);
  }

  :where([data-hts-root]) .hts-button:where(:not(:disabled, [data-state="loading"])):active {
    box-shadow: inset 0 0 0 var(--hts-border-hairline) currentcolor;
  }

  :where([data-hts-root]) .hts-button:where([data-variant="primary"]:not(:disabled, [data-state="loading"])):active {
    border-color: var(--hts-color-action-primary-background-hover);
    background-color: var(--hts-color-action-primary-background-hover);
  }

  :where([data-hts-root]) .hts-button:where([data-variant="secondary"]:not(:disabled, [data-state="loading"])):active, :where([data-hts-root]) .hts-button:where([data-variant="quiet"]:not(:disabled, [data-state="loading"])):active {
    background-color: var(--hts-color-canvas);
  }

  :where([data-hts-root]) .hts-button:where([data-variant="danger"]:not(:disabled, [data-state="loading"])):active {
    border-color: var(--hts-color-action-danger-background);
    background-color: var(--hts-color-action-danger-background);
  }

  :where([data-hts-root]) .hts-button:focus-visible {
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: var(--hts-focus-ring-offset);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white);
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-button {
      color: buttontext;
      forced-color-adjust: auto;
      background-color: buttonface;
      border-color: buttontext;
      transition: none;
    }

    :where([data-hts-root]) .hts-button:where([data-state="loading"][aria-disabled="true"]), :where([data-hts-root]) .hts-button:disabled {
      color: graytext;
      background-color: buttonface;
      border-color: graytext;
    }

    :where([data-hts-root]) .hts-button:where(:not(:disabled, [data-state="loading"])):is(:hover, :active) {
      box-shadow: none;
      color: highlighttext;
      background-color: highlight;
      border-color: highlight;
    }

    :where([data-hts-root]) .hts-button:focus-visible {
      box-shadow: none;
      outline-color: highlight;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where([data-hts-root]) .hts-button {
      transition-duration: var(--hts-motion-duration-reduced);
    }
  }

  :where([data-hts-root]) .hts-card {
    align-content: start;
    gap: var(--hts-space-4);
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    margin: var(--hts-space-0);
    padding-block: var(--hts-space-layout-block);
    padding-inline: var(--hts-space-layout-inline);
    border: var(--hts-border-hairline) solid var(--hts-color-border);
    border-radius: var(--hts-radius-lg);
    background-color: var(--hts-color-surface);
    box-shadow: var(--hts-shadow-xs);
    color: var(--hts-color-text-primary);
    overflow-wrap: anywhere;
    display: grid;
    overflow: hidden;
    container-type: inline-size;
  }

  :where([data-hts-root]) .hts-card-content {
    gap: var(--hts-space-2);
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    display: grid;
  }

  :where([data-hts-root]) .hts-card-title, :where([data-hts-root]) .hts-card-body {
    min-inline-size: var(--hts-space-0);
    overflow-wrap: anywhere;
    max-inline-size: 100%;
  }

  :where([data-hts-root]) .hts-card-action {
    justify-content: flex-start;
    align-items: center;
    gap: var(--hts-space-2);
    min-inline-size: var(--hts-space-0);
    flex-wrap: wrap;
    max-inline-size: 100%;
    display: flex;
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-card {
      box-shadow: none;
      color: canvastext;
      forced-color-adjust: auto;
      background-color: canvas;
      border-color: canvastext;
    }

    :where([data-hts-root]) .hts-card-title, :where([data-hts-root]) .hts-card-body {
      color: canvastext;
    }
  }

  :where([data-hts-root]) .hts-checkbox {
    appearance: none;
    box-sizing: border-box;
    inline-size: var(--hts-size-icon-lg);
    block-size: var(--hts-size-icon-lg);
    margin: var(--hts-space-0);
    padding: var(--hts-space-0);
    border: var(--hts-border-hairline) solid var(--hts-color-border-interactive);
    border-radius: var(--hts-radius-sm);
    background-color: var(--hts-color-surface);
    box-shadow: none;
    color: var(--hts-color-action-primary-foreground);
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      border-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      box-shadow var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard);
    flex: none;
    place-content: center;
    display: inline-grid;
  }

  :where([data-hts-root]) .hts-checkbox:before {
    inline-size: var(--hts-space-3);
    block-size: var(--hts-space-3);
    clip-path: polygon(14% 44%, 0 59%, 39% 100%, 100% 18%, 82% 0, 37% 65%);
    content: "";
    transition: transform var(--hts-motion-duration-fast)
      var(--hts-motion-easing-standard);
    background-color: currentColor;
    transform: scale(0);
  }

  :where([data-hts-root]) .hts-checkbox:where(:checked):before {
    transform: scale(1);
  }

  :where([data-hts-root]) .hts-checkbox:where(:indeterminate):before {
    inline-size: var(--hts-space-3);
    block-size: var(--hts-border-strong);
    border-radius: var(--hts-radius-pill);
    clip-path: none;
    transform: scale(1);
  }

  :where([data-hts-root]) .hts-checkbox:where(:checked, :indeterminate) {
    border-color: var(--hts-color-action-primary-background);
    background-color: var(--hts-color-action-primary-background);
  }

  :where([data-hts-root]) .hts-checkbox:where([aria-invalid="true"]) {
    border-color: var(--hts-color-status-danger-foreground);
  }

  :where([data-hts-root]) .hts-checkbox:where([aria-invalid="true"]):where(:checked, :indeterminate) {
    border-color: var(--hts-color-action-danger-background);
    background-color: var(--hts-color-action-danger-background);
    color: var(--hts-color-action-danger-foreground);
  }

  :where([data-hts-root]) .hts-checkbox:where(:not(:disabled, :checked, :indeterminate, [aria-invalid="true"])):hover {
    border-color: var(--hts-color-action-primary-background);
    background-color: var(--hts-color-surface-raised);
  }

  :where([data-hts-root]) .hts-checkbox:where(:checked, :indeterminate):where(:not(:disabled, [aria-invalid="true"])):hover {
    border-color: var(--hts-color-action-primary-background-hover);
    background-color: var(--hts-color-action-primary-background-hover);
  }

  :where([data-hts-root]) .hts-checkbox:where(:not(:disabled)):active {
    box-shadow: inset 0 0 0 var(--hts-border-hairline) currentcolor;
  }

  :where([data-hts-root]) .hts-checkbox:disabled {
    border-color: var(--hts-color-border);
    background-color: var(--hts-color-surface-raised);
    box-shadow: none;
    color: var(--hts-color-text-muted);
    cursor: not-allowed;
  }

  :where([data-hts-root]) .hts-checkbox:focus-visible {
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: var(--hts-focus-ring-offset);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white);
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-checkbox {
      appearance: auto;
      color: buttontext;
      forced-color-adjust: auto;
      background-color: buttonface;
      border-color: buttontext;
    }

    :where([data-hts-root]) .hts-checkbox:before {
      display: none;
    }

    :where([data-hts-root]) .hts-checkbox:where([aria-invalid="true"]) {
      border-color: mark;
    }

    :where([data-hts-root]) .hts-checkbox:disabled {
      color: graytext;
      background-color: buttonface;
      border-color: graytext;
    }

    :where([data-hts-root]) .hts-checkbox:focus-visible {
      box-shadow: none;
      outline-color: highlight;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where([data-hts-root]) .hts-checkbox, :where([data-hts-root]) .hts-checkbox:before {
      transition-duration: var(--hts-motion-duration-reduced);
    }
  }

  :where([data-hts-root]) .hts-data-table-region {
    box-sizing: border-box;
    overflow-block: hidden;
    overflow-inline: auto;
    border: var(--hts-border-hairline) solid var(--hts-color-border);
    border-radius: var(--hts-radius-lg);
    background-color: var(--hts-color-surface);
    max-inline-size: 100%;
    color: var(--hts-color-text-primary);
    scrollbar-gutter: stable;
  }

  :where([data-hts-root]) .hts-data-table-region:focus-visible {
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: var(--hts-focus-ring-offset);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white);
  }

  :where([data-hts-root]) .hts-data-table {
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: var(--hts-layout-narrow-max);
    border-spacing: var(--hts-space-0);
    border-collapse: collapse;
    background-color: var(--hts-color-surface);
    color: var(--hts-color-text-primary);
    text-align: start;
  }

  :where([data-hts-root]) .hts-data-table-caption {
    padding-block: var(--hts-space-3);
    padding-inline: var(--hts-space-4);
    border-block-end: var(--hts-border-hairline) solid var(--hts-color-border);
    background-color: var(--hts-color-surface);
    color: var(--hts-color-text-secondary);
    text-align: start;
    overflow-wrap: anywhere;
  }

  :where([data-hts-root]) .hts-data-table-head {
    background-color: var(--hts-color-surface-raised);
    color: var(--hts-color-text-primary);
  }

  :where([data-hts-root]) .hts-data-table :where(th, td) {
    box-sizing: border-box;
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    padding-block: var(--hts-space-3);
    padding-inline: var(--hts-space-4);
    border-block-end: var(--hts-border-hairline) solid var(--hts-color-border);
    color: inherit;
    text-align: start;
    vertical-align: middle;
    overflow-wrap: anywhere;
  }

  :where([data-hts-root]) .hts-data-table :where(th) {
    font-weight: var(--hts-font-weight-label);
  }

  :where([data-hts-root]) .hts-data-table > :where(tbody) > :where(tr:last-child) > :where(th, td) {
    border-block-end: none;
  }

  :where([data-hts-root]) .hts-data-table > :where(tbody) > :where(tr[data-selected="true"]) > :where(th, td) {
    background-color: var(--hts-color-status-info-background);
    color: var(--hts-color-status-info-foreground);
  }

  :where([data-hts-root]) .hts-data-table-selection-cell {
    inline-size: var(--hts-size-control-lg);
    white-space: nowrap;
  }

  :where([data-hts-root]) .hts-data-table-selection-checkbox {
    margin-inline: auto;
  }

  :where([data-hts-root]) .hts-data-table-sort-control {
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: var(--hts-space-0);
    align-items: center;
    max-inline-size: 100%;
    display: inline-grid;
  }

  :where([data-hts-root]) .hts-data-table-sort-control > :where(.hts-data-table-sort-button) {
    inline-size: 100%;
    min-inline-size: var(--hts-space-0);
    text-align: start;
    overflow-wrap: anywhere;
    grid-area: 1 / 1;
    justify-content: start;
    padding-inline-end: var(--hts-space-8);
  }

  :where([data-hts-root]) .hts-data-table-sort-control > :where(.hts-data-table-sort-icon) {
    z-index: var(--hts-z-index-content);
    color: var(--hts-color-text-secondary);
    pointer-events: none;
    grid-area: 1 / 1;
    justify-self: end;
    margin-inline-end: var(--hts-space-3);
  }

  :where([data-hts-root]) .hts-data-table-status-cell {
    padding-block: var(--hts-space-6);
    text-align: center;
  }

  :where([data-hts-root]) .hts-data-table-busy {
    justify-content: center;
    align-items: center;
    gap: var(--hts-space-2);
    max-inline-size: 100%;
    display: inline-flex;
  }

  :where([data-hts-root]) .hts-data-table-status-text, :where([data-hts-root]) .hts-data-table-text, :where([data-hts-root]) .hts-data-table-header-text {
    overflow-wrap: anywhere;
    max-inline-size: 100%;
  }

  :where([data-hts-root]) .hts-data-table-selection-skeleton {
    inline-size: var(--hts-size-icon-lg);
    block-size: var(--hts-size-icon-lg);
    min-block-size: var(--hts-size-icon-lg);
    border-radius: var(--hts-radius-sm);
    margin-inline: auto;
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-data-table-region {
      color: canvastext;
      forced-color-adjust: auto;
      background-color: canvas;
      border-color: canvastext;
    }

    :where([data-hts-root]) .hts-data-table, :where([data-hts-root]) .hts-data-table-caption, :where([data-hts-root]) .hts-data-table-head {
      color: canvastext;
      background-color: canvas;
    }

    :where([data-hts-root]) .hts-data-table-caption, :where([data-hts-root]) .hts-data-table :where(th, td) {
      border-color: canvastext;
    }

    :where([data-hts-root]) .hts-data-table > :where(tbody) > :where(tr[data-selected="true"]) > :where(th, td) {
      color: highlighttext;
      background-color: highlight;
    }

    :where([data-hts-root]) .hts-data-table-sort-control > :where(.hts-data-table-sort-icon) {
      color: buttontext;
    }

    :where([data-hts-root]) .hts-data-table-region:focus-visible {
      box-shadow: none;
      outline-color: highlight;
    }
  }

  :where([data-hts-root]).hts-dialog-layer {
    z-index: var(--hts-z-index-modal);
    padding-block: var(--hts-space-4);
    padding-inline: var(--hts-space-4);
    inset-block: var(--hts-space-0);
    inset-inline: var(--hts-space-0);
    overscroll-behavior: contain;
    pointer-events: none;
    place-items: center;
    display: grid;
    position: fixed;
    overflow: auto;
  }

  :where([data-hts-root]) .hts-dialog-overlay {
    background-color: var(--hts-color-overlay-background);
    inset-block: var(--hts-space-0);
    inset-inline: var(--hts-space-0);
    pointer-events: auto;
    position: absolute;
  }

  :where([data-hts-root]) .hts-dialog-overlay[data-state="open"] {
    opacity: 1;
    transition: opacity var(--hts-motion-duration-fast)
      var(--hts-motion-easing-standard);
  }

  :where([data-hts-root]) .hts-dialog {
    box-sizing: border-box;
    inline-size: min(var(--hts-layout-narrow-max),
      calc(100vi - var(--hts-space-8)));
    max-block-size: calc(100vb - var(--hts-space-8));
    gap: var(--hts-space-layout-block);
    padding-block: var(--hts-space-layout-block);
    padding-inline: var(--hts-space-layout-inline);
    border: var(--hts-border-hairline) solid var(--hts-color-border);
    border-radius: var(--hts-radius-lg);
    background-color: var(--hts-color-surface-raised);
    box-shadow: var(--hts-shadow-lg);
    color: var(--hts-color-text-primary);
    overflow-wrap: anywhere;
    pointer-events: auto;
    flex-direction: column;
    display: flex;
    overflow: auto;
  }

  :where([data-hts-root]) .hts-dialog[data-state="open"] {
    opacity: 1;
    transition: opacity var(--hts-motion-duration-fast) var(--hts-motion-easing-standard),
      scale var(--hts-motion-duration-fast) var(--hts-motion-easing-standard);
    scale: 1;
  }

  :where([data-hts-root]) dialog.hts-dialog:not([open]) {
    display: none;
  }

  :where([data-hts-root]) dialog.hts-dialog[open] {
    opacity: 1;
    transition: opacity var(--hts-motion-duration-fast) var(--hts-motion-easing-standard),
      scale var(--hts-motion-duration-fast) var(--hts-motion-easing-standard);
    margin: auto;
    scale: 1;
  }

  :where([data-hts-root]) dialog.hts-dialog::backdrop {
    background-color: var(--hts-color-overlay-background);
    opacity: 1;
    transition: opacity var(--hts-motion-duration-fast)
      var(--hts-motion-easing-standard);
  }

  :where([data-hts-root]) .hts-dialog-header {
    gap: var(--hts-space-2) var(--hts-space-4);
    grid-template-columns: minmax(0, 1fr) auto;
    display: grid;
  }

  :where([data-hts-root]) .hts-dialog-title {
    grid-area: 1 / 1;
    min-inline-size: 0;
    margin: 0;
  }

  :where([data-hts-root]) .hts-dialog-description {
    grid-area: 2 / 1;
    min-inline-size: 0;
    margin: 0;
  }

  :where([data-hts-root]) .hts-dialog-close {
    grid-area: 1 / 2 / span 2;
    place-self: start end;
  }

  :where([data-hts-root]) .hts-dialog-body {
    min-inline-size: 0;
  }

  @starting-style {
    :where([data-hts-root]) .hts-dialog-overlay[data-state="open"] {
      opacity: 0;
    }

    :where([data-hts-root]) .hts-dialog[data-state="open"], :where([data-hts-root]) dialog.hts-dialog[open] {
      opacity: 0;
      scale: .98;
    }

    :where([data-hts-root]) dialog.hts-dialog[open]::backdrop {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where([data-hts-root]) .hts-dialog-overlay, :where([data-hts-root]) .hts-dialog, :where([data-hts-root]) dialog.hts-dialog::backdrop {
      transition-duration: var(--hts-motion-duration-reduced);
    }
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-dialog-overlay {
      opacity: .75;
      background-color: canvastext;
    }

    :where([data-hts-root]) dialog.hts-dialog::backdrop {
      background-color: canvastext;
    }

    :where([data-hts-root]) .hts-dialog {
      box-shadow: none;
      color: canvastext;
      forced-color-adjust: auto;
      background-color: canvas;
      border-color: canvastext;
    }
  }

  :where([data-hts-root]) .hts-drawer {
    border-radius: var(--hts-radius-lg);
    opacity: 1;
    overscroll-behavior: contain;
    max-inline-size: 100%;
    margin: 0;
    position: absolute;
    overflow: hidden;
    scale: 1;
  }

  :where([data-hts-root]) :where(.hts-drawer:has(.hts-drawer-content:where([data-placement="inline-start"], [data-placement="inline-end"]))) {
    block-size: 100%;
    inline-size: min(var(--hts-layout-narrow-max),
      calc(100vi - var(--hts-space-8)));
    max-block-size: none;
    inset-block: var(--hts-space-0);
  }

  :where([data-hts-root]) :where(.hts-drawer:has(.hts-drawer-content:where([data-placement="block-start"], [data-placement="block-end"]))) {
    block-size: min(var(--hts-layout-narrow-max),
      calc(100vb - var(--hts-space-8)));
    inline-size: 100%;
    max-block-size: calc(100vb - var(--hts-space-8));
    inset-inline: var(--hts-space-0);
  }

  :where([data-hts-root]) :where(.hts-drawer:has(.hts-drawer-content[data-placement="inline-start"])) {
    border-start-start-radius: var(--hts-space-0);
    border-end-start-radius: var(--hts-space-0);
    inset-inline-start: var(--hts-space-0);
  }

  :where([data-hts-root]) :where(.hts-drawer:has(.hts-drawer-content[data-placement="inline-end"])) {
    border-start-end-radius: var(--hts-space-0);
    border-end-end-radius: var(--hts-space-0);
    inset-inline-end: var(--hts-space-0);
  }

  :where([data-hts-root]) :where(.hts-drawer:has(.hts-drawer-content[data-placement="block-start"])) {
    border-start-start-radius: var(--hts-space-0);
    border-start-end-radius: var(--hts-space-0);
    inset-block-start: var(--hts-space-0);
  }

  :where([data-hts-root]) :where(.hts-drawer:has(.hts-drawer-content[data-placement="block-end"])) {
    border-end-end-radius: var(--hts-space-0);
    border-end-start-radius: var(--hts-space-0);
    inset-block-end: var(--hts-space-0);
  }

  :where([data-hts-root]) .hts-drawer .hts-dialog-header {
    flex: none;
  }

  :where([data-hts-root]) .hts-drawer .hts-dialog-body {
    overscroll-behavior: contain;
    flex: 1;
    min-block-size: 0;
    overflow: auto;
  }

  :where([data-hts-root]) .hts-drawer-content {
    gap: var(--hts-space-layout-block);
    flex-direction: column;
    min-block-size: 100%;
    min-inline-size: 0;
    display: flex;
  }

  :where([data-hts-root]) .hts-drawer[data-state="open"], :where([data-hts-root]) :where(dialog).hts-drawer[open] {
    opacity: 1;
    transition: translate var(--hts-motion-duration-slow)
        var(--hts-motion-easing-emphasized),
      opacity var(--hts-motion-duration-fast) var(--hts-motion-easing-standard);
    translate: 0;
    scale: 1;
  }

  @starting-style {
    :where([data-hts-root]) .hts-drawer[data-state="open"]:where(:has(.hts-drawer-content[data-placement="block-start"])), :where([data-hts-root]) :where(dialog).hts-drawer[open]:where(:has(.hts-drawer-content[data-placement="block-start"])) {
      opacity: 0;
      translate: 0 -100%;
      scale: 1;
    }

    :where([data-hts-root]) .hts-drawer[data-state="open"]:where(:has(.hts-drawer-content[data-placement="block-end"])), :where([data-hts-root]) :where(dialog).hts-drawer[open]:where(:has(.hts-drawer-content[data-placement="block-end"])) {
      opacity: 0;
      translate: 0 100%;
      scale: 1;
    }

    :where([data-hts-root]):where([dir="ltr"]) .hts-drawer[data-state="open"]:where(:has(.hts-drawer-content[data-placement="inline-start"])), :where([data-hts-root]):where([dir="rtl"]) .hts-drawer[data-state="open"]:where(:has(.hts-drawer-content[data-placement="inline-end"])), :where([data-hts-root]):where([dir="ltr"]) :where(dialog).hts-drawer[open]:where(:has(.hts-drawer-content[data-placement="inline-start"])), :where([data-hts-root]):where([dir="rtl"]) :where(dialog).hts-drawer[open]:where(:has(.hts-drawer-content[data-placement="inline-end"])) {
      opacity: 0;
      translate: -100%;
      scale: 1;
    }

    :where([data-hts-root]):where([dir="ltr"]) .hts-drawer[data-state="open"]:where(:has(.hts-drawer-content[data-placement="inline-end"])), :where([data-hts-root]):where([dir="rtl"]) .hts-drawer[data-state="open"]:where(:has(.hts-drawer-content[data-placement="inline-start"])), :where([data-hts-root]):where([dir="ltr"]) :where(dialog).hts-drawer[open]:where(:has(.hts-drawer-content[data-placement="inline-end"])), :where([data-hts-root]):where([dir="rtl"]) :where(dialog).hts-drawer[open]:where(:has(.hts-drawer-content[data-placement="inline-start"])) {
      opacity: 0;
      translate: 100%;
      scale: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where([data-hts-root]) .hts-drawer[data-state="open"], :where([data-hts-root]) :where(dialog).hts-drawer[open] {
      transition-duration: var(--hts-motion-duration-reduced);
    }
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-drawer {
      box-shadow: none;
      color: canvastext;
      forced-color-adjust: auto;
      background-color: canvas;
      border-color: canvastext;
    }
  }

  :where([data-hts-root]) .hts-menu-trigger {
    appearance: none;
    min-block-size: var(--hts-size-control-default);
    min-inline-size: var(--hts-size-control-default);
    max-inline-size: 100%;
    margin: var(--hts-space-0);
    padding-block: var(--hts-space-1);
    padding-inline: var(--hts-space-control-inline);
    overflow-wrap: anywhere;
    border: var(--hts-border-hairline) solid var(--hts-color-border-interactive);
    border-radius: var(--hts-radius-md);
    background-color: var(--hts-color-surface);
    box-shadow: none;
    color: var(--hts-color-text-primary);
    font-family: var(--hts-font-family-body);
    font-size: var(--hts-font-size-label);
    font-weight: var(--hts-font-weight-label);
    letter-spacing: var(--hts-font-tracking-label);
    line-height: var(--hts-font-line-height-label);
    text-align: center;
    white-space: normal;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    transition: border-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      background-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      box-shadow var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  :where([data-hts-root]) .hts-menu-trigger:hover {
    background-color: var(--hts-color-surface-raised);
    box-shadow: var(--hts-shadow-xs);
  }

  :where([data-hts-root]) .hts-menu-trigger:active {
    box-shadow: inset 0 0 0 var(--hts-border-hairline) currentcolor;
  }

  :where([data-hts-root]) .hts-menu-trigger:focus-visible {
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: var(--hts-focus-ring-offset);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white);
  }

  :where([data-hts-root]) .hts-menu-trigger:disabled {
    border-color: var(--hts-color-border);
    background-color: var(--hts-color-surface-raised);
    box-shadow: none;
    color: var(--hts-color-text-muted);
    cursor: not-allowed;
  }

  :where([data-hts-root]).hts-menu-layer {
    z-index: var(--hts-z-index-dropdown);
    isolation: isolate;
  }

  :where([data-hts-root]).hts-menu, :where([data-hts-root]) .hts-menu {
    box-sizing: border-box;
    min-inline-size: 12rem;
    max-inline-size: min(var(--hts-layout-narrow-max),
      calc(100vw - var(--hts-space-4)));
    max-block-size: calc(100vh - var(--hts-space-4));
    padding-block: var(--hts-space-1);
    padding-inline: var(--hts-space-1);
    overflow-block: auto;
    overflow-inline: hidden;
    border: var(--hts-border-hairline) solid var(--hts-color-border);
    border-radius: var(--hts-radius-md);
    background-color: var(--hts-color-surface-raised);
    box-shadow: var(--hts-shadow-md);
    color: var(--hts-color-text-primary);
    opacity: 1;
    pointer-events: auto;
    text-align: start;
    transition: opacity var(--hts-motion-duration-fast)
      var(--hts-motion-easing-standard);
  }

  @starting-style {
    :where([data-hts-root]).hts-menu:where([data-state="open"]), :where([data-hts-root]) .hts-menu:where([data-state="open"]) {
      opacity: 0;
    }
  }

  :where([data-hts-root]) .hts-menu-item {
    align-items: center;
    gap: var(--hts-space-2);
    box-sizing: border-box;
    min-block-size: var(--hts-size-control-default);
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    padding-block: var(--hts-space-1);
    padding-inline: var(--hts-space-3);
    overflow-wrap: anywhere;
    border-radius: var(--hts-radius-sm);
    color: var(--hts-color-text-primary);
    font-family: var(--hts-font-family-body);
    font-size: var(--hts-font-size-body-sm);
    font-weight: var(--hts-font-weight-body);
    letter-spacing: var(--hts-font-tracking-body-sm);
    line-height: var(--hts-font-line-height-body-sm);
    text-align: start;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    outline: none;
    display: flex;
    position: relative;
  }

  :where([data-hts-root]) .hts-menu-item:where([data-highlighted]) {
    background-color: var(--hts-color-action-primary-background);
    color: var(--hts-color-action-primary-foreground);
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: calc(var(--hts-focus-ring-offset) * -1);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white);
  }

  :where([data-hts-root]) .hts-menu-item:where([data-state="checked"]:not([data-highlighted])) {
    background-color: var(--hts-color-surface);
    color: var(--hts-color-text-primary);
  }

  :where([data-hts-root]) .hts-menu-item:where([data-disabled]) {
    color: var(--hts-color-text-muted);
    cursor: not-allowed;
    opacity: .6;
    background-color: #0000;
  }

  :where([data-hts-root]) .hts-menu-item-icon {
    color: currentColor;
    flex: none;
  }

  :where([data-hts-root]) .hts-menu-item-label {
    min-inline-size: var(--hts-space-0);
    overflow-wrap: anywhere;
    max-inline-size: 100%;
  }

  :where([data-hts-root]) .hts-menu-indicator, :where([data-hts-root]) .hts-menu-submenu-icon {
    color: currentColor;
    flex: none;
    justify-content: center;
    align-items: center;
    margin-inline-start: auto;
    display: inline-flex;
  }

  :where([data-hts-root]) .hts-menu-label {
    box-sizing: border-box;
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    padding-block: var(--hts-space-2) var(--hts-space-1);
    padding-inline: var(--hts-space-3);
    overflow-wrap: anywhere;
    color: var(--hts-color-text-muted);
    font-family: var(--hts-font-family-body);
    font-size: var(--hts-font-size-body-sm);
    font-weight: var(--hts-font-weight-label);
    letter-spacing: var(--hts-font-tracking-body-sm);
    line-height: var(--hts-font-line-height-body-sm);
    text-align: start;
  }

  :where([data-hts-root]) .hts-menu-separator {
    inline-size: auto;
    margin-block: var(--hts-space-1);
    margin-inline: var(--hts-space-2);
    border-color: var(--hts-color-border);
  }

  :where([data-hts-root]) .hts-menu-subcontent {
    pointer-events: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    :where([data-hts-root]) .hts-menu-trigger, :where([data-hts-root]).hts-menu, :where([data-hts-root]) .hts-menu {
      transition-duration: var(--hts-motion-duration-reduced);
    }
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-menu-trigger {
      box-shadow: none;
      color: buttontext;
      forced-color-adjust: auto;
      background-color: buttonface;
      border-color: buttontext;
    }

    :where([data-hts-root]) .hts-menu-trigger:disabled {
      color: graytext;
      border-color: graytext;
    }

    :where([data-hts-root]) .hts-menu-trigger:focus-visible {
      box-shadow: none;
      outline-color: highlight;
    }

    :where([data-hts-root]).hts-menu, :where([data-hts-root]) .hts-menu {
      box-shadow: none;
      color: canvastext;
      forced-color-adjust: auto;
      background-color: canvas;
      border-color: canvastext;
    }

    :where([data-hts-root]) .hts-menu-item:where([data-highlighted]) {
      box-shadow: none;
      color: highlighttext;
      background-color: highlight;
      outline-color: highlight;
    }

    :where([data-hts-root]) .hts-menu-item:where([data-disabled]) {
      color: graytext;
      opacity: 1;
    }

    :where([data-hts-root]) .hts-menu-separator {
      border-color: canvastext;
    }
  }

  :where([data-hts-root]) .hts-empty-state {
    justify-items: center;
    gap: var(--hts-space-3);
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: var(--hts-space-0);
    max-inline-size: var(--hts-layout-narrow-max);
    margin: var(--hts-space-0) auto;
    padding: var(--hts-space-8) var(--hts-space-6);
    color: var(--hts-color-text-primary);
    text-align: center;
    overflow-wrap: anywhere;
    display: grid;
    container-type: inline-size;
  }

  :where([data-hts-root]) .hts-empty-state > .hts-empty-state-icon {
    box-sizing: border-box;
    inline-size: calc(var(--hts-size-icon-xl) + var(--hts-space-6));
    block-size: calc(var(--hts-size-icon-xl) + var(--hts-space-6));
    border: var(--hts-border-hairline) solid var(--hts-color-border);
    border-radius: var(--hts-radius-pill);
    background-color: var(--hts-color-surface-raised);
    color: var(--hts-color-text-secondary);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  :where([data-hts-root]) .hts-empty-state > .hts-empty-state-icon:where([data-tone="no-result"]) {
    border-color: var(--hts-color-status-info-foreground);
    background-color: var(--hts-color-status-info-background);
    color: var(--hts-color-status-info-foreground);
  }

  :where([data-hts-root]) .hts-empty-state > .hts-empty-state-icon:where([data-tone="error"]) {
    border-color: var(--hts-color-status-danger-foreground);
    background-color: var(--hts-color-status-danger-background);
    color: var(--hts-color-status-danger-foreground);
  }

  :where([data-hts-root]) .hts-empty-state > .hts-empty-state-title {
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    margin: var(--hts-space-0);
    color: var(--hts-color-text-primary);
    text-align: center;
    overflow-wrap: anywhere;
  }

  :where([data-hts-root]) .hts-empty-state > .hts-empty-state-message {
    min-inline-size: var(--hts-space-0);
    max-inline-size: 60ch;
    margin: var(--hts-space-0);
    color: var(--hts-color-text-secondary);
    text-align: center;
    overflow-wrap: anywhere;
  }

  :where([data-hts-root]) .hts-empty-state > .hts-empty-state-actions {
    justify-content: center;
    align-items: center;
    gap: var(--hts-space-2);
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    flex-wrap: wrap;
    padding-block-start: var(--hts-space-1);
    display: flex;
  }

  :where([data-hts-root]) .hts-empty-state > .hts-empty-state-actions > .hts-empty-state-action {
    max-inline-size: 100%;
  }

  @container (inline-size < 30rem) {
    :where([data-hts-root]) .hts-empty-state {
      padding: var(--hts-space-6) var(--hts-space-4);
    }

    :where([data-hts-root]) .hts-empty-state > .hts-empty-state-actions {
      flex-direction: column;
      align-items: stretch;
      inline-size: 100%;
    }

    :where([data-hts-root]) .hts-empty-state > .hts-empty-state-actions > .hts-empty-state-action {
      justify-content: center;
      inline-size: 100%;
    }
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-empty-state {
      color: canvastext;
      forced-color-adjust: auto;
    }

    :where([data-hts-root]) .hts-empty-state > .hts-empty-state-icon {
      color: canvastext;
      background-color: canvas;
      border-color: canvastext;
    }

    :where([data-hts-root]) .hts-empty-state > .hts-empty-state-title, :where([data-hts-root]) .hts-empty-state > .hts-empty-state-message {
      color: canvastext;
    }
  }

  :where([data-hts-root]) .hts-field {
    align-items: start;
    gap: var(--hts-space-2);
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    margin: var(--hts-space-0);
    color: var(--hts-color-text-primary);
    overflow-wrap: anywhere;
    display: grid;
    container-type: inline-size;
  }

  :where([data-hts-root]) .hts-field > :where(.hts-field-label) {
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    margin: var(--hts-space-0);
    color: var(--hts-color-text-primary);
    cursor: pointer;
    overflow-wrap: anywhere;
  }

  :where([data-hts-root]) .hts-field:where([data-required="true"]) > :where(.hts-field-label):after, :where([data-hts-root]) .hts-field:where([data-control="radio-group"][data-required="true"]) > :where(.hts-field-control) > legend:after {
    color: var(--hts-color-status-danger-foreground);
    content: " *";
  }

  :where([data-hts-root]) .hts-field > :where(.hts-field-control) {
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
  }

  :where([data-hts-root]) .hts-field > :where(.hts-field-help), :where([data-hts-root]) .hts-field > :where(.hts-field-error) {
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    margin: var(--hts-space-0);
    overflow-wrap: anywhere;
  }

  :where([data-hts-root]) .hts-field > :where(.hts-field-help) {
    color: var(--hts-color-text-secondary);
  }

  :where([data-hts-root]) .hts-field > :where(.hts-field-error) {
    color: var(--hts-color-status-danger-foreground);
  }

  :where([data-hts-root]) .hts-field:where([data-control="checkbox"], [data-control="switch"]) {
    grid-template-columns: max-content minmax(var(--hts-space-0), 1fr);
    column-gap: var(--hts-space-2);
  }

  :where([data-hts-root]) .hts-field:where([data-control="checkbox"], [data-control="switch"]) > :where(.hts-field-control) {
    grid-area: 1 / 1;
    align-self: center;
  }

  :where([data-hts-root]) .hts-field:where([data-control="checkbox"], [data-control="switch"]) > :where(.hts-field-label) {
    grid-area: 1 / 2;
    align-self: center;
  }

  :where([data-hts-root]) .hts-field:where([data-control="checkbox"], [data-control="switch"]) > :where(.hts-field-help), :where([data-hts-root]) .hts-field:where([data-control="checkbox"], [data-control="switch"]) > :where(.hts-field-error) {
    grid-column: 2;
  }

  @container (inline-size < 30rem) {
    :where([data-hts-root]) .hts-field:where([data-control="checkbox"], [data-control="switch"]) > :where(.hts-field-help), :where([data-hts-root]) .hts-field:where([data-control="checkbox"], [data-control="switch"]) > :where(.hts-field-error) {
      grid-column: 1 / -1;
    }
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-field {
      color: canvastext;
      forced-color-adjust: auto;
    }

    :where([data-hts-root]) .hts-field > .hts-text.hts-field-label, :where([data-hts-root]) .hts-field > .hts-text.hts-field-help {
      color: canvastext;
    }

    :where([data-hts-root]) .hts-field > .hts-text.hts-field-error, :where([data-hts-root]) .hts-field:where([data-required="true"]) > :where(.hts-field-label):after, :where([data-hts-root]) .hts-field:where([data-control="radio-group"][data-required="true"]) > :where(.hts-field-control) > legend:after {
      color: highlight;
    }
  }

  :where([data-hts-root]) .hts-icon-button {
    appearance: none;
    inline-size: var(--hts-size-control-default);
    block-size: var(--hts-size-control-default);
    min-inline-size: var(--hts-size-control-default);
    min-block-size: var(--hts-size-control-default);
    margin: var(--hts-space-0);
    padding-block: var(--hts-space-0);
    padding-inline: var(--hts-space-0);
    border: var(--hts-border-hairline) solid
      var(--hts-color-action-primary-background);
    border-radius: var(--hts-radius-md);
    background-color: var(--hts-color-action-primary-background);
    box-shadow: none;
    color: var(--hts-color-action-primary-foreground);
    vertical-align: middle;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    transition: background-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      border-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      color var(--hts-motion-duration-fast) var(--hts-motion-easing-standard),
      box-shadow var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard);
    place-items: center;
    display: inline-grid;
    overflow: hidden;
  }

  :where([data-hts-root]) .hts-icon-button > :where(.hts-icon) {
    pointer-events: none;
    grid-area: 1 / 1;
  }

  :where([data-hts-root]) .hts-icon-button:where([data-size="sm"]) {
    inline-size: var(--hts-size-control-sm);
    block-size: var(--hts-size-control-sm);
    min-inline-size: var(--hts-size-control-sm);
    min-block-size: var(--hts-size-control-sm);
  }

  :where([data-hts-root]) .hts-icon-button:where([data-size="md"]) {
    inline-size: var(--hts-size-control-default);
    block-size: var(--hts-size-control-default);
    min-inline-size: var(--hts-size-control-default);
    min-block-size: var(--hts-size-control-default);
  }

  :where([data-hts-root]) .hts-icon-button:where([data-size="lg"]) {
    inline-size: var(--hts-size-control-lg);
    block-size: var(--hts-size-control-lg);
    min-inline-size: var(--hts-size-control-lg);
    min-block-size: var(--hts-size-control-lg);
  }

  :where([data-hts-root]) .hts-icon-button:where([data-variant="primary"]) {
    border-color: var(--hts-color-action-primary-background);
    background-color: var(--hts-color-action-primary-background);
    color: var(--hts-color-action-primary-foreground);
  }

  :where([data-hts-root]) .hts-icon-button:where([data-variant="secondary"]) {
    border-color: var(--hts-color-border-interactive);
    background-color: var(--hts-color-surface);
    color: var(--hts-color-text-primary);
  }

  :where([data-hts-root]) .hts-icon-button:where([data-variant="quiet"]) {
    color: var(--hts-color-text-primary);
    background-color: #0000;
    border-color: #0000;
  }

  :where([data-hts-root]) .hts-icon-button:where([data-variant="danger"]) {
    border-color: var(--hts-color-action-danger-background);
    background-color: var(--hts-color-action-danger-background);
    color: var(--hts-color-action-danger-foreground);
  }

  :where([data-hts-root]) .hts-icon-button:where([data-state="loading"][aria-disabled="true"]) {
    box-shadow: none;
    cursor: progress;
  }

  :where([data-hts-root]) .hts-icon-button:where([data-state="loading"][aria-disabled="true"]) > :where(.hts-icon) {
    visibility: hidden;
  }

  :where([data-hts-root]) .hts-icon-button:where([data-variant="primary"][data-state="loading"][aria-disabled="true"]) {
    border-color: var(--hts-color-action-primary-background);
    background-color: var(--hts-color-action-primary-background);
    color: var(--hts-color-action-primary-foreground);
  }

  :where([data-hts-root]) .hts-icon-button:where([data-variant="secondary"][data-state="loading"][aria-disabled="true"]) {
    border-color: var(--hts-color-border-interactive);
    background-color: var(--hts-color-surface);
    color: var(--hts-color-text-primary);
  }

  :where([data-hts-root]) .hts-icon-button:where([data-variant="quiet"][data-state="loading"][aria-disabled="true"]) {
    color: var(--hts-color-text-primary);
    background-color: #0000;
    border-color: #0000;
  }

  :where([data-hts-root]) .hts-icon-button:where([data-variant="danger"][data-state="loading"][aria-disabled="true"]) {
    border-color: var(--hts-color-action-danger-background);
    background-color: var(--hts-color-action-danger-background);
    color: var(--hts-color-action-danger-foreground);
  }

  :where([data-hts-root]) .hts-icon-button:where([data-state="loading"][aria-disabled="true"]):after {
    inline-size: var(--hts-size-icon-sm);
    block-size: var(--hts-size-icon-sm);
    border: var(--hts-border-strong) dotted currentcolor;
    border-radius: var(--hts-radius-pill);
    content: "";
    grid-area: 1 / 1;
  }

  :where([data-hts-root]) .hts-icon-button:disabled {
    border-color: var(--hts-color-border);
    background-color: var(--hts-color-surface-raised);
    box-shadow: none;
    color: var(--hts-color-text-muted);
    cursor: not-allowed;
  }

  :where([data-hts-root]) .hts-icon-button:where(:not(:disabled, [data-state="loading"])):hover {
    box-shadow: var(--hts-shadow-xs);
  }

  :where([data-hts-root]) .hts-icon-button:where([data-variant="primary"]:not(:disabled, [data-state="loading"])):hover {
    border-color: var(--hts-color-action-primary-background-hover);
    background-color: var(--hts-color-action-primary-background-hover);
  }

  :where([data-hts-root]) .hts-icon-button:where([data-variant="secondary"]:not(:disabled, [data-state="loading"])):hover, :where([data-hts-root]) .hts-icon-button:where([data-variant="quiet"]:not(:disabled, [data-state="loading"])):hover {
    background-color: var(--hts-color-surface-raised);
  }

  :where([data-hts-root]) .hts-icon-button:where([data-variant="danger"]:not(:disabled, [data-state="loading"])):hover {
    border-color: var(--hts-color-action-danger-background);
    background-color: var(--hts-color-action-danger-background);
    box-shadow: var(--hts-shadow-sm);
  }

  :where([data-hts-root]) .hts-icon-button:where(:not(:disabled, [data-state="loading"])):active {
    box-shadow: inset 0 0 0 var(--hts-border-hairline) currentcolor;
  }

  :where([data-hts-root]) .hts-icon-button:where([data-variant="primary"]:not(:disabled, [data-state="loading"])):active {
    border-color: var(--hts-color-action-primary-background-hover);
    background-color: var(--hts-color-action-primary-background-hover);
  }

  :where([data-hts-root]) .hts-icon-button:where([data-variant="secondary"]:not(:disabled, [data-state="loading"])):active, :where([data-hts-root]) .hts-icon-button:where([data-variant="quiet"]:not(:disabled, [data-state="loading"])):active {
    background-color: var(--hts-color-canvas);
  }

  :where([data-hts-root]) .hts-icon-button:where([data-variant="danger"]:not(:disabled, [data-state="loading"])):active {
    border-color: var(--hts-color-action-danger-background);
    background-color: var(--hts-color-action-danger-background);
  }

  :where([data-hts-root]) .hts-icon-button:focus-visible {
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: var(--hts-focus-ring-offset);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white);
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-icon-button {
      color: buttontext;
      forced-color-adjust: auto;
      background-color: buttonface;
      border-color: buttontext;
    }

    :where([data-hts-root]) .hts-icon-button:where([data-state="loading"][aria-disabled="true"]), :where([data-hts-root]) .hts-icon-button:disabled {
      color: graytext;
      background-color: buttonface;
      border-color: graytext;
    }

    :where([data-hts-root]) .hts-icon-button:disabled > :where(.hts-icon) {
      color: inherit;
    }

    :where([data-hts-root]) .hts-icon-button:focus-visible {
      box-shadow: none;
      outline-color: highlight;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where([data-hts-root]) .hts-icon-button {
      transition-duration: var(--hts-motion-duration-reduced);
    }
  }

  :where([data-hts-root]) .hts-icon {
    inline-size: var(--hts-size-icon-md);
    block-size: var(--hts-size-icon-md);
    max-inline-size: 100%;
    color: inherit;
    vertical-align: middle;
    flex: none;
    display: inline-block;
  }

  :where([data-hts-root]) .hts-icon:where([data-size="sm"]) {
    inline-size: var(--hts-size-icon-sm);
    block-size: var(--hts-size-icon-sm);
  }

  :where([data-hts-root]) .hts-icon:where([data-size="md"]) {
    inline-size: var(--hts-size-icon-md);
    block-size: var(--hts-size-icon-md);
  }

  :where([data-hts-root]) .hts-icon:where([data-size="lg"]) {
    inline-size: var(--hts-size-icon-lg);
    block-size: var(--hts-size-icon-lg);
  }

  :where([data-hts-root]) .hts-icon:where([data-size="xl"]) {
    inline-size: var(--hts-size-icon-xl);
    block-size: var(--hts-size-icon-xl);
  }

  :where([data-hts-root]) .hts-icon:where([data-hts-directional="true"]):where(:dir(rtl), [dir="rtl"]) {
    transform-origin: center;
    transform: scaleX(-1);
  }

  :where([data-hts-root]) .hts-icon:where([data-hts-directional="true"]):where([dir="ltr"]) {
    transform: none;
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-icon {
      color: canvastext;
      forced-color-adjust: auto;
    }
  }

  :where([data-hts-root]) .hts-input {
    inline-size: 100%;
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    min-block-size: var(--hts-size-control-default);
    margin: var(--hts-space-0);
    padding-block: var(--hts-space-2);
    padding-inline: var(--hts-space-control-inline);
    border: var(--hts-border-hairline) solid var(--hts-color-border-interactive);
    border-radius: var(--hts-radius-md);
    background-color: var(--hts-color-surface);
    box-shadow: none;
    color: var(--hts-color-text-primary);
    caret-color: var(--hts-color-text-primary);
    font-family: var(--hts-font-family-body);
    font-size: var(--hts-font-size-body);
    font-weight: var(--hts-font-weight-body);
    letter-spacing: var(--hts-font-tracking-body);
    line-height: var(--hts-font-line-height-body);
    text-align: start;
    text-overflow: ellipsis;
    touch-action: manipulation;
    transition: background-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      border-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      box-shadow var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      color var(--hts-motion-duration-fast) var(--hts-motion-easing-standard);
    display: block;
  }

  :where([data-hts-root]) .hts-input:where([type="email"], [type="tel"]):where(:not([dir])) {
    direction: ltr;
  }

  :where([data-hts-root]) .hts-input:where([data-size="sm"]) {
    min-block-size: var(--hts-size-control-sm);
    padding-block: var(--hts-space-1);
    padding-inline: var(--hts-space-3);
  }

  :where([data-hts-root]) .hts-input:where([data-size="md"]) {
    min-block-size: var(--hts-size-control-default);
    padding-block: var(--hts-space-2);
    padding-inline: var(--hts-space-control-inline);
  }

  :where([data-hts-root]) .hts-input:where([data-size="lg"]) {
    min-block-size: var(--hts-size-control-lg);
    padding-block: var(--hts-space-3);
    padding-inline: var(--hts-space-5);
  }

  :where([data-hts-root]) .hts-input::placeholder {
    color: var(--hts-color-text-muted);
    opacity: 1;
  }

  :where([data-hts-root]) .hts-input:read-only {
    border-color: var(--hts-color-border-interactive);
    background-color: var(--hts-color-surface-raised);
    box-shadow: none;
    color: var(--hts-color-text-secondary);
    cursor: default;
  }

  :where([data-hts-root]) .hts-input[aria-invalid="true"] {
    border-color: var(--hts-color-status-danger-foreground);
  }

  :where([data-hts-root]) .hts-input:where(:not(:disabled, :read-only, [aria-invalid="true"])):hover {
    border-color: var(--hts-color-focus-ring);
    box-shadow: var(--hts-shadow-xs);
  }

  :where([data-hts-root]) .hts-input:where(:not(:disabled, :read-only, [aria-invalid="true"])):active {
    border-color: var(--hts-color-focus-ring);
  }

  :where([data-hts-root]) .hts-input:focus-visible {
    border-color: var(--hts-color-focus-ring);
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: var(--hts-focus-ring-offset);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white);
  }

  :where([data-hts-root]) .hts-input:where([aria-invalid="true"]):focus-visible {
    border-color: var(--hts-color-status-danger-foreground);
  }

  :where([data-hts-root]) .hts-input:disabled {
    border-color: var(--hts-color-border);
    background-color: var(--hts-color-surface-raised);
    box-shadow: none;
    color: var(--hts-color-text-muted);
    cursor: not-allowed;
  }

  :where([data-hts-root]) .hts-input:disabled::placeholder {
    color: var(--hts-color-text-muted);
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-input {
      color: fieldtext;
      caret-color: fieldtext;
      forced-color-adjust: auto;
      background-color: field;
      border-color: canvastext;
    }

    :where([data-hts-root]) .hts-input::placeholder {
      color: graytext;
    }

    :where([data-hts-root]) .hts-input:read-only {
      color: canvastext;
      background-color: canvas;
      border-color: canvastext;
    }

    :where([data-hts-root]) .hts-input[aria-invalid="true"] {
      border-color: highlight;
    }

    :where([data-hts-root]) .hts-input:focus-visible {
      box-shadow: none;
      border-color: highlight;
      outline-color: highlight;
    }

    :where([data-hts-root]) .hts-input:disabled {
      color: graytext;
      background-color: canvas;
      border-color: graytext;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where([data-hts-root]) .hts-input {
      transition-duration: var(--hts-motion-duration-reduced);
    }
  }

  :where([data-hts-root]) .hts-link {
    color: var(--hts-color-text-primary);
    cursor: pointer;
    overflow-wrap: anywhere;
    text-decoration-skip-ink: auto;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: var(--hts-border-hairline);
    text-underline-offset: var(--hts-space-1);
    touch-action: manipulation;
  }

  :where([data-hts-root]) .hts-link:where([data-variant="default"]) {
    color: var(--hts-color-text-primary);
  }

  :where([data-hts-root]) .hts-link:where([data-variant="subtle"]) {
    color: var(--hts-color-text-secondary);
  }

  :where([data-hts-root]) .hts-link:where([data-variant="inverse"]) {
    color: var(--hts-color-text-inverse);
  }

  :where([data-hts-root]) .hts-link:where([data-variant="default"]):visited {
    color: var(--hts-color-text-secondary);
  }

  :where([data-hts-root]) .hts-link:where([data-variant="subtle"]):visited {
    color: var(--hts-color-text-muted);
  }

  :where([data-hts-root]) .hts-link:where([data-variant="inverse"]):visited {
    color: var(--hts-color-text-inverse);
  }

  :where([data-hts-root]) .hts-link:hover {
    text-decoration-thickness: var(--hts-border-strong);
  }

  :where([data-hts-root]) .hts-link:active {
    text-decoration-thickness: var(--hts-border-strong);
    text-underline-offset: var(--hts-space-0);
  }

  :where([data-hts-root]) .hts-link:focus-visible {
    border-radius: var(--hts-radius-sm);
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: var(--hts-focus-ring-offset);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white);
  }

  :where([data-hts-root]) .hts-link:where([data-external="true"]) > [data-hts-icon="external-link"] {
    block-size: var(--hts-size-icon-sm);
    inline-size: var(--hts-size-icon-sm);
    pointer-events: none;
    vertical-align: text-bottom;
    margin-inline-start: var(--hts-space-1);
    display: inline-block;
  }

  :where([data-hts-root]) .hts-link:where([data-external="true"]) > :where([data-hts-icon="external-link"][data-hts-directional="true"]:dir(rtl)) {
    transform-origin: center;
    transform: scaleX(-1);
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-link {
      color: linktext;
      forced-color-adjust: auto;
    }

    :where([data-hts-root]) .hts-link:visited {
      color: visitedtext;
    }

    :where([data-hts-root]) .hts-link:focus-visible {
      box-shadow: none;
      outline-color: highlight;
    }
  }

  :where([data-hts-root]) .hts-page-header {
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    margin-block: var(--hts-space-0);
    margin-inline: var(--hts-space-0);
    padding-block: var(--hts-space-0) var(--hts-space-5);
    padding-inline: var(--hts-space-0);
    border-block-end: var(--hts-border-hairline) solid var(--hts-color-border);
    color: var(--hts-color-text-primary);
    overflow-wrap: anywhere;
    overflow: hidden;
    container-type: inline-size;
  }

  :where([data-hts-root]) .hts-page-header-layout {
    grid-template-columns: minmax(var(--hts-space-0), 1fr) max-content;
    align-items: start;
    gap: var(--hts-space-6);
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    display: grid;
  }

  :where([data-hts-root]) .hts-page-header-content {
    gap: var(--hts-space-2);
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    display: grid;
  }

  :where([data-hts-root]) .hts-page-header-eyebrow, :where([data-hts-root]) .hts-page-header-title, :where([data-hts-root]) .hts-page-header-subtitle {
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    margin-block: var(--hts-space-0);
    margin-inline: var(--hts-space-0);
    overflow-wrap: anywhere;
  }

  :where([data-hts-root]) .hts-page-header-meta {
    align-items: center;
    gap: var(--hts-space-2);
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    margin-block: var(--hts-space-1) var(--hts-space-0);
    margin-inline: var(--hts-space-0);
    padding-block: var(--hts-space-0);
    padding-inline: var(--hts-space-0);
    flex-wrap: wrap;
    list-style: none;
    display: flex;
  }

  :where([data-hts-root]) .hts-page-header-meta-item {
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    display: inline-flex;
  }

  :where([data-hts-root]) .hts-page-header-actions {
    justify-content: flex-end;
    align-items: center;
    gap: var(--hts-space-2);
    min-inline-size: var(--hts-space-0);
    flex-wrap: wrap;
    max-inline-size: 100%;
    display: flex;
  }

  @container (inline-size < 42rem) {
    :where([data-hts-root]) .hts-page-header-layout {
      grid-template-columns: minmax(var(--hts-space-0), 1fr);
      gap: var(--hts-space-4);
    }

    :where([data-hts-root]) .hts-page-header-actions {
      justify-content: flex-start;
    }
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-page-header {
      color: canvastext;
      forced-color-adjust: auto;
      border-block-end-color: canvastext;
    }

    :where([data-hts-root]) .hts-page-header-eyebrow, :where([data-hts-root]) .hts-page-header-title, :where([data-hts-root]) .hts-page-header-subtitle {
      color: canvastext;
    }
  }

  :where([data-hts-root]) .hts-pagination {
    box-sizing: border-box;
    max-inline-size: 100%;
    color: var(--hts-color-text-primary);
    container-type: inline-size;
  }

  :where([data-hts-root]) .hts-pagination-list {
    justify-content: center;
    align-items: center;
    gap: var(--hts-space-2);
    box-sizing: border-box;
    max-inline-size: 100%;
    margin-block: var(--hts-space-0);
    margin-inline: var(--hts-space-0);
    padding-block: var(--hts-space-0);
    padding-inline: var(--hts-space-0);
    flex-wrap: wrap;
    list-style: none;
    display: flex;
  }

  :where([data-hts-root]) .hts-pagination-item {
    min-inline-size: var(--hts-space-0);
    flex: none;
    max-inline-size: 100%;
    display: flex;
  }

  :where([data-hts-root]) .hts-pagination-edge-link, :where([data-hts-root]) .hts-pagination-page {
    box-sizing: border-box;
    min-block-size: var(--hts-size-control-default);
    min-inline-size: var(--hts-size-control-default);
    max-inline-size: 100%;
    margin-block: var(--hts-space-0);
    margin-inline: var(--hts-space-0);
    padding-block: var(--hts-space-1);
    padding-inline: var(--hts-space-2);
    overflow-wrap: anywhere;
    border: var(--hts-border-hairline) solid var(--hts-color-border-interactive);
    border-radius: var(--hts-radius-md);
    background-color: var(--hts-color-surface);
    box-shadow: none;
    color: var(--hts-color-text-primary);
    text-align: center;
    touch-action: manipulation;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: inline-flex;
  }

  :where([data-hts-root]) .hts-pagination-edge-link:hover, :where([data-hts-root]) .hts-pagination-page:hover {
    background-color: var(--hts-color-surface-raised);
    box-shadow: var(--hts-shadow-xs);
    color: var(--hts-color-text-primary);
    text-decoration: none;
  }

  :where([data-hts-root]) .hts-pagination-edge-link:active, :where([data-hts-root]) .hts-pagination-page:active {
    box-shadow: inset 0 0 0 var(--hts-border-hairline) currentcolor;
  }

  :where([data-hts-root]) .hts-pagination-edge-link:focus-visible, :where([data-hts-root]) .hts-pagination-page:focus-visible {
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: var(--hts-focus-ring-offset);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white);
  }

  :where([data-hts-root]) .hts-pagination-page-button {
    appearance: none;
    font: inherit;
    cursor: pointer;
  }

  :where([data-hts-root]) .hts-pagination-page[aria-current="page"] {
    border-color: var(--hts-color-action-primary-background);
    background-color: var(--hts-color-action-primary-background);
    box-shadow: none;
    color: var(--hts-color-action-primary-foreground);
    font-weight: var(--hts-font-weight-label);
  }

  :where([data-hts-root]) .hts-pagination-page-button:disabled {
    border-color: var(--hts-color-border);
    background-color: var(--hts-color-surface-raised);
    box-shadow: none;
    color: var(--hts-color-text-muted);
    cursor: not-allowed;
  }

  :where([data-hts-root]) .hts-pagination-edge .hts-icon {
    flex: none;
  }

  @container (inline-size < 24rem) {
    :where([data-hts-root]) .hts-pagination-list {
      gap: var(--hts-space-1);
    }
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-pagination-edge-link, :where([data-hts-root]) .hts-pagination-page {
      box-shadow: none;
      color: buttontext;
      forced-color-adjust: auto;
      background-color: buttonface;
      border-color: buttontext;
    }

    :where([data-hts-root]) .hts-pagination-page[aria-current="page"] {
      color: highlighttext;
      background-color: highlight;
      border-color: highlight;
    }

    :where([data-hts-root]) .hts-pagination-page-button:disabled {
      color: graytext;
      border-color: graytext;
    }

    :where([data-hts-root]) .hts-pagination-edge-link:focus-visible, :where([data-hts-root]) .hts-pagination-page:focus-visible {
      box-shadow: none;
      outline-color: highlight;
    }
  }

  :where([data-hts-root]) .hts-panel {
    align-content: start;
    gap: var(--hts-space-3);
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    margin: var(--hts-space-0);
    padding-block: var(--hts-space-4);
    padding-inline: var(--hts-space-4);
    border: var(--hts-border-hairline) solid var(--hts-color-border);
    border-radius: var(--hts-radius-lg);
    background-color: var(--hts-color-surface-raised);
    box-shadow: var(--hts-shadow-sm);
    color: var(--hts-color-text-primary);
    overflow-wrap: anywhere;
    display: grid;
    container-type: inline-size;
  }

  :where([data-hts-root]) .hts-panel:where([data-density="compact"]) {
    gap: var(--hts-space-2);
    padding-block: var(--hts-space-3);
    padding-inline: var(--hts-space-3);
  }

  :where([data-hts-root]) .hts-panel:where([data-density="comfortable"]) {
    gap: var(--hts-space-4);
    padding-block: var(--hts-space-6);
    padding-inline: var(--hts-space-6);
  }

  :where([data-hts-root]) .hts-panel > :where(.hts-panel-header) {
    gap: var(--hts-space-1);
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    display: grid;
  }

  :where([data-hts-root]) .hts-panel:where([data-density="comfortable"]) > :where(.hts-panel-header) {
    gap: var(--hts-space-2);
  }

  :where([data-hts-root]) .hts-panel > :where(.hts-panel-header) > :where(.hts-panel-title), :where([data-hts-root]) .hts-panel > :where(.hts-panel-header) > :where(.hts-panel-description) {
    min-inline-size: var(--hts-space-0);
    overflow-wrap: anywhere;
    max-inline-size: 100%;
  }

  :where([data-hts-root]) .hts-panel > :where(.hts-panel-separator) {
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
  }

  :where([data-hts-root]) .hts-panel > :where(.hts-panel-content), :where([data-hts-root]) .hts-panel > :where(.hts-panel-footer) {
    gap: var(--hts-space-2);
    min-inline-size: var(--hts-space-0);
    overflow-wrap: anywhere;
    max-inline-size: 100%;
    display: grid;
  }

  :where([data-hts-root]) .hts-panel:where([data-density="compact"]) > :where(.hts-panel-content), :where([data-hts-root]) .hts-panel:where([data-density="compact"]) > :where(.hts-panel-footer) {
    gap: var(--hts-space-1);
  }

  :where([data-hts-root]) .hts-panel:where([data-density="comfortable"]) > :where(.hts-panel-content), :where([data-hts-root]) .hts-panel:where([data-density="comfortable"]) > :where(.hts-panel-footer) {
    gap: var(--hts-space-3);
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-panel {
      box-shadow: none;
      color: canvastext;
      forced-color-adjust: auto;
      background-color: canvas;
      border-color: canvastext;
    }

    :where([data-hts-root]) .hts-panel > :where(.hts-panel-header) > :where(.hts-panel-title), :where([data-hts-root]) .hts-panel > :where(.hts-panel-header) > :where(.hts-panel-description) {
      color: canvastext;
    }
  }

  :where([data-hts-root]).hts-popover-layer {
    z-index: var(--hts-z-index-dropdown);
    inset-block: var(--hts-space-0);
    inset-inline: var(--hts-space-0);
    pointer-events: none;
    position: fixed;
  }

  :where([data-hts-root]) .hts-popover {
    gap: var(--hts-space-3);
    box-sizing: border-box;
    max-block-size: calc(100vh - var(--hts-space-4));
    inline-size: min(20rem,
      calc(100vi - var(--hts-space-4)),
      var(--radix-popover-content-available-width));
    max-inline-size: 100%;
    padding-block: var(--hts-space-layout-block);
    padding-inline: var(--hts-space-layout-inline);
    border: var(--hts-border-hairline) solid var(--hts-color-border);
    border-radius: var(--hts-radius-lg);
    background-color: var(--hts-color-surface-raised);
    box-shadow: var(--hts-shadow-md);
    color: var(--hts-color-text-primary);
    pointer-events: auto;
    overflow-wrap: anywhere;
    display: grid;
    overflow: auto;
    container-type: inline-size;
  }

  :where([data-hts-root]) .hts-popover:where([data-state="open"]) {
    opacity: 1;
    transition: opacity var(--hts-motion-duration-fast)
      var(--hts-motion-easing-standard);
  }

  @starting-style {
    :where([data-hts-root]) .hts-popover:where([data-state="open"]) {
      opacity: 0;
    }
  }

  :where([data-hts-root]) .hts-popover-header {
    grid-template-columns: minmax(var(--hts-space-0), 1fr) max-content;
    align-items: start;
    gap: var(--hts-space-3);
    min-inline-size: var(--hts-space-0);
    display: grid;
  }

  :where([data-hts-root]) .hts-popover-title, :where([data-hts-root]) .hts-popover-body {
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    color: inherit;
    overflow-wrap: anywhere;
  }

  :where([data-hts-root]) .hts-popover-close {
    align-self: start;
  }

  :where([data-hts-root]) .hts-popover-action {
    justify-content: flex-end;
    gap: var(--hts-space-2);
    min-inline-size: var(--hts-space-0);
    flex-wrap: wrap;
    display: flex;
  }

  :where([data-hts-root]) .hts-popover-arrow {
    fill: var(--hts-color-surface-raised);
    stroke: var(--hts-color-border);
    stroke-width: var(--hts-border-hairline);
  }

  @container (inline-size < 20rem) {
    :where([data-hts-root]) .hts-popover-header {
      grid-template-columns: minmax(var(--hts-space-0), 1fr);
    }

    :where([data-hts-root]) .hts-popover-close {
      justify-self: start;
    }

    :where([data-hts-root]) .hts-popover-action {
      justify-content: flex-start;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where([data-hts-root]) .hts-popover {
      transition-duration: var(--hts-motion-duration-reduced);
    }
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-popover {
      box-shadow: none;
      color: canvastext;
      forced-color-adjust: auto;
      background-color: canvas;
      border-color: canvastext;
    }

    :where([data-hts-root]) .hts-popover-title, :where([data-hts-root]) .hts-popover-body {
      color: canvastext;
    }

    :where([data-hts-root]) .hts-popover-arrow {
      fill: canvas;
      stroke: canvastext;
    }
  }

  :where([data-hts-root]) .hts-progress {
    appearance: none;
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    block-size: var(--hts-space-3);
    border: var(--hts-border-hairline) solid var(--hts-color-border);
    border-radius: var(--hts-radius-pill);
    background-color: var(--hts-color-surface-raised);
    color: var(--hts-color-action-primary-background);
    accent-color: currentColor;
    vertical-align: middle;
    display: block;
    overflow: hidden;
  }

  :where([data-hts-root]) .hts-progress::-webkit-progress-bar {
    border-radius: var(--hts-radius-pill);
    background-color: var(--hts-color-surface-raised);
  }

  :where([data-hts-root]) .hts-progress::-webkit-progress-value {
    border-radius: var(--hts-radius-pill);
    transition: inline-size var(--hts-motion-duration-fast)
      var(--hts-motion-easing-standard);
    background-color: currentColor;
  }

  :where([data-hts-root]) .hts-progress::-moz-progress-bar {
    border-radius: var(--hts-radius-pill);
    transition: inline-size var(--hts-motion-duration-fast)
      var(--hts-motion-easing-standard);
    background-color: currentColor;
  }

  :where([data-hts-root]) .hts-progress:where([data-tone="default"]) {
    color: var(--hts-color-action-primary-background);
  }

  :where([data-hts-root]) .hts-progress:where([data-tone="success"]) {
    color: var(--hts-color-status-success-foreground);
  }

  :where([data-hts-root]) .hts-progress:where([data-tone="danger"]) {
    color: var(--hts-color-status-danger-foreground);
  }

  :where([data-hts-root]) .hts-progress:indeterminate {
    appearance: auto;
    background-color: var(--hts-color-surface-raised);
    border-color: currentColor;
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-progress {
      appearance: auto;
      color: canvastext;
      accent-color: highlight;
      forced-color-adjust: auto;
      background-color: canvas;
      border-color: canvastext;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where([data-hts-root]) .hts-progress:indeterminate {
      appearance: none;
    }

    :where([data-hts-root]) .hts-progress::-webkit-progress-value {
      transition-duration: var(--hts-motion-duration-reduced);
    }

    :where([data-hts-root]) .hts-progress::-moz-progress-bar {
      transition-duration: var(--hts-motion-duration-reduced);
    }
  }

  :where([data-hts-root]) .hts-radio-group {
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    margin: var(--hts-space-0);
    padding: var(--hts-space-0);
    border: var(--hts-space-0);
    color: var(--hts-color-text-primary);
    font-family: var(--hts-font-family-body);
  }

  :where([data-hts-root]) .hts-radio-group > legend {
    max-inline-size: 100%;
    margin: var(--hts-space-0);
    padding: var(--hts-space-0);
    color: var(--hts-color-text-primary);
    font-size: var(--hts-font-size-label);
    font-weight: var(--hts-font-weight-label);
    letter-spacing: var(--hts-font-tracking-label);
    line-height: var(--hts-font-line-height-label);
    overflow-wrap: anywhere;
  }

  :where([data-hts-root]) .hts-radio-group > div {
    gap: var(--hts-space-1);
    min-inline-size: var(--hts-space-0);
    margin-block-start: var(--hts-space-1);
    display: grid;
  }

  :where([data-hts-root]) .hts-radio-group:where([data-orientation="horizontal"]) > div {
    align-items: flex-start;
    gap: var(--hts-space-2) var(--hts-space-4);
    flex-wrap: wrap;
    display: flex;
  }

  :where([data-hts-root]) .hts-radio-group > div > label {
    grid-template-columns: max-content
      minmax(var(--hts-space-0), 1fr);
    align-items: center;
    gap: var(--hts-space-2);
    min-inline-size: var(--hts-space-0);
    min-block-size: var(--hts-size-control-default);
    color: var(--hts-color-text-primary);
    font-size: var(--hts-font-size-body);
    font-weight: var(--hts-font-weight-body);
    letter-spacing: var(--hts-font-tracking-body);
    line-height: var(--hts-font-line-height-body);
    cursor: pointer;
    overflow-wrap: anywhere;
    touch-action: manipulation;
    display: grid;
  }

  :where([data-hts-root]) .hts-radio {
    appearance: none;
    box-sizing: border-box;
    inline-size: var(--hts-size-icon-md);
    block-size: var(--hts-size-icon-md);
    min-inline-size: var(--hts-size-icon-md);
    min-block-size: var(--hts-size-icon-md);
    margin: var(--hts-space-0);
    padding: var(--hts-space-0);
    border: var(--hts-border-hairline) solid var(--hts-color-border-interactive);
    border-radius: var(--hts-radius-pill);
    background-color: var(--hts-color-surface);
    box-shadow: none;
    color: var(--hts-color-action-primary-background);
    cursor: pointer;
    accent-color: var(--hts-color-action-primary-background);
    touch-action: manipulation;
    transition: background-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      border-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      box-shadow var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard);
    place-content: center;
    display: grid;
  }

  :where([data-hts-root]) .hts-radio:before {
    inline-size: var(--hts-space-2);
    block-size: var(--hts-space-2);
    border-radius: var(--hts-radius-pill);
    content: "";
    transition: transform var(--hts-motion-duration-fast)
      var(--hts-motion-easing-standard);
    background-color: currentColor;
    transform: scale(0);
  }

  :where([data-hts-root]) .hts-radio:where(:checked):before {
    transform: scale(1);
  }

  :where([data-hts-root]) .hts-radio:where(:not(:disabled):hover) {
    border-color: var(--hts-color-action-primary-background);
    box-shadow: var(--hts-shadow-xs);
  }

  :where([data-hts-root]) .hts-radio:where(:not(:disabled):active) {
    border-color: var(--hts-color-focus-ring);
    background-color: var(--hts-color-surface-raised);
  }

  :where([data-hts-root]) .hts-radio:where(:focus-visible) {
    border-color: var(--hts-color-focus-ring);
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: var(--hts-focus-ring-offset);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white),
      var(--hts-shadow-xs);
  }

  :where([data-hts-root]) .hts-radio-group:where([aria-invalid="true"]) .hts-radio {
    border-color: var(--hts-color-status-danger-foreground);
  }

  :where([data-hts-root]) .hts-radio-group:where([aria-invalid="true"]) > legend {
    color: var(--hts-color-status-danger-foreground);
  }

  :where([data-hts-root]) .hts-radio-group:where(:disabled) > div > label, :where([data-hts-root]) .hts-radio-group > div > label:where(:has(.hts-radio:disabled)) {
    color: var(--hts-color-text-muted);
    cursor: not-allowed;
  }

  :where([data-hts-root]) .hts-radio:disabled {
    border-color: var(--hts-color-border);
    background-color: var(--hts-color-surface-raised);
    color: var(--hts-color-text-muted);
    cursor: not-allowed;
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-radio {
      appearance: auto;
      color: buttontext;
      forced-color-adjust: auto;
      background-color: canvas;
      border-color: buttontext;
    }

    :where([data-hts-root]) .hts-radio:before {
      display: none;
    }

    :where([data-hts-root]) .hts-radio:where(:focus-visible) {
      box-shadow: none;
      outline-color: highlight;
    }

    :where([data-hts-root]) .hts-radio-group:where([aria-invalid="true"]) .hts-radio {
      border-color: mark;
    }

    :where([data-hts-root]) .hts-radio-group:where([aria-invalid="true"]) > legend {
      color: mark;
    }

    :where([data-hts-root]) .hts-radio:disabled {
      color: graytext;
      background-color: canvas;
      border-color: graytext;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where([data-hts-root]) .hts-radio, :where([data-hts-root]) .hts-radio:before {
      transition-duration: var(--hts-motion-duration-reduced);
    }
  }

  :where([data-hts-root]) .hts-resource-list {
    gap: var(--hts-space-2);
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    margin-block: var(--hts-space-0);
    margin-inline: var(--hts-space-0);
    padding-block: var(--hts-space-0);
    padding-inline: var(--hts-space-0);
    color: var(--hts-color-text-primary);
    list-style: none;
    display: grid;
    container-type: inline-size;
  }

  :where([data-hts-root]) .hts-resource-list-item {
    grid-template-columns: minmax(var(--hts-space-0), 1fr) max-content;
    align-items: center;
    gap: var(--hts-space-4);
    box-sizing: border-box;
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    padding-block: var(--hts-space-layout-block);
    padding-inline: var(--hts-space-layout-inline);
    border: var(--hts-border-hairline) solid var(--hts-color-border);
    border-radius: var(--hts-radius-lg);
    background-color: var(--hts-color-surface);
    color: var(--hts-color-text-primary);
    overflow-wrap: anywhere;
    display: grid;
    overflow: hidden;
  }

  :where([data-hts-root]) .hts-resource-list-item[data-state="selected"] {
    border-color: var(--hts-color-border-interactive);
    border-inline-start-width: var(--hts-border-strong);
    background-color: var(--hts-color-selection-background);
    color: var(--hts-color-selection-foreground);
  }

  :where([data-hts-root]) .hts-resource-list-content {
    gap: var(--hts-space-1);
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    display: grid;
  }

  :where([data-hts-root]) .hts-resource-list-primary, :where([data-hts-root]) .hts-resource-list-secondary, :where([data-hts-root]) .hts-resource-list-meta {
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    margin-block: var(--hts-space-0);
    margin-inline: var(--hts-space-0);
    overflow-wrap: anywhere;
  }

  :where([data-hts-root]) .hts-resource-list-primary-link {
    justify-self: start;
  }

  :where([data-hts-root]) .hts-resource-list-item[data-state="selected"] :where(.hts-resource-list-primary, .hts-resource-list-secondary, .hts-resource-list-meta) {
    color: var(--hts-color-selection-foreground);
  }

  :where([data-hts-root]) .hts-resource-list-aside {
    justify-content: flex-end;
    align-items: center;
    gap: var(--hts-space-3);
    min-inline-size: var(--hts-space-0);
    flex-wrap: wrap;
    max-inline-size: 100%;
    display: flex;
  }

  :where([data-hts-root]) .hts-resource-list-status, :where([data-hts-root]) .hts-resource-list-action {
    min-inline-size: var(--hts-space-0);
    align-items: center;
    max-inline-size: 100%;
    display: inline-flex;
  }

  :where([data-hts-root]) .hts-resource-list-action-control {
    max-inline-size: 100%;
  }

  :where([data-hts-root]) .hts-resource-list-item[data-state="busy"] {
    grid-template-columns: minmax(var(--hts-space-0), 1fr);
    background-color: var(--hts-color-surface-raised);
    border-style: dashed;
  }

  :where([data-hts-root]) .hts-resource-list-busy-status {
    align-items: center;
    gap: var(--hts-space-2);
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    display: flex;
  }

  :where([data-hts-root]) .hts-resource-list-placeholders {
    gap: var(--hts-space-2);
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    display: grid;
  }

  :where([data-hts-root]) .hts-resource-list-placeholder-secondary {
    inline-size: 62%;
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    display: block;
  }

  @container (inline-size < 30rem) {
    :where([data-hts-root]) .hts-resource-list-item {
      grid-template-columns: minmax(var(--hts-space-0), 1fr);
      align-items: start;
      gap: var(--hts-space-3);
    }

    :where([data-hts-root]) .hts-resource-list-aside {
      justify-content: flex-start;
    }
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-resource-list-item {
      color: canvastext;
      forced-color-adjust: auto;
      background-color: canvas;
      border-color: canvastext;
    }

    :where([data-hts-root]) .hts-resource-list-item[data-state="selected"] {
      color: canvastext;
      background-color: canvas;
      border-style: double;
      border-color: highlight;
    }

    :where([data-hts-root]) .hts-resource-list-item[data-state="selected"] :where(.hts-resource-list-primary, .hts-resource-list-secondary, .hts-resource-list-meta) {
      color: canvastext;
    }

    :where([data-hts-root]) .hts-resource-list-item[data-state="busy"] {
      background-color: canvas;
      border-color: graytext;
    }
  }

  :where([data-hts-root]) .hts-search-field {
    grid-template-columns: max-content
      minmax(var(--hts-space-0), 1fr)
      max-content
      max-content;
    align-items: center;
    gap: var(--hts-space-1);
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    min-block-size: var(--hts-size-control-default);
    margin: var(--hts-space-0);
    padding-block: var(--hts-space-1);
    padding-inline: var(--hts-space-1);
    border: var(--hts-border-hairline) solid var(--hts-color-border-interactive);
    border-radius: var(--hts-radius-md);
    background-color: var(--hts-color-surface);
    box-shadow: none;
    color: var(--hts-color-text-primary);
    transition: background-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      border-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      box-shadow var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      color var(--hts-motion-duration-fast) var(--hts-motion-easing-standard);
    display: grid;
  }

  :where([data-hts-root]) .hts-search-field:where([data-size="sm"]) {
    min-block-size: var(--hts-size-control-sm);
  }

  :where([data-hts-root]) .hts-search-field:where([data-size="md"]) {
    min-block-size: var(--hts-size-control-default);
  }

  :where([data-hts-root]) .hts-search-field:where([data-size="lg"]) {
    min-block-size: var(--hts-size-control-lg);
  }

  :where([data-hts-root]) .hts-search-field > .hts-search-field-icon {
    color: var(--hts-color-text-muted);
    pointer-events: none;
    grid-column: 1;
    margin-inline-start: var(--hts-space-2);
  }

  :where([data-hts-root]) .hts-search-field > .hts-search-field-input {
    min-inline-size: var(--hts-space-0);
    box-shadow: none;
    background-color: #0000;
    border-color: #0000;
    grid-column: 2;
  }

  :where([data-hts-root]) .hts-search-field > .hts-search-field-input:where(:hover, :active, :focus-visible) {
    box-shadow: none;
    background-color: #0000;
    border-color: #0000;
    outline: none;
  }

  :where([data-hts-root]) .hts-search-field > .hts-search-field-clear {
    grid-column: 3;
  }

  :where([data-hts-root]) .hts-search-field > .hts-search-field-submit {
    grid-column: 4;
  }

  :where([data-hts-root]) .hts-search-field:where([data-readonly="true"]) {
    border-color: var(--hts-color-border-interactive);
    background-color: var(--hts-color-surface-raised);
    box-shadow: none;
    color: var(--hts-color-text-secondary);
  }

  :where([data-hts-root]) .hts-search-field:where([data-invalid="true"]) {
    border-color: var(--hts-color-status-danger-foreground);
  }

  :where([data-hts-root]) .hts-search-field:where([data-disabled="true"]) {
    border-color: var(--hts-color-border);
    background-color: var(--hts-color-surface-raised);
    box-shadow: none;
    color: var(--hts-color-text-muted);
  }

  :where([data-hts-root]) .hts-search-field:where(:not([data-disabled="true"], [data-invalid="true"], [data-readonly="true"])):has( > .hts-search-field-input:hover) {
    border-color: var(--hts-color-focus-ring);
    box-shadow: var(--hts-shadow-xs);
  }

  :where([data-hts-root]) .hts-search-field:where(:not([data-disabled="true"], [data-invalid="true"], [data-readonly="true"])):has( > .hts-search-field-input:active) {
    border-color: var(--hts-color-focus-ring);
  }

  :where([data-hts-root]) .hts-search-field:where(:not([data-disabled="true"])):has( > .hts-search-field-input:focus-visible) {
    border-color: var(--hts-color-focus-ring);
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: var(--hts-focus-ring-offset);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white);
  }

  :where([data-hts-root]) .hts-search-field:where([data-invalid="true"]):has( > .hts-search-field-input:focus-visible) {
    border-color: var(--hts-color-status-danger-foreground);
  }

  :where([data-hts-root]) .hts-search-field:where([data-disabled="true"]) > .hts-search-field-icon {
    color: var(--hts-color-text-muted);
  }

  :where([data-hts-root]) .hts-search-field:where([aria-busy="true"]) > .hts-search-field-icon {
    color: var(--hts-color-text-secondary);
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-search-field {
      color: fieldtext;
      forced-color-adjust: auto;
      background-color: field;
      border-color: canvastext;
    }

    :where([data-hts-root]) .hts-search-field > .hts-search-field-icon {
      color: canvastext;
    }

    :where([data-hts-root]) .hts-search-field:where([data-readonly="true"]) {
      color: canvastext;
      background-color: canvas;
      border-color: canvastext;
    }

    :where([data-hts-root]) .hts-search-field:where([data-invalid="true"]) {
      border-color: highlight;
    }

    :where([data-hts-root]) .hts-search-field:where([data-disabled="true"]) {
      color: graytext;
      background-color: canvas;
      border-color: graytext;
    }

    :where([data-hts-root]) .hts-search-field:where(:not([data-disabled="true"])):has( > .hts-search-field-input:focus-visible) {
      box-shadow: none;
      border-color: highlight;
      outline-color: highlight;
    }

    :where([data-hts-root]) .hts-search-field:where([data-invalid="true"]):has( > .hts-search-field-input:focus-visible) {
      border-color: highlight;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where([data-hts-root]) .hts-search-field {
      transition-duration: var(--hts-motion-duration-reduced);
    }
  }

  :where([data-hts-root]) .hts-select {
    appearance: none;
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    min-block-size: var(--hts-size-control-default);
    margin: var(--hts-space-0);
    padding-block: var(--hts-space-1);
    padding-inline: var(--hts-space-control-inline)
      calc(var(--hts-space-control-inline) + var(--hts-size-icon-sm) +
          var(--hts-space-2));
    border: var(--hts-border-hairline) solid var(--hts-color-border-interactive);
    border-radius: var(--hts-radius-md);
    background-color: var(--hts-color-surface);
    background-image: conic-gradient(from -45deg at 50% 100%, currentColor 90deg, #0000 90deg);
    background-position: calc(100% - var(--hts-space-control-inline)) center;
    background-repeat: no-repeat;
    background-size: var(--hts-size-icon-sm) var(--hts-space-2);
    box-shadow: none;
    color: var(--hts-color-text-primary);
    font-family: var(--hts-font-family-body);
    font-size: var(--hts-font-size-body);
    font-weight: var(--hts-font-weight-body);
    letter-spacing: var(--hts-font-tracking-body);
    line-height: var(--hts-font-line-height-body);
    text-align: start;
    text-overflow: ellipsis;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      background-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      box-shadow var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard);
    display: block;
    overflow: hidden;
  }

  :where([data-hts-root]) .hts-select:where(:dir(rtl)) {
    background-position: var(--hts-space-control-inline) center;
  }

  :where([data-hts-root]) .hts-select:where([data-size="sm"]) {
    min-block-size: var(--hts-size-control-sm);
    padding-block: var(--hts-space-0);
    font-size: var(--hts-font-size-body-sm);
    letter-spacing: var(--hts-font-tracking-body-sm);
    line-height: var(--hts-font-line-height-body-sm);
  }

  :where([data-hts-root]) .hts-select:where([data-size="md"]) {
    min-block-size: var(--hts-size-control-default);
  }

  :where([data-hts-root]) .hts-select:where([data-size="lg"]) {
    min-block-size: var(--hts-size-control-lg);
    padding-block: var(--hts-space-2);
    font-size: var(--hts-font-size-body-lg);
    letter-spacing: var(--hts-font-tracking-body-lg);
    line-height: var(--hts-font-line-height-body-lg);
  }

  :where([data-hts-root]) .hts-select:where(:not(:disabled):hover) {
    border-color: var(--hts-color-action-primary-background);
  }

  :where([data-hts-root]) .hts-select:where(:not(:disabled):active) {
    border-color: var(--hts-color-focus-ring);
    box-shadow: inset 0 0 0 var(--hts-border-hairline) currentcolor;
  }

  :where([data-hts-root]) .hts-select:where(:focus-visible) {
    border-color: var(--hts-color-action-primary-background);
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: var(--hts-focus-ring-offset);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white),
      var(--hts-shadow-xs);
  }

  :where([data-hts-root]) .hts-select:where([aria-invalid="true"]), :where([data-hts-root]) .hts-select:where([aria-invalid="true"]:focus-visible) {
    border-color: var(--hts-color-status-danger-foreground);
  }

  :where([data-hts-root]) .hts-select:disabled {
    border-color: var(--hts-color-border);
    background-color: var(--hts-color-surface-raised);
    color: var(--hts-color-text-muted);
    cursor: not-allowed;
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-select {
      appearance: auto;
      color: fieldtext;
      forced-color-adjust: auto;
      background-color: field;
      background-image: none;
      border-color: buttontext;
    }

    :where([data-hts-root]) .hts-select:where(:focus-visible) {
      box-shadow: none;
      outline-color: highlight;
    }

    :where([data-hts-root]) .hts-select:where([aria-invalid="true"]) {
      border-color: mark;
    }

    :where([data-hts-root]) .hts-select:disabled {
      color: graytext;
      background-color: field;
      border-color: graytext;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where([data-hts-root]) .hts-select {
      transition-duration: var(--hts-motion-duration-reduced);
    }
  }

  :where([data-hts-root]) .hts-separator {
    box-sizing: border-box;
    margin-block: var(--hts-space-0);
    margin-inline: var(--hts-space-0);
    padding: var(--hts-space-0);
    background-color: var(--hts-color-border);
    color: var(--hts-color-border);
    pointer-events: none;
    user-select: none;
    border: none;
    flex: none;
    display: block;
  }

  :where([data-hts-root]) .hts-separator:where([data-orientation="horizontal"]) {
    inline-size: 100%;
    block-size: var(--hts-border-hairline);
    min-inline-size: var(--hts-space-0);
  }

  :where([data-hts-root]) .hts-separator:where([data-orientation="vertical"]) {
    inline-size: var(--hts-border-hairline);
    block-size: 100%;
    min-block-size: var(--hts-space-6);
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-separator {
      color: canvastext;
      forced-color-adjust: auto;
      background-color: canvastext;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where([data-hts-root]) .hts-separator {
      transition: none;
      animation: none;
    }
  }

  :where([data-hts-root]) .hts-skeleton {
    box-sizing: border-box;
    max-inline-size: 100%;
    min-inline-size: var(--hts-space-0);
    border-radius: var(--hts-radius-md);
    background-color: var(--hts-color-surface-raised);
    opacity: 1;
    pointer-events: none;
    user-select: none;
    transition: opacity var(--hts-motion-duration-slow)
      var(--hts-motion-easing-standard);
    display: block;
    overflow: hidden;
  }

  @starting-style {
    :where([data-hts-root]) .hts-skeleton {
      opacity: .56;
    }
  }

  :where([data-hts-root]) .hts-skeleton:where([data-shape="text"]) {
    inline-size: 100%;
    block-size: var(--hts-font-line-height-body);
    border-radius: var(--hts-radius-sm);
  }

  :where([data-hts-root]) .hts-skeleton:where([data-shape="circle"]) {
    inline-size: var(--hts-size-control-default);
    block-size: var(--hts-size-control-default);
    border-radius: var(--hts-radius-pill);
  }

  :where([data-hts-root]) .hts-skeleton:where([data-shape="rectangle"]) {
    inline-size: 100%;
    min-block-size: var(--hts-size-control-lg);
  }

  @media (prefers-reduced-motion: reduce) {
    :where([data-hts-root]) .hts-skeleton {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-skeleton {
      border: var(--hts-border-hairline) solid GrayText;
      forced-color-adjust: auto;
      background-color: canvas;
      transition: none;
    }
  }

  :where([data-hts-root]) .hts-spinner {
    box-sizing: border-box;
    inline-size: var(--hts-size-icon-md);
    block-size: var(--hts-size-icon-md);
    border: var(--hts-border-strong) solid currentcolor;
    border-radius: var(--hts-radius-pill);
    color: var(--hts-color-action-primary-background);
    vertical-align: middle;
    border-block-start-color: #0000;
    flex: none;
    display: inline-block;
  }

  :where([data-hts-root]) .hts-spinner:where([data-size="sm"]) {
    inline-size: var(--hts-size-icon-sm);
    block-size: var(--hts-size-icon-sm);
  }

  :where([data-hts-root]) .hts-spinner:where([data-size="md"]) {
    inline-size: var(--hts-size-icon-md);
    block-size: var(--hts-size-icon-md);
  }

  :where([data-hts-root]) .hts-spinner:where([data-size="lg"]) {
    inline-size: var(--hts-size-icon-lg);
    block-size: var(--hts-size-icon-lg);
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-spinner {
      border-color: canvastext;
      color: canvastext;
      forced-color-adjust: auto;
      border-block-start-color: #0000;
    }
  }

  :where([data-hts-root]) .hts-stepper {
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    margin-block: var(--hts-space-0);
    margin-inline: var(--hts-space-0);
    padding-block: var(--hts-space-0);
    padding-inline: var(--hts-space-0);
    color: var(--hts-color-text-primary);
    flex-wrap: wrap;
    align-items: start;
    list-style: none;
    display: flex;
    container-type: inline-size;
  }

  :where([data-hts-root]) .hts-stepper-item {
    flex: 1 1 var(--hts-space-0);
    min-inline-size: var(--hts-space-0);
    align-items: center;
    max-inline-size: 100%;
    display: flex;
  }

  :where([data-hts-root]) .hts-stepper-step {
    align-items: center;
    gap: var(--hts-space-2);
    min-inline-size: var(--hts-space-0);
    flex: 0 auto;
    max-inline-size: 100%;
    display: flex;
  }

  :where([data-hts-root]) .hts-stepper-marker {
    box-sizing: border-box;
    min-block-size: var(--hts-size-control-sm);
    min-inline-size: var(--hts-size-control-sm);
    border: var(--hts-border-hairline) solid var(--hts-color-border-interactive);
    border-radius: var(--hts-radius-pill);
    background-color: var(--hts-color-surface);
    color: var(--hts-color-text-primary);
    font-family: var(--hts-font-family-body);
    font-size: var(--hts-font-size-label);
    font-weight: var(--hts-font-weight-label);
    line-height: var(--hts-font-line-height-label);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  :where([data-hts-root]) .hts-stepper-marker[data-state="completed"] {
    border-color: var(--hts-color-status-success-foreground);
    background-color: var(--hts-color-status-success-background);
    color: var(--hts-color-status-success-foreground);
  }

  :where([data-hts-root]) .hts-stepper-marker[data-state="current"] {
    border-color: var(--hts-color-action-primary-background);
    background-color: var(--hts-color-action-primary-background);
    color: var(--hts-color-action-primary-foreground);
  }

  :where([data-hts-root]) .hts-stepper-marker[data-state="error"] {
    border-color: var(--hts-color-status-danger-foreground);
    background-color: var(--hts-color-status-danger-background);
    color: var(--hts-color-status-danger-foreground);
  }

  :where([data-hts-root]) .hts-stepper-marker[data-state="upcoming"] {
    border-color: var(--hts-color-border);
    background-color: var(--hts-color-surface-raised);
    color: var(--hts-color-text-muted);
  }

  :where([data-hts-root]) .hts-stepper-content {
    gap: var(--hts-space-1);
    min-inline-size: var(--hts-space-0);
    overflow-wrap: anywhere;
    max-inline-size: 100%;
    display: grid;
  }

  :where([data-hts-root]) .hts-stepper-label, :where([data-hts-root]) .hts-stepper-status {
    min-inline-size: var(--hts-space-0);
    overflow-wrap: anywhere;
    max-inline-size: 100%;
  }

  :where([data-hts-root]) .hts-stepper-connector {
    flex: 1 1 var(--hts-space-6);
    min-inline-size: var(--hts-space-6);
    color: var(--hts-color-border-interactive);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  @container (inline-size < 30rem) {
    :where([data-hts-root]) .hts-stepper-item {
      grid-template-columns: minmax(var(--hts-space-0), 1fr);
      flex-basis: 100%;
      display: grid;
    }

    :where([data-hts-root]) .hts-stepper-step {
      align-items: start;
    }

    :where([data-hts-root]) .hts-stepper-connector {
      min-block-size: var(--hts-space-6);
      min-inline-size: var(--hts-space-0);
      border-inline-start: var(--hts-border-hairline) solid
        var(--hts-color-border-interactive);
      justify-self: start;
      margin-inline-start: calc(var(--hts-size-control-sm) / 2);
    }

    :where([data-hts-root]) .hts-stepper-connector .hts-icon {
      display: none;
    }
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-stepper-marker {
      color: canvastext;
      forced-color-adjust: auto;
      background-color: canvas;
      border-color: canvastext;
    }

    :where([data-hts-root]) .hts-stepper-marker[data-state="current"] {
      color: highlighttext;
      background-color: highlight;
      border-color: highlight;
    }

    :where([data-hts-root]) .hts-stepper-marker[data-state="error"] {
      border-style: double;
    }

    :where([data-hts-root]) .hts-stepper-connector {
      color: canvastext;
      border-color: canvastext;
    }
  }

  :where([data-hts-root]) .hts-switch {
    box-sizing: border-box;
    inline-size: var(--hts-size-control-default);
    block-size: var(--hts-size-icon-lg);
    margin: var(--hts-space-0);
    padding: var(--hts-space-0);
    border: var(--hts-border-strong) solid var(--hts-color-border-interactive);
    border-radius: var(--hts-radius-pill);
    appearance: none;
    background-color: var(--hts-color-surface-raised);
    box-shadow: none;
    color: var(--hts-color-text-secondary);
    cursor: pointer;
    touch-action: manipulation;
    vertical-align: middle;
    transition: background-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      border-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      box-shadow var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard);
    display: inline-block;
  }

  :where([data-hts-root]) .hts-switch:before {
    inline-size: var(--hts-size-icon-sm);
    block-size: var(--hts-size-icon-sm);
    margin-block: var(--hts-border-strong);
    border-radius: var(--hts-radius-pill);
    content: "";
    transition: background-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      margin-inline-start var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard);
    background-color: currentColor;
    margin-inline-start: var(--hts-border-strong);
    display: block;
  }

  :where([data-hts-root]) .hts-switch:where(:checked) {
    border-color: var(--hts-color-action-primary-background);
    background-color: var(--hts-color-action-primary-background);
    color: var(--hts-color-action-primary-foreground);
  }

  :where([data-hts-root]) .hts-switch:where(:checked):before {
    margin-inline-start: calc(var(--hts-size-control-default) - 3 * var(--hts-border-strong) -
        var(--hts-size-icon-sm));
  }

  :where([data-hts-root]) .hts-switch:where([aria-invalid="true"]) {
    border-color: var(--hts-color-status-danger-foreground);
    box-shadow: 0 0 0 var(--hts-border-hairline)
      var(--hts-color-status-danger-foreground);
  }

  :where([data-hts-root]) .hts-switch:where(:disabled) {
    border-color: var(--hts-color-border);
    background-color: var(--hts-color-surface-raised);
    box-shadow: none;
    color: var(--hts-color-text-muted);
    cursor: not-allowed;
  }

  :where([data-hts-root]) .hts-switch:where(:checked:disabled) {
    border-color: var(--hts-color-text-muted);
    background-color: var(--hts-color-text-muted);
    color: var(--hts-color-surface);
  }

  :where([data-hts-root]) .hts-switch:where(:not(:disabled, [aria-invalid="true"])):hover {
    border-color: var(--hts-color-focus-ring);
    box-shadow: var(--hts-shadow-xs);
  }

  :where([data-hts-root]) .hts-switch:where(:checked:not(:disabled, [aria-invalid="true"])):hover {
    border-color: var(--hts-color-action-primary-background-hover);
    background-color: var(--hts-color-action-primary-background-hover);
  }

  :where([data-hts-root]) .hts-switch:where(:not(:disabled, [aria-invalid="true"])):active {
    box-shadow: inset 0 0 0 var(--hts-border-hairline) currentcolor;
  }

  :where([data-hts-root]) .hts-switch:focus-visible {
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: var(--hts-focus-ring-offset);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white);
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-switch {
      color: canvastext;
      forced-color-adjust: auto;
      background-color: canvas;
      border-color: canvastext;
    }

    :where([data-hts-root]) .hts-switch:where(:checked) {
      color: highlighttext;
      background-color: highlight;
      border-color: highlight;
    }

    :where([data-hts-root]) .hts-switch:where([aria-invalid="true"]) {
      box-shadow: 0 0 0 var(--hts-border-hairline) Mark;
      border-color: mark;
    }

    :where([data-hts-root]) .hts-switch:where(:disabled) {
      color: graytext;
      background-color: canvas;
      border-color: graytext;
    }

    :where([data-hts-root]) .hts-switch:where(:checked:disabled) {
      color: canvas;
      background-color: graytext;
      border-color: graytext;
    }

    :where([data-hts-root]) .hts-switch:focus-visible {
      box-shadow: none;
      outline-color: highlight;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where([data-hts-root]) .hts-switch, :where([data-hts-root]) .hts-switch:before {
      transition-duration: var(--hts-motion-duration-reduced);
    }
  }

  :where([data-hts-root]) .hts-tabs {
    align-content: start;
    gap: var(--hts-space-4);
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    color: var(--hts-color-text-primary);
    display: grid;
    container-type: inline-size;
  }

  :where([data-hts-root]) .hts-tabs[data-orientation="vertical"] {
    flex-wrap: wrap;
    align-items: flex-start;
    display: flex;
  }

  :where([data-hts-root]) .hts-tabs-list {
    align-items: stretch;
    gap: var(--hts-space-1);
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    padding-block: var(--hts-space-1);
    padding-inline: var(--hts-space-1);
    overflow-block: hidden;
    overflow-inline: auto;
    border: var(--hts-border-hairline) solid var(--hts-color-border);
    border-radius: var(--hts-radius-md);
    background-color: var(--hts-color-surface);
    display: flex;
  }

  :where([data-hts-root]) .hts-tabs-list[aria-orientation="vertical"] {
    flex-direction: column;
    flex: 0 auto;
    inline-size: auto;
    min-inline-size: 10rem;
    overflow: visible;
  }

  :where([data-hts-root]) .hts-tabs-trigger {
    appearance: none;
    min-block-size: var(--hts-size-control-default);
    min-inline-size: var(--hts-size-control-default);
    max-inline-size: 100%;
    margin: var(--hts-space-0);
    padding-block: var(--hts-space-1);
    padding-inline: var(--hts-space-control-inline);
    overflow-wrap: anywhere;
    border: var(--hts-border-hairline) solid transparent;
    border-radius: var(--hts-radius-sm);
    color: var(--hts-color-text-secondary);
    font-family: var(--hts-font-family-body);
    font-size: var(--hts-font-size-label);
    font-weight: var(--hts-font-weight-label);
    letter-spacing: var(--hts-font-tracking-label);
    line-height: var(--hts-font-line-height-label);
    text-align: center;
    white-space: normal;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    background-color: #0000;
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  :where([data-hts-root]) .hts-tabs-trigger[data-orientation="vertical"] {
    text-align: start;
    justify-content: flex-start;
    inline-size: 100%;
  }

  :where([data-hts-root]) .hts-tabs-trigger[data-state="active"] {
    border-color: var(--hts-color-border-interactive);
    background-color: var(--hts-color-surface-raised);
    box-shadow: var(--hts-shadow-xs);
    color: var(--hts-color-text-primary);
  }

  :where([data-hts-root]) .hts-tabs-trigger:hover {
    background-color: var(--hts-color-surface-raised);
  }

  :where([data-hts-root]) .hts-tabs-trigger:active {
    box-shadow: inset 0 0 0 var(--hts-border-hairline) currentcolor;
  }

  :where([data-hts-root]) .hts-tabs-trigger:focus-visible {
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: var(--hts-focus-ring-offset);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white);
  }

  :where([data-hts-root]) .hts-tabs-trigger:disabled {
    box-shadow: none;
    color: var(--hts-color-text-muted);
    cursor: not-allowed;
    opacity: .6;
    background-color: #0000;
  }

  :where([data-hts-root]) .hts-tabs-label {
    min-inline-size: var(--hts-space-0);
    overflow-wrap: anywhere;
    max-inline-size: 100%;
  }

  :where([data-hts-root]) .hts-tabs-content {
    box-sizing: border-box;
    min-inline-size: min(20rem, 100%);
    max-inline-size: 100%;
    padding-block: var(--hts-space-4);
    padding-inline: var(--hts-space-4);
    overflow-wrap: anywhere;
    border: var(--hts-border-hairline) solid var(--hts-color-border);
    border-radius: var(--hts-radius-md);
    background-color: var(--hts-color-surface);
    color: var(--hts-color-text-primary);
    flex: 20rem;
  }

  :where([data-hts-root]) .hts-tabs-content:focus-visible {
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: var(--hts-focus-ring-offset);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white);
  }

  :where([data-hts-root]) .hts-tabs-content-body {
    min-inline-size: var(--hts-space-0);
    overflow-wrap: anywhere;
    max-inline-size: 100%;
  }

  @container (inline-size < 30rem) {
    :where([data-hts-root]) .hts-tabs-list[aria-orientation="vertical"] {
      overflow-block: hidden;
      overflow-inline: auto;
      flex-direction: row;
      flex: 100%;
      inline-size: 100%;
    }

    :where([data-hts-root]) .hts-tabs-trigger[data-orientation="vertical"] {
      text-align: center;
      justify-content: center;
      inline-size: auto;
    }
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-tabs {
      color: canvastext;
      forced-color-adjust: auto;
    }

    :where([data-hts-root]) .hts-tabs-list, :where([data-hts-root]) .hts-tabs-content {
      color: canvastext;
      background-color: canvas;
      border-color: canvastext;
    }

    :where([data-hts-root]) .hts-tabs-trigger {
      color: buttontext;
      background-color: buttonface;
      border-color: buttontext;
    }

    :where([data-hts-root]) .hts-tabs-trigger[data-state="active"] {
      box-shadow: none;
      color: highlighttext;
      background-color: highlight;
      border-color: highlight;
    }

    :where([data-hts-root]) .hts-tabs-trigger:disabled {
      color: graytext;
      opacity: 1;
      background-color: buttonface;
      border-color: graytext;
    }

    :where([data-hts-root]) .hts-tabs-trigger:focus-visible, :where([data-hts-root]) .hts-tabs-content:focus-visible {
      box-shadow: none;
      outline-color: highlight;
    }
  }

  :where([data-hts-root]) .hts-text {
    color: var(--hts-color-text-primary);
    font-family: var(--hts-font-family-body);
    font-size: var(--hts-font-size-body);
    font-weight: var(--hts-font-weight-body);
    letter-spacing: var(--hts-font-tracking-body);
    line-height: var(--hts-font-line-height-body);
    margin: var(--hts-space-0);
    overflow-wrap: anywhere;
  }

  :where([data-hts-root]) .hts-text[data-role="caption"] {
    font-family: var(--hts-font-family-body);
    font-size: var(--hts-font-size-caption);
    font-weight: var(--hts-font-weight-caption);
    letter-spacing: var(--hts-font-tracking-caption);
    line-height: var(--hts-font-line-height-caption);
  }

  :where([data-hts-root]) .hts-text[data-role="body-sm"] {
    font-family: var(--hts-font-family-body);
    font-size: var(--hts-font-size-body-sm);
    font-weight: var(--hts-font-weight-body-sm);
    letter-spacing: var(--hts-font-tracking-body-sm);
    line-height: var(--hts-font-line-height-body-sm);
  }

  :where([data-hts-root]) .hts-text[data-role="body"] {
    font-family: var(--hts-font-family-body);
    font-size: var(--hts-font-size-body);
    font-weight: var(--hts-font-weight-body);
    letter-spacing: var(--hts-font-tracking-body);
    line-height: var(--hts-font-line-height-body);
  }

  :where([data-hts-root]) .hts-text[data-role="body-lg"] {
    font-family: var(--hts-font-family-body);
    font-size: var(--hts-font-size-body-lg);
    font-weight: var(--hts-font-weight-body-lg);
    letter-spacing: var(--hts-font-tracking-body-lg);
    line-height: var(--hts-font-line-height-body-lg);
  }

  :where([data-hts-root]) .hts-text[data-role="label"] {
    font-family: var(--hts-font-family-body);
    font-size: var(--hts-font-size-label);
    font-weight: var(--hts-font-weight-label);
    letter-spacing: var(--hts-font-tracking-label);
    line-height: var(--hts-font-line-height-label);
  }

  :where([data-hts-root]) .hts-text[data-role="title-sm"] {
    font-family: var(--hts-font-family-display);
    font-size: var(--hts-font-size-title-sm);
    font-weight: var(--hts-font-weight-title-sm);
    letter-spacing: var(--hts-font-tracking-title-sm);
    line-height: var(--hts-font-line-height-title-sm);
  }

  :where([data-hts-root]) .hts-text[data-role="title-md"] {
    font-family: var(--hts-font-family-display);
    font-size: var(--hts-font-size-title-md);
    font-weight: var(--hts-font-weight-title-md);
    letter-spacing: var(--hts-font-tracking-title-md);
    line-height: var(--hts-font-line-height-title-md);
  }

  :where([data-hts-root]) .hts-text[data-role="title-lg"] {
    font-family: var(--hts-font-family-display);
    font-size: var(--hts-font-size-title-lg);
    font-weight: var(--hts-font-weight-title-lg);
    letter-spacing: var(--hts-font-tracking-title-lg);
    line-height: var(--hts-font-line-height-title-lg);
  }

  :where([data-hts-root]) .hts-text[data-role="display-sm"] {
    font-family: var(--hts-font-family-display);
    font-size: var(--hts-font-size-display-sm);
    font-weight: var(--hts-font-weight-display-sm);
    letter-spacing: var(--hts-font-tracking-display-sm);
    line-height: var(--hts-font-line-height-display-sm);
  }

  :where([data-hts-root]) .hts-text[data-role="display-lg"] {
    font-family: var(--hts-font-family-display);
    font-size: var(--hts-font-size-display-lg);
    font-weight: var(--hts-font-weight-display-lg);
    letter-spacing: var(--hts-font-tracking-display-lg);
    line-height: var(--hts-font-line-height-display-lg);
  }

  :where([data-hts-root]) .hts-text[data-role="mono-sm"] {
    font-family: var(--hts-font-family-mono);
    font-size: var(--hts-font-size-mono-sm);
    font-weight: var(--hts-font-weight-mono-sm);
    letter-spacing: var(--hts-font-tracking-mono-sm);
    line-height: var(--hts-font-line-height-mono-sm);
  }

  :where([data-hts-root]) .hts-text[data-tone="primary"] {
    color: var(--hts-color-text-primary);
  }

  :where([data-hts-root]) .hts-text[data-tone="secondary"] {
    color: var(--hts-color-text-secondary);
  }

  :where([data-hts-root]) .hts-text[data-tone="muted"] {
    color: var(--hts-color-text-muted);
  }

  :where([data-hts-root]) .hts-text[data-tone="inverse"] {
    color: var(--hts-color-text-inverse);
  }

  :where([data-hts-root]) .hts-text[data-tone="danger"] {
    color: var(--hts-color-status-danger-foreground);
  }

  :where([data-hts-root]) .hts-text[data-tone="success"] {
    color: var(--hts-color-status-success-foreground);
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-text {
      forced-color-adjust: auto;
    }
  }

  :where([data-hts-root]) .hts-textarea {
    appearance: none;
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    min-block-size: var(--hts-size-control-default);
    margin: var(--hts-space-0);
    padding-block: var(--hts-space-2);
    padding-inline: var(--hts-space-3);
    border: var(--hts-border-hairline) solid var(--hts-color-border-interactive);
    border-radius: var(--hts-radius-md);
    background-color: var(--hts-color-surface);
    box-shadow: none;
    color: var(--hts-color-text-primary);
    font-family: var(--hts-font-family-body);
    font-size: var(--hts-font-size-body);
    font-weight: var(--hts-font-weight-body);
    letter-spacing: var(--hts-font-tracking-body);
    line-height: var(--hts-font-line-height-body);
    text-align: start;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    resize: block;
    transition: background-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      border-color var(--hts-motion-duration-fast)
        var(--hts-motion-easing-standard),
      color var(--hts-motion-duration-fast) var(--hts-motion-easing-standard);
    display: block;
    overflow: auto;
  }

  :where([data-hts-root]) .hts-textarea:where([data-size="md"]) {
    min-block-size: var(--hts-size-control-default);
    padding-block: var(--hts-space-2);
    padding-inline: var(--hts-space-3);
    font-size: var(--hts-font-size-body);
    font-weight: var(--hts-font-weight-body);
    letter-spacing: var(--hts-font-tracking-body);
    line-height: var(--hts-font-line-height-body);
  }

  :where([data-hts-root]) .hts-textarea:where([data-size="lg"]) {
    min-block-size: var(--hts-size-control-lg);
    padding-block: var(--hts-space-3);
    padding-inline: var(--hts-space-4);
    font-size: var(--hts-font-size-body-lg);
    font-weight: var(--hts-font-weight-body-lg);
    letter-spacing: var(--hts-font-tracking-body-lg);
    line-height: var(--hts-font-line-height-body-lg);
  }

  :where([data-hts-root]) .hts-textarea:where([data-resize="vertical"]) {
    resize: block;
  }

  :where([data-hts-root]) .hts-textarea:where([data-resize="none"]) {
    resize: none;
  }

  :where([data-hts-root]) .hts-textarea::placeholder {
    color: var(--hts-color-text-muted);
    opacity: 1;
  }

  :where([data-hts-root]) .hts-textarea:where([aria-invalid="true"]) {
    border-color: var(--hts-color-status-danger-foreground);
  }

  :where([data-hts-root]) .hts-textarea:where(:not(:disabled, :read-only)):hover {
    border-color: var(--hts-color-text-secondary);
  }

  :where([data-hts-root]) .hts-textarea:focus-visible {
    border-color: var(--hts-color-focus-ring);
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: var(--hts-focus-ring-offset);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white);
  }

  :where([data-hts-root]) .hts-textarea:read-only {
    border-color: var(--hts-color-border);
    background-color: var(--hts-color-surface-raised);
  }

  :where([data-hts-root]) .hts-textarea:disabled {
    border-color: var(--hts-color-border);
    background-color: var(--hts-color-surface-raised);
    color: var(--hts-color-text-muted);
    cursor: not-allowed;
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-textarea {
      color: fieldtext;
      forced-color-adjust: auto;
      background-color: field;
      border-color: fieldtext;
    }

    :where([data-hts-root]) .hts-textarea:where([aria-invalid="true"]) {
      border-color: mark;
    }

    :where([data-hts-root]) .hts-textarea:read-only {
      color: canvastext;
      background-color: canvas;
      border-color: canvastext;
    }

    :where([data-hts-root]) .hts-textarea:disabled {
      color: graytext;
      background-color: field;
      border-color: graytext;
    }

    :where([data-hts-root]) .hts-textarea:focus-visible {
      box-shadow: none;
      border-color: highlight;
      outline-color: highlight;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where([data-hts-root]) .hts-textarea {
      transition-duration: var(--hts-motion-duration-reduced);
    }
  }

  :where([data-hts-root]).hts-toast-layer {
    z-index: var(--hts-z-index-toast);
    inset-block: var(--hts-space-0);
    inset-inline: var(--hts-space-0);
    pointer-events: none;
    position: fixed;
    container-type: inline-size;
  }

  :where([data-hts-root]) .hts-toast-viewport {
    gap: var(--hts-space-3);
    box-sizing: border-box;
    inline-size: min(var(--hts-layout-narrow-max),
      calc(100vi - var(--hts-space-8)));
    max-block-size: calc(100vb - var(--hts-space-8));
    margin: var(--hts-space-0);
    padding: var(--hts-space-0);
    overflow-block: auto;
    overflow-inline: hidden;
    pointer-events: none;
    flex-direction: column;
    list-style: none;
    display: flex;
    position: absolute;
    inset-block-start: var(--hts-space-4);
    inset-inline-end: var(--hts-space-4);
  }

  :where([data-hts-root]) .hts-toast-viewport:focus-visible {
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: var(--hts-focus-ring-offset);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white);
  }

  :where([data-hts-root]) .hts-toast-viewport:where(:not(:has(.hts-toast))):focus-visible {
    box-shadow: none;
    outline: none;
  }

  :where([data-hts-root]) .hts-toast-announcer {
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    padding: var(--hts-space-0);
    white-space: nowrap;
    border: none;
    margin: -1px;
    position: absolute;
    overflow: hidden;
  }

  :where([data-hts-root]) .hts-toast {
    grid-template-columns: minmax(var(--hts-space-0), 1fr) max-content;
    align-items: start;
    gap: var(--hts-space-3);
    box-sizing: border-box;
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    padding-block: var(--hts-space-3);
    padding-inline: var(--hts-space-4);
    border: var(--hts-border-hairline) solid var(--hts-color-border);
    border-radius: var(--hts-radius-lg);
    background-color: var(--hts-color-surface-raised);
    box-shadow: var(--hts-shadow-md);
    color: var(--hts-color-text-primary);
    opacity: 1;
    pointer-events: auto;
    overflow-wrap: anywhere;
    transition: opacity var(--hts-motion-duration-fast)
      var(--hts-motion-easing-standard);
    display: grid;
    overflow: hidden;
  }

  @starting-style {
    :where([data-hts-root]) .hts-toast:where([data-state="open"]) {
      opacity: 0;
    }
  }

  :where([data-hts-root]) .hts-toast:where([data-tone="info"]) {
    border-color: var(--hts-color-status-info-foreground);
    background-color: var(--hts-color-status-info-background);
    color: var(--hts-color-status-info-foreground);
  }

  :where([data-hts-root]) .hts-toast:where([data-tone="success"]) {
    border-color: var(--hts-color-status-success-foreground);
    background-color: var(--hts-color-status-success-background);
    color: var(--hts-color-status-success-foreground);
  }

  :where([data-hts-root]) .hts-toast:where([data-tone="warning"]) {
    border-color: var(--hts-color-status-warning-foreground);
    background-color: var(--hts-color-status-warning-background);
    color: var(--hts-color-status-warning-foreground);
  }

  :where([data-hts-root]) .hts-toast:where([data-tone="danger"]) {
    border-color: var(--hts-color-status-danger-foreground);
    background-color: var(--hts-color-status-danger-background);
    color: var(--hts-color-status-danger-foreground);
  }

  :where([data-hts-root]) .hts-toast:where([data-swipe="move"]) {
    transform: translate3d(var(--radix-toast-swipe-move-x),
      var(--radix-toast-swipe-move-y),
      0);
    transition: none;
  }

  :where([data-hts-root]) .hts-toast:where([data-swipe="cancel"]) {
    transition: transform var(--hts-motion-duration-fast)
      var(--hts-motion-easing-standard);
    transform: translate3d(0, 0, 0);
  }

  :where([data-hts-root]) .hts-toast:where([data-swipe="end"]) {
    transform: translate3d(var(--radix-toast-swipe-end-x),
      var(--radix-toast-swipe-end-y),
      0);
  }

  :where([data-hts-root]) .hts-toast:focus-visible {
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: var(--hts-focus-ring-offset);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white),
      var(--hts-shadow-md);
  }

  :where([data-hts-root]) .hts-toast > .hts-toast-content {
    gap: var(--hts-space-1);
    min-inline-size: var(--hts-space-0);
    grid-column: 1;
    max-inline-size: 100%;
    display: grid;
  }

  :where([data-hts-root]) .hts-toast > :where(.hts-toast-content) > :where(.hts-toast-title), :where([data-hts-root]) .hts-toast > :where(.hts-toast-content) > :where(.hts-toast-description) {
    min-inline-size: var(--hts-space-0);
    max-inline-size: 100%;
    color: inherit;
    overflow-wrap: anywhere;
  }

  :where([data-hts-root]) .hts-toast > .hts-toast-action {
    appearance: none;
    min-block-size: var(--hts-size-control-sm);
    max-inline-size: 100%;
    margin: var(--hts-space-0);
    padding-block: var(--hts-space-1);
    padding-inline: var(--hts-space-3);
    overflow-wrap: anywhere;
    border: var(--hts-border-hairline) solid currentcolor;
    border-radius: var(--hts-radius-md);
    box-shadow: none;
    color: inherit;
    font-family: var(--hts-font-family-body);
    font-size: var(--hts-font-size-label);
    font-weight: var(--hts-font-weight-label);
    letter-spacing: var(--hts-font-tracking-label);
    line-height: var(--hts-font-line-height-label);
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    transition: box-shadow var(--hts-motion-duration-fast)
      var(--hts-motion-easing-standard);
    background-color: #0000;
    grid-area: 2 / 1 / auto / -1;
    justify-content: center;
    justify-self: start;
    align-items: center;
    display: inline-flex;
  }

  :where([data-hts-root]) .hts-toast > :where(.hts-toast-action):where(:hover, :active) {
    box-shadow: inset 0 0 0 var(--hts-border-hairline) currentcolor;
  }

  :where([data-hts-root]) .hts-toast > :where(.hts-toast-action):focus-visible {
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: var(--hts-focus-ring-offset);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white);
  }

  :where([data-hts-root]) .hts-toast > .hts-toast-close {
    color: inherit;
    background-color: #0000;
    border-color: #0000;
    grid-area: 1 / 2;
    align-self: start;
  }

  @container (inline-size < 30rem) {
    :where([data-hts-root]) .hts-toast-viewport {
      inline-size: auto;
      inset-inline: var(--hts-space-2);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where([data-hts-root]) .hts-toast, :where([data-hts-root]) .hts-toast > .hts-toast-action {
      transition-duration: var(--hts-motion-duration-reduced);
    }
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-toast {
      box-shadow: none;
      color: canvastext;
      forced-color-adjust: auto;
      background-color: canvas;
      border-color: canvastext;
    }

    :where([data-hts-root]) .hts-toast > .hts-toast-action, :where([data-hts-root]) .hts-toast > .hts-toast-close {
      color: buttontext;
      background-color: buttonface;
      border-color: buttontext;
    }

    :where([data-hts-root]) .hts-toast-viewport:focus-visible, :where([data-hts-root]) .hts-toast:focus-visible, :where([data-hts-root]) .hts-toast > :where(.hts-toast-action):focus-visible {
      box-shadow: none;
      outline-color: highlight;
    }
  }

  :where([data-hts-root]).hts-tooltip-layer {
    z-index: var(--hts-z-index-dropdown);
    inset-block: var(--hts-space-0);
    inset-inline: var(--hts-space-0);
    pointer-events: none;
    position: fixed;
  }

  :where([data-hts-root]) .hts-tooltip {
    box-sizing: border-box;
    max-inline-size: min(var(--hts-layout-narrow-max),
      calc(100vw - var(--hts-space-4)));
    padding-block: var(--hts-space-2);
    padding-inline: var(--hts-space-3);
    border: var(--hts-border-hairline) solid var(--hts-color-border);
    border-radius: var(--hts-radius-md);
    background-color: var(--hts-color-surface-raised);
    box-shadow: var(--hts-shadow-sm);
    color: var(--hts-color-text-primary);
    pointer-events: none;
    text-align: start;
    overflow-wrap: anywhere;
    overflow: hidden;
  }

  :where([data-hts-root]) .hts-tooltip:where([data-state="instant-open"], [data-state="delayed-open"]) {
    opacity: 1;
    transition: opacity var(--hts-motion-duration-fast)
      var(--hts-motion-easing-standard);
  }

  @starting-style {
    :where([data-hts-root]) .hts-tooltip:where([data-state="instant-open"], [data-state="delayed-open"]) {
      opacity: 0;
    }
  }

  :where([data-hts-root]) .hts-tooltip-content {
    max-inline-size: 100%;
    color: inherit;
    overflow-wrap: anywhere;
  }

  :where([data-hts-root]) .hts-tooltip-arrow {
    fill: var(--hts-color-surface-raised);
    stroke: var(--hts-color-border);
    stroke-width: var(--hts-border-hairline);
  }

  @media (prefers-reduced-motion: reduce) {
    :where([data-hts-root]) .hts-tooltip {
      transition-duration: var(--hts-motion-duration-reduced);
    }
  }

  @media (forced-colors: active) {
    :where([data-hts-root]) .hts-tooltip {
      box-shadow: none;
      color: canvastext;
      forced-color-adjust: auto;
      background-color: canvas;
      border-color: canvastext;
    }

    :where([data-hts-root]) .hts-tooltip-arrow {
      fill: canvas;
      stroke: canvastext;
    }
  }
}

@layer hts.utilities {
  :where([data-hts-root]).hts-sr-only, :where([data-hts-root]) .hts-sr-only {
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    block-size: 1px !important;
    inline-size: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    position: absolute !important;
    overflow: hidden !important;
  }

  :where([data-hts-root]).hts-focus-ring:focus-visible, :where([data-hts-root]) .hts-focus-ring:focus-visible {
    outline: var(--hts-focus-ring-width) solid var(--hts-color-ink-950);
    outline-offset: var(--hts-focus-ring-offset);
    box-shadow: 0 0 0 var(--hts-focus-ring-width) var(--hts-color-white);
  }

  :where([data-hts-root]).hts-container, :where([data-hts-root]) .hts-container {
    inline-size: 100%;
    max-inline-size: var(--hts-layout-page-max);
    padding-inline: var(--hts-layout-gutter);
    margin-inline: auto;
  }

  :where([data-hts-root]).hts-stack, :where([data-hts-root]) .hts-stack {
    gap: var(--hts-space-layout-block);
    flex-direction: column;
    display: flex;
  }

  :where([data-hts-root]).hts-cluster, :where([data-hts-root]) .hts-cluster {
    align-items: center;
    gap: var(--hts-space-layout-inline);
    flex-wrap: wrap;
    display: flex;
  }
}

@media (forced-colors: active) {
  @layer hts.utilities {
    :where([data-hts-root]).hts-focus-ring:focus-visible, :where([data-hts-root]) .hts-focus-ring:focus-visible {
      box-shadow: none;
      outline-color: highlight;
    }
  }
}
/*# sourceMappingURL=wecamp.css.map */