:root {
  --font-family-family: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-family-google: Manrope;
  --font-heading-family: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-heading-google: Manrope;
  --font-google-0: Manrope;
  --font-size: 16px;
  --font-icon-family: lucide;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 800;
  --link-color: #fabd2f;
  --text-color: #ebdbb2;
  --text-secondary: #d5c4a1;
  --text-muted: #a89984;
  --text-disabled: #665c54;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.5rem;
  --background-color: #1d2021;
  --color-primary: #fabd2f;
  --color-on-primary: #282828;
  --color-on-primary-lighter: hsl(0 0% 36%);
  --color-on-primary-light: hsl(0 0% 26%);
  --color-on-primary-dark: hsl(0 0% 6%);
  --color-on-primary-darker: hsl(0 0% 0%);
  --color-primary-lighter: #fce8b3;
  --color-primary-light: #fcd475;
  --color-primary-dark: #d79921;
  --color-primary-darker: #b57614;
  --color-secondary: #fe8019;
  --color-on-secondary: #000000;
  --color-secondary-lighter: #fec08c;
  --color-secondary-light: #fea053;
  --color-secondary-dark: #d65d0e;
  --color-secondary-darker: #af3a03;
  --color-success: #b8bb26;
  --color-success-lighter: hsl(61 66% 64%);
  --color-success-darker: hsl(61 66% 24%);
  --color-on-success: #000000;
  --color-success-light: #d5d770;
  --color-success-dark: #98971a;
  --color-danger: #fb4934;
  --color-danger-lighter: hsl(6 96% 79%);
  --color-danger-darker: hsl(6 96% 39%);
  --color-on-danger: #000000;
  --color-danger-light: #fc7c6c;
  --color-danger-dark: #cc241d;
  --color-warning: #d79921;
  --color-warning-lighter: hsl(40 73% 69%);
  --color-warning-dark: hsl(40 73% 39%);
  --color-warning-darker: hsl(40 73% 29%);
  --color-on-warning: #000000;
  --color-warning-light: #e3b04f;
  --color-info: #83a598;
  --color-info-lighter: hsl(157 16% 78%);
  --color-info-dark: hsl(157 16% 48%);
  --color-info-darker: hsl(157 16% 38%);
  --color-on-info: #000000;
  --color-info-light: #a5bdb4;
  --color-surface: #282828;
  --color-on-surface: #ffffff;
  --color-surface-light: #3c3836;
  --color-surface-lighter: #504945;
  --color-surface-dark: #1d2021;
  --color-surface-darker: #161819;
  --color-canvas: #1d2021;
  --color-canvas-lighter: hsl(195 6% 32%);
  --color-canvas-light: hsl(195 6% 22%);
  --color-canvas-dark: hsl(195 6% 2%);
  --color-canvas-darker: hsl(195 6% 0%);
  --color-on-canvas: #ffffff;
  --color-aqua: #8ec07c;
  --color-aqua-lighter: hsl(104 35% 82%);
  --color-aqua-light: hsl(104 35% 72%);
  --color-aqua-dark: hsl(104 35% 52%);
  --color-aqua-darker: hsl(104 35% 42%);
  --color-on-aqua: #000000;
  --color-blue: #83a598;
  --color-blue-lighter: hsl(157 16% 78%);
  --color-blue-light: hsl(157 16% 68%);
  --color-blue-dark: hsl(157 16% 48%);
  --color-blue-darker: hsl(157 16% 38%);
  --color-on-blue: #000000;
  --color-purple: #d3869b;
  --color-purple-lighter: hsl(344 47% 88%);
  --color-purple-light: hsl(344 47% 78%);
  --color-purple-dark: hsl(344 47% 58%);
  --color-purple-darker: hsl(344 47% 48%);
  --color-on-purple: #000000;
  --color-grad-1: #fabd2f;
  --color-grad-1-lighter: hsl(42 95% 78%);
  --color-grad-1-light: hsl(42 95% 68%);
  --color-grad-1-dark: hsl(42 95% 48%);
  --color-grad-1-darker: hsl(42 95% 38%);
  --color-on-grad-1: #000000;
  --color-grad-2: #fe8019;
  --color-grad-2-lighter: hsl(27 99% 75%);
  --color-grad-2-light: hsl(27 99% 65%);
  --color-grad-2-dark: hsl(27 99% 45%);
  --color-grad-2-darker: hsl(27 99% 35%);
  --color-on-grad-2: #000000;
  --color-grad-3: #8ec07c;
  --color-grad-3-lighter: hsl(104 35% 82%);
  --color-grad-3-light: hsl(104 35% 72%);
  --color-grad-3-dark: hsl(104 35% 52%);
  --color-grad-3-darker: hsl(104 35% 42%);
  --color-on-grad-3: #000000;
  --color-grad-4: #83a598;
  --color-grad-4-lighter: hsl(157 16% 78%);
  --color-grad-4-light: hsl(157 16% 68%);
  --color-grad-4-dark: hsl(157 16% 48%);
  --color-grad-4-darker: hsl(157 16% 38%);
  --color-on-grad-4: #000000;
  --color-grad-5: #d3869b;
  --color-grad-5-lighter: hsl(344 47% 88%);
  --color-grad-5-light: hsl(344 47% 78%);
  --color-grad-5-dark: hsl(344 47% 58%);
  --color-grad-5-darker: hsl(344 47% 48%);
  --color-on-grad-5: #000000;
  --color-grad-6: #fb4934;
  --color-grad-6-lighter: hsl(6 96% 79%);
  --color-grad-6-light: hsl(6 96% 69%);
  --color-grad-6-dark: hsl(6 96% 49%);
  --color-grad-6-darker: hsl(6 96% 39%);
  --color-on-grad-6: #000000;
  --color-layer: rgba(235,219,178,0.06);
  --color-layer-strong: rgba(235,219,178,0.1);
  --color-hairline: #504945;
  --color-hairline-lighter: hsl(22 7% 49%);
  --color-hairline-light: hsl(22 7% 39%);
  --color-hairline-dark: hsl(22 7% 19%);
  --color-hairline-darker: hsl(22 7% 9%);
  --color-on-hairline: #ffffff;
  --color-scrim: rgba(22,24,25,0.75);
  --color-ink: #ebdbb2;
  --color-ink-lighter: hsl(43 59% 100%);
  --color-ink-light: hsl(43 59% 91%);
  --color-ink-dark: hsl(43 59% 71%);
  --color-ink-darker: hsl(43 59% 61%);
  --color-on-ink: #282828;
  --color-on-ink-lighter: hsl(0 0% 36%);
  --color-on-ink-light: hsl(0 0% 26%);
  --color-on-ink-dark: hsl(0 0% 6%);
  --color-on-ink-darker: hsl(0 0% 0%);
  --color-glass-canvas: rgba(29,32,33,0.88);
  --color-glass-nav: rgba(40,40,40,0.88);
  --color-glass-menu: rgba(40,40,40,0.97);
  --color-scroll-thumb: rgba(235,219,178,0.28);
  --color-hover: #32302f;
  --color-hover-lighter: hsl(20 3% 39%);
  --color-hover-light: hsl(20 3% 29%);
  --color-hover-dark: hsl(20 3% 9%);
  --color-hover-darker: hsl(20 3% 0%);
  --color-on-hover: #ffffff;
  --color-focus: #fabd2f;
  --color-focus-lighter: hsl(42 95% 78%);
  --color-focus-light: hsl(42 95% 68%);
  --color-focus-dark: hsl(42 95% 48%);
  --color-focus-darker: hsl(42 95% 38%);
  --color-on-focus: #000000;
  --color-focus-surface: rgba(250,189,47,0.12);
  --color-inverse: #1d2021;
  --color-on-inverse: #ffffff;
  --color-inverse-light: #3c3836;
  --color-inverse-lighter: #504945;
  --color-inverse-dark: #161819;
  --color-inverse-darker: #0d0e0f;
  --z-raised: 10;
  --z-header: 40;
  --z-nav: 1001;
  --z-overlay: 1002;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
  --spacing-2xl: 2rem;
  --spacing-3xl: 3rem;
  --spacing-4xl: 5rem;
  --radius-none: 0;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 18px 44px rgba(0, 0, 0, 0.5);
  --border-width: 1px;
  --border-color: #3c3836;
  --border-control: #504945;
  --uix-button-border-width: 0px;
  --uix-button-border-color: transparent;
  --uix-button-border-radius: 9999px;
  --uix-button-font-weight: 600;
  --uix-button-background: #3c3836;
  --uix-button-color: #ebdbb2;
  --uix-button-hover-background: #504945;
  --uix-button-primary-background: #fabd2f;
  --uix-button-primary-color: #282828;
  --uix-button-primary-hover-background: #fcd475;
  --uix-button-secondary-background: #fe8019;
  --uix-button-secondary-color: #282828;
  --uix-button-secondary-hover-background: #fea053;
  --uix-button-danger-color: #282828;
  --uix-button-success-background: #b8bb26;
  --uix-button-success-color: #282828;
  --uix-button-ghost-color: #a89984;
  --uix-button-ghost-hover-background: rgba(235, 219, 178, 0.08);
  --uix-button-outline-border-color: #504945;
  --uix-button-outline-color: #ebdbb2;
  --uix-button-quiet-background: var(--color-layer);
  --uix-button-quiet-color: var(--text-color);
  --uix-button-quiet-hover-background: var(--color-layer-strong);
  --uix-button-surface-background: var(--color-surface-light);
  --uix-button-surface-color: var(--text-color);
  --uix-button-surface-hover-background: var(--color-surface-lighter);
  --uix-button-overlay-background: var(--color-scrim);
  --uix-button-overlay-color: #ebdbb2;
  --uix-button-overlay-hover-background: var(--color-scrim);
  --uix-bottom-nav-background: var(--color-glass-nav);
  --uix-bottom-nav-backdrop: blur(16px);
  --uix-bottom-nav-icon-size: 20px;
  --uix-bottom-nav-shadow: var(--shadow-lg);
  --uix-bottom-nav-z: var(--z-nav);
  --uix-bottom-nav-item-color: var(--text-muted);
  --uix-bottom-nav-item-active-background: var(--color-layer-strong);
  --uix-bottom-nav-item-active-color: var(--color-primary);
  --uix-bottom-nav-prominent-background: var(--color-primary);
  --uix-bottom-nav-prominent-color: var(--color-on-primary);
  --uix-bottom-nav-prominent-shadow: var(--shadow-md);
  --uix-nav-item-color: var(--text-color);
  --uix-nav-item-border-radius: 9999px;
  --uix-nav-item-font-size: 1.25rem;
  --uix-nav-item-padding-y: 0.5rem;
  --uix-nav-item-padding-x: 1rem;
  --uix-nav-item-gap: 1rem;
  --uix-nav-item-hover-background: var(--color-surface);
  --uix-nav-item-active-background: var(--color-surface);
  --uix-nav-item-active-color: var(--text-color);
  --uix-card-background: #282828;
  --uix-card-border: #3c3836;
  --uix-card-border-width: 1px;
  --uix-card-border-radius: 1rem;
  --uix-card-text: #ebdbb2;
  --uix-card-text-muted: #a89984;
  --uix-card-header-background: transparent;
  --uix-card-header-border: transparent;
  --uix-card-header-padding: 0.75rem 1rem;
  --uix-card-footer-background: transparent;
  --uix-card-footer-border: transparent;
  --uix-card-footer-padding: 0.75rem 1rem;
  --uix-tag-background: #3c3836;
  --uix-tag-color: #d5c4a1;
  --uix-tag-border-radius: 9999px;
  --uix-tag-font-weight: 600;
  --uix-tag-primary-background: rgba(250,189,47,0.15);
  --uix-tag-primary-color: #fabd2f;
  --uix-tag-success-background: rgba(184,187,38,0.15);
  --uix-tag-success-color: #b8bb26;
  --uix-tag-info-background: rgba(131,165,152,0.15);
  --uix-tag-info-color: #83a598;
  --uix-badge-font-weight: 600;
  --uix-badge-border-radius: 9999px;
  --uix-badge-primary-color: #282828;
  --uix-input-background: #282828;
  --uix-input-background-focus: #282828;
  --uix-input-background-disabled: #1d2021;
  --uix-input-border-color: #504945;
  --uix-input-border-width: 1px;
  --uix-input-border-radius: 9999px;
  --uix-input-border-focus: #fabd2f;
  --uix-input-border-error: #fb4934;
  --uix-input-text: #ebdbb2;
  --uix-input-placeholder: #665c54;
  --uix-input-icon: #a89984;
  --uix-input-shadow: none;
  --uix-input-focus-shadow: 0 0 0 2px rgba(250, 189, 47, 0.15);
  --uix-label-font-size: 0.75rem;
  --uix-label-font-weight: 600;
  --uix-label-color: #a89984;
  --uix-label-letter-spacing: 0.06em;
  --uix-label-text-transform: uppercase;
  --uix-list-row-border-radius: 0.625rem;
  --uix-list-row-badge-background: #fabd2f;
  --uix-list-row-badge-color: #282828;
  --uix-list-row-padding: 0.625rem 0.75rem;
  --uix-list-row-hint-size: 0.75rem;
  --uix-segmented-track-bg: #3c3836;
  --uix-segmented-color: #a89984;
  --uix-segmented-color-hover: #ebdbb2;
  --uix-segmented-selected-bg: #fabd2f;
  --uix-segmented-selected-color: #282828;
  --uix-segmented-radius: 9999px;
  --uix-modal-background: #282828;
  --uix-modal-border-color: #3c3836;
  --uix-modal-border-radius: 1rem;
  --uix-modal-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  --uix-empty-state-icon-color: #665c54;
  --uix-textarea-border-radius: 0.625rem;
  --uix-markdown-code-background: #3c3836;
  --uix-markdown-blockquote-border: #504945;
  --uix-markdown-blockquote-border-width: 2px;
  --uix-markdown-heading-border: none;
  --uix-markdown-heading-weight: 700;
  --uix-prose-measure: 66ch;
  --uix-prose-size: 1.125rem;
  --uix-prose-leading: 1.75;
  --path: /theme.js;
  --runtime: true;
  --icon-family: lucide;
  --font-family-base: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-heading: 'Manrope', system-ui, -apple-system, sans-serif;
}
uix-button[variant="primary"] {
  --uix-button-background: var(--color-primary);
  --uix-button-color: var(--color-on-primary);
  --uix-button-hover-background: var(--color-primary-dark, var(--color-primary));
}
uix-button[variant="secondary"] {
  --uix-button-background: var(--color-secondary);
  --uix-button-color: var(--color-on-secondary);
  --uix-button-hover-background: var(--color-secondary-dark, var(--color-secondary));
}
uix-button[variant="success"] {
  --uix-button-background: var(--color-success);
  --uix-button-color: var(--color-on-success);
  --uix-button-hover-background: var(--color-success-dark, var(--color-success));
}
uix-button[variant="danger"] {
  --uix-button-background: var(--color-danger);
  --uix-button-color: var(--color-on-danger);
  --uix-button-hover-background: var(--color-danger-dark, var(--color-danger));
}
uix-button[variant="warning"] {
  --uix-button-background: var(--color-warning);
  --uix-button-color: var(--color-on-warning);
  --uix-button-hover-background: var(--color-warning-dark, var(--color-warning));
}
uix-button[variant="info"] {
  --uix-button-background: var(--color-info);
  --uix-button-color: var(--color-on-info);
  --uix-button-hover-background: var(--color-info-dark, var(--color-info));
}
uix-button[variant="surface"] {
  --uix-button-background: var(--color-surface);
  --uix-button-color: var(--color-on-surface);
  --uix-button-hover-background: var(--color-surface-dark, var(--color-surface));
}
uix-button[variant="canvas"] {
  --uix-button-background: var(--color-canvas);
  --uix-button-color: var(--color-on-canvas);
  --uix-button-hover-background: var(--color-canvas-dark, var(--color-canvas));
}
uix-button[variant="aqua"] {
  --uix-button-background: var(--color-aqua);
  --uix-button-color: var(--color-on-aqua);
  --uix-button-hover-background: var(--color-aqua-dark, var(--color-aqua));
}
uix-button[variant="blue"] {
  --uix-button-background: var(--color-blue);
  --uix-button-color: var(--color-on-blue);
  --uix-button-hover-background: var(--color-blue-dark, var(--color-blue));
}
uix-button[variant="purple"] {
  --uix-button-background: var(--color-purple);
  --uix-button-color: var(--color-on-purple);
  --uix-button-hover-background: var(--color-purple-dark, var(--color-purple));
}
uix-button[variant="grad-1"] {
  --uix-button-background: var(--color-grad-1);
  --uix-button-color: var(--color-on-grad-1);
  --uix-button-hover-background: var(--color-grad-1-dark, var(--color-grad-1));
}
uix-button[variant="grad-2"] {
  --uix-button-background: var(--color-grad-2);
  --uix-button-color: var(--color-on-grad-2);
  --uix-button-hover-background: var(--color-grad-2-dark, var(--color-grad-2));
}
uix-button[variant="grad-3"] {
  --uix-button-background: var(--color-grad-3);
  --uix-button-color: var(--color-on-grad-3);
  --uix-button-hover-background: var(--color-grad-3-dark, var(--color-grad-3));
}
uix-button[variant="grad-4"] {
  --uix-button-background: var(--color-grad-4);
  --uix-button-color: var(--color-on-grad-4);
  --uix-button-hover-background: var(--color-grad-4-dark, var(--color-grad-4));
}
uix-button[variant="grad-5"] {
  --uix-button-background: var(--color-grad-5);
  --uix-button-color: var(--color-on-grad-5);
  --uix-button-hover-background: var(--color-grad-5-dark, var(--color-grad-5));
}
uix-button[variant="grad-6"] {
  --uix-button-background: var(--color-grad-6);
  --uix-button-color: var(--color-on-grad-6);
  --uix-button-hover-background: var(--color-grad-6-dark, var(--color-grad-6));
}
uix-button[variant="hairline"] {
  --uix-button-background: var(--color-hairline);
  --uix-button-color: var(--color-on-hairline);
  --uix-button-hover-background: var(--color-hairline-dark, var(--color-hairline));
}
uix-button[variant="ink"] {
  --uix-button-background: var(--color-ink);
  --uix-button-color: var(--color-on-ink);
  --uix-button-hover-background: var(--color-ink-dark, var(--color-ink));
}
uix-button[variant="hover"] {
  --uix-button-background: var(--color-hover);
  --uix-button-color: var(--color-on-hover);
  --uix-button-hover-background: var(--color-hover-dark, var(--color-hover));
}
uix-button[variant="focus"] {
  --uix-button-background: var(--color-focus);
  --uix-button-color: var(--color-on-focus);
  --uix-button-hover-background: var(--color-focus-dark, var(--color-focus));
}
uix-button[variant="inverse"] {
  --uix-button-background: var(--color-inverse);
  --uix-button-color: var(--color-on-inverse);
  --uix-button-hover-background: var(--color-inverse-dark, var(--color-inverse));
}
uix-button[variant="hover"] {
  --uix-button-background: var(--uix-button-hover-background);
}
uix-button[variant="primary"] {
  --uix-button-background: var(--uix-button-primary-background);
  --uix-button-color: var(--uix-button-primary-color);
  --uix-button-hover-background: var(--uix-button-primary-hover-background);
}
uix-button[variant="secondary"] {
  --uix-button-background: var(--uix-button-secondary-background);
  --uix-button-color: var(--uix-button-secondary-color);
  --uix-button-hover-background: var(--uix-button-secondary-hover-background);
}
uix-button[variant="success"] {
  --uix-button-background: var(--uix-button-success-background);
  --uix-button-color: var(--uix-button-success-color);
}
uix-button[variant="quiet"] {
  --uix-button-background: var(--uix-button-quiet-background);
  --uix-button-color: var(--uix-button-quiet-color);
  --uix-button-hover-background: var(--uix-button-quiet-hover-background);
}
uix-button[variant="surface"] {
  --uix-button-background: var(--uix-button-surface-background);
  --uix-button-color: var(--uix-button-surface-color);
  --uix-button-hover-background: var(--uix-button-surface-hover-background);
}
uix-button[variant="overlay"] {
  --uix-button-background: var(--uix-button-overlay-background);
  --uix-button-color: var(--uix-button-overlay-color);
  --uix-button-hover-background: var(--uix-button-overlay-hover-background);
}

/* Bundled font: Manrope */
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/manrope-400-0102.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/manrope-400-0100.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/manrope-400-0000.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/manrope-400-0102.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/manrope-400-0100.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/manrope-400-0000.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/manrope-400-0102.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/manrope-400-0100.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/manrope-400-0000.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/manrope-400-0102.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/manrope-400-0100.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/manrope-400-0000.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* /app/theme/theme.css */
html,
body {
  font-family: var(--font-family-base);
  background-color: var(--background-color);
  color: var(--text-color);
  width: 100%;
  min-height: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

*::selection {
  background: color-mix(in srgb, var(--color-primary) 60%, transparent);
  color: #ffffff;
}
*::-moz-selection {
  background: color-mix(in srgb, var(--color-primary) 60%, transparent);
  color: #ffffff;
}
*::-webkit-selection {
  background: color-mix(in srgb, var(--color-primary) 60%, transparent);
  color: #ffffff;
}

a,
::part(anchor) {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

html {
  font-size: var(--font-size, 16px);
}
@media (max-width: 768px) {
  html {
    font-size: 18px;
  }
}
@media (max-width: 480px) {
  html {
    font-size: 20px;
  }
}

textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
:root {
  box-sizing: border-box;
  text-size-adjust: none;
  line-height: 1.2;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--border-color, currentColor);
}
* {
  margin: 0;
}
body {
  font-family: var(--font-family-base);
}
button,
textarea,
select {
  background-color: inherit;
  border-width: 0;
  color: inherit;
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
:where(input, button, textarea, select) {
  font: inherit;
  background: inherit;
  border: inherit;
}
p {
  font-family: var(--font-family-base);
  overflow-wrap: break-word;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading, var(--font-family-base));
  overflow-wrap: break-word;
}
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(121, 121, 121, 0.4);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 100, 100, 0.7);
}

::-webkit-scrollbar-thumb:active {
  background: rgba(85, 85, 85, 0.8);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(121, 121, 121, 0.4) transparent;
}

[direction="horizontal"] {
  --flex-direction: row;
  flex-direction: row;
}

[direction="vertical"] {
  --flex-direction: column;
  flex-direction: column;
}

[cursor-pointer] {
  cursor: pointer;
}

[w-full] {
  width: 100%;
}

[h-full] {
  height: 100%;
}

[min-h-0] {
  min-height: 0;
}

[min-w-0] {
  min-width: 0;
}

[flex] {
  display: flex;
}

[flex-col] {
  flex-direction: column;
}

[flex-1] {
  flex: 1;
}

[flex-grow] {
  flex-grow: 1;
}
[flex-shrink-0] {
  flex-shrink: 0;
}

body:not(.production) {
  *:not(:defined) {
    display: block;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    border: 1px solid red;
  }
}

@view-transition {
  navigation: auto;
}


/* Component CSS (23 files) */
:where(.github-comments, github-comments) {
  display: block;

  .comments-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: var(--github-comments-background, var(--color-surface, #1d2021));
    border: var(--github-comments-border-width, 2px) solid
      var(--github-comments-border-color, var(--color-surface-light, #3c3836));
    border-radius: var(--github-comments-border-radius, var(--radius-lg, 0.5rem));
    padding: var(--github-comments-padding, 1.5rem);
  }

  .comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .comments-title {
    font-size: var(--text-2xl, 1.5rem);
    font-weight: var(--font-semibold, 600);
    margin: 0;
    color: var(--color-text-default, inherit);
  }

  .user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .user-name {
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-muted, #928374);
  }

  .comment-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .error-note {
    color: var(--color-error, #fb4934);
    font-size: var(--text-sm, 0.875rem);
  }

  .rate-limited-note {
    display: block;
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-muted, #928374);
    text-decoration: underline;

    &:hover {
      color: var(--color-primary, currentColor);
    }
  }

  .connect-note {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-muted, #928374);
  }

  .comments-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .comment {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }

  .comment-content {
    flex-grow: 1;
    min-width: 0;
  }

  .comment-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
  }

  .comment-author {
    font-weight: var(--font-bold, 700);
    color: var(--color-text-default, inherit);
    text-decoration: none;

    &:hover {
      color: var(--color-primary, currentColor);
    }
  }

  .comment-date {
    font-size: var(--text-xs, 0.75rem);
    color: var(--text-muted, #928374);
  }

  .comment-body {
    background: var(--github-comments-body-background, var(--color-surface-dark, #1d2021));
    border: var(--border-width, 1px) solid
      var(--github-comments-border-color, var(--color-surface-light, #3c3836));
    border-radius: var(--github-comments-body-border-radius, var(--radius-md, 0.5rem));
    padding: 0.75rem;
    overflow-wrap: break-word;
    --uix-markdown-size: var(--github-comments-body-size, var(--text-sm, 0.875rem));
    --uix-markdown-leading: var(--github-comments-body-leading, 1.6);
  }
}


:where(.uix-avatar, uix-avatar) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--uix-avatar-size, 2.5rem);
  height: var(--uix-avatar-size, 2.5rem);
  border-radius: var(--uix-avatar-radius, 50%);
  background-color: var(--uix-avatar-ring-color, white);
  color: var(--uix-avatar-color, var(--text-muted, #6b7280));
  border: var(--uix-avatar-border, 2px solid #d1d5db);
  box-shadow: var(--uix-avatar-shadow, var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.1)));
  padding: var(--uix-avatar-ring, 0px);
  overflow: visible;
  flex-shrink: 0;

  &[size="xs"] {
    --uix-avatar-size: 1.5rem;
    --uix-avatar-status-size: 0.5rem;
  }

  &[size="sm"] {
    --uix-avatar-size: 2rem;
    --uix-avatar-status-size: 0.625rem;
  }

  &[size="md"] {
    --uix-avatar-size: 2.5rem;
    --uix-avatar-status-size: 0.75rem;
  }

  &[size="lg"] {
    --uix-avatar-size: 3.5rem;
    --uix-avatar-status-size: 1rem;
  }

  &[size="xl"] {
    --uix-avatar-size: 5rem;
    --uix-avatar-status-size: 1.25rem;
  }

  &[shape="circle"] {
    --uix-avatar-radius: 50%;
  }

  &[shape="square"] {
    --uix-avatar-radius: 0;
  }

  &[shape="rounded"] {
    --uix-avatar-radius: var(--radius-md, 0.375rem);
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
  }

  .initials {
    font-size: calc(var(--uix-avatar-size, 2.5rem) / 2.5);
    font-weight: var(--uix-avatar-initials-weight, var(--font-semibold, 600));
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
  }

  uix-icon {
    font-size: calc(var(--uix-avatar-size, 2.5rem) / 1.8);
  }

  .status {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(25%, 25%);
    width: var(--uix-avatar-status-size, 0.75rem);
    height: var(--uix-avatar-status-size, 0.75rem);
    border-radius: 50%;
    border: 2px solid var(--color-surface, #fff);
    box-sizing: border-box;
  }

  .status--online {
    background-color: var(--color-success, #22c55e);
  }

  .status--offline {
    background-color: var(--color-muted, #9ca3af);
  }

  .status--busy {
    background-color: var(--color-danger, #ef4444);
  }

  .status--away {
    background-color: var(--color-warning, #f59e0b);
  }
}


:where(.uix-badge, uix-badge) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: fit-content;
  box-sizing: border-box;

  font-weight: var(--uix-badge-font-weight, var(--font-semibold, 600));
  font-size: var(--uix-badge-font-size, var(--text-xs, 0.75rem));
  line-height: var(--uix-badge-line-height, 1rem);
  text-transform: var(--uix-badge-text-transform, none);
  padding: var(--uix-badge-padding-y, 0.15rem)
    var(--uix-badge-padding-x, 0.5rem);

  border-radius: var(--uix-badge-border-radius, var(--radius-md, 0.375rem));

  border: var(--uix-badge-border-width, 0) solid
    var(--uix-badge-border-color, var(--uix-badge-variant-border-color, transparent));

  /*
   * The variant blocks below sit on the host, so a theme setting
   * `--uix-badge-background` on :root loses to them for every badge that has a
   * variant, which is all of them, since it defaults to "default". They set a
   * fallback instead, and an explicit value wins.
   */
  background-color: var(--uix-badge-background, var(--uix-badge-variant-background));
  color: var(--uix-badge-color, var(--uix-badge-variant-color));

  &[variant="default"] {
    --uix-badge-variant-background: var(--color-surface-dark);
    --uix-badge-variant-color: var(--color-text-default);
    --uix-badge-variant-border-color: var(--color-surface-lighter);
  }

  /* The app's accent, the same idea as uix-button's primary. */
  &[primary],
  &[variant="primary"] {
    --uix-badge-variant-background: var(--color-primary);
    --uix-badge-variant-color: var(--uix-badge-primary-color, var(--color-on-primary, #ffffff));
    --uix-badge-variant-border-color: var(--color-primary-light);
  }

  &[success],
  &[variant="success"] {
    --uix-badge-variant-background: var(--color-success);
    --uix-badge-variant-color: var(--color-inverse);
    --uix-badge-variant-border-color: var(--color-success-light);
  }

  &[danger],
  &[variant="danger"] {
    --uix-badge-variant-background: var(--color-danger);
    --uix-badge-variant-color: var(--color-inverse);
    --uix-badge-variant-border-color: var(--color-danger-light);
  }

  &[warning],
  &[variant="warning"] {
    --uix-badge-variant-background: var(--color-warning);
    --uix-badge-variant-color: var(--color-inverse);
    --uix-badge-variant-border-color: var(--color-warning-light);
  }

  &[info],
  &[variant="info"] {
    --uix-badge-variant-background: var(--color-info);
    --uix-badge-variant-color: var(--color-inverse);
    --uix-badge-variant-border-color: var(--color-info-light);
  }

  &[outline] {
    background-color: transparent;

    &[variant="default"] {
      --uix-badge-border-color: var(--color-surface-dark);
      --uix-badge-color: var(--color-surface-darker);
    }

    &[variant="success"] {
      --uix-badge-border-color: var(--color-success-dark);
      --uix-badge-color: var(--color-success-dark);
    }

    &[variant="danger"] {
      --uix-badge-border-color: var(--color-danger-dark);
      --uix-badge-color: var(--color-danger-dark);
    }

    &[variant="warning"] {
      --uix-badge-border-color: var(--color-warning-dark);
      --uix-badge-color: var(--color-warning-dark);
    }

    &[variant="info"] {
      --uix-badge-border-color: var(--color-info-dark);
      --uix-badge-color: var(--color-info-dark);
    }
  }

  &[soft] {
    border: 1px solid transparent;

    &[variant="success"] {
      background-color: color-mix(
        in srgb,
        var(--color-success),
        transparent 85%
      );
      color: var(--color-success-darker);
    }

    &[variant="danger"] {
      background-color: color-mix(in srgb, var(--color-danger), transparent 85%);
      color: var(--color-danger-darker);
    }

    &[variant="warning"] {
      background-color: color-mix(
        in srgb,
        var(--color-warning),
        transparent 85%
      );
      color: var(--color-warning-darker);
    }

    &[variant="info"] {
      background-color: color-mix(in srgb, var(--color-info), transparent 85%);
      color: var(--color-info-darker);
    }
  }

  &[size="xs"] {
    --uix-badge-padding-y: 0.0625rem;
    --uix-badge-padding-x: 0.25rem;
    --uix-badge-font-size: var(--text-xs, 0.65rem);
  }

  &[size="sm"] {
    --uix-badge-padding-y: 0.1rem;
    --uix-badge-padding-x: 0.375rem;
    --uix-badge-font-size: var(--text-xs, 0.7rem);
  }

  &[size="md"] {
    --uix-badge-padding-y: 0.15rem;
    --uix-badge-padding-x: 0.5rem;
    --uix-badge-font-size: var(--text-xs, 0.75rem);
  }

  &[size="lg"] {
    --uix-badge-padding-y: 0.25rem;
    --uix-badge-padding-x: 0.75rem;
    --uix-badge-font-size: var(--text-sm, 0.875rem);
  }
}


:where(.uix-container, uix-container) {
  display: block;
  box-sizing: border-box;
  background: var(--uix-container-background, var(--color-surface-lighter));
  border: var(--border-width, 1px) solid var(--uix-container-border-color, var(--color-surface-dark));
  border-radius: var(--uix-container-border-radius, var(--radius-md, 0.375rem));
  overflow: var(--uix-container-overflow, visible);

  --uix-container-padding-none: 0;
  --uix-container-padding-sm: var(--spacing-sm, 0.5rem);
  --uix-container-padding-md: var(--spacing-md, 0.75rem) var(--spacing-lg, 1rem);
  --uix-container-padding-lg: var(--spacing-lg, 1rem) var(--spacing-xl, 1.5rem);

  &[padding="none"] {
    padding: var(--uix-container-padding-none);
  }

  &[padding="sm"] {
    padding: var(--uix-container-padding-sm);
  }

  &[padding="md"] {
    padding: var(--uix-container-padding-md);
  }

  &[padding="lg"] {
    padding: var(--uix-container-padding-lg);
  }

  &[overflow="visible"] {
    --uix-container-overflow: visible;
  }

  &[overflow="hidden"] {
    --uix-container-overflow: hidden;
  }

  &[overflow="auto"] {
    --uix-container-overflow: auto;
  }

  &[overflow="scroll"] {
    --uix-container-overflow: scroll;
  }
}


/**
 * A card pads its own parts, so the host must not pad as well. uix-card extends
 * uix-container, whose host padding is set at the same specificity as anything
 * declared inside :where(): zeroing the container's variables loses to
 * whichever stylesheet happens to load last, which silently doubled the
 * padding and shrank every card's content box.
 */
uix-card[padding],
.uix-card[padding] {
  padding: 0;
}

:where(.uix-card, uix-card) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  --uix-container-background: var(--uix-card-background, var(--color-surface));
  --uix-container-border-color: var(--uix-card-border, var(--border-color));
  --uix-container-border-radius: var(
    --uix-card-border-radius,
    var(--radius-md, 0.75rem)
  );

  --uix-card-padding-xs: 0.6rem;
  --uix-card-padding-sm: 1rem;
  --uix-card-padding-md: 1.3rem;
  --uix-card-padding-lg: 1.8rem;

  &::part(body) {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  > [slot="header"] {
    margin: 0;
    display: flex;
    padding: var(--uix-card-header-padding, var(--uix-card-padding-sm));
    border-bottom-width: var(--uix-card-header-border-width, 0);
    border-bottom-style: solid;
    border-bottom-color: var(
      --uix-card-header-border-color,
      var(--border-color)
    );
    background: var(--uix-card-header-background-color, transparent);
  }

  > [slot="footer"] {
    display: flex;
    padding: var(--uix-card-footer-padding, var(--uix-card-padding-sm));
    border-top-width: var(--uix-card-footer-border-width, 0);
    border-top-style: var(--uix-card-footer-border-style, solid);
    border-top-color: var(--uix-card-footer-border-color, var(--border-color));
    background: var(--uix-card-footer-background-color, transparent);
    flex-direction: row;
    gap: var(--spacing-sm, 0.5rem);
    align-items: center;
    justify-content: var(--uix-card-footer-justify, flex-end);
  }

  &[style*="--uix-card-gradient-from"]::part(body) {
    background: linear-gradient(
      135deg,
      var(--uix-card-gradient-from),
      var(--uix-card-linear-to, var(--uix-card-gradient-from))
    );
  }

  &[padding="none"] {
    --uix-card-header-padding: 0;
    --uix-card-footer-padding: 0;
  }
  &[padding="none"]::part(body) {
    padding: 0;
  }

  &[padding="xs"] {
    --uix-card-header-padding: var(--uix-card-padding-xs);
    --uix-card-footer-padding: var(--uix-card-padding-xs);
  }
  &[padding="xs"]::part(body) {
    padding: var(--uix-card-padding-xs);
  }

  &[padding="sm"] {
    --uix-card-header-padding: var(--uix-card-padding-sm);
    --uix-card-footer-padding: var(--uix-card-padding-sm);
  }
  &[padding="sm"]::part(body) {
    padding: var(--uix-card-padding-sm);
  }

  &[padding="md"] {
    --uix-card-header-padding: var(--uix-card-padding-md);
    --uix-card-footer-padding: var(--uix-card-padding-md);
  }
  &[padding="md"]::part(body) {
    padding: var(--uix-card-padding-md);
  }

  &[padding="lg"] {
    --uix-card-header-padding: var(--uix-card-padding-lg);
    --uix-card-footer-padding: var(--uix-card-padding-lg);
  }
  &[padding="lg"]::part(body) {
    padding: var(--uix-card-padding-lg);
  }

  &[borderWidth="none"] {
    border-width: 0;
  }

  &[borderWidth="1"] {
    border-width: 1px;
  }

  &[borderWidth="2"] {
    border-width: 2px;
  }

  &[borderWidth="3"] {
    border-width: 3px;
  }

  &[borderStyle="solid"] {
    border-style: solid;
  }

  &[borderStyle="dashed"] {
    border-style: dashed;
  }

  &[borderStyle="dotted"] {
    border-style: dotted;
  }

  &[gap="none"]::part(body) {
    gap: 0;
  }

  &[gap="xs"]::part(body) {
    gap: var(--spacing-xs, 0.25rem);
  }

  &[gap="sm"]::part(body) {
    gap: var(--spacing-sm, 0.5rem);
  }

  &[gap="md"]::part(body) {
    gap: var(--spacing-md, 0.75rem);
  }

  &[gap="lg"]::part(body) {
    gap: var(--spacing-lg, 1rem);
  }

  &[gap="xl"]::part(body) {
    gap: var(--spacing-xl, 1.5rem);
  }

  &[shadow="sm"] {
    box-shadow: var(
      --uix-card-shadow,
      var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05))
    );
  }

  &[shadow="md"] {
    box-shadow: var(
      --uix-card-shadow,
      var(
        --shadow-md,
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06)
      )
    );
  }

  &[shadow="lg"] {
    box-shadow: var(
      --uix-card-shadow,
      var(
        --shadow-lg,
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05)
      )
    );
  }

  &[hover] {
    transition: all 200ms ease;
    cursor: pointer;

    &:hover {
      border-color: var(--uix-card-border-hover, var(--color-primary));
      box-shadow: var(
        --uix-card-hover-shadow,
        var(--uix-card-shadow-size, 0 0 0 0)
          var(--uix-card-border-hover, var(--color-primary))
      );
      transform: translate(
        var(--uix-card-hover-translate-x, 0),
        var(--uix-card-hover-translate-y, 0)
      );
    }

    &:active {
      box-shadow: var(--uix-card-active-shadow, none);
      transform: translate(
        var(--uix-card-active-translate-x, 0),
        var(--uix-card-active-translate-y, 0)
      );
    }
  }

  &[variant="filled"] {
    --uix-container-background: var(--color-surface-light);
    --uix-container-border-color: var(--color-surface);
  }

  &[variant="outlined"] {
    --uix-container-background: transparent;
    --uix-container-border-color: var(--color-surface);
  }

  &[variant="elevated"] {
    --uix-container-background: var(--color-surface-lighter);
    --uix-container-border-color: var(--color-surface-dark);
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.12),
      0 1px 2px rgba(0, 0, 0, 0.24);

    &:hover {
      box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.16),
        0 3px 6px rgba(0, 0, 0, 0.23);
      transition: box-shadow 0.3s ease;
    }
  }
}

/**
 * A card that is its own link fills itself with the anchor, so the whole
 * surface is the target and the parts keep laying out as they did.
 */
:where(.uix-card, uix-card)[href] {
  cursor: pointer;
}

.uix-card::part(link),
uix-card::part(link) {
  display: flex;
  flex-direction: column;
  gap: inherit;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}


:where(.uix-divider, uix-divider),
.split-pane::part(divider) {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
  width: 100%;
  height: var(--uix-divider-size, 2px);

  span {
    padding: 0 0.75rem;
    font-weight: bold;
    font-size: var(--uix-divider-font-size, 1.5rem);
  }

  &[resizable] {
    cursor: row-resize;
    height: var(--uix-divider-resize-handle, 6px);

    &[vertical] {
      cursor: col-resize;
      height: 100%;
      width: var(--uix-divider-resize-handle, 6px);
    }
  }

  &::before,
  &::after {
    content: "";
    flex-grow: 1;
    height: var(--uix-divider-size, 2px);
    background-color: var(--uix-divider-color, rgba(0, 0, 0, 0.05));
  }

  &[label] {
    padding: var(--uix-divider-padding, 1rem) 0;

    &::before,
    &::after {
      flex-grow: 1;
    }
  }

  &[vertical] {
    flex-direction: column;
    width: 1px;
    height: 100%;
    background-color: transparent;

    &::before,
    &::after {
      width: 1px;
      height: auto;
    }

    &[label] {
      padding: 0 var(--uix-divider-padding, 1rem);
    }
  }
}


:where(.uix-empty-state, uix-empty-state) {
  display: block;

  &::part(root) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--uix-empty-state-gap, 0.5rem);
    padding: var(--uix-empty-state-padding, 2rem 1rem);
    color: var(--uix-empty-state-color, var(--text-color));
    background: var(--uix-empty-state-bg, transparent);
    border: var(--uix-empty-state-border, none);
    border-radius: var(--uix-empty-state-radius, 0);
    box-shadow: var(--uix-empty-state-shadow, none);
  }

  &::part(icon) {
    color: var(--uix-empty-state-icon-color, var(--color-surface-dark, currentColor));
    opacity: 0.5;
    margin-bottom: 0.25rem;
  }

  &::part(title) {
    font-size: var(--uix-empty-state-title-size, var(--text-base, 0.95rem));
    font-weight: var(--uix-empty-state-title-weight, var(--font-semibold, 600));
  }

  &::part(description) {
    font-size: var(--uix-empty-state-desc-size, var(--text-sm, 0.85rem));
    opacity: 0.65;
    max-width: 32ch;
    line-height: 1.5;
  }

  &::part(actions) {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;

    &:empty {
      display: none;
    }
  }
}


:where(.uix-icon, uix-icon) {
  display: inline-block;
  vertical-align: middle;
  width: var(--uix-icon-size, calc(var(--spacing, 0.25rem) * 4));
  height: var(--uix-icon-size, calc(var(--spacing, 0.25rem) * 4));

  svg {
    height: inherit;
    width: inherit;
  }

  &[solid] {
    stroke: currentColor;
    fill: currentColor;
  }

  &[color="primary"] {
    color: var(--color-primary);
  }

  &[color="secondary"] {
    color: var(--color-secondary);
  }

  &[color="success"] {
    color: var(--color-success);
  }

  &[color="danger"] {
    color: var(--color-danger);
  }

  &[color="warning"] {
    color: var(--color-warning);
  }

  &[color="info"] {
    color: var(--color-info);
  }

  &[color="inverse"] {
    color: var(--color-inverse);
  }

  &[size="xs"] {
    --uix-icon-size: calc(var(--spacing, 0.25rem) * 3);
  }

  &[size="sm"] {
    --uix-icon-size: calc(var(--spacing, 0.25rem) * 4);
  }

  &[size="md"] {
    --uix-icon-size: calc(var(--spacing, 0.25rem) * 6);
  }

  &[size="lg"] {
    --uix-icon-size: calc(var(--spacing, 0.25rem) * 8);
  }

  &[size="xl"] {
    --uix-icon-size: calc(var(--spacing, 0.25rem) * 10);
  }

  &[size="2xl"] {
    --uix-icon-size: calc(var(--spacing, 0.25rem) * 14);
  }

  &[size="3xl"] {
    --uix-icon-size: calc(var(--spacing, 0.25rem) * 20);
  }

  &[size="4xl"] {
    --uix-icon-size: calc(var(--spacing, 0.25rem) * 30);
  }
}


:where(.uix-label, uix-label) {
  display: block;

  .label {
    display: block;
    font-size: var(--uix-label-font-size, var(--text-sm, 0.875rem));
    font-weight: var(--uix-label-font-weight, var(--font-semibold, 600));
    margin-bottom: var(--uix-label-margin, 0.5rem);
    color: var(--uix-label-color, var(--text-color, #1a1a1a));
    letter-spacing: var(--uix-label-letter-spacing, 0);
    text-transform: var(--uix-label-text-transform, none);
    line-height: var(--uix-label-line-height, 1.4);
    cursor: pointer;
  }

  .label-required {
    color: var(--color-danger, #ef4444);
    margin-left: 0.25rem;
  }

  &[inline] {
    display: inline;

    .label {
      display: inline;
      margin-bottom: 0;
    }
  }

  &[size="xs"] {
    --uix-label-font-size: var(--text-xs, 0.75rem);
  }

  &[size="sm"] {
    --uix-label-font-size: var(--text-sm, 0.875rem);
  }

  &[size="md"] {
    --uix-label-font-size: var(--text-base, 1rem);
  }

  &[size="lg"] {
    --uix-label-font-size: var(--text-lg, 1.125rem);
  }

  &[size="xl"] {
    --uix-label-font-size: var(--text-xl, 1.25rem);
  }
}


:where(.uix-link, uix-link) {

  display: inline-flex;
  align-items: center;
  justify-content: var(--uix-link-justify-content, center);
  width: var(--uix-link-width, auto);
  flex-direction: var(--uix-link-direction, row);
  gap: var(--uix-link-gap, var(--spacing-xs, 0.25rem));
  box-sizing: border-box;

  font-family: inherit;
  font-size: var(--uix-link-font-size, var(--text-sm, 0.875rem));
  font-weight: var(--uix-link-font-weight, var(--font-semibold, 600));
  line-height: var(--uix-link-line-height, 1.5);
  text-decoration: var(--uix-link-text-decoration, none);

  color: var(--uix-link-color, var(--text-color, inherit));
  cursor: pointer;

  &[vertical]::part(anchor) {
    display: flex;
    flex-direction: column;
  }

  &::part(anchor) {
    display: inline-flex;
    align-items: center;
    justify-content: var(--uix-link-justify-content, left);
    width: 100%;
    height: 100%;
    gap: var(--uix-link-gap, var(--spacing-xs, 0.25rem));
    flex-direction: var(--uix-link-direction, row);

    padding: var(--uix-link-padding-y, var(--spacing-sm, 0.5rem))
      var(--uix-link-padding-x, var(--spacing-md, 0.75rem));

    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-decoration: var(--uix-link-text-decoration, none);

    color: inherit;
    cursor: pointer;

    transition: var(
      --uix-link-transition,
      color 0.2s ease,
      opacity 0.2s ease,
      transform 0.1s ease
    );

    &:hover {
      color: var(--uix-link-hover-color, var(--uix-link-color));
      text-decoration: var(
        --uix-link-hover-text-decoration,
        var(--uix-link-text-decoration, none)
      );
      opacity: var(--uix-link-hover-opacity, 0.9);
    }

    &:active {
      color: var(--uix-link-active-color, var(--uix-link-color));
      transform: var(--uix-link-active-transform, scale(0.98));
    }

    &:focus-visible {
      outline: 2px solid var(--color-focus, var(--color-primary-dark, #d79921));
      outline-offset: 2px;
    }

    &:visited {
      color: var(--uix-link-visited-color, var(--uix-link-color));
    }

    &[disabled],
    &[aria-disabled="true"] {
      opacity: var(--uix-link-disabled-opacity, 0.5);
      cursor: not-allowed;
      pointer-events: none;
    }
  }

  &::part(icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--uix-link-icon-size, 1.25rem);
    height: var(--uix-link-icon-size, 1.25rem);
    color: var(--uix-link-icon-color, currentColor);
    flex-shrink: 0;
  }

  &[active][active] {
    color: var(--uix-link-current-color, var(--color-primary));
    font-weight: var(--uix-link-current-font-weight, var(--uix-link-font-weight, var(--font-semibold, 600)));
    background: var(
      --uix-link-current-background,
      color-mix(in srgb, var(--color-primary) 10%, transparent)
    );
  }

  &[underline] {
    --uix-link-text-decoration: underline;
  }

  &[underline="hover"] {
    --uix-link-text-decoration: none;
    --uix-link-hover-text-decoration: underline;
  }

  &[variant="primary"] {
    --uix-link-color: var(--color-primary);
    --uix-link-hover-color: var(--color-primary-dark);
    --uix-link-active-color: var(--color-primary-darker);
  }

  &[variant="secondary"] {
    --uix-link-color: var(--color-secondary);
    --uix-link-hover-color: var(--color-secondary-dark);
    --uix-link-active-color: var(--color-secondary-darker);
  }

  &[variant="muted"] {
    --uix-link-color: var(--text-muted);
    --uix-link-hover-color: var(--text-color);
  }

  &[size="xs"] {
    --uix-link-font-size: var(--text-xs, 0.75rem);
    --uix-link-padding-y: 0.2rem;
    --uix-link-padding-x: 0.4rem;
    --uix-link-gap: 0.125rem;
    --uix-link-icon-size: 0.75em;
  }

  &[size="sm"] {
    --uix-link-font-size: var(--text-sm, 0.875rem);
    --uix-link-padding-y: 0.25rem;
    --uix-link-padding-x: 0.5rem;
    --uix-link-gap: 0.25rem;
    --uix-link-icon-size: 0.875em;
  }

  &[size="md"] {
    --uix-link-font-size: var(--text-base, 1rem);
    --uix-link-padding-y: 0.5rem;
    --uix-link-padding-x: 0.75rem;
    --uix-link-gap: 0.375rem;
    --uix-link-icon-size: 1em;
  }

  &[size="lg"] {
    --uix-link-font-size: var(--text-lg, 1.125rem);
    --uix-link-padding-y: 0.75rem;
    --uix-link-padding-x: 1rem;
    --uix-link-gap: 0.5rem;
    --uix-link-icon-size: 1.125em;
  }

  &[size="xl"] {
    --uix-link-font-size: var(--text-xl, 1.25rem);
    --uix-link-padding-y: 1rem;
    --uix-link-padding-x: 1.25rem;
    --uix-link-gap: 0.625rem;
    --uix-link-icon-size: 1.25em;
  }

  &[compact] {
    --uix-link-padding-x: 0;
    --uix-link-padding-y: 0;
  }

  &[w-full],
  &[wfull] {
    width: 100%;
    display: flex;
  }
}


:where(.uix-button, uix-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--uix-button-width, fit-content);
  height: var(--uix-button-height, 2.5rem);
  white-space: nowrap;
  box-sizing: border-box;
  &::part(anchor) {
    border: 0;
    background: transparent;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 100%;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    padding: 0 var(--uix-button-padding-x, 1rem);
  }

  font-family: inherit;
  font-weight: var(--uix-button-font-weight, var(--font-bold, 700));
  font-size: var(--uix-button-font-size, var(--text-sm, 0.875rem));
  line-height: var(--uix-button-line-height, 1.5);
  text-align: center;
  gap: var(--uix-button-gap, 0.5rem);

  border-radius: var(--uix-button-border-radius, var(--radius-md, 0.375rem));
  border: var(--uix-button-border-width, 2px) solid
    var(--uix-button-border-color, transparent);
  --uix-button-shadow: var(--uix-button-shadow-size, 0 0 0 0)
    var(--uix-button-shadow-color, var(--uix-button-border-color, transparent));
  --uix-button-hover-shadow: var(
      --uix-button-hover-shadow-size,
      var(--uix-button-shadow-size, 0 0 0 0)
    )
    var(--uix-button-shadow-color, var(--uix-button-border-color, transparent));
  box-shadow: var(--uix-button-shadow);
  text-decoration: none;
  cursor: pointer;
  text-transform: var(--uix-button-text-transform, none);
  transition: var(
    --uix-button-transition,
    transform 0.1s ease-in-out,
    background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out,
    box-shadow 0.15s ease-in-out,
    color 0.2s ease-in-out
  );
  background: transparent;
  user-select: none;
  backdrop-filter: var(--uix-button-backdrop, none);
  -webkit-backdrop-filter: var(--uix-button-backdrop, none);
  background-color: var(--uix-button-background, var(--color-surface-lighter, #e9e6dd));
  color: var(--uix-button-color, var(--uix-button-text-color, var(--text-color, #131711)));

  &:focus-visible {
    outline: 2px solid var(--color-focus, var(--color-primary-dark));
    outline-offset: 2px;
  }

  &:not([disabled]):not([aria-disabled="true"]):hover {
    background-color: var(
      --uix-button-hover-background,
      var(--color-primary-dark)
    );
    border-color: var(
      --uix-button-hover-border-color,
      var(--uix-button-border-color, transparent)
    );
    color: var(--uix-button-hover-color, var(--uix-button-color));
    box-shadow: var(--uix-button-hover-shadow, var(--uix-button-shadow, none));
    transform: translate(
      var(--uix-button-hover-translate-x, 0),
      var(--uix-button-hover-translate-y, 0)
    );
  }

  &:not([disabled]):not([aria-disabled="true"]):active {
    background-color: var(
      --uix-button-active-background,
      var(--color-primary-darker)
    );
    box-shadow: var(--uix-button-active-shadow, var(--uix-button-shadow, none));
    transform: translate(
        var(--uix-button-active-translate-x, 0),
        var(--uix-button-active-translate-y, 0)
      )
      scale(0.97);
  }

  &:not(
      [variant],
      [primary],
      [secondary],
      [danger],
      [success],
      [warning],
      [border]
    ) {
    --uix-button-hover-background: var(--uix-button-hover-bg, var(--color-surface-light, #f2f0ea));
    --uix-button-active-background: var(--uix-button-hover-bg, var(--color-surface-light, #f2f0ea));
  }

  &[primary],
  &[variant="primary"] {
    --uix-button-background: var(--uix-button-primary-background, var(--color-primary));
    --uix-button-border-color: var(--uix-button-primary-border-color, var(--color-primary));
    --uix-button-hover-border-color: var(--uix-button-primary-hover-border-color, var(--color-primary-dark));
    --uix-button-hover-background: var(--uix-button-primary-hover-background, var(--color-primary-dark));
    --uix-button-active-background: var(--uix-button-primary-active-background, var(--color-primary-darker));
    --uix-button-color: var(
      --uix-button-primary-color,
      var(--uix-button-text-color, #fff)
    );
    color: var(--uix-button-color);
  }

  &[secondary],
  &[variant="secondary"] {
    --uix-button-background: var(--uix-button-secondary-background, var(--color-secondary));
    --uix-button-border-color: var(--uix-button-secondary-border-color, var(--color-secondary));
    --uix-button-hover-background: var(--uix-button-secondary-hover-background, var(--color-secondary-dark));
    --uix-button-hover-border-color: var(--uix-button-secondary-hover-border-color, var(--color-secondary-dark));
    --uix-button-active-background: var(--uix-button-secondary-active-background, var(--color-secondary-darker));
    --uix-button-color: var(
      --uix-button-secondary-color,
      var(--uix-button-text-color, #fff)
    );
    color: var(--uix-button-color);
  }

  &[danger],
  &[variant="danger"] {
    --uix-button-background: var(--uix-button-danger-background, var(--color-danger));
    --uix-button-border-color: var(--uix-button-danger-border-color, var(--color-danger));
    --uix-button-hover-border-color: var(--uix-button-danger-hover-border-color, var(--color-danger-dark));
    --uix-button-hover-background: var(--uix-button-danger-hover-background, var(--color-danger-dark));
    --uix-button-active-background: var(--uix-button-danger-active-background, var(--color-danger-darker));
    --uix-button-color: var(
      --uix-button-danger-color,
      var(--uix-button-text-color, #fff)
    );
    color: var(--uix-button-color);
  }

  &[success],
  &[variant="success"] {
    --uix-button-background: var(--uix-button-success-background, var(--color-success));
    --uix-button-border-color: var(--uix-button-success-border-color, var(--color-success));
    --uix-button-hover-border-color: var(--uix-button-success-hover-border-color, var(--color-success-dark));
    --uix-button-hover-background: var(--uix-button-success-hover-background, var(--color-success-dark));
    --uix-button-active-background: var(--uix-button-success-active-background, var(--color-success-darker));
    --uix-button-color: var(
      --uix-button-success-color,
      var(--uix-button-text-color, #fff)
    );
    color: var(--uix-button-color);
  }

  &[warning],
  &[variant="warning"] {
    --uix-button-background: var(--uix-button-warning-background, var(--color-warning));
    --uix-button-border-color: var(--uix-button-warning-border-color, var(--color-warning));
    --uix-button-hover-border-color: var(--uix-button-warning-hover-border-color, var(--color-warning-dark));
    --uix-button-hover-background: var(--uix-button-warning-hover-background, var(--color-warning-dark));
    --uix-button-active-background: var(--uix-button-warning-active-background, var(--color-warning-darker));
    --uix-button-color: var(
      --uix-button-warning-color,
      var(--uix-button-text-color, #fff)
    );
    color: var(--uix-button-color);
  }

  &[outline] {
    color: var(--text-color);
    --uix-button-background: transparent;
    --uix-button-border-width: 2px;
    --uix-button-border-color: var(--color-border, #d5d0c4);
    --uix-button-hover-color: var(--color-inverse);

    &[primary],
    &[variant="primary"] {
      --uix-button-border-color: var(--color-primary);
      --uix-button-hover-background: var(--color-primary);
      --uix-button-hover-border-color: var(--color-primary);
    }

    &[secondary],
    &[variant="secondary"] {
      --uix-button-border-color: var(--color-secondary);
      --uix-button-hover-background: var(--color-secondary);
      --uix-button-hover-border-color: var(--color-secondary);
    }

    &[danger],
    &[variant="danger"] {
      --uix-button-border-color: var(--color-danger);
      --uix-button-hover-background: var(--color-danger);
      --uix-button-hover-border-color: var(--color-danger);
    }

    &[success],
    &[variant="success"] {
      --uix-button-border-color: var(--color-success);
      --uix-button-hover-background: var(--color-success);
      --uix-button-hover-border-color: var(--color-success);
    }

    &[warning],
    &[variant="warning"] {
      --uix-button-border-color: var(--color-warning);
      --uix-button-hover-background: var(--color-warning);
      --uix-button-hover-border-color: var(--color-warning);
    }
  }

  &[border] {
    --uix-button-background: var(--color-surface);
    --uix-button-color: var(--text-color);
    --uix-button-border-color: var(--border-color, #404040);
    --uix-button-hover-background: var(--color-surface-light);
    --uix-button-active-background: var(--color-surface-lighter);
  }

  /*
   * The theme's ghost-color and ghost-hover-background reach these; a bare
   * `color: var(--text-color)` here outranks the base rule and silences them.
   */
  &[ghost],
  &[variant="ghost"] {
    color: var(--uix-button-ghost-color, var(--text-color));
    --uix-button-background: transparent;
    --uix-button-border-color: transparent;
    --uix-button-shadow: none;
    --uix-button-hover-shadow: none;
    --uix-button-active-shadow: none;
    --uix-button-hover-translate-x: 0;
    --uix-button-hover-translate-y: 0;
    --uix-button-active-translate-x: 0;
    --uix-button-active-translate-y: 0;
    --uix-button-hover-background: var(--uix-button-ghost-hover-background, var(--color-surface-dark));
    --uix-button-hover-color: var(--uix-button-ghost-hover-color, var(--uix-button-ghost-color, var(--text-color)));

    &[primary],
    &[variant="primary"] {
      --uix-button-hover-background: color-mix(
        in srgb,
        var(--color-primary),
        transparent 85%
      );
    }

    &[secondary],
    &[variant="secondary"] {
      --uix-button-hover-background: color-mix(
        in srgb,
        var(--color-secondary),
        transparent 85%
      );
    }

    &[danger],
    &[variant="danger"] {
      --uix-button-hover-background: color-mix(
        in srgb,
        var(--color-danger),
        transparent 85%
      );
    }

    &[success],
    &[variant="success"] {
      --uix-button-hover-background: color-mix(
        in srgb,
        var(--color-success),
        transparent 85%
      );
    }

    &[warning],
    &[variant="warning"] {
      --uix-button-hover-background: color-mix(
        in srgb,
        var(--color-warning),
        transparent 85%
      );
    }
  }

  &[selected] {
    --uix-button-background: var(--uix-button-selected-background, var(--color-primary));
    --uix-button-color: var(--uix-button-selected-color, #fff);
    --uix-button-border-color: var(--uix-button-selected-border-color, var(--color-primary));
    --uix-button-hover-background: var(--uix-button-selected-hover-background, var(--color-primary-dark));
  }

  &[glass] {
    --uix-button-border-radius: var(--uix-button-glass-border-radius, 9999px);
    --uix-button-border-width: var(--uix-button-glass-border-width, 1px);
    --uix-button-border-color: var(--uix-button-glass-border-color, rgba(0, 0, 0, 0.1));
    --uix-button-background: var(--uix-button-glass-background, rgba(255, 255, 255, 0.85));
    --uix-button-color: var(--uix-button-glass-color, var(--text-color));
    --uix-button-shadow: var(--uix-button-glass-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
    --uix-button-hover-shadow: var(--uix-button-glass-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
    --uix-button-hover-background: var(--uix-button-glass-hover-background, rgba(255, 255, 255, 0.95));
    --uix-button-hover-translate-x: 0;
    --uix-button-hover-translate-y: 0;
    --uix-button-active-translate-x: 0;
    --uix-button-active-translate-y: 0;
    --uix-button-text-transform: none;
    backdrop-filter: var(--uix-button-glass-backdrop, blur(8px));
    -webkit-backdrop-filter: var(--uix-button-glass-backdrop, blur(8px));
  }

  :root.dark &[glass] {
    --uix-button-glass-border-color: rgba(255, 255, 255, 0.1);
    --uix-button-glass-background: rgba(30, 34, 42, 0.75);
    --uix-button-glass-color: #fff;
    --uix-button-glass-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --uix-button-glass-hover-background: rgba(30, 34, 42, 0.85);
  }

  &[flat] {
    --uix-button-shadow: none;
    --uix-button-border-color: transparent;
    --uix-button-border-width: 0;
    --uix-button-hover-shadow: none;
    --uix-button-active-shadow: none;
    --uix-button-hover-translate-x: 0;
    --uix-button-hover-translate-y: 0;
    --uix-button-active-translate-x: 0;
    --uix-button-active-translate-y: 0;
  }

  &[size="xs"] {
    --uix-button-height: 1.5rem;
    --uix-button-padding-x: 0.5rem;
    --uix-button-font-size: var(--uix-button-xs-font-size, 0.6rem);
    --uix-button-gap: 0.25rem;
  }

  &[size="sm"] {
    --uix-button-height: 2rem;
    --uix-button-padding-x: 0.8rem;
    --uix-button-font-size: var(--uix-button-sm-font-size, 0.8rem);
    --uix-button-gap: 0.375rem;
  }

  &[size="md"] {
    --uix-button-height: 2.5rem;
    --uix-button-padding-x: 1.25rem;
    --uix-button-font-size: var(--uix-button-md-font-size, 0.9rem);
    --uix-button-gap: 0.5rem;
  }

  &[size="lg"] {
    --uix-button-height: 3rem;
    --uix-button-padding-x: 1.5rem;
    --uix-button-font-size: var(--uix-button-lg-font-size, 1.1rem);
    --uix-button-gap: 0.625rem;
  }

  &[size="xl"] {
    --uix-button-height: 3.5rem;
    --uix-button-padding-x: 2rem;
    --uix-button-font-size: var(--uix-button-xl-font-size, 1.25rem);
    --uix-button-gap: 0.75rem;
  }

  &[w-full],
  &[wfull] {
    width: 100%;
    display: flex;
  }

  /* A button holding nothing but an icon is square, and round if the theme is. */
  &[icononly] {
    width: var(--uix-button-height, 2.5rem);
    aspect-ratio: 1;
  }
}

.uix-button::part(anchor),
uix-button::part(anchor) {
  padding: 0 var(--uix-button-padding-x, 1rem);
  width: 100%;
  box-sizing: border-box;
}

/*
 * Real specificity rather than `:where()`: uix authors at zero specificity, so
 * a zero-specificity override is settled by bundle order and can differ between
 * dev and prod.
 */
.uix-button[icononly]::part(anchor),
uix-button[icononly]::part(anchor) {
  padding: 0;
  justify-content: center;
}

.uix-button,
uix-button {
  border: var(--uix-button-border-width, 0) solid var(--uix-button-border-color, transparent);
}


:where(.uix-link-preview, uix-link-preview) {
  display: block;

  .link-preview {
    display: flex;
    align-items: stretch;
    width: 100%;
    color: inherit;
    text-decoration: none;
  }

  .link-preview-thumb {
    flex-shrink: 0;
    width: var(--uix-link-preview-thumb-width, 8rem);
    min-height: var(--uix-link-preview-thumb-height, 5.5rem);
    object-fit: cover;
    background: var(--uix-link-preview-thumb-background, var(--color-surface-light));
  }

  .link-preview-body {
    display: flex;
    flex-direction: column;
    gap: var(--uix-link-preview-gap, 0.25rem);
    min-width: 0;
    flex: 1 1 auto;
    padding: var(--uix-link-preview-padding, 0.75rem 1rem);
  }

  .link-preview-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--uix-link-preview-title-size, var(--text-sm, 0.875rem));
    font-weight: var(--uix-link-preview-title-weight, 600);
    color: var(--uix-link-preview-title-color, var(--text-color));
  }

  .link-preview-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--uix-link-preview-clamp, 2);
    overflow: hidden;
    font-size: var(--uix-link-preview-description-size, var(--text-xs, 0.75rem));
    color: var(--uix-link-preview-description-color, var(--text-muted));
  }

  .link-preview-domain {
    display: flex;
    align-items: center;
    gap: var(--uix-link-preview-domain-gap, 0.375rem);
    margin-top: auto;
    font-size: var(--uix-link-preview-domain-size, var(--text-xs, 0.6875rem));
    font-weight: var(--uix-link-preview-domain-weight, 500);
    color: var(--uix-link-preview-domain-color, var(--text-muted));
  }

  .link-preview-favicon {
    flex-shrink: 0;
    width: var(--uix-link-preview-favicon-size, 0.875rem);
    height: var(--uix-link-preview-favicon-size, 0.875rem);
    border-radius: var(--radius-sm, 0.25rem);
    object-fit: contain;
  }
}


:where(.uix-list-row, uix-list-row) {
  display: block;

  &::part(row) {
    display: flex;
    align-items: center;
    gap: var(--uix-list-row-gap, 0.75rem);
    width: 100%;
    box-sizing: border-box;
    padding: var(--uix-list-row-padding, 0.75rem 0.875rem);
    background: var(--uix-list-row-background, var(--color-surface));
    color: var(--uix-list-row-color, var(--text-color));
    border: var(--uix-list-row-border-width, 0) solid
      var(--uix-list-row-border-color, transparent);
    border-radius: var(--uix-list-row-border-radius, var(--radius-lg, 1rem));
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--uix-list-row-transition, 120ms ease);
  }

  &::part(row):hover {
    background: var(--uix-list-row-hover-background, var(--color-hover, var(--color-surface-light)));
  }

  &::part(row):focus-visible {
    outline: 2px solid var(--color-focus, var(--color-primary));
    outline-offset: 2px;
  }

  &::part(badge) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--uix-list-row-badge-size, 2.5rem);
    height: var(--uix-list-row-badge-size, 2.5rem);
    border-radius: var(--uix-list-row-badge-radius, 999px);
    background: var(--uix-list-row-badge-background, var(--color-surface-lighter));
    color: var(--uix-list-row-badge-color, inherit);
  }

  /*
   * The only part allowed to shrink, so a long label truncates instead of
   * pushing what is on the right off the row.
   */
  &::part(text) {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
  }

  &::part(label) {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--uix-list-row-label-size, 0.875rem);
    font-weight: var(--uix-list-row-label-weight, 600);
  }

  &::part(hint) {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0.125rem;
    font-size: var(--uix-list-row-hint-size, 0.6875rem);
    font-weight: var(--uix-list-row-hint-weight, 500);
    color: var(--uix-list-row-hint-color, var(--text-muted));
  }

  &::part(meta) {
    flex-shrink: 0;
    font-size: var(--uix-list-row-meta-size, 0.6875rem);
    font-weight: var(--uix-list-row-meta-weight, 600);
    color: var(--uix-list-row-meta-color, var(--text-muted));
  }

  &::part(chevron) {
    flex-shrink: 0;
    color: var(--uix-list-row-chevron-color, var(--text-muted));
  }

  &[size="sm"]::part(row) {
    padding: var(--uix-list-row-padding-sm, 0.5rem 0.75rem);
  }

  &[size="lg"]::part(row) {
    padding: var(--uix-list-row-padding-lg, 1rem 1.125rem);
  }

  &[flat]::part(row) {
    background: transparent;
  }

  &[disabled]::part(row) {
    opacity: var(--uix-list-row-disabled-opacity, 0.45);
    cursor: not-allowed;
  }
}


:where(.uix-markdown, uix-markdown) {
  display: block;
  font-size: var(--uix-markdown-size, var(--text-base, 1rem));
  line-height: var(--uix-markdown-leading, var(--leading-relaxed, 1.75));
  color: var(--uix-markdown-color, var(--color-text-default));

  & > :first-child {
    margin-top: 0;
  }

  & > :last-child {
    margin-bottom: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--uix-markdown-heading-font, var(--font-heading, inherit));
    font-weight: var(--uix-markdown-heading-weight, var(--font-semibold, 600));
    margin-top: var(--uix-markdown-heading-space, 1.5em);
    margin-bottom: 0.5em;
    line-height: var(--uix-markdown-heading-leading, 1.3);
  }

  h1 {
    font-size: var(--uix-markdown-h1-size, 1.75em);
    padding-bottom: 0.2em;
    border-bottom: var(--uix-markdown-heading-border, 1px solid var(--border-color));
  }

  h2 {
    font-size: var(--uix-markdown-h2-size, 1.4em);
    padding-bottom: 0.15em;
    border-bottom: var(--uix-markdown-heading-border, 1px solid var(--border-color));
  }

  h3 {
    font-size: var(--uix-markdown-h3-size, 1.2em);
  }

  h4 {
    font-size: 1.05em;
  }

  h5 {
    font-size: 1em;
  }

  h6 {
    font-size: 0.9em;
    color: var(--text-muted);
  }

  p {
    margin-bottom: var(--uix-markdown-block-space, 1em);
  }

  a {
    font-weight: var(--uix-markdown-link-weight, var(--font-medium, 500));
    text-decoration: none;
    color: var(--uix-markdown-link-color, var(--color-primary));

    &:hover {
      text-decoration: underline;
    }
  }

  ul,
  ol {
    margin: 0 0 var(--uix-markdown-block-space, 1em);
    padding-left: 2em;
  }

  ul {
    list-style-type: disc;
  }

  ul ul {
    list-style-type: circle;
  }

  ul ul ul {
    list-style-type: square;
  }

  ol {
    list-style-type: decimal;
  }

  li {
    margin-bottom: 0.25em;
  }

  li > ul,
  li > ol {
    margin-top: 0.25em;
    margin-bottom: 0;
  }

  li:has(> input[type="checkbox"]) {
    list-style: none;
    margin-left: -1.5em;
  }

  input[type="checkbox"] {
    margin-right: 0.5em;
    accent-color: var(--color-primary);
  }

  hr {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin-block: 1.5em;
  }

  blockquote {
    margin: 0 0 var(--uix-markdown-block-space, 1em);
    padding: 0.25em 1em;
    border-left: var(--uix-markdown-blockquote-border-width, 3px) solid
      var(--uix-markdown-blockquote-border, var(--color-primary));
    color: var(--uix-markdown-blockquote-color, var(--text-muted));

    & > :last-child {
      margin-bottom: 0;
    }
  }

  code {
    background-color: var(--uix-markdown-code-background, var(--color-surface-light, rgba(255, 255, 255, 0.06)));
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.875em;
  }

  pre {
    background-color: var(--uix-markdown-pre-background, var(--color-surface-dark, #1e1e1e));
    border: 1px solid var(--border-color);
    padding: 1em 1.25em;
    margin-block: 1em;
    border-radius: 6px;
    overflow-x: auto;
    white-space: pre-wrap;

    code {
      background-color: transparent;
      padding: 0;
      margin: 0;
      font-size: 0.875em;
      line-height: 1.6;
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0 1.5em;
    font-size: 0.9em;
  }

  th,
  td {
    border: 1px solid var(--border-color);
    padding: 0.6em 1em;
    text-align: left;
  }

  thead th {
    font-weight: 600;
    background-color: var(--color-surface-light, rgba(255, 255, 255, 0.04));
  }

  tbody tr:nth-child(even) {
    background-color: var(--color-surface-light, rgba(255, 255, 255, 0.02));
  }

  img {
    max-width: 100%;
    border-radius: 6px;
  }

  strong {
    font-weight: 600;
  }

  del {
    color: var(--text-muted);
  }

  .wiki-link {
    color: var(--color-primary);
    cursor: pointer;
    border-bottom: 1px dashed var(--color-primary);
    text-decoration: none;
    padding: 0 2px;

    &:hover {
      border-bottom-style: solid;
    }
  }
}


:where(.uix-modal, uix-modal) {
  display: inline-block;

  &::part(dialog) {
    background: var(--uix-modal-background, var(--color-surface, #ffffff));
    border: var(--uix-modal-border-width, var(--border-width, 1px)) solid
      var(--uix-modal-border-color, var(--color-surface-darker));
    border-radius: var(--uix-modal-border-radius, var(--radius-lg, 0.75rem));
    box-shadow: var(--uix-modal-shadow, var(--shadow-xl, 0 25px 50px -12px rgb(0 0 0 / 0.25)));
    padding: 0;
    width: var(--uix-modal-width, 90vw);
    max-width: var(--uix-modal-max-width, 600px);
    color: var(--uix-modal-color, var(--text-color));

    &::backdrop {
      background: var(--uix-modal-overlay, rgba(0, 0, 0, 0.5));
      backdrop-filter: blur(2px);
    }
  }

  &[size="sm"] {
    --uix-modal-max-width: 400px;
  }
  &[size="md"] {
    --uix-modal-max-width: 600px;
  }
  &[size="lg"] {
    --uix-modal-max-width: 800px;
  }
  &[size="xl"] {
    --uix-modal-max-width: 1000px;
  }

  @media (max-width: 639px) {
    &::part(dialog) {
      width: 100%;
      max-width: 100%;
      height: 100%;
      max-height: 100%;
      margin: 0;
      border-radius: 0;
      border: none;
      box-shadow: none;
    }

    &::part(body) {
      max-height: none;
      flex: 1;
      overflow-y: auto;
    }
  }

  &::part(header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--uix-modal-header-padding, 1.25rem 1.5rem);
    border-bottom: var(--uix-modal-header-border-width, var(--border-width, 1px)) solid
      var(--uix-modal-border-color, var(--color-surface-dark));
    background: var(--uix-modal-header-background, transparent);
    font-size: var(--uix-modal-header-font-size, var(--text-lg, 1.125rem));
    font-weight: var(--uix-modal-header-font-weight, var(--font-bold, 700));
    color: var(--uix-modal-header-color, var(--text-color));

    &:empty {
      display: none;
    }
  }

  &::part(close-button) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--uix-modal-close-color, var(--text-color));
    cursor: pointer;
    border-radius: 0.375rem;
    transition:
      background-color 0.15s,
      color 0.15s;
    flex-shrink: 0;

    &:hover {
      background: var(--uix-modal-close-hover-background-color, var(--color-surface-light, #f3f4f6));
      color: var(--uix-modal-close-hover-color, var(--text-color));
    }
  }

  &::part(body) {
    padding: var(--uix-modal-body-padding, 1.5rem);
    color: var(--uix-modal-body-color, var(--text-color));
    font-size: var(--text-base, 1rem);
    line-height: 1.5;
    overflow-y: auto;
    max-height: 60vh;
  }

  &::part(footer),
  [slot="footer"] {
    padding: var(--uix-modal-footer-padding, 1rem 1.5rem);
    border-top: var(--uix-modal-footer-border-width, var(--border-width, 1px)) solid
      var(--uix-modal-border-color, var(--color-surface-darker));
    background: var(--uix-modal-footer-background, var(--color-surface-light, #f9fafb));

    &:empty {
      display: none;
    }
  }

  &::part(caption) {
    padding: var(--uix-modal-caption-padding, 1rem 1.5rem);
    text-align: center;
    font-size: var(--uix-modal-caption-size, var(--text-xs, 0.75rem));
    font-weight: var(--uix-modal-caption-weight, 600);
    color: var(--uix-modal-caption-color, var(--text-muted));
  }

  /* The content is the screen: a dark wash, no dialog chrome, nothing cropped. */
  &[variant="media"] {
    /* Only once it is up: an unconditional `display` would beat the UA's `dialog:not([open])`. */
    &::part(dialog):modal {
      display: flex;
      flex-direction: column;
    }

    &::part(dialog) {
      width: 100vw;
      max-width: 100vw;
      height: 100dvh;
      max-height: 100dvh;
      margin: 0;
      border: none;
      border-radius: 0;
      box-shadow: none;
      background: var(--uix-modal-media-background, rgba(0, 0, 0, 0.92));
      color: var(--uix-modal-media-color, #ffffff);

      &::backdrop {
        background: var(--uix-modal-media-background, rgba(0, 0, 0, 0.92));
      }
    }

    &::part(header) {
      padding: var(--uix-modal-media-header-padding, 1rem);
      padding-top: calc(1rem + env(safe-area-inset-top, 0px));
      border-bottom: none;
      background: transparent;
    }

    /* A slot with nothing in it is not a flex item, so the close needs its own push. */
    &::part(close-button) {
      margin-left: auto;
      width: var(--uix-modal-media-button-size, 2.5rem);
      height: var(--uix-modal-media-button-size, 2.5rem);
      border-radius: 999px;
      background: var(--uix-modal-media-button-background, rgba(255, 255, 255, 0.15));
      color: inherit;

      &:hover {
        background: var(--uix-modal-media-button-hover-background, rgba(255, 255, 255, 0.25));
        color: inherit;
      }
    }

    &::part(body) {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      min-height: 0;
      max-height: none;
      padding: 1rem;
      color: inherit;
    }

    &::part(caption) {
      padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
      color: var(--uix-modal-media-caption-color, rgba(255, 255, 255, 0.6));
    }

    > img,
    > video {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      border-radius: var(--uix-modal-media-radius, 1rem);
    }
  }

  [slot="trigger"] {
    cursor: pointer;
  }

  [slot="footer"] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    align-items: center;
  }
}


:where(.uix-nav-item, uix-nav-item) {

  all: unset;
  display: flex;
  align-items: center;
  gap: var(--uix-nav-item-gap, 0.75rem);
  font-size: var(--uix-nav-item-font-size, var(--text-sm, 0.875rem));
  line-height: var(--uix-nav-item-line-height, var(--leading-tight, 1.25rem));
  color: var(--uix-nav-item-color, var(--text-color, inherit));
  background-color: var(--uix-nav-item-background, transparent);
  border-radius: var(--uix-nav-item-border-radius, 0);
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
  width: 100%;
  text-decoration: none;
  box-sizing: border-box;

  button {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  &[rounded] {
    --uix-nav-item-border-radius: var(--radius-md, 0.375rem);
  }

  &:not([prevent-collapse]) {
    &:hover:not(:disabled) {
      background-color: var(--uix-nav-item-hover-background, var(--color-surface-dark, rgba(0, 0, 0, 0.05)));
    }

    button {
      cursor: pointer;
    }
  }

  &[size="sm"] {
    --uix-nav-item-padding-y: 0.375rem;
    --uix-nav-item-padding-x: 0.5rem;
    --uix-nav-item-gap: 0.5rem;
    --uix-nav-item-font-size: var(--text-sm, 0.8125rem);
    --uix-nav-item-line-height: var(--leading-tight, 1.125rem);
  }

  &[size="lg"] {
    --uix-nav-item-padding-y: 0.625rem;
    --uix-nav-item-padding-x: 1rem;
    --uix-nav-item-gap: 1rem;
    --uix-nav-item-font-size: var(--text-base, 1rem);
    --uix-nav-item-line-height: var(--leading-normal, 1.5rem);
  }

  &[active][activeBg] {
    background-color: var(--uix-nav-item-active-background, #111);
    color: var(--uix-nav-item-active-color, #fff);
    font-weight: var(--font-semibold, 600);
  }

  &[active]:not([activeBg]) {
    background-color: transparent;
    color: var(--link-active-color);
    font-weight: var(--font-semibold, 600);
  }

  &:disabled {
    opacity: var(--uix-nav-item-disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .uix-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .label {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: var(--uix-nav-item-padding-y, 0.5rem) var(--uix-nav-item-padding-x, 0.75rem);
  }

  .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--uix-nav-item-badge-padding, 0.2rem 0.4rem);
    font-size: var(--uix-nav-item-badge-font-size, var(--text-xs, 0.6rem));
    font-weight: var(--font-semibold, 600);
    line-height: 1;
    color: var(--uix-nav-item-badge-color, var(--text-color, #fff));
    background-color: var(--uix-nav-item-badge-background, var(--color-surface-darker));
    border-radius: var(--uix-nav-item-badge-border-radius, var(--radius-md, 0.375rem));
    flex-shrink: 0;
  }

  &[header] button {
    position: relative;

    &::before {
      content: "";
      display: inline-block;
      width: 0.5em;
      height: 0.5em;
      margin-top: 5px;
      margin-left: 0.5rem;
      margin-right: 1rem;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(-45deg);
      transition: transform 0.2s ease;
      flex-shrink: 0;
      vertical-align: middle;
    }
  }

  &[header][active] button::before {
    transform: rotate(45deg);
    margin-top: 3px;
  }

  &[iconOnly] {
    justify-content: center;

    .nav-item-icon {
      margin: 0;
      padding: var(--uix-nav-item-padding-y, 0.5rem) var(--uix-nav-item-padding-x, 0.75rem);
    }
  }

  &[indicatorPosition]:not([indicatorPosition="none"])[active]:not([activeBg]) {
    background-color: transparent;
  }

  &[indicatorPosition]:not([indicatorPosition="none"])[active][activeBg] {
    background-color: var(--uix-nav-item-active-background, #111);
    color: var(--uix-nav-item-active-color, #fff);
  }

  &[indicatorPosition="left"] {
    position: relative;

    &[active]::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: var(--uix-nav-item-indicator-width, 2px);
      height: var(--uix-nav-item-indicator-length, 50%);
      background-color: var(--uix-nav-item-indicator-color, var(--color-primary, currentColor));
      border-radius: 0 var(--radius-md, 4px) var(--radius-md, 4px) 0;
    }
  }

  &[indicatorPosition="right"] {
    position: relative;

    &[active]::before {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: var(--uix-nav-item-indicator-width, 2px);
      height: var(--uix-nav-item-indicator-length, 50%);
      background-color: var(--uix-nav-item-indicator-color, var(--color-primary, currentColor));
      border-radius: var(--radius-md, 4px) 0 0 var(--radius-md, 4px);
    }
  }

  &[indicatorPosition="top"] {
    position: relative;

    &[active]::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      height: var(--uix-nav-item-indicator-width, 2px);
      width: var(--uix-nav-item-indicator-length, 50%);
      background-color: var(--uix-nav-item-indicator-color, var(--color-primary, currentColor));
      border-radius: 0 0 var(--radius-md, 4px) var(--radius-md, 4px);
    }
  }

  &[indicatorPosition="bottom"] {
    position: relative;

    &[active]::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      height: var(--uix-nav-item-indicator-width, 2px);
      width: var(--uix-nav-item-indicator-length, 50%);
      background-color: var(--uix-nav-item-indicator-color, var(--color-primary, currentColor));
      border-radius: var(--radius-md, 4px) var(--radius-md, 4px) 0 0;
    }
  }

  &:not([prevent-collapse]):hover:not(:disabled):not([active]) {
    color: var(--uix-nav-item-hover-color, var(--text-color, inherit));
  }
}


uix-prose {
  margin-inline: auto;
}

:where(.uix-prose, uix-prose) {
  display: block;
  max-width: var(--uix-prose-measure, 65ch);
  --uix-markdown-size: var(--uix-prose-size, var(--text-lg, 1.125rem));
  --uix-markdown-leading: var(--uix-prose-leading, var(--leading-relaxed, 1.75));

  &[size="base"] {
    --uix-prose-size: var(--text-base, 1rem);
  }

  &[size="lg"] {
    --uix-prose-size: var(--text-lg, 1.125rem);
  }

  &[size="xl"] {
    --uix-prose-size: var(--text-xl, 1.25rem);
  }

  &[wide] {
    max-width: none;
  }
}


:where(.uix-search, uix-search) {
  display: block;

  .search-wrapper {
    position: relative;
    display: block;
    width: 100%;
  }

  .search-icon {
    position: absolute;
    left: var(--uix-search-icon-offset, 0.75rem);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--uix-search-icon-color, var(--text-muted));
  }

  .search-input {
    width: 100%;
    height: var(--uix-search-height, var(--uix-input-height, 2.5rem));
    padding: 0 var(--uix-search-padding-x, var(--uix-input-padding-x, 0.75rem))
      0 calc(var(--uix-search-icon-offset, 0.75rem) + 1.5rem);
    background: var(--uix-search-background, var(--uix-input-background, var(--color-surface)));
    color: var(--uix-search-color, var(--uix-input-text, var(--text-color, inherit)));
    font-size: var(--uix-search-font-size, var(--uix-input-font-size, var(--text-sm, 0.875rem)));
    font-family: inherit;
    line-height: var(--uix-search-line-height, 1.5);
    border: var(--uix-search-border-width, 1px) solid
      var(--uix-search-border-color, var(--uix-input-border, var(--border-color)));
    border-radius: var(--uix-search-border-radius, var(--uix-input-border-radius, var(--radius-md, 0.375rem)));
    outline: none;
    box-sizing: border-box;

    &::placeholder {
      color: var(--uix-search-placeholder, var(--uix-input-placeholder, var(--text-muted)));
      opacity: 1;
    }

    &:focus {
      border-color: var(--uix-search-focus-border, var(--color-primary));
    }
  }

  .search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--uix-search-dropdown-z, 50);
    margin-top: var(--uix-search-dropdown-offset, 0.375rem);
    max-height: var(--uix-search-dropdown-max-height, 24rem);
    overflow-y: auto;
    padding: var(--uix-search-dropdown-padding, 0.375rem);
    background: var(--uix-search-dropdown-background, var(--color-surface-light));
    border: 1px solid var(--uix-search-dropdown-border, var(--border-color));
    border-radius: var(--uix-search-dropdown-radius, var(--radius-lg, 0.75rem));
    box-shadow: var(--uix-search-dropdown-shadow, var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1)));
  }

  .search-group-label {
    padding: var(--uix-search-group-padding, 0.5rem 0.5rem 0.25rem);
    font-size: var(--uix-search-group-size, 0.625rem);
    font-weight: var(--uix-search-group-weight, 700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--uix-search-group-color, var(--text-muted));
  }

  .search-result {
    display: flex;
    align-items: center;
    gap: var(--uix-search-result-gap, 0.75rem);
    width: 100%;
    padding: var(--uix-search-result-padding, 0.5rem);
    background: transparent;
    border: none;
    border-radius: var(--uix-search-result-radius, var(--radius-md, 0.5rem));
    font: inherit;
    text-align: left;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    box-sizing: border-box;

    &:hover,
    &.active {
      background: var(--uix-search-result-active, var(--color-hover, var(--color-surface-dark)));
    }
  }

  .search-result-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
  }

  .search-result-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--uix-search-title-size, var(--text-sm, 0.875rem));
    font-weight: var(--uix-search-title-weight, 600);
    color: var(--uix-search-title-color, var(--text-color));
  }

  .search-result-hint {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--uix-search-hint-size, var(--text-xs, 0.75rem));
    color: var(--uix-search-hint-color, var(--text-muted));
  }

  .search-empty {
    padding: var(--uix-search-empty-padding, 1rem);
    text-align: center;
    font-size: var(--uix-search-empty-size, var(--text-sm, 0.875rem));
    color: var(--uix-search-empty-color, var(--text-muted));
  }
}


:where(.uix-skeleton, uix-skeleton) {
  display: block;

  & .skeleton-container {
    display: flex;
    flex-direction: column;
    gap: var(--uix-skeleton-gap, 0.5rem);
  }

  & .skeleton {
    background-color: var(--uix-skeleton-background, var(--color-surface-darker));
    background-image: linear-gradient(
      90deg,
      transparent,
      var(--uix-skeleton-shimmer-color, rgba(255, 255, 255, 0.1)),
      transparent
    );
    background-size: 200% 100%;
    border-radius: var(--uix-skeleton-border-radius, var(--radius-sm, 0.25rem));
    overflow: hidden;

    &.animated {
      animation: skeletonShimmer 1.5s ease-in-out infinite;
    }
  }

  & .skeleton-text {
    height: 1em;
    border-radius: var(--uix-skeleton-border-radius, var(--radius-sm, 0.25rem));
  }

  & .skeleton-circle {
    border-radius: 50%;
    aspect-ratio: 1;
  }

  & .skeleton-rect {
    border-radius: var(--uix-skeleton-border-radius, var(--radius-sm, 0.25rem));
  }

  & .skeleton-rounded {
    border-radius: var(--uix-skeleton-border-radius-rounded, var(--radius-lg, 0.5rem));
  }
}

@keyframes skeletonShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}


:where(.uix-tag, uix-tag) {
  display: inline-flex;

  &::part(container) {
    display: inline-flex;
    align-items: center;
    gap: var(--uix-tag-gap, 0.375rem);
    padding: var(--uix-tag-padding-y, 0.25rem) var(--uix-tag-padding-x, 0.625rem);
    background-color: var(--uix-tag-background, var(--color-surface-darker));
    color: var(--uix-tag-color, var(--color-text-default));
    font-size: var(--uix-tag-font-size, var(--text-xs, 0.75rem));
    font-weight: var(--uix-tag-font-weight, var(--font-medium, 500));
    line-height: 1.5;
    border: var(--uix-tag-border-width, 1px) solid var(--uix-tag-border-color, transparent);
    border-radius: var(--uix-tag-border-radius, var(--radius-md));
    box-shadow: var(--uix-tag-shadow, none);
    cursor: default;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      transform 0.2s ease,
      box-shadow 0.2s ease;

    &.rounded {
      border-radius: var(--uix-tag-border-radius-rounded, 9999px);
    }

    &[disabled] {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }

  &[clickable]:not([disabled])::part(container) {
    cursor: pointer;
  }

  &[clickable]:not([disabled])::part(container):hover {
    filter: var(--uix-tag-hover-filter, brightness(1.1));
    transform: var(--uix-tag-hover-transform, none);
    box-shadow: var(--uix-tag-hover-shadow, var(--uix-tag-shadow, none));
  }

  &::part(label) {
    flex: 1;
  }

  &::part(count) {
    flex-shrink: 0;
    font-size: var(--uix-tag-count-size, 0.9em);
    font-weight: var(--uix-tag-count-weight, var(--font-medium, 500));
    font-variant-numeric: tabular-nums;
    opacity: var(--uix-tag-count-opacity, 0.65);
  }

  &::part(close) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    margin: 0;
    margin-bottom: 0.25rem;
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: 0.5rem;

    &:disabled {
      cursor: not-allowed;
    }
  }

  &[size="xs"] {
    --uix-tag-font-size: var(--text-xs, 0.625rem);
    --uix-tag-padding-y: 0.0625rem;
    --uix-tag-padding-x: 0.375rem;
    --uix-tag-gap: 0.1875rem;
  }

  &[size="sm"] {
    --uix-tag-font-size: var(--text-xs, 0.6875rem);
    --uix-tag-padding-y: 0.125rem;
    --uix-tag-padding-x: 0.5rem;
    --uix-tag-gap: 0.25rem;
  }

  &[size="lg"] {
    --uix-tag-font-size: var(--text-sm, 0.875rem);
    --uix-tag-padding-y: 0.375rem;
    --uix-tag-padding-x: 0.75rem;
    --uix-tag-gap: 0.5rem;
  }

  &[variant="primary"] {
    --uix-tag-background: var(--color-primary);
    --uix-tag-color: var(--color-inverse);
  }

  &[variant="secondary"] {
    --uix-tag-background: var(--color-secondary);
    --uix-tag-color: var(--color-inverse);
  }

  &[variant="success"] {
    --uix-tag-background: var(--color-success);
    --uix-tag-color: var(--color-inverse);
  }

  &[variant="warning"] {
    --uix-tag-background: var(--color-warning);
    --uix-tag-color: var(--color-inverse);
  }

  &[variant="error"] {
    --uix-tag-background: var(--color-danger);
    --uix-tag-color: var(--color-inverse);
  }

  &[variant="info"] {
    --uix-tag-background: var(--color-info);
    --uix-tag-color: var(--color-inverse);
  }

  &[outlined]::part(container) {
    background-color: transparent;
  }

  &[outlined][variant="default"] {
    --uix-tag-border-color: var(--border-color);
    --uix-tag-color: var(--color-text-default);
  }

  &[outlined][variant="primary"] {
    --uix-tag-border-color: var(--color-primary);
    --uix-tag-color: var(--color-primary);
  }

  &[outlined][variant="secondary"] {
    --uix-tag-border-color: var(--color-secondary);
    --uix-tag-color: var(--color-secondary);
  }

  &[outlined][variant="success"] {
    --uix-tag-border-color: var(--color-success);
    --uix-tag-color: var(--color-success);
  }

  &[outlined][variant="warning"] {
    --uix-tag-border-color: var(--color-warning);
    --uix-tag-color: var(--color-warning);
  }

  &[outlined][variant="error"] {
    --uix-tag-border-color: var(--color-danger);
    --uix-tag-color: var(--color-danger);
  }

  &[outlined][variant="info"] {
    --uix-tag-border-color: var(--color-info);
    --uix-tag-color: var(--color-info);
  }
}


:where(.uix-textarea, uix-textarea) {

  display: inline-block;
  width: var(--uix-textarea-width, 100%);
  box-sizing: border-box;

  .textarea-label {
    display: block;
    font-size: var(--uix-input-label-font-size, var(--text-sm, 0.875rem));
    font-weight: var(--uix-input-label-font-weight, var(--font-semibold, 600));
    margin-bottom: var(--uix-input-label-margin, 0.5rem);
    color: var(--uix-input-label-color, var(--text-color, #1a1a1a));
    letter-spacing: var(--uix-input-label-letter-spacing, 0);
    text-transform: var(--uix-input-label-text-transform, none);
  }

  .textarea-required {
    color: var(--color-danger, #ef4444);
    margin-left: 0.25rem;
  }

  textarea.textarea {
    width: 100%;
    min-height: var(--uix-textarea-min-height, 6rem);
    padding: var(--uix-input-padding-y, 0.5rem) var(--uix-input-padding-x, 0.75rem);
    box-sizing: border-box;

    background: var(--uix-input-background, var(--color-surface-light, #ffffff));
    border: var(--uix-input-border-width, var(--border-width, 1px)) solid var(--uix-input-border-color, var(--border-color, var(--color-surface, #e5e7eb)));
    border-radius: var(--uix-textarea-border-radius, var(--uix-input-border-radius, var(--radius-md, 0.375rem)));
    box-shadow: var(--uix-input-shadow, var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)));

    transition: var(
      --uix-input-transition,
      border-color 0.2s ease,
      background-color 0.2s ease,
      box-shadow 0.15s ease
    );
    font-size: var(--uix-input-font-size, var(--text-sm, 0.9rem));
    font-weight: var(--uix-input-font-weight, var(--font-normal, 400));
    line-height: var(--uix-textarea-line-height, var(--leading-normal, 1.5));
    font-family: inherit;
    color: var(--uix-input-color, var(--text-color, inherit));
    outline: none;
    resize: var(--uix-textarea-resize, vertical);

    &::placeholder {
      color: var(--uix-input-placeholder-color, var(--text-muted, #9ca3af));
      opacity: 1;
    }

    &:hover:not(:focus):not(:disabled) {
      border-color: var(--uix-input-hover-border-color, var(--color-primary-light));
    }

    &:focus {
      border-color: var(--uix-input-focus-border-color, var(--color-primary));
      background: var(--uix-input-focus-background, var(--uix-input-background));
      box-shadow: var(--uix-input-focus-shadow, 0 0 0 3px rgba(250, 189, 47, 0.1));
    }

    &:disabled {
      opacity: var(--uix-input-disabled-opacity, 0.6);
      background: var(--uix-input-disabled-background, var(--color-surface-dark));
      color: var(--uix-input-disabled-color, var(--text-muted));
      cursor: not-allowed;
    }

    &:read-only {
      background: var(--uix-input-readonly-background, var(--color-surface-dark));
      cursor: default;
    }
  }

  &[size="xs"] {
    --uix-input-padding-y: 0.25rem;
    --uix-input-padding-x: 0.5rem;
    --uix-input-font-size: var(--text-xs, 0.75rem);
    --uix-textarea-min-height: 3rem;
  }

  &[size="sm"] {
    --uix-input-padding-y: 0.375rem;
    --uix-input-padding-x: 0.625rem;
    --uix-input-font-size: var(--text-sm, 0.875rem);
    --uix-textarea-min-height: 4.5rem;
  }

  &[size="md"] {
    --uix-input-padding-y: 0.5rem;
    --uix-input-padding-x: 0.75rem;
    --uix-input-font-size: var(--text-base, 1rem);
    --uix-textarea-min-height: 6rem;
  }

  &[size="lg"] {
    --uix-input-padding-y: 0.625rem;
    --uix-input-padding-x: 1rem;
    --uix-input-font-size: var(--text-lg, 1.125rem);
    --uix-textarea-min-height: 7.5rem;
  }

  &[size="xl"] {
    --uix-input-padding-y: 0.75rem;
    --uix-input-padding-x: 1.25rem;
    --uix-input-font-size: var(--text-xl, 1.25rem);
    --uix-textarea-min-height: 9rem;
  }

  &[resize="none"] textarea {
    resize: none;
  }

  &[resize="both"] textarea {
    resize: both;
  }

  &[resize="horizontal"] textarea {
    resize: horizontal;
  }

  &[resize="vertical"] textarea {
    resize: vertical;
  }

  &[required] textarea {
    border-left: 3px solid var(--uix-input-required-color, var(--color-warning));
  }

  &[error] {
    --uix-input-border-color: var(--color-danger);
    --uix-input-focus-border-color: var(--color-danger);
    --uix-input-focus-shadow: 0 0 0 3px rgba(251, 73, 52, 0.1);
  }

  &[success] {
    --uix-input-border-color: var(--color-success);
    --uix-input-focus-border-color: var(--color-success);
    --uix-input-focus-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
  }

  &[variant="primary"] {
    --uix-input-border-color: var(--color-primary);
    --uix-input-focus-border-color: var(--color-primary);
  }

  &[variant="secondary"] {
    --uix-input-border-color: var(--color-secondary);
    --uix-input-focus-border-color: var(--color-secondary);
  }

  &[variant="success"] {
    --uix-input-border-color: var(--color-success);
    --uix-input-focus-border-color: var(--color-success);
    --uix-input-focus-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
  }

  &[variant="warning"] {
    --uix-input-border-color: var(--color-warning);
    --uix-input-focus-border-color: var(--color-warning);
    --uix-input-focus-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
  }

  &[variant="error"] {
    --uix-input-border-color: var(--color-danger);
    --uix-input-focus-border-color: var(--color-danger);
    --uix-input-focus-shadow: 0 0 0 3px rgba(251, 73, 52, 0.1);
  }

  &[w-full],
  &[wfull],
  &[fullwidth] {
    width: 100%;
    display: block;
  }
}


:where(.uix-tooltip, uix-tooltip) {
  position: fixed;
  margin: 0;
  width: auto;
  height: auto;
  border: none;
  overflow: visible;
  pointer-events: none;
  inset: auto;

  padding: var(--uix-tooltip-padding-y, 0.375rem)
    var(--uix-tooltip-padding-x, 0.625rem);
  background: var(--uix-tooltip-background, var(--color-surface-inverse, #1a1a1a));
  color: var(--uix-tooltip-color, var(--color-text-inverse, #fff));
  border-radius: var(--uix-tooltip-radius, var(--radius-sm, 0.25rem));
  font-size: var(--uix-tooltip-font-size, var(--text-xs, 0.75rem));
  font-weight: var(--uix-tooltip-font-weight, var(--font-medium, 500));
  line-height: var(--uix-tooltip-line-height, 1.4);
  box-shadow: var(
    --uix-tooltip-shadow,
    var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.3))
  );
  white-space: nowrap;
  max-width: var(--uix-tooltip-max-width, 300px);

  /* Sizes */
  &[size="sm"] {
    --uix-tooltip-padding-y: 0.25rem;
    --uix-tooltip-padding-x: 0.5rem;
    --uix-tooltip-font-size: var(--text-xs, 0.75rem);
  }

  &[size="md"] {
    --uix-tooltip-padding-y: 0.375rem;
    --uix-tooltip-padding-x: 0.625rem;
    --uix-tooltip-font-size: var(--text-xs, 0.75rem);
  }

  &[size="lg"] {
    --uix-tooltip-padding-y: 0.5rem;
    --uix-tooltip-padding-x: 0.875rem;
    --uix-tooltip-font-size: var(--text-sm, 0.875rem);
  }

  /* Variants */
  &[variant="primary"] {
    --uix-tooltip-background: var(--color-primary);
    --uix-tooltip-color: var(--color-primary-inverse, var(--color-inverse, #fff));
  }

  &[variant="secondary"] {
    --uix-tooltip-background: var(--color-secondary);
    --uix-tooltip-color: var(--color-secondary-inverse, var(--color-inverse, #fff));
  }

  &[variant="success"] {
    --uix-tooltip-background: var(--color-success);
    --uix-tooltip-color: var(--color-success-inverse, var(--color-inverse, #fff));
  }

  &[variant="warning"] {
    --uix-tooltip-background: var(--color-warning);
    --uix-tooltip-color: var(--color-warning-inverse, var(--color-inverse, #000));
  }

  &[variant="danger"] {
    --uix-tooltip-background: var(--color-danger);
    --uix-tooltip-color: var(--color-danger-inverse, var(--color-inverse, #fff));
  }

  &[variant="info"] {
    --uix-tooltip-background: var(--color-info);
    --uix-tooltip-color: var(--color-info-inverse, var(--color-inverse, #fff));
  }
}


:where(.sw-update-toast, sw-update-toast) {
  display: none;
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);

  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--color-primary, #3b82f6);
  color: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  animation: sw-toast-slide-up 0.3s ease-out;
  &[visible] {
    display: flex;
  }
  .sw-update-message {
    flex: 1;
  }

  .sw-update-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .sw-update-btn {
    padding: 0.375rem 0.75rem;
    background: white;
    color: var(--color-primary, #3b82f6);
    border: none;
    border-radius: 0.25rem;
    font-weight: 500;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.2s;
  }

  .sw-update-btn:hover {
    background: #f0f0f0;
  }

  .sw-update-dismiss {
    padding: 0.25rem 0.5rem;
    background: transparent;
    color: white;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0.8;
    line-height: 1;
  }

  .sw-update-dismiss:hover {
    opacity: 1;
  }
}

@keyframes sw-toast-slide-up {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--border-color,currentColor)}
::before,::after{--tw-content:''}
.block{display:block}
.inline-block{display:inline-block}
.inline{display:inline}
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.hidden{display:none}
.fixed{position:fixed}
.absolute{position:absolute}
.relative{position:relative}
.sticky{position:sticky}
.flex-row{flex-direction:row}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1 1 0%}
.shrink-0{flex-shrink:0}
.justify-end{justify-content:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-around{justify-content:space-around}
.items-start{align-items:flex-start}
.items-center{align-items:center}
.items-baseline{align-items:baseline}
.self-end{align-self:flex-end}
.overflow-hidden{overflow:hidden}
.overflow-y-auto{overflow-y:auto}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-center{text-align:center}
.italic{font-style:italic}
.hover\:underline:hover{text-decoration-line:underline}
.no-underline{text-decoration-line:none}
.list-none{list-style-type:none}
.bg-cover{background-size:cover}
.bg-center{background-position:center}
.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}
.object-cover{object-fit:cover}
.aspect-video{aspect-ratio:16 / 9}
.select-none{user-select:none}
.top-0{top:0px}
.top-14{top:3.5rem}
.top-3{top:0.75rem}
.right-0{right:0px}
.right-3{right:0.75rem}
.bottom-0{bottom:0px}
.left-0{left:0px}
.z-10{z-index:10}
.z-30{z-index:30}
.z-40{z-index:40}
.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}
.gap-1{gap:0.25rem}
.gap-1\.5{gap:0.375rem}
.gap-2{gap:0.5rem}
.gap-3{gap:0.75rem}
.gap-4{gap:1rem}
.gap-x-3{column-gap:0.75rem}
.gap-y-1{row-gap:0.25rem}
.space-y-3 > :not([hidden]) ~ :not([hidden]){margin-top:0.75rem}
.p-1{padding:0.25rem}
.p-2{padding:0.5rem}
.p-4{padding:1rem}
.px-1{padding-left:0.25rem;padding-right:0.25rem}
.px-2{padding-left:0.5rem;padding-right:0.5rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.pt-12{padding-top:3rem}
.pt-14{padding-top:3.5rem}
.pt-3{padding-top:0.75rem}
.pb-16{padding-bottom:4rem}
.pb-3{padding-bottom:0.75rem}
.pb-4{padding-bottom:1rem}
.pb-8{padding-bottom:2rem}
.mx-auto{margin-left:auto;margin-right:auto}
.-mt-12{margin-top:-3rem}
.mt-1{margin-top:0.25rem}
.mt-2{margin-top:0.5rem}
.mt-3{margin-top:0.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.-mr-2{margin-right:-0.5rem}
.mb-1{margin-bottom:0.25rem}
.mb-2{margin-bottom:0.5rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.-ml-2{margin-left:-0.5rem}
.w-14{width:3.5rem}
.w-20{width:5rem}
.w-4{width:1rem}
.w-48{width:12rem}
.w-80{width:20rem}
.w-full{width:100%}
.h-14{height:3.5rem}
.h-20{height:5rem}
.h-32{height:8rem}
.h-4{height:1rem}
.h-6{height:1.5rem}
.h-full{height:100%}
.h-screen{height:100vh}
.min-w-0{min-width:0px}
.min-h-screen{min-height:100vh}
.max-w-\[1400px\]{max-width:1400px}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-6xl{font-size:3.75rem;line-height:1}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-xs{font-size:0.75rem;line-height:1rem}
.hover\:text-primary:hover{color:var(--color-primary)}
.hover\:text-secondary:hover{color:var(--color-secondary)}
.text-default{color:var(--text-color)}
.text-muted{color:var(--text-muted)}
.text-on-primary{color:var(--color-on-primary)}
.text-primary{color:var(--color-primary)}
.text-secondary{color:var(--color-secondary)}
.font-black{font-weight:900}
.font-bold{font-weight:700}
.font-medium{font-weight:500}
.leading-relaxed{line-height:1.625}
.leading-snug{line-height:1.375}
.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.bg-canvas{background-color:var(--color-canvas)}
.bg-glass-canvas{background-color:var(--color-glass-canvas)}
.bg-glass-menu{background-color:var(--color-glass-menu)}
.bg-glass-nav{background-color:var(--color-glass-nav)}
.bg-primary{background-color:var(--color-primary)}
.bg-secondary{background-color:var(--color-secondary)}
.bg-surface{background-color:var(--color-surface)}
.hover\:bg-hover:hover{background-color:var(--color-hover)}
.hover\:bg-surface:hover{background-color:var(--color-surface)}
.hover\:bg-surface-light:hover{background-color:var(--color-surface-light)}
.from-surface{--tw-gradient-from:var(--color-surface);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, transparent)}
.to-surface-light{--tw-gradient-to:var(--color-surface-light)}
.border{border-width:1px}
.border-2{border-width:2px}
.border-4{border-width:4px}
.border-canvas{border-color:var(--color-canvas)}
.border-hairline{border-color:var(--color-hairline)}
.border-primary{border-color:var(--color-primary)}
.hover\:border-primary:hover{border-color:var(--color-primary)}
.border-x{border-left-width:1px;border-right-width:1px}
.border-t{border-top-width:1px}
.border-r-2{border-right-width:2px}
.border-b{border-bottom-width:1px}
.border-b-2{border-bottom-width:2px}
.rounded{border-radius:0.25rem}
.rounded-full{border-radius:var(--radius-full)}
.rounded-md{border-radius:var(--radius-md)}
.rounded-sm{border-radius:var(--radius-sm)}
.shadow-lg{box-shadow:var(--shadow-lg)}
.hover\:opacity-100:hover{opacity:1}
.opacity-30{opacity:0.3}
.opacity-70{opacity:0.7}
.backdrop-blur-sm{backdrop-filter:blur(4px)}
.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
.cursor-pointer{cursor:pointer}
@media (min-width: 640px){.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (min-width: 768px){.md\:block{display:block}.md\:hidden{display:none}.md\:top-0{top:0px}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:pt-0{padding-top:0px}.md\:pb-10{padding-bottom:2.5rem}.md\:w-24{width:6rem}.md\:h-24{height:6rem}.md\:h-40{height:10rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}}
@media (min-width: 1280px){.xl\:block{display:block}.xl\:inline{display:inline}.xl\:flex{display:flex}.xl\:hidden{display:none}.xl\:justify-start{justify-content:flex-start}.xl\:items-stretch{align-items:stretch}.xl\:px-3{padding-left:0.75rem;padding-right:0.75rem}.xl\:px-4{padding-left:1rem;padding-right:1rem}.xl\:w-64{width:16rem}}