:root {
  --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-handwriting: 'Caveat', cursive;
  --font-icon-family: lucide;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 800;
  --link-color: #c2410c;
  --text-color: #101210;
  --text-secondary: #3f443f;
  --text-muted: #6b716b;
  --text-disabled: #a3a8a3;
  --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;
  --text-display: clamp(3.5rem, 7vw, 5rem);
  --text-hero: clamp(2.25rem, 5vw, 3.5rem);
  --text-section: clamp(1.75rem, 3.5vw, 2.5rem);
  --text-subhead: 1.0625rem;
  --text-body: 0.9375rem;
  --text-caption: 0.8125rem;
  --text-eyebrow: 0.6875rem;
  --canvas-background: #f3f4f2;
  --canvas-font-size: 16px;
  --color-primary: #101210;
  --color-primary-lighter: hsl(120 6% 27%);
  --color-primary-darker: hsl(120 6% 0%);
  --color-on-primary: #ffffff;
  --color-primary-light: #2a2e2a;
  --color-primary-dark: #000000;
  --color-accent: #e4572e;
  --color-accent-lighter: hsl(14 77% 74%);
  --color-accent-light: hsl(14 77% 64%);
  --color-accent-dark: hsl(14 77% 44%);
  --color-accent-darker: hsl(14 77% 34%);
  --color-on-accent: #000000;
  --color-secondary: #e4572e;
  --color-secondary-lighter: hsl(14 77% 74%);
  --color-secondary-darker: hsl(14 77% 34%);
  --color-on-secondary: #000000;
  --color-secondary-light: #ff6a3d;
  --color-secondary-dark: #c2410c;
  --color-success: #15803d;
  --color-success-lighter: hsl(142 72% 49%);
  --color-success-darker: hsl(142 72% 9%);
  --color-on-success: #ffffff;
  --color-success-light: #22c55e;
  --color-success-dark: #166534;
  --color-danger: #dc2626;
  --color-danger-lighter: hsl(0 72% 71%);
  --color-danger-darker: hsl(0 72% 31%);
  --color-on-danger: #ffffff;
  --color-danger-light: #ef4444;
  --color-danger-dark: #b91c1c;
  --color-warning: #d97706;
  --color-warning-lighter: hsl(32 95% 64%);
  --color-warning-dark: hsl(32 95% 34%);
  --color-warning-darker: hsl(32 95% 24%);
  --color-on-warning: #000000;
  --color-warning-light: #f59e0b;
  --color-info: #1d4ed8;
  --color-info-lighter: hsl(224 76% 68%);
  --color-info-dark: hsl(224 76% 38%);
  --color-info-darker: hsl(224 76% 28%);
  --color-on-info: #ffffff;
  --color-info-light: #3b82f6;
  --color-surface: #ffffff;
  --color-surface-lighter: hsl(0 0% 100%);
  --color-surface-darker: hsl(0 0% 80%);
  --color-on-surface: #000000;
  --color-surface-light: #f8f9f7;
  --color-surface-dark: #e8eae6;
  --color-surface-inverse: #101210;
  --color-surface-inverse-lighter: hsl(120 6% 27%);
  --color-surface-inverse-light: hsl(120 6% 17%);
  --color-surface-inverse-dark: hsl(120 6% 0%);
  --color-surface-inverse-darker: hsl(120 6% 0%);
  --color-on-surface-inverse: #ffffff;
  --color-hover: #eceeea;
  --color-hover-lighter: hsl(90 11% 100%);
  --color-hover-light: hsl(90 11% 100%);
  --color-hover-dark: hsl(90 11% 83%);
  --color-hover-darker: hsl(90 11% 73%);
  --color-on-hover: #000000;
  --color-focus: #e4572e;
  --color-focus-lighter: hsl(14 77% 74%);
  --color-focus-light: hsl(14 77% 64%);
  --color-focus-dark: hsl(14 77% 44%);
  --color-focus-darker: hsl(14 77% 34%);
  --color-on-focus: #000000;
  --color-inverse: #ffffff;
  --color-inverse-lighter: hsl(0 0% 100%);
  --color-inverse-light: hsl(0 0% 100%);
  --color-inverse-darker: hsl(0 0% 80%);
  --color-on-inverse: #000000;
  --color-inverse-dark: #101210;
  --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;
  --leading-tight: 1.1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --radius-xl: 0.5rem;
  --radius-card: 0.25rem;
  --radius-panel: 0.375rem;
  --radius-hero: 0.5rem;
  --radius-full: 9999px;
  --radius-field: 0.125rem;
  --radius-selector: 0.125rem;
  --radius-box: 0.25rem;
  --shadow-none: none;
  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgba(16, 18, 16, 0.14);
  --shadow-lg: 0 16px 40px rgba(16, 18, 16, 0.18);
  --shadow-xl: 0 24px 56px rgba(16, 18, 16, 0.2);
  --shadow-2xl: 0 32px 72px rgba(16, 18, 16, 0.24);
  --shadow-card: none;
  --shadow-card-hover: 0 8px 24px rgba(16, 18, 16, 0.14);
  --shadow-nav: none;
  --shadow-field: none;
  --shadow-box: none;
  --shadow-focus: 0 0 0 2px #e4572e;
  --control-weight: 600;
  --control-transform: none;
  --control-tracking: normal;
  --border-width: 1px;
  --border-color: #d2d5d0;
  --lc-button-background: #ffffff;
  --lc-button-border-color: #c9cdc8;
  --lc-button-default-hover-background: #f0f2ef;
  --path: /theme.js;
  --runtime: true;
  --icon-family: lucide;
  --font-family-base: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
lc-button[variant="primary"] {
  --lc-button-background: var(--color-primary);
  --lc-button-color: var(--color-on-primary);
  --lc-button-hover-background: var(--color-primary-dark, var(--color-primary));
}
lc-button[variant="accent"] {
  --lc-button-background: var(--color-accent);
  --lc-button-color: var(--color-on-accent);
  --lc-button-hover-background: var(--color-accent-dark, var(--color-accent));
}
lc-button[variant="secondary"] {
  --lc-button-background: var(--color-secondary);
  --lc-button-color: var(--color-on-secondary);
  --lc-button-hover-background: var(--color-secondary-dark, var(--color-secondary));
}
lc-button[variant="success"] {
  --lc-button-background: var(--color-success);
  --lc-button-color: var(--color-on-success);
  --lc-button-hover-background: var(--color-success-dark, var(--color-success));
}
lc-button[variant="danger"] {
  --lc-button-background: var(--color-danger);
  --lc-button-color: var(--color-on-danger);
  --lc-button-hover-background: var(--color-danger-dark, var(--color-danger));
}
lc-button[variant="warning"] {
  --lc-button-background: var(--color-warning);
  --lc-button-color: var(--color-on-warning);
  --lc-button-hover-background: var(--color-warning-dark, var(--color-warning));
}
lc-button[variant="info"] {
  --lc-button-background: var(--color-info);
  --lc-button-color: var(--color-on-info);
  --lc-button-hover-background: var(--color-info-dark, var(--color-info));
}
lc-button[variant="surface"] {
  --lc-button-background: var(--color-surface);
  --lc-button-color: var(--color-on-surface);
  --lc-button-hover-background: var(--color-surface-dark, var(--color-surface));
}
lc-button[variant="surface-inverse"] {
  --lc-button-background: var(--color-surface-inverse);
  --lc-button-color: var(--color-on-surface-inverse);
  --lc-button-hover-background: var(--color-surface-inverse-dark, var(--color-surface-inverse));
}
lc-button[variant="hover"] {
  --lc-button-background: var(--color-hover);
  --lc-button-color: var(--color-on-hover);
  --lc-button-hover-background: var(--color-hover-dark, var(--color-hover));
}
lc-button[variant="focus"] {
  --lc-button-background: var(--color-focus);
  --lc-button-color: var(--color-on-focus);
  --lc-button-hover-background: var(--color-focus-dark, var(--color-focus));
}
lc-button[variant="inverse"] {
  --lc-button-background: var(--color-inverse);
  --lc-button-color: var(--color-on-inverse);
  --lc-button-hover-background: var(--color-inverse-dark, var(--color-inverse));
}
:root.dark {
  --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-handwriting: 'Caveat', cursive;
  --font-icon-family: lucide;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 800;
  --link-color: #ff6a3d;
  --text-color: #e9ebe8;
  --text-secondary: #b3b8b2;
  --text-muted: #7f857e;
  --text-disabled: #555a54;
  --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;
  --text-display: clamp(3.5rem, 7vw, 5rem);
  --text-hero: clamp(2.25rem, 5vw, 3.5rem);
  --text-section: clamp(1.75rem, 3.5vw, 2.5rem);
  --text-subhead: 1.0625rem;
  --text-body: 0.9375rem;
  --text-caption: 0.8125rem;
  --text-eyebrow: 0.6875rem;
  --canvas-background: #0f110f;
  --canvas-font-size: 16px;
  --color-primary: #e9ebe8;
  --color-primary-lighter: hsl(100 7% 100%);
  --color-primary-darker: hsl(100 7% 72%);
  --color-on-primary: #000000;
  --color-primary-light: #ffffff;
  --color-primary-dark: #cfd2ce;
  --color-accent: hsl(14 77% 54%);
  --color-accent-lighter: hsl(14 77% 74%);
  --color-accent-light: hsl(14 77% 64%);
  --color-accent-dark: hsl(14 77% 44%);
  --color-accent-darker: hsl(14 77% 34%);
  --color-secondary: #ff6a3d;
  --color-secondary-lighter: hsl(14 100% 82%);
  --color-secondary-darker: hsl(14 100% 42%);
  --color-on-secondary: #000000;
  --color-secondary-light: #ff8a5b;
  --color-secondary-dark: #e4572e;
  --color-success: hsl(142 72% 42%);
  --color-success-lighter: hsl(142 72% 62%);
  --color-success-darker: hsl(142 72% 22%);
  --color-success-light: hsl(142 71% 45%);
  --color-success-dark: hsl(143 64% 42%);
  --color-danger: hsl(0 72% 51%);
  --color-danger-lighter: hsl(0 72% 71%);
  --color-danger-darker: hsl(0 72% 31%);
  --color-danger-light: hsl(0 84% 60%);
  --color-danger-dark: hsl(0 74% 54%);
  --color-warning: hsl(32 95% 56%);
  --color-warning-lighter: hsl(32 95% 76%);
  --color-warning-dark: hsl(32 95% 46%);
  --color-warning-darker: hsl(32 95% 36%);
  --color-warning-light: hsl(38 92% 50%);
  --color-info: hsl(224 76% 48%);
  --color-info-lighter: hsl(224 76% 68%);
  --color-info-dark: hsl(224 76% 38%);
  --color-info-darker: hsl(224 76% 28%);
  --color-info-light: hsl(217 91% 60%);
  --color-surface: #171a17;
  --color-surface-lighter: hsl(120 6% 30%);
  --color-surface-darker: hsl(120 6% 0%);
  --color-on-surface: #ffffff;
  --color-surface-light: #1d201d;
  --color-surface-dark: #131513;
  --color-surface-inverse: #e9ebe8;
  --color-surface-inverse-lighter: hsl(100 7% 100%);
  --color-surface-inverse-light: hsl(100 7% 100%);
  --color-surface-inverse-dark: hsl(100 7% 82%);
  --color-surface-inverse-darker: hsl(100 7% 72%);
  --color-on-surface-inverse: #000000;
  --color-hover: #222522;
  --color-hover-lighter: hsl(120 4% 34%);
  --color-hover-light: hsl(120 4% 24%);
  --color-hover-dark: hsl(120 4% 4%);
  --color-hover-darker: hsl(120 4% 0%);
  --color-on-hover: #ffffff;
  --color-focus: #ff6a3d;
  --color-focus-lighter: hsl(14 100% 82%);
  --color-focus-light: hsl(14 100% 72%);
  --color-focus-dark: hsl(14 100% 52%);
  --color-focus-darker: hsl(14 100% 42%);
  --color-on-focus: #000000;
  --color-inverse: #0f110f;
  --color-inverse-lighter: hsl(120 6% 26%);
  --color-inverse-light: hsl(120 6% 16%);
  --color-inverse-darker: hsl(120 6% 0%);
  --color-on-inverse: #ffffff;
  --color-inverse-dark: #e9ebe8;
  --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;
  --leading-tight: 1.1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --radius-xl: 0.5rem;
  --radius-card: 0.25rem;
  --radius-panel: 0.375rem;
  --radius-hero: 0.5rem;
  --radius-full: 9999px;
  --radius-field: 0.125rem;
  --radius-selector: 0.125rem;
  --radius-box: 0.25rem;
  --shadow-none: none;
  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.65);
  --shadow-xl: 0 24px 56px hsl(120 6% 93%);
  --shadow-2xl: 0 32px 72px hsl(120 6% 93%);
  --shadow-card: none;
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-nav: none;
  --shadow-field: none;
  --shadow-box: none;
  --shadow-focus: 0 0 0 2px #ff6a3d;
  --control-weight: 600;
  --control-transform: none;
  --control-tracking: normal;
  --border-width: 1px;
  --border-color: #2c302c;
  --lc-button-background: #1d201d;
  --lc-button-border-color: #363a36;
  --lc-button-default-hover-background: #262926;
}

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

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

a,
[part~=lc-link-anchor] {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

html {
  -webkit-tap-highlight-color: transparent;
  font-size: var(--canvas-font-size, 16px);
}

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: var(--canvas-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: var(--canvas-backdrop, rgba(0, 0, 0, 0.8));
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--canvas-scrollbar-track, transparent);
}

::-webkit-scrollbar-thumb {
  background: var(--canvas-scrollbar-thumb, 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: var(--canvas-scrollbar-width, thin);
  scrollbar-color: var(--canvas-scrollbar-thumb, rgba(121, 121, 121, 0.4)) var(--canvas-scrollbar-track, 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;
}


:where(.lc-icon,lc-icon)[name="chevron-right"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18l6-6l-6-6'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="github"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5c.08-1.25-.27-2.48-1-3.5c.28-1.15.28-2.35 0-3.5c0 0-1 0-3 1.5c-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 4 9c0 3.5 3 5.5 6 5.5c-.39.49-.68 1.05-.85 1.65S8.93 17.38 9 18v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="box"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7l8.7 5l8.7-5M12 22V12'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="check"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="chevron-down"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="menu"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 5h16M4 12h16M4 19h16'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="x"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="search"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m21 21l-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="upload"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3v12m5-7l-5-5l-5 5m14 7v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="cloud-upload"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 13v8m-8-6.101A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242'/%3E%3Cpath d='m8 17l4-4l4 4'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="file"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="image"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="zoom-out"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21l-4.35-4.35M8 11h6'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="zoom-in"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21l-4.35-4.35M11 8v6m-3-3h6'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="plus"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-7-7v14'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="chevron-left"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m15 18l-6-6l6-6'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="minus"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="chevron-up"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m18 15l-6-6l-6 6'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="arrow-down"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 5v14m7-7l-7 7l-7-7'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="star"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.12 2.12 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.12 2.12 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.12 2.12 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="star"][solid]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.12 2.12 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.12 2.12 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.12 2.12 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16z'/%3E%3C/svg%3E")}
:where(.lc-icon,lc-icon)[name="arrow-right"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-7-7l7 7l-7 7'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="arrow-up-right"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 7h10v10M7 17L17 7'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="heart"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676a.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="sliders-vertical"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 8h4m-2 13v-9m0-4V3m5 13h4m-2-4V3m0 18v-5M3 14h4m-2-4V3m0 18v-7'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="alert-circle"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4m0 4h.01'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="type"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 4v16M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2M9 20h6'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="palette"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 22a1 1 0 0 1 0-20a10 9 0 0 1 10 9a5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z'/%3E%3Ccircle cx='13.5' cy='6.5' r='.5' fill='%23000'/%3E%3Ccircle cx='17.5' cy='10.5' r='.5' fill='%23000'/%3E%3Ccircle cx='6.5' cy='12.5' r='.5' fill='%23000'/%3E%3Ccircle cx='8.5' cy='7.5' r='.5' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="paintbrush"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14.622 17.897l-10.68-2.913M18.376 2.622a1 1 0 1 1 3.002 3.002L17.36 9.643a.5.5 0 0 0 0 .707l.944.944a2.41 2.41 0 0 1 0 3.408l-.944.944a.5.5 0 0 1-.707 0L8.354 7.348a.5.5 0 0 1 0-.707l.944-.944a2.41 2.41 0 0 1 3.408 0l.944.944a.5.5 0 0 0 .707 0zM9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="move"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 2v20m3-3l-3 3l-3-3M19 9l3 3l-3 3M2 12h20M5 9l-3 3l3 3M9 5l3-3l3 3'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="square"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='18' height='18' x='3' y='3' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' rx='2'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="download"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 15V3m9 12v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10l5 5l5-5'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="folder-x"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2ZM9.5 10.5l5 5m0-5l-5 5'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="search-x"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m13.5 8.5l-5 5m0-5l5 5'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21l-4.3-4.3'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="rotate-ccw"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9a9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="maximize-2"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 3h6v6m0-6l-7 7M3 21l7-7m-1 7H3v-6'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="trash-2"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 11v6m4-6v6m5-11v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="list-checks"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 5h8m-8 7h8m-8 7h8M3 17l2 2l4-4M3 7l2 2l4-4'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="eye"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696a10.75 10.75 0 0 1 19.876 0a1 1 0 0 1 0 .696a10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="layout-grid"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="compass"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16.24 7.76l-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="layers"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z'/%3E%3Cpath d='M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12'/%3E%3Cpath d='M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="loader"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 2v4m4.2 1.8l2.9-2.9M18 12h4m-5.8 4.2l2.9 2.9M12 18v4m-7.1-2.9l2.9-2.9M2 12h4M4.9 4.9l2.9 2.9'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="smartphone"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="file-text"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="pen-tool"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z'/%3E%3Cpath d='m18 13l-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18M2.3 2.3l7.286 7.286'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="code"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m16 18l6-6l-6-6M8 6l-6 6l6 6'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="activity"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="braces"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2a2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1m8 0h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="flask-conical"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2M6.453 15h11.094M8.5 2h7'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="user"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="tablet"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="monitor"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cpath d='M8 21h8m-4-4v4'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="panels-top-left"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="settings"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0a2.34 2.34 0 0 0 3.319 1.915a2.34 2.34 0 0 1 2.33 4.033a2.34 2.34 0 0 0 0 3.831a2.34 2.34 0 0 1-2.33 4.033a2.34 2.34 0 0 0-3.319 1.915a2.34 2.34 0 0 1-4.659 0a2.34 2.34 0 0 0-3.32-1.915a2.34 2.34 0 0 1-2.33-4.033a2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="circle-check"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16 9l-5.5 5.5L8 12'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="circle-x"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9l-6 6m0-6l6 6'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="triangle-alert"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="info"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4m0-4h.01'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="sticky-note"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M21 9a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 15 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2z'/%3E%3Cpath d='M15 3v5a1 1 0 0 0 1 1h5'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="lightbulb"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 14c.2-1 .7-1.7 1.5-2.5c1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5c.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="copy"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="moon"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="sun"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="alarm-clock"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2 2M5 3L2 6m20 0l-3-3M6.38 18.7L4 21m13.64-2.33L20 21'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="apple"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 6.528V3a1 1 0 0 1 1-1h0'/%3E%3Cpath d='M18.237 21A15 15 0 0 0 22 11a6 6 0 0 0-10-4.472A6 6 0 0 0 2 11a15.1 15.1 0 0 0 3.763 10a3 3 0 0 0 3.648.648a5.5 5.5 0 0 1 5.178 0A3 3 0 0 0 18.237 21'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="archive"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='20' height='5' x='2' y='3' rx='1'/%3E%3Cpath d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8m-10 4h4'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="arrow-left"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m12 19l-7-7l7-7m7 7H5'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="arrow-up"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 12l7-7l7 7m-7 7V5'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="at-sign"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="baby"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5m1-4h.01'/%3E%3Cpath d='M19.38 6.813A9 9 0 0 1 20.8 10.2a2 2 0 0 1 0 3.6a9 9 0 0 1-17.6 0a2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1m-3 5h.01'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="banknote"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="bed"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 4v16M2 8h18a2 2 0 0 1 2 2v10M2 17h20M6 8v9'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="bell"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10.268 21a2 2 0 0 0 3.464 0m-10.47-5.674A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="bike"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='18.5' cy='17.5' r='3.5'/%3E%3Ccircle cx='5.5' cy='17.5' r='3.5'/%3E%3Ccircle cx='15' cy='5' r='1'/%3E%3Cpath d='M12 17.5V14l-3-3l4-3l2 3h2'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="bluetooth"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m7 7l10 10l-5 5V2l5 5L7 17'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="book"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="book-open"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 5v16m8.001-2A2 2 0 0 0 22 17V5a2 2 0 0 0-1.999-2L16 3.002A5 5 0 0 0 12 5a5 5 0 0 0-4-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 1.999 2H8a5 5 0 0 1 4 2a5 5 0 0 1 4-2z'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="bookmark"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="brain"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 18V5m3 8a4.17 4.17 0 0 1-3-4a4.17 4.17 0 0 1-3 4m8.598-6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5'/%3E%3Cpath d='M17.997 5.125a4 4 0 0 1 2.526 5.77'/%3E%3Cpath d='M18 18a4 4 0 0 0 2-7.464'/%3E%3Cpath d='M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517'/%3E%3Cpath d='M6 18a4 4 0 0 1-2-7.464'/%3E%3Cpath d='M6.003 5.125a4 4 0 0 0-2.526 5.77'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="briefcase"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect width='20' height='14' x='2' y='6' rx='2'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="bug"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 20v-9m2-4a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4zm.12-3.12L16 2'/%3E%3Cpath d='M21 21a4 4 0 0 0-3.81-4M21 5a4 4 0 0 1-3.55 3.97M22 13h-4M3 21a4 4 0 0 1 3.81-4M3 5a4 4 0 0 0 3.55 3.97M6 13H2M8 2l1.88 1.88M9 7.13V6a3 3 0 1 1 6 0v1.13'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="building"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 10h.01M12 14h.01M12 6h.01M16 10h.01M16 14h.01M16 6h.01M8 10h.01M8 14h.01M8 6h.01M9 22v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3'/%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="calendar"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M8 2v3m8-3v3'/%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="camera"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="cat"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 5c.67 0 1.35.09 2 .26c1.78-2 5.03-2.84 6.42-2.26c1.4.58-.42 7-.42 7c.57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44c0 0-1.89-6.42-.5-7s4.72.23 6.5 2.23A9 9 0 0 1 12 5m-4 9v.5m8-.5v.5'/%3E%3Cpath d='M11.25 16.25h1.5L12 17z'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="chart-bar"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 3v16a2 2 0 0 0 2 2h16M7 16h8m-8-5h12M7 6h3'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="chart-line"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='m19 9l-5 5l-4-4l-3 3'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="chart-pie"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z'/%3E%3Cpath d='M21.21 15.89A10 10 0 1 1 8 2.83'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="circle"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="circle-dot"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="clipboard"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="clock"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="cloud"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="columns"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M12 3v18'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="contact"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M16 2v2M7 21v-2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2M8 2v2'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="cpu"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 20v2m0-20v2m5 16v2m0-20v2M2 12h2m-2 5h2M2 7h2m16 5h2m-2 5h2M20 7h2M7 20v2M7 2v2'/%3E%3Crect width='16' height='16' x='4' y='4' rx='2'/%3E%3Crect width='8' height='8' x='8' y='8' rx='1'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="credit-card"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cpath d='M2 10h20M6 14h2'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="crosshair"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M22 12h-4M6 12H2m10-6V2m0 20v-4'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="crown"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294zM5 21h14'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="database"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5v14a9 3 0 0 0 18 0V5'/%3E%3Cpath d='M3 12a9 3 0 0 0 18 0'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="dog"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M11.25 16.25h1.5L12 17zM16 14v.5'/%3E%3Cpath d='M4.42 11.247A13.2 13.2 0 0 0 4 14.556C4 18.728 7.582 21 12 21s8-2.272 8-6.444a11.7 11.7 0 0 0-.493-3.309M8 14v.5'/%3E%3Cpath d='M8.5 8.5c-.384 1.05-1.083 2.028-2.344 2.5c-1.931.722-3.576-.297-3.656-1c-.113-.994 1.177-6.53 4-7c1.923-.321 3.651.845 3.651 2.235A7.5 7.5 0 0 1 14 5.277c0-1.39 1.844-2.598 3.767-2.277c2.823.47 4.113 6.006 4 7c-.08.703-1.725 1.722-3.656 1c-1.261-.472-1.855-1.45-2.239-2.5'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="dumbbell"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17.596 12.768a2 2 0 1 0 2.829-2.829l-1.768-1.767a2 2 0 0 0 2.828-2.829l-2.828-2.828a2 2 0 0 0-2.829 2.828l-1.767-1.768a2 2 0 1 0-2.829 2.829zM2.5 21.5l1.4-1.4M20.1 3.9l1.4-1.4M5.343 21.485a2 2 0 1 0 2.829-2.828l1.767 1.768a2 2 0 1 0 2.829-2.829l-6.364-6.364a2 2 0 1 0-2.829 2.829l1.768 1.767a2 2 0 0 0-2.828 2.829zM9.6 14.4l4.8-4.8'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="external-link"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 3h6v6m-11 5L21 3m-3 10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="file-audio"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M17.5 22h.5a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4M2 19a2 2 0 1 1 4 0v1a2 2 0 1 1-4 0v-4a6 6 0 0 1 12 0v4a2 2 0 1 1-4 0v-1a2 2 0 1 1 4 0'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="file-code"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5m-10 4.5L8 15l2 2.5m4-5l2 2.5l-2 2.5'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="file-image"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Cpath d='m20 17l-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="file-video"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5m-4.967 5.44a.647.647 0 0 1 0 1.12l-4.065 2.352a.645.645 0 0 1-.968-.56v-4.704a.645.645 0 0 1 .967-.56z'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="film"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M7 3v18M3 7.5h4M3 12h18M3 16.5h4M17 3v18m0-13.5h4m-4 9h4'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="filter"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M22 3H2l8 9.46V19l4 2v-8.54z'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="fish"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6.5 12c.94-3.46 4.94-6 8.5-6s6.06 2.54 7 6c-.94 3.47-3.44 6-7 6s-7.56-2.53-8.5-6M18 12v.5'/%3E%3Cpath d='M16 17.93a9.77 9.77 0 0 1 0-11.86m-9 4.6C7 8 5.58 5.97 2.73 5.5c-1 1.5-1 5 .23 6.5c-1.24 1.5-1.24 5-.23 6.5C5.58 18.03 7 16 7 13.33'/%3E%3Cpath d='M10.46 7.26C10.2 5.88 9.17 4.24 8 3h5.8a2 2 0 0 1 1.98 1.67l.23 1.4m0 11.86l-.23 1.4A2 2 0 0 1 13.8 21H9.5a5.96 5.96 0 0 0 1.49-3.98'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="flag"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="flame"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0a5 5 0 0 1 1-3a1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="folder"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="folder-open"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 14l1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="folder-plus"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 10v6m-3-3h6m5 7a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="footprints"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 16v-2.38C4 11.5 2.97 10.5 3 8c.03-2.72 1.49-6 4.5-6C9.37 2 10 3.8 10 5.5c0 3.11-2 5.66-2 8.68V16a2 2 0 1 1-4 0m16 4v-2.38c0-2.12 1.03-3.12 1-5.62c-.03-2.72-1.49-6-4.5-6C14.63 6 14 7.8 14 9.5c0 3.11 2 5.66 2 8.68V20a2 2 0 1 0 4 0m-4-3h4M4 13h4'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="frown"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16 16s-1.5-2-4-2s-4 2-4 2m1-7h.01M15 9h.01'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="gem"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10.5 3L8 9l4 13l4-13l-2.5-6'/%3E%3Cpath d='M17 3a2 2 0 0 1 1.6.8l3 4a2 2 0 0 1 .013 2.382l-7.99 10.986a2 2 0 0 1-3.247 0l-7.99-10.986A2 2 0 0 1 2.4 7.8l2.998-3.997A2 2 0 0 1 7 3zM2 9h20'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="gift"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 7v14m8-10v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8m3.5-4a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5a1 1 0 0 1 0 5'/%3E%3Crect width='18' height='4' x='3' y='7' rx='1'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="git-branch"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15 6a9 9 0 0 0-9 9V3'/%3E%3Ccircle cx='18' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="git-commit"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 12h6m6 0h6'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="git-merge"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Cpath d='M6 21V9a9 9 0 0 0 9 9'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="globe"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20a14.5 14.5 0 0 0 0-20M2 12h20'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="graduation-cap"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0zM22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="hammer"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m15 12l-9.373 9.373a1 1 0 0 1-3.001-3L12 9m6 6l4-4'/%3E%3Cpath d='m21.5 11.5l-1.914-1.914A2 2 0 0 1 19 8.172v-.344a2 2 0 0 0-.586-1.414l-1.657-1.657A6 6 0 0 0 12.516 3H9l1.243 1.243A6 6 0 0 1 12 8.485V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="hand"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2m0 4V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2m0 4.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8'/%3E%3Cpath d='M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="hard-drive"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 16h.01m-7.798-4.423a2 2 0 0 0-.212.896V18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5.527a2 2 0 0 0-.212-.896L18.55 5.11A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11zm19.734.436H2.054M6 16h.01'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="hash"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 9h16M4 15h16M10 3L8 21m8-18l-2 18'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="headphones"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="heart-pulse"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676a.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3Cpath d='M3.22 13H9.5l.5-1l2 4.5l2-7l1.5 3.5h5.27'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="highlighter"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m9 11l-6 6v3h9l3-3'/%3E%3Cpath d='m22 12l-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="house"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="inbox"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="kanban"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 3v14m7-14v8m7-8v18'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="key"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m2 21l9.6-9.6m-4.1 4.1l2.3 2.3a1 1 0 0 1 0 1.4l-2.1 2.1a1 1 0 0 1-1.4 0L4 19'/%3E%3Ccircle cx='15.5' cy='7.5' r='5.5'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="lamp"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 12v6m-7.923-7.385A1 1 0 0 0 5 12h14a1 1 0 0 0 .923-1.385l-3.077-7.384A2 2 0 0 0 15 2H9a2 2 0 0 0-1.846 1.23ZM8 20a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="layout-dashboard"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="layout-list"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3Cpath d='M14 4h7m-7 5h7m-7 6h7m-7 5h7'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="link"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="list"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 5h.01M3 12h.01M3 19h.01M8 5h13M8 12h13M8 19h13'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="list-todo"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M13 5h8m-8 7h8m-8 7h8M3 17l2 2l4-4'/%3E%3Crect width='6' height='6' x='3' y='4' rx='1'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="lock"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="mail"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="map"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0zm.894.211v15M9 3.236v15'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="maximize"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m8 0h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="megaphone"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z'/%3E%3Cpath d='M6 14a12 12 0 0 0 2.4 7.2a2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14M8 6v8'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="message-circle"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092a10 10 0 1 0-4.777-4.719'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="message-square"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="mic"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 19v3m7-12v2a7 7 0 0 1-14 0v-2'/%3E%3Crect width='6' height='13' x='9' y='2' rx='3'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="minimize"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3m8 0v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="music"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="navigation"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 11l19-9l-9 19l-2-8z'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="notebook"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M2 6h4m-4 4h4m-4 4h4m-4 4h4'/%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cpath d='M16 2v20'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="package"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73zm1 .27V12'/%3E%3Cpath d='M3.29 7L12 12l8.71-5M7.5 4.27l9 5.15'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="paint-bucket"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 7L6 2m12.992 10H2.041m19.104 6.38A3.34 3.34 0 0 1 20 16.5a3.3 3.3 0 0 1-1.145 1.88c-.575.46-.855 1.02-.855 1.595A2 2 0 0 0 20 22a2 2 0 0 0 2-2.025c0-.58-.285-1.13-.855-1.595M8.5 4.5l2.148-2.148a1.205 1.205 0 0 1 1.704 0l7.296 7.296a1.205 1.205 0 0 1 0 1.704l-7.592 7.592a3.615 3.615 0 0 1-5.112 0l-3.888-3.888a3.615 3.615 0 0 1 0-5.112L5.67 7.33'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="paperclip"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m16 6l-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="pause"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='5' height='18' x='14' y='3' rx='1'/%3E%3Crect width='5' height='18' x='5' y='3' rx='1'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="pen"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="pencil"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497zM15 5l4 4'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="phone"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233a14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="pill"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10.5 20.5l10-10a4.95 4.95 0 1 0-7-7l-10 10a4.95 4.95 0 1 0 7 7m-2-12l7 7'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="pin"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 17v5M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="play"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="podcast"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath fill='%23000' d='M13 17a1 1 0 1 0-2 0l.5 4.5a.5.5 0 0 0 1 0z'/%3E%3Cpath d='M16.85 18.58a9 9 0 1 0-9.7 0'/%3E%3Cpath d='M8 14a5 5 0 1 1 8 0'/%3E%3Ccircle cx='12' cy='11' r='1' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="radio"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M16.247 7.761a6 6 0 0 1 0 8.478m2.828-11.306a10 10 0 0 1 0 14.134m-14.15 0a10 10 0 0 1 0-14.134m2.828 11.306a6 6 0 0 1 0-8.478'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="receipt"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 17V7m4 1h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8'/%3E%3Cpath d='M4 3a1 1 0 0 1 1-1a1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1a1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2a1 1 0 0 1-1-1z'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="refresh-cw"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9a9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5m5 4a9 9 0 0 1-9 9a9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="repeat"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m17 2l4 4l-4 4'/%3E%3Cpath d='M3 11v-1a4 4 0 0 1 4-4h14M7 22l-4-4l4-4'/%3E%3Cpath d='M21 13v1a4 4 0 0 1-4 4H3'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="rotate-cw"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="rows"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M3 12h18'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="rss"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16'/%3E%3Ccircle cx='5' cy='19' r='1'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="ruler"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Zm-6.8-2.8l2-2m-5-1l2-2m-5-1l2-2m7 11l2-2'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="save"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7M7 3v4a1 1 0 0 0 1 1h7'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="scissors"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Cpath d='M8.12 8.12L12 12m8-8L8.12 15.88'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M14.8 14.8L20 20'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="send"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11zm7.318-19.539l-10.94 10.939'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="server"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='20' height='8' x='2' y='2' rx='2' ry='2'/%3E%3Crect width='20' height='8' x='2' y='14' rx='2' ry='2'/%3E%3Cpath d='M6 6h.01M6 18h.01'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="share"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 2v13m4-9l-4-4l-4 4m-4 6v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="shield"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="shopping-bag"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M16 10a4 4 0 0 1-8 0M3.103 6.034h17.794'/%3E%3Cpath d='M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="shopping-cart"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m2.05 2.05l1.099-.028a1 1 0 0 1 1.008.815l2.69 14.347A1 1 0 0 0 7.83 18H18'/%3E%3Cpath d='M4.563 5h16.435a1 1 0 0 1 .981 1.204l-1.026 6.226A2 2 0 0 1 18.962 14H6.25'/%3E%3Ccircle cx='18' cy='20' r='2'/%3E%3Ccircle cx='8' cy='20' r='2'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="sidebar"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="sliders-horizontal"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 5H3m9 14H3M14 3v4m2 10v4m5-9h-9m9 7h-5m5-14h-7m-6 5v4m0-2H3'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="smile"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2s4-2 4-2M9 9h.01M15 9h.01'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="sparkles"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594zM20 2v4m2-2h-4'/%3E%3Ccircle cx='4' cy='20' r='2'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="square-check"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='m16 9l-5.5 5.5L8 12'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="stethoscope"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M11 2v2M5 2v2m0-1H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1'/%3E%3Cpath d='M8 15a6 6 0 0 0 12 0v-3'/%3E%3Ccircle cx='20' cy='10' r='2'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="store"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5m8.774-10.69a1.12 1.12 0 0 0-1.549 0a2.5 2.5 0 0 1-3.451 0a1.12 1.12 0 0 0-1.548 0a2.5 2.5 0 0 1-3.452 0a1.12 1.12 0 0 0-1.549 0a2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244'/%3E%3Cpath d='M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="table"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 3v18'/%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M3 9h18M3 15h18'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="tag"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="tags"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M13.172 2a2 2 0 0 1 1.414.586l6.71 6.71a2.4 2.4 0 0 1 0 3.408l-4.592 4.592a2.4 2.4 0 0 1-3.408 0l-6.71-6.71A2 2 0 0 1 6 9.172V3a1 1 0 0 1 1-1zM2 7v6.172a2 2 0 0 0 .586 1.414l6.71 6.71a2.4 2.4 0 0 0 3.191.193'/%3E%3Ccircle cx='10.5' cy='6.5' r='.5' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="target"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="terminal"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 19h8M4 17l6-6l-6-6'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="thermometer"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="thumbs-down"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 18.12L10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88M17 14V2'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="thumbs-up"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 5.88L14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88M7 10v12'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="timer"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10 2h4m-2 12l3-3'/%3E%3Ccircle cx='12' cy='14' r='8'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="trending-down"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M16 17h6v-6'/%3E%3Cpath d='m22 17l-8.5-8.5l-5 5L2 7'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="trending-up"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M16 7h6v6'/%3E%3Cpath d='m22 7l-8.5 8.5l-5-5L2 17'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="trophy"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10 14.66V17a1 1 0 0 1-1 1a2 2 0 0 0-2 2v2m7-7.34V17a1 1 0 0 0 1 1a2 2 0 0 1 2 2v2m.916-12H19.5A2.5 2.5 0 0 0 22 7.5V5a1 1 0 0 0-1-1h-3M4 22h16'/%3E%3Cpath d='M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z'/%3E%3Cpath d='M6.084 10H4.5A2.5 2.5 0 0 1 2 7.5V5a1 1 0 0 1 1-1h3'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="tv"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m17 2l-5 5l-5-5'/%3E%3Crect width='20' height='15' x='2' y='7' rx='2'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="unlock"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="user-check"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m16 11l2 2l4-4m-6 12v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="user-plus"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6m3-3h-6'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="users"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M16 3.128a4 4 0 0 1 0 7.744M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="video"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m16 13l5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5'/%3E%3Crect width='14' height='12' x='2' y='6' rx='2'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="volume-2"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298zM16 9a5 5 0 0 1 0 6m3.364 3.364a9 9 0 0 0 0-12.728'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="wallet"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/g%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="wifi"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 20h.01M2 8.82a15 15 0 0 1 20 0M5 12.859a10 10 0 0 1 14 0m-10.5 3.57a5 5 0 0 1 7 0'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="wrench"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="zap"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15.914 4a1.5 1.5 0 0 0-2.474-1.561l-9 9A1.5 1.5 0 0 0 5.5 14h4.002a.5.5 0 0 1 .471.666L8.086 20a1.5 1.5 0 0 0 2.475 1.56l9-9A1.5 1.5 0 0 0 18.5 10h-3.997a.5.5 0 0 1-.472-.667z'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
:where(.lc-icon,lc-icon)[name="arrow-down-right"]{--lc-icon-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m7 7l10 10m0-10v10H7'/%3E%3C/svg%3E");--lc-icon-paint:currentColor}
/* Component CSS (143 files) */
:where(.anim-drag-panel, anim-drag-panel) {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--anim-drag-panel-z, 999);
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--anim-drag-panel-top-inset, calc(var(--sat, env(safe-area-inset-top, 0px)) + 3rem)));
  background: var(--anim-drag-panel-background, var(--color-surface, #fff));
  border-radius: var(--anim-drag-panel-border-radius, 16px) var(--anim-drag-panel-border-radius, 16px) 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(calc(100% - var(--anim-drag-panel-peek, 3.6rem) - max(env(safe-area-inset-bottom, 0px), var(--sab, 0px))));

  & > [data-drag-handle] {
    flex-shrink: 0;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
  }

  & > [data-drag-body] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin-bottom: var(--anim-drag-panel-gutter, max(env(safe-area-inset-bottom, 0px), var(--sab, 0px)));
  }
}


:where(docs-home) {
  display: flex;
  flex-direction: column;

  h1,
  h2,
  p,
  ul {
    margin: 0;
  }

  h2 {
    font-weight: var(--font-black);
    letter-spacing: -0.02em;
    line-height: var(--leading-tight);
  }

  .home-eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .home-note {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .home-mono {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
  }

  .home-section-head {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    max-width: 44rem;

    h2 {
      font-size: var(--text-2xl);
    }

    p {
      font-size: var(--text-base);
      line-height: var(--leading-normal);
      color: var(--text-secondary);
    }
  }

  .home-hero {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    max-width: 44rem;
    padding: var(--spacing-4xl) 0 var(--spacing-3xl);
  }

  .home-title {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-size: var(--text-display);
    font-weight: var(--font-black);
    letter-spacing: -0.045em;
    line-height: 0.95;
  }

  .home-tagline {
    font-size: var(--text-section);
    letter-spacing: -0.025em;
    line-height: var(--leading-tight);
    color: var(--text-secondary);
  }

  .home-lede {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
  }

  .home-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
  }

  .home-install {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    height: 2.25rem;
    padding: 0 var(--spacing-xs) 0 var(--spacing-md);
    border: var(--border-width, 1px) solid var(--border-color);
    border-radius: var(--radius-field);
    background: var(--color-surface);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-color);
  }

  .home-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: var(--spacing-lg);
    border: var(--border-width, 1px) solid var(--border-color);
    border-radius: var(--radius-box);
    background: var(--color-surface);
    overflow: hidden;
  }

  .home-fact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-xl) var(--spacing-2xl);

    & + .home-fact {
      border-left: var(--border-width, 1px) solid var(--border-color);
    }

    p {
      font-size: var(--text-sm);
      line-height: var(--leading-normal);
      color: var(--text-secondary);
    }
  }

  .home-fact-head {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);

    b {
      font-size: var(--text-4xl);
      font-weight: var(--font-black);
      letter-spacing: -0.04em;
      line-height: 1;
    }

    .home-eyebrow {
      color: var(--text-color);
    }
  }

  .home-principles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-lg);
    padding: var(--spacing-2xl) 0;
    border-top: var(--border-width, 1px) solid var(--border-color);
  }

  .home-principle {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);

    h2 {
      font-size: var(--text-2xl);
    }

    p {
      font-size: var(--text-base);
      line-height: var(--leading-normal);
      color: var(--text-secondary);
    }
  }

  .home-index {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    padding: var(--spacing-2xl) 0;
    border-top: var(--border-width, 1px) solid var(--border-color);

    .home-section-head h2 {
      font-size: var(--text-3xl);
    }
  }

  .home-index-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-lg);
  }

  .home-index-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-xl);
    border: var(--border-width, 1px) solid var(--border-color);
    border-radius: var(--radius-box);
    background: var(--color-surface);
    color: var(--text-color);
    text-decoration: none;

    &:hover {
      border-color: var(--text-muted);
    }

    b {
      font-size: var(--text-base);
      font-weight: var(--font-bold);
    }

    p {
      font-size: var(--text-sm);
      line-height: var(--leading-normal);
      color: var(--text-secondary);
    }
  }

  .home-index-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-2xl);
    height: var(--spacing-2xl);
    border-radius: var(--radius-field);
    background: var(--color-surface-dark);
  }

  .home-pair {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--spacing-2xl) 0;
    border-top: var(--border-width, 1px) solid var(--border-color);
  }

  .home-pair-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--spacing-lg);
    align-items: stretch;
  }

  .home-tabs {
    align-self: flex-start;
  }

  .home-code {
    min-width: 0;
  }

  .home-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    min-height: 14rem;
    padding: var(--spacing-xl);
    border: var(--border-width, 1px) solid var(--border-color);
    border-radius: var(--radius-box);
    background-color: var(--canvas-background);
    background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
    background-size: var(--spacing-lg) var(--spacing-lg);
    text-align: center;

    my-counter button {
      height: 2.5rem;
      padding: 0 var(--spacing-xl);
      border: var(--border-width, 1px) solid var(--color-primary);
      border-radius: var(--radius-field);
      background: var(--color-primary);
      color: var(--color-inverse);
      font: inherit;
      font-size: var(--text-sm);
      font-weight: var(--font-semibold);
      cursor: pointer;

      &[data-big] {
        height: 3.25rem;
        padding: 0 var(--spacing-2xl);
        font-size: var(--text-lg);
      }
    }
  }

  .home-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 16rem;
    text-align: left;

    ul {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
      padding-left: var(--spacing-xl);
      font-size: var(--text-sm);
    }

    .home-note {
      padding-top: var(--spacing-sm);
      border-top: var(--border-width, 1px) solid var(--border-color);
    }
  }

  .home-signals {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-lg);

    b {
      font-size: var(--text-2xl);
      font-weight: var(--font-black);
    }
  }

  .home-env {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    min-width: 16rem;
    text-align: left;
  }

  .home-env-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-weight: var(--font-semibold);
    color: var(--color-primary);
  }

  .home-skins {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-lg);
    width: 100%;
  }

  .home-skin {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    text-align: left;
  }

  .home-signin {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);

    b {
      font-size: var(--text-base);
      font-weight: var(--font-black);
    }
  }

  .home-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: min(18rem, 100%);
    text-align: left;
  }

  .home-terminal {
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: var(--radius-box);
    background: var(--text-color);
    color: var(--canvas-background);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    text-align: left;
  }

  .home-terminal-dim {
    opacity: 0.6;
  }

  .home-terminal-ok {
    color: var(--color-success-light);
  }

  .home-terminal-bold {
    margin-top: var(--spacing-sm);
    font-weight: var(--font-bold);
  }

  .home-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2xl);
    margin: var(--spacing-3xl) 0 var(--spacing-4xl);
    padding: var(--spacing-3xl);
    border-radius: var(--radius-box);
    background: var(--text-color);
    color: var(--canvas-background);

    lc-button {
      border-color: var(--canvas-background);
    }

    .home-cta-solid {
      background: var(--canvas-background);
      color: var(--text-color);
    }

    .home-cta-outline {
      background: transparent;
      color: var(--canvas-background);
    }
  }

  .home-cta-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 36rem;

    h2 {
      font-size: var(--text-section);
      color: var(--canvas-background);
    }

    p {
      font-size: var(--text-base);
      line-height: var(--leading-normal);
      opacity: 0.75;
    }
  }

  .home-footer {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--spacing-2xl);
    padding: var(--spacing-3xl) 0 var(--spacing-xl);
    border-top: var(--border-width, 1px) solid var(--border-color);
  }

  .home-footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);

    p {
      max-width: 22rem;
      font-size: var(--text-sm);
      line-height: var(--leading-normal);
      color: var(--text-secondary);
    }
  }

  .home-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: var(--font-black);
    letter-spacing: -0.01em;
  }

  .home-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: var(--radius-field);
    background: var(--color-primary);
    color: var(--color-inverse);
  }

  .home-footer-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);

    lc-link {
      font-size: var(--text-sm);
      font-weight: var(--font-medium);
      color: var(--text-secondary);
    }
  }

  .home-footer-note {
    grid-column: 1 / -1;
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  @media (max-width: 767px) {
    .home-hero {
      padding: var(--spacing-2xl) 0 var(--spacing-xl);
    }

    .home-facts {
      grid-template-columns: minmax(0, 1fr);
    }

    .home-fact {
      padding: var(--spacing-lg);

      & + .home-fact {
        border-left: 0;
        border-top: var(--border-width, 1px) solid var(--border-color);
      }
    }

    .home-principles,
    .home-skins {
      grid-template-columns: minmax(0, 1fr);
    }

    .home-index-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--spacing-md);
    }

    .home-index-card {
      padding: var(--spacing-lg);
    }

    .home-principles,
    .home-index,
    .home-pair {
      padding: var(--spacing-xl) 0;
    }

    .home-stage {
      min-height: 12rem;
    }

    .home-cta {
      flex-direction: column;
      align-items: stretch;
      margin: var(--spacing-xl) 0 var(--spacing-2xl);
      padding: var(--spacing-2xl) var(--spacing-xl);
    }

    .home-footer {
      grid-template-columns: minmax(0, 1fr);
      padding: var(--spacing-2xl) 0 var(--spacing-lg);
    }
  }
}


:where(docs-native) {
  display: block;

  .native-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    scroll-margin-top: var(--docs-header);

    & > h2 {
      margin: 0;
      font-size: var(--text-2xl);
      font-weight: var(--font-bold);
      letter-spacing: -0.02em;
    }

    & > p {
      margin: 0;
      max-width: 68ch;
      color: var(--text-secondary);
      line-height: var(--leading-normal);
    }
  }

  .native-index {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
    list-style: none;

    & li {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: var(--spacing-md) var(--spacing-lg);
      border: var(--border-width, 1px) solid var(--border-color);
      border-radius: var(--radius-box);
      background: var(--color-surface);
    }

    & span {
      color: var(--text-muted);
      font-size: var(--text-sm);
    }
  }

  .native-link {
    color: var(--color-primary);
    font-weight: var(--font-semibold, 600);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }
}


:where(docs-native-comparison) {
  display: block;

  .native-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    scroll-margin-top: var(--docs-header);

    & > h2 {
      margin: 0;
      font-size: var(--text-2xl);
      font-weight: var(--font-bold);
      letter-spacing: -0.02em;
    }

    & > p {
      margin: 0;
      max-width: 68ch;
      color: var(--text-secondary);
      line-height: var(--leading-normal);
    }
  }

  .native-step {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    border: var(--border-width, 1px) solid var(--border-color);
    border-radius: var(--radius-box);
    background: var(--color-surface);

    & h3 {
      margin: 0;
      font-size: var(--text-lg);
      font-weight: var(--font-bold);
    }

    & p {
      margin: 0;
      max-width: 72ch;
      line-height: var(--leading-normal);
    }

    & code {
      font-family: var(--font-mono, ui-monospace, monospace);
      font-size: 0.92em;
    }
  }

  .native-more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-weight: var(--font-semibold, 600);
  }

  .native-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--spacing-md);
  }

  .native-note {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
  }

  .native-link {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;

    &:hover {
      text-decoration-thickness: 2px;
    }
  }
}


:where(docs-native-topic) {
  display: block;

  .topic-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    scroll-margin-top: var(--docs-header);

    & > h2 {
      margin: var(--spacing-lg) 0 0;
      font-size: var(--text-2xl);
      font-weight: var(--font-bold);
      letter-spacing: -0.02em;
    }

    & > p,
    & > .topic-list {
      margin: 0;
      max-width: 72ch;
      line-height: var(--leading-normal);
    }

    & code {
      font-family: var(--font-mono, ui-monospace, monospace);
      font-size: 0.92em;
    }
  }

  .topic-cell-code {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.92em;
    white-space: nowrap;
  }

  .topic-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding-left: var(--spacing-lg);
  }

  .topic-compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: var(--spacing-md);
    align-items: start;
  }

  .topic-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--spacing-md);
  }

  .topic-bars {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: 0;
    max-width: 48rem;

    & lc-bar-chart {
      --lc-bar-chart-label-size: var(--text-xs);
      --lc-bar-chart-label-width: 9rem;
    }

    & figcaption {
      color: var(--text-muted);
      font-size: var(--text-sm);
      font-weight: var(--font-semibold, 600);
    }
  }

  .native-link {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;

    &:hover {
      text-decoration-thickness: 2px;
    }
  }
}


:where(docs-skins) {
  display: block;

  .skins-preset {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .skins-head {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);

    h2 {
      margin: 0;
      font-size: var(--text-2xl);
      font-weight: var(--font-black);
      letter-spacing: -0.02em;
    }

    p {
      margin: 0;
      font-size: var(--text-sm);
      color: var(--text-muted);
    }
  }
}


:where(template-shell) {
  --docs-header: 3.5rem;
  --docs-nav: 16rem;
  --docs-aside: 13.75rem;
  --docs-measure: 53.75rem;
  --docs-landing: 72rem;
  display: block;
  min-height: 100vh;

  lc-app-shell {
    --lc-app-shell-max-width: 90rem;

    & [part~=lc-app-shell-navbar],
    & [part~=lc-app-shell-header] {
      background: var(--canvas-background);
      border-bottom: var(--border-width, 1px) solid var(--border-color);
    }
  }

  .shell-header {
    display: flex;
    align-items: center;
    flex: 1;
    gap: var(--spacing-md);
    height: var(--docs-header);
    padding: 0 var(--spacing-xl);
  }

  .shell-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-color);
    font-weight: var(--font-black);
    letter-spacing: -0.01em;
  }

  .shell-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: var(--radius-field);
    background: var(--color-primary);
    color: var(--color-inverse);
  }

  .shell-links {
    --lc-nav-item-active-background: var(--color-surface-dark);
    --lc-nav-item-active-color: var(--text-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-left: var(--spacing-lg);
  }

  .shell-spacer {
    flex: 1;
  }

  .shell-skin {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    height: 2.25rem;
    padding: 0 var(--spacing-sm) 0 var(--spacing-md);
    border: var(--border-width, 1px) solid var(--border-color);
    border-radius: var(--radius-field);
    background: var(--color-surface);
    color: var(--text-color);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    white-space: nowrap;

    lc-circle {
      width: 0.625rem;
      height: 0.625rem;
    }

    lc-icon {
      color: var(--text-muted);
    }
  }

  .shell-skin-row {
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .shell-skin-swatches {
    display: inline-flex;
    gap: 2px;
    padding-top: 2px;

    lc-circle {
      width: 0.75rem;
      height: 0.75rem;
    }
  }

  .shell-skin-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;

    b {
      font-size: var(--text-sm);
      font-weight: var(--font-semibold);
    }

    small {
      font-size: var(--text-xs);
      color: var(--text-muted);
      white-space: normal;
    }
  }

  .shell-skin-note {
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: var(--border-width, 1px) solid var(--border-color);
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .shell-nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
  }

  .shell-nav-skin {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-lg);
    border-bottom: var(--border-width, 1px) solid var(--border-color);
  }

  .shell-main {
    padding: var(--spacing-2xl);
  }

  .shell-main-landing {
    max-width: var(--docs-landing);
    margin: 0 auto;
    padding: 0 var(--spacing-2xl);
  }

  .shell-github {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-field);
    color: var(--text-secondary);
  }

  .shell-aside {
    padding: var(--spacing-xl) var(--spacing-lg);
  }

  .docs-page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
  }

  .docs-title {
    margin: 0;
    font-size: var(--text-4xl);
    font-weight: var(--font-black);
    letter-spacing: -0.03em;
    line-height: var(--leading-tight);
  }

  .docs-lede {
    margin: 0;
    max-width: 62ch;
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
  }

  .docs-pager {
    padding-top: var(--spacing-xl);
    border-top: var(--border-width, 1px) solid var(--border-color);
  }

  @media (max-width: 1199px) {
    --docs-nav: 14.5rem;
  }

  @media (max-width: 767px) {
    .shell-header {
      gap: var(--spacing-xs);
      padding: 0 var(--spacing-md) 0 0;
    }

    .shell-links {
      display: none;
    }

    .shell-main {
      padding: var(--spacing-lg);
    }

    .shell-main-landing {
      padding: 0 var(--spacing-lg);
    }
  }
}


:where(docs-theming) {
  display: block;

  .theming-generator {
    display: block;
    min-height: 70vh;
    border: var(--border-width, 1px) solid var(--border-color);
    border-radius: var(--radius-box);
    overflow: hidden;
  }
}


:where(.lc-about-section, lc-about-section) {
  display: block;

  .about-section {
    padding: var(--spacing-4xl) var(--spacing-xl);
    background: var(--color-surface);
    color: var(--text-color);
  }

  .about-section-inner {
    max-width: 860px;
    margin: 0 auto;
  }

  .about-section-split .about-section-inner {
    max-width: 1100px;
    display: grid;
    gap: var(--spacing-3xl);
    grid-template-columns: 1fr;
  }

  @media (min-width: 768px) {
    .about-section-split .about-section-inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
      align-items: start;
    }
  }

  .about-section-head {
    margin-bottom: var(--spacing-2xl);
  }

  .about-section-split .about-section-head {
    margin-bottom: 0;
  }

  .about-section-prose .about-section-head {
    text-align: center;
  }

  .about-eyebrow {
    display: inline-block;
    font-size: var(--text-eyebrow);
    font-weight: var(--font-bold);
    padding: 6px var(--spacing-lg);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--spacing-xl);
  }

  .about-headline {
    font-size: var(--text-section);
    font-weight: var(--font-black);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: var(--spacing-lg);
    color: var(--text-color);
  }

  .about-subheadline {
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    line-height: 1.55;
    max-width: 620px;
  }

  .about-section-prose .about-subheadline {
    margin-left: auto;
    margin-right: auto;
  }

  .about-body {
    font-size: var(--text-body);
    line-height: 1.7;
    color: var(--text-color);
  }

  .about-body :is(p, ul, ol, blockquote) {
    margin-bottom: var(--spacing-lg);
  }

  .about-body :is(h2, h3, h4) {
    font-weight: var(--font-bold);
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.01em;
  }

  .about-body h2 {
    font-size: 1.5rem;
  }

  .about-body h3 {
    font-size: 1.2rem;
  }

  .about-body a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .about-body blockquote {
    border-left: 3px solid
      color-mix(in srgb, var(--text-color) 15%, transparent);
    padding-left: var(--spacing-lg);
    color: var(--text-secondary);
    font-style: italic;
  }

  .about-body :is(ul, ol) {
    padding-left: var(--spacing-xl);
  }

  .about-body li {
    margin-bottom: var(--spacing-xs);
  }
}


:where(.lc-accordion, lc-accordion) {
  display: flex;
  width: 100%;

  & [part~=lc-accordion-container] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--lc-accordion-gap, 0);
    background: var(--lc-accordion-background, transparent);
    border: var(--lc-accordion-border-width, var(--border-width, 1px)) solid var(--lc-accordion-border-color, var(--border-color, transparent));
    border-radius: var(--lc-accordion-border-radius, var(--radius-md, 0.375rem));
    overflow: hidden;
  }

  /* Headers (odd children = 1st, 3rd, 5th...) */
  & slot > *:nth-child(odd) {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    cursor: pointer;
    user-select: none;
    padding: var(--lc-accordion-padding, 0.5rem 0.75rem);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-semibold, 600);
    color: var(--lc-accordion-header-color, inherit);
    background: var(--lc-accordion-header-background, transparent);
    border: none;
    border-top: var(--border-width, 1px) solid var(--lc-accordion-header-border-top, var(--color-surface-dark));
    transition: var(--lc-accordion-transition, background-color 0.15s ease, color 0.15s ease);

    &:hover {
      background: var(--lc-accordion-header-hover-background, var(--color-surface-dark));
      color: var(--lc-accordion-header-hover-color, inherit);
    }

    &[active] {
      background: var(--lc-accordion-header-active-background, var(--color-surface-darker));
      color: var(--lc-accordion-header-active-color, inherit);
    }
  }

  & slot > *:nth-child(1) {
    border-top: none;
  }

  /* Panels (even children = 2nd, 4th, 6th...) */
  & slot > *:nth-child(even) {
    background: var(--lc-accordion-panel-background, transparent);
    color: var(--lc-accordion-panel-color, inherit);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--leading-relaxed, 1.6);
    transition: var(--lc-accordion-transition, background-color 0.15s ease, color 0.15s ease);

    &[hide] {
      display: none;
    }
  }

  /* Bordered variant */
  &[variant="bordered"] {
    --lc-accordion-border-color: var(--color-surface-dark);
    --lc-accordion-header-border-top: var(--color-surface-dark);
    --lc-accordion-header-hover-background: var(--color-surface-dark);
    --lc-accordion-header-active-background: var(--color-surface-darker);

    & [part~=lc-accordion-container] {
      border-width: 1px;
    }
  }

  /* Filled variant */
  &[variant="filled"] {
    --lc-accordion-background: var(--color-surface-darker);
    --lc-accordion-border-color: transparent;
    --lc-accordion-header-border-top: var(--color-surface-dark);
    --lc-accordion-header-background: var(--color-surface-darker);
    --lc-accordion-header-hover-background: var(--color-surface-dark);
    --lc-accordion-header-active-background: var(--color-surface-dark);
    --lc-accordion-panel-background: var(--color-surface-darker);

    & slot > *:nth-child(odd)[active] {
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    }
  }

  /* Flush variant: minimal, no borders/padding around container */
  &[variant="flush"] {
    --lc-accordion-background: transparent;
    --lc-accordion-border-color: transparent;
    --lc-accordion-header-border-top: var(--color-surface-dark);
    --lc-accordion-header-background: transparent;
    --lc-accordion-header-hover-background: var(--color-surface-dark);
    --lc-accordion-header-active-background: var(--color-surface-darker);
    --lc-accordion-panel-background: transparent;

    & [part~=lc-accordion-container] {
      border: none;
      border-radius: 0;
    }

    & slot > *:nth-child(1) {
      border-top: none;
    }
  }

  /* Separated variant */
  &[variant="separated"] {
    --lc-accordion-gap: var(--spacing-xs, 0.25rem);
    --lc-accordion-border-color: transparent;
    --lc-accordion-header-border-top: transparent;

    & [part~=lc-accordion-container] {
      border: none;
    }

    & slot > *:nth-child(odd) {
      border: var(--border-width, 1px) solid var(--color-surface-dark);
      border-radius: var(--lc-accordion-border-radius, var(--radius-md, 0.375rem));
    }

    & slot > *:nth-child(even) {
      border: var(--border-width, 1px) solid var(--color-surface-dark);
      border-top: none;
      border-radius: 0 0 var(--lc-accordion-border-radius, var(--radius-md, 0.375rem)) var(--lc-accordion-border-radius, var(--radius-md, 0.375rem));
    }
  }

  &:not([rounded]) {
    --lc-accordion-border-radius: 0;

    & [part~=lc-accordion-container] {
      border-radius: 0;
    }
  }
}


:where(.lc-alert, lc-alert) {
	display: block;

	& [part~=lc-alert-alert] {
		display: flex;
		align-items: flex-start;
		gap: var(--lc-alert-gap, 0.75rem);
		padding: var(--lc-alert-padding, 0.75rem 1rem);
		background: var(--lc-alert-background, var(--color-surface-light));
		border: var(--border-width, 1px) solid var(--lc-alert-border-color, var(--color-surface));
		border-left: var(--lc-alert-accent-width, 4px) solid var(--lc-alert-accent-color, var(--color-primary));
		border-radius: var(--lc-alert-border-radius, var(--radius-box, var(--radius-md, 0.375rem)));
	}

	& [part~=lc-alert-icon] {
		flex-shrink: 0;
		width: 1.25rem;
		height: 1.25rem;
		color: var(--lc-alert-icon-color, var(--color-primary));
	}

	& [part~=lc-alert-content] {
		flex: 1;
		min-width: 0;
		font-size: var(--lc-alert-font-size, var(--text-sm, 0.875rem));
		line-height: 1.5;
		color: var(--lc-alert-text-color, var(--text-color));
	}

	&[variant="default"] [part~=lc-alert-alert] {
		--lc-alert-accent-color: var(--color-surface-dark);
		--lc-alert-icon-color: var(--color-surface-dark);
	}

	&[variant="success"] [part~=lc-alert-alert] {
		--lc-alert-accent-color: var(--color-success);
		--lc-alert-icon-color: var(--color-success);
	}

	&[variant="warning"] [part~=lc-alert-alert] {
		--lc-alert-accent-color: var(--color-warning);
		--lc-alert-icon-color: var(--color-warning);
	}

	&[variant="error"] [part~=lc-alert-alert] {
		--lc-alert-accent-color: var(--color-danger);
		--lc-alert-icon-color: var(--color-danger);
	}

	&[variant="info"] [part~=lc-alert-alert] {
		--lc-alert-accent-color: var(--color-info);
		--lc-alert-icon-color: var(--color-info);
	}

	&[variant="note"] [part~=lc-alert-alert] {
		--lc-alert-accent-color: var(--text-muted);
		--lc-alert-icon-color: var(--text-muted);
	}

	&[variant="tip"] [part~=lc-alert-alert] {
		--lc-alert-accent-color: var(--color-secondary);
		--lc-alert-icon-color: var(--color-secondary);
	}

	& [part~=lc-alert-title] {
		margin-bottom: 0.25rem;
		font-weight: var(--lc-alert-title-font-weight, var(--font-semibold, 600));
		color: var(--lc-alert-title-color, var(--text-color));
	}
}


:where(.lc-alert-dialog, lc-alert-dialog) {
  dialog {
    padding: 0;
    border: none;
    border-radius: var(--lc-alert-dialog-border-radius, var(--radius-lg, 0.5rem));
    box-shadow: var(--lc-alert-dialog-shadow, var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.2)));
    max-width: var(--lc-alert-dialog-max-width, 28rem);
    background: transparent;

    &::backdrop {
      background-color: var(--lc-alert-dialog-backdrop, rgba(0, 0, 0, 0.5));
      backdrop-filter: blur(2px);
    }
  }

  .alert-dialog-content {
    display: flex;
    flex-direction: column;
    gap: var(--lc-alert-dialog-gap, 1rem);
    padding: var(--lc-alert-dialog-padding, 1.5rem);
    background-color: var(--lc-alert-dialog-background, var(--color-surface));
    border-radius: var(--lc-alert-dialog-border-radius, var(--radius-lg, 0.5rem));

    &.success .alert-dialog-icon {
      background-color: var(--color-success);
      color: var(--color-success);
    }

    &.error {
      .alert-dialog-icon {
        background-color: var(--color-danger);
        color: var(--color-danger);
      }

      .confirm {
        background-color: var(--color-danger);
        border-color: var(--color-danger);

        &:hover {
          background-color: var(--color-danger);
          opacity: 0.9;
        }
      }
    }

    &.warning .alert-dialog-icon {
      background-color: var(--color-warning);
      color: var(--color-warning);
    }

    &.info .alert-dialog-icon {
      background-color: var(--color-info);
      color: var(--color-primary);
    }
  }

  .alert-dialog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background-color: var(
      --lc-alert-dialog-icon-background,
      var(--color-surface-darker)
    );
    color: var(--lc-alert-dialog-icon-color, var(--color-primary));
    margin: 0 auto;

    lc-icon {
      width: 1.5rem;
      height: 1.5rem;
    }
  }

  .alert-dialog-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
    text-align: center;
  }

  .alert-dialog-title {
    margin: 0;
    font-size: var(--lc-alert-dialog-title-font-size, var(--text-xl, 1.25rem));
    font-weight: var(--lc-alert-dialog-title-font-weight, var(--font-bold, 700));
    color: var(--lc-alert-dialog-title-color, var(--color-primary));
  }

  .alert-dialog-message {
    margin: 0;
    font-size: var(--lc-alert-dialog-message-font-size, var(--text-sm, 0.875rem));
    color: var(--lc-alert-dialog-message-color, var(--color-secondary));
    line-height: var(--leading-normal, 1.5);
  }

  .alert-dialog-actions {
    display: flex;
    gap: var(--spacing-sm, 0.5rem);
    justify-content: flex-end;
    margin-top: var(--spacing-md, 0.75rem);
  }

  .alert-dialog-button {
    flex: 1;
    padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1rem);
    border: var(--border-width, 1px) solid var(--color-primary);
    background-color: var(--color-surface);
    color: var(--color-primary);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-medium, 500);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease;

    &:hover {
      background-color: var(--color-hover);
    }

    &.confirm {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--color-inverse);

      &:hover {
        background-color: var(--color-hover);
        border-color: var(--color-hover);
      }
    }
  }
}


:where(.lc-app-container, lc-app-container) {

  display: flex;
  width: 100%;
  overflow: hidden;

  &[use-safe-area] {
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
    --safe-left: env(safe-area-inset-left);
    --safe-right: env(safe-area-inset-right);
  }

  & [part~=lc-app-container-container] {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    background: var(--canvas-background);
  }

  & [part~=lc-app-container-content] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: var(--lc-app-container-content-padding, 0);
  }

  &[header-fixed] [part~=lc-app-container-content] {
    padding-top: calc(56px + var(--safe-top, 0px));
  }

  &[show-bottom-nav] [part~=lc-app-container-content] {
    padding-bottom: calc(56px + var(--safe-bottom, 0px));
  }

  [slot="floating-action"] {
    position: fixed;
    bottom: calc(72px + var(--safe-bottom, 0px));
    right: var(--spacing-lg);
    z-index: 90;
  }

  &:not([show-bottom-nav]) [slot="floating-action"] {
    bottom: calc(var(--spacing-lg) + var(--safe-bottom, 0px));
  }

  & [part~=lc-app-container-body] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  & [part~=lc-app-container-main] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  & [part~=lc-app-container-toolbar] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-height: 40px;
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-surface);
    border-bottom: 1px solid var(--border-color);
  }

  & [part~=lc-app-container-panel] {
    display: flex;
    flex-direction: column;
    width: 300px;
    min-width: 200px;
    max-width: 600px;
    border-left: 1px solid var(--border-color);
    background: var(--color-surface);
    overflow-y: auto;
    resize: horizontal;
  }

  & [part~=lc-app-container-statusbar] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    min-height: 24px;
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-surface);
    border-top: 1px solid var(--border-color);
    font-size: var(--text-xs, 0.75rem);
    color: var(--text-muted);

    &:empty {
      display: none;
    }
  }

  lc-sidebar {
    height: 100%;
    border-right: 1px solid var(--border-color);

    &[position="right"] {
      order: 3;
      border-right: none;
      border-left: 1px solid var(--border-color);
    }
  }

  [slot="toolbar"] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
  }

  [slot="status-bar"] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
  }

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

@media (min-width: 768px) {
  :where(.lc-app-container, lc-app-container) [part~=lc-app-container-content] {
    padding: var(--lc-app-container-content-padding, var(--spacing-lg));
    background: var(--canvas-background);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :where(.lc-app-container, lc-app-container) {
    lc-sidebar {
      width: 240px;
    }

    & [part~=lc-app-container-content] {
      padding: var(--spacing-md);
    }
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  :where(.lc-app-container, lc-app-container) [part~=lc-app-container-panel] {
    width: 250px;
  }
}

@media (min-width: 1440px) {
  :where(.lc-app-container, lc-app-container) [part~=lc-app-container-content] {
    padding: var(--lc-app-container-content-padding, var(--spacing-xl));
  }
}

@media (prefers-color-scheme: dark) {
  :where(.lc-app-container, lc-app-container) {
    & [part~=lc-app-container-toolbar] {
      background: var(--color-surface-dark);
    }

    & [part~=lc-app-container-statusbar] {
      background: var(--color-surface-dark);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.lc-app-container, lc-app-container) [part~=lc-app-container-content] {
    scroll-behavior: auto;
  }
}

@media print {
  :where(.lc-app-container, lc-app-container) {
    height: auto;

    & [part~=lc-app-container-container] {
      display: block;
      height: auto;
    }

    lc-app-header,
    lc-bottom-nav,
    lc-title-bar,
    lc-sidebar {
      display: none;
    }

    & [part~=lc-app-container-toolbar],
    & [part~=lc-app-container-statusbar],
    & [part~=lc-app-container-panel] {
      display: none;
    }

    & [part~=lc-app-container-content] {
      overflow: visible;
      height: auto;
      padding: 0;
    }
  }
}


:where(.lc-app-header, lc-app-header) {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 56px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--lc-app-header-background, var(--color-surface));
  box-shadow: var(--lc-app-header-shadow, var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05)));

  padding-top: calc(var(--spacing-sm) + env(safe-area-inset-top));
  padding-left: calc(var(--spacing-md) + env(safe-area-inset-left));
  padding-right: calc(var(--spacing-md) + env(safe-area-inset-right));

  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;

  &[fixed] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }

  &[transparent] {
    --lc-app-header-background: transparent;
    --lc-app-header-shadow: none;
  }

  &[show-shadow="false"] {
    --lc-app-header-shadow: none;
  }

  &[elevation="0"] {
    --lc-app-header-shadow: none;
  }

  &[elevation="2"] {
    --lc-app-header-shadow: var(--shadow-md);
  }

  &[elevation="3"] {
    --lc-app-header-shadow: var(--shadow-lg);
  }

  & [part~=lc-app-header-start] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
  }

  & [part~=lc-app-header-title] {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;

    h1 {
      margin: 0;
      font-size: var(--text-lg, 1.125rem);
      font-weight: var(--font-semibold, 600);
      color: var(--text-color);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  & [part~=lc-app-header-end] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
  }

  & [part~=lc-app-header-back-button] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: var(--spacing-xs);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;

    &::before {
      content: "‹";
      font-size: var(--text-3xl, 28px);
      line-height: 1;
      font-weight: var(--font-normal, 300);
    }

    &:hover {
      background: var(--color-surface-light);
    }

    &:active {
      background: var(--color-surface-dark);
    }
  }

  [slot="start"] button,
  [slot="end"] button,
  [slot="start"] [role="button"],
  [slot="end"] [role="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.2s ease;

    &:hover {
      background: var(--color-surface-light);
    }

    &:active {
      background: var(--color-surface-dark);
    }
  }

  [slot="start"] lc-icon,
  [slot="end"] lc-icon {
    width: 24px;
    height: 24px;
  }
}

@media (min-width: 768px) {
  :where(.lc-app-header, lc-app-header) {
    padding: var(--spacing-md) var(--spacing-lg);
    padding-top: calc(var(--spacing-md) + env(safe-area-inset-top));
    padding-left: calc(var(--spacing-lg) + env(safe-area-inset-left));
    padding-right: calc(var(--spacing-lg) + env(safe-area-inset-right));
  }
}


:where(.lc-app-shell, lc-app-shell) {
  display: flex;
  width: 100%;
  min-height: 100vh;

  & [part~=lc-app-shell-container] {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
  }

  & [part~=lc-app-shell-header],
  & [part~=lc-app-shell-navbar] {
    flex-shrink: 0;
  }

  & [part~=lc-app-shell-navbar] {
    position: sticky;
    top: 0;
    z-index: 10;
  }

  & [part~=lc-app-shell-header] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: var(--lc-app-shell-header-height, 3.5rem);
  }

  & [part~=lc-app-shell-menu-button] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: var(--radius-field, var(--radius-md, 0.375rem));
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  & [part~=lc-app-shell-body] {
    display: grid;
    grid-template-columns: var(--lc-app-shell-nav-width, 0px) minmax(0, 1fr) var(--lc-app-shell-aside-width, 0px);
    flex: 1;
    width: 100%;
    max-width: var(--lc-app-shell-max-width, none);
    margin: 0 auto;
  }

  & [part~=lc-app-shell-nav],
  & [part~=lc-app-shell-aside] {
    position: sticky;
    top: var(--lc-app-shell-header-height, 3.5rem);
    height: calc(100vh - var(--lc-app-shell-header-height, 3.5rem));
    overflow-y: auto;
  }

  & [part~=lc-app-shell-nav] {
    border-right: var(--border-width, 1px) solid var(--lc-app-shell-border-color, var(--border-color));
  }

  & [part~=lc-app-shell-content] {
    flex: 1;
    min-width: 0;
  }

  & [part~=lc-app-shell-footer] {
    flex-shrink: 0;
  }

  & [part~=lc-app-shell-bottom-nav] {
    flex-shrink: 0;
  }
}


:where(.lc-auth-form, lc-auth-form) {
  display: block;
  --lc-auth-form-border-width: 0;
  --lc-auth-form-border-color: transparent;
  --lc-auth-form-border-radius: var(--radius-md, 0.5rem);
  --lc-auth-form-shadow: none;
  --lc-auth-form-error-background: #fef2f2;
  --lc-auth-form-error-border-color: var(--color-danger, #fca5a5);
  --lc-auth-form-error-color: var(--color-danger-dark, #dc2626);
  --lc-auth-form-tab-background: var(--color-surface-dark, #f5f5f5);
  --lc-auth-form-tab-active-background: var(--color-surface, white);
  --lc-auth-form-font-weight: var(--button-font-weight, 700);
  --lc-auth-form-text-transform: var(--button-text-transform, none);
  --lc-auth-form-divider-color: var(--color-surface-darker, #e5e5e5);
  --lc-auth-form-muted-color: var(--text-muted, #6b7280);

  border: var(--lc-auth-form-border-width) solid var(--lc-auth-form-border-color);
  border-radius: var(--lc-auth-form-border-radius);
  box-shadow: var(--lc-auth-form-shadow);
  overflow: hidden;
  background: var(--color-surface, white);

  .auth-tabs {
    --tabs-border-width: 0;
    --tabs-border-radius: 0;
    --tabs-shadow: none;
    --tabs-list-background: var(--lc-auth-form-tab-background);
    --tabs-list-border-color: var(--color-inverse, black);
    --tab-active-background: var(--lc-auth-form-tab-active-background);
    --tab-active-color: var(--color-inverse, black);
    --tab-font-weight: var(--lc-auth-form-font-weight);
    --tab-text-transform: var(--lc-auth-form-text-transform);
    --tab-indicator-color: var(--color-inverse, black);

    [slot="tab"] {
      font-weight: var(--lc-auth-form-font-weight);
      text-transform: var(--lc-auth-form-text-transform);
      font-size: var(--text-sm, 0.875rem);
      background: var(--lc-auth-form-tab-background);
      color: var(--lc-auth-form-muted-color);
      border-bottom: 3px solid transparent;

      &[active] {
        background: var(--lc-auth-form-tab-active-background);
        color: var(--color-inverse, black);
        border-bottom-color: var(--color-inverse, black);
      }
    }
  }

  .auth-form {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .error-message {
    background: var(--lc-auth-form-error-background);
    border: 3px solid var(--lc-auth-form-error-border-color);
    border-radius: var(--radius-md, 0.75rem);
    padding: 0.75rem;
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--lc-auth-form-font-weight);
    color: var(--lc-auth-form-error-color);
    box-shadow: var(--shadow-sm, 2px 2px 0px 0px rgba(0,0,0,1));
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .label {
    font-weight: var(--lc-auth-form-font-weight);
    font-size: var(--text-sm, 0.875rem);
    text-transform: var(--lc-auth-form-text-transform);
    color: var(--color-secondary, #ec4899);
  }

  .submit-btn {
    margin-top: 0.5rem;
    width: 100%;
  }

  .oauth-section {
    padding: 0 1.5rem;
  }

  .divider {
    position: relative;
    padding: 0.5rem 0;
    text-align: center;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--lc-auth-form-divider-color);
    }

    span {
      position: relative;
      padding: 0 0.75rem;
      background: var(--color-surface, white);
      font-weight: var(--lc-auth-form-font-weight);
      font-size: var(--text-xs, 0.75rem);
      text-transform: var(--lc-auth-form-text-transform);
      color: var(--lc-auth-form-muted-color);
    }
  }

  .oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
  }

  .oauth-btn {
    width: 100%;
  }

  .guest-section {
    padding: 1rem 1.5rem 1.5rem;
    text-align: center;
  }

  .guest-btn {
    font-size: var(--text-sm, 0.875rem);
  }
}


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

  &[ring]:not([ring=""]) {
    box-shadow:
      0 0 0 var(--lc-avatar-ring-gap, 2px) var(--lc-avatar-ring-gap-color, var(--color-surface, #fff)),
      0 0 0 calc(var(--lc-avatar-ring-gap, 2px) + var(--lc-avatar-ring-width, 2px)) var(--lc-avatar-ring-color, var(--text-muted, #6b7280)),
      var(--lc-avatar-shadow, var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.1)));
  }

  &[ring="muted"] {
    --lc-avatar-ring-color: var(--text-muted, #6b7280);
  }

  &[ring="primary"] {
    --lc-avatar-ring-color: var(--color-primary, #111);
  }

  &[ring="secondary"] {
    --lc-avatar-ring-color: var(--color-secondary, #555);
  }

  &[ring="highlight"] {
    --lc-avatar-ring-color: var(--color-highlight, var(--color-warning, #f59e0b));
  }

  &[ring="bar"] {
    --lc-avatar-ring-color: var(--color-bar, var(--text-color, #111));
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


:where(.lc-avatar-group, lc-avatar-group) {
  display: inline-flex;
  vertical-align: middle;

  &[size="xs"] {
    --lc-avatar-group-size: 1.5rem;
  }

  &[size="md"] {
    --lc-avatar-group-size: 2.5rem;
  }

  &[size="lg"] {
    --lc-avatar-group-size: 3.5rem;
  }

  &[size="xl"] {
    --lc-avatar-group-size: 5rem;
  }

  & [part~=lc-avatar-group-group] {
    display: inline-flex;
    align-items: center;
  }

  & slot > .lc-avatar {
    --lc-avatar-shadow: 0 0 0 2px var(--lc-avatar-group-ring-color, var(--canvas-background, #f3f4f2));
  }

  & slot > .lc-avatar + .lc-avatar {
    margin-left: var(--lc-avatar-group-overlap, -8px);
  }

  & slot > .lc-avatar[hidden] {
    display: none;
  }

  & [part~=lc-avatar-group-more] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-sizing: border-box;
    width: var(--lc-avatar-group-size, 2rem);
    height: var(--lc-avatar-group-size, 2rem);
    margin-left: var(--lc-avatar-group-overlap, -8px);
    border-radius: 50%;
    font-size: calc(var(--lc-avatar-group-size, 2rem) / 2.8);
    font-weight: var(--font-semibold, 600);
    line-height: 1;
    color: var(--lc-avatar-group-more-color, var(--text-secondary, #3f443f));
    background: var(--lc-avatar-group-more-background, var(--color-surface-dark, #e8eae6));
    box-shadow: 0 0 0 2px var(--lc-avatar-group-ring-color, var(--canvas-background, #f3f4f2));
  }
}


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

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

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

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

  /*
   * The variant blocks below sit on the host, so a theme setting
   * `--lc-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(--lc-badge-background, var(--lc-badge-variant-background));
  color: var(--lc-badge-color, var(--lc-badge-variant-color));

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

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

  &[secondary],
  &[variant="secondary"] {
    --lc-badge-variant-background: var(--lc-badge-secondary-background, var(--color-secondary));
    --lc-badge-variant-color: var(--lc-badge-secondary-color, var(--color-on-secondary, #ffffff));
    --lc-badge-variant-border-color: var(--lc-badge-secondary-border-color, var(--color-secondary-light));
  }

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

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

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

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

  &[outline] {
    background-color: transparent;

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

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

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

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

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

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

    &[variant="default"] {
      background-color: var(--lc-badge-soft-background, color-mix(in srgb, var(--text-color, #101210), transparent 92%));
      color: var(--lc-badge-soft-color, var(--text-secondary, #3f443f));
    }

    &[primary],
    &[variant="primary"] {
      background-color: var(--lc-badge-soft-background, color-mix(in srgb, var(--color-primary, #101210), transparent 88%));
      color: var(--lc-badge-soft-color, var(--color-primary, #101210));
    }

    &[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"] {
    --lc-badge-padding-y: 0.0625rem;
    --lc-badge-padding-x: 0.25rem;
    --lc-badge-font-size: var(--text-xs, 0.65rem);
  }

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

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

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

  /* After the size blocks: both are `&[attr]`, so the later one wins the padding. */
  &[dot]:not(:empty) {
    gap: var(--lc-badge-dot-gap, 0.375rem);

    &::before {
      content: "";
      flex: none;
      width: var(--lc-badge-dot-size, 6px);
      height: var(--lc-badge-dot-size, 6px);
      border-radius: 999px;
      background-color: var(--lc-badge-dot-color, currentColor);
    }
  }

  &[dot]:empty {
    width: var(--lc-badge-dot-size, 0.5rem);
    height: var(--lc-badge-dot-size, 0.5rem);
    background-color: var(--lc-badge-dot-color, var(--lc-badge-background, var(--lc-badge-variant-background)));
    padding: 0;
    border-radius: 999px;
    font-size: 0;
    line-height: 0;
  }

  /*
   * Positioned against the nearest positioned ancestor, which is the host's own
   * business: a bell that does not set `position: relative` pins its dot to the
   * page instead of to itself.
   */
  &[corner] {
    position: absolute;
    top: var(--lc-badge-corner-top, -0.125rem);
    right: var(--lc-badge-corner-right, -0.125rem);
    box-shadow: 0 0 0 var(--lc-badge-ring-width, 2px)
      var(--lc-badge-ring-color, var(--color-surface, #ffffff));
  }

  &[corner][place="bottom-right"] {
    top: auto;
    bottom: var(--lc-badge-corner-bottom, -0.125rem);
  }

  &[corner][place="bottom-left"] {
    top: auto;
    right: auto;
    bottom: var(--lc-badge-corner-bottom, -0.125rem);
    left: var(--lc-badge-corner-left, -0.125rem);
  }

  &[corner][place="top-left"] {
    right: auto;
    left: var(--lc-badge-corner-left, -0.125rem);
  }
}


:where(.lc-bar-chart, lc-bar-chart) {
  display: block;
  width: 100%;

  & .bar-chart {
    display: flex;
    align-items: flex-end;
    width: 100%;
  }

  & .bar-chart.is-horizontal {
    flex-direction: column;
    align-items: stretch;
  }

  & .bar-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    color: var(--text-muted);
    font-size: 0.875rem;
  }

  & .bar-group {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--lc-bar-chart-group-gap, 0.375rem);
    min-width: 0;
    height: 100%;
  }

  /*
   * Horizontal: the label in a column of its own, the bar in a track that takes
   * the rest of the row (so its width is a share of the track, not of the
   * row), and the value after it.
   */
  & .is-horizontal .bar-group {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: auto;
  }

  & .is-horizontal .bar-label {
    flex: 0 0 var(--lc-bar-chart-label-width, 7rem);
    text-align: right;
  }

  & .bar-track {
    flex: 1 1 0;
    min-width: 0;
  }

  & .is-horizontal .bar-value {
    min-width: 3ch;
  }

  /*
   * A zero still occupies its slot, so the axis reads as a row of weeks rather
   * than a gap where nothing happened.
   */
  & .bar {
    width: 100%;
    min-height: var(--lc-bar-chart-min-extent, 10px);
    border-radius: var(--lc-bar-chart-border-radius, 0.25rem);
    background: var(--lc-bar-chart-color, var(--color-primary));
    transition: opacity 0.2s ease;
  }

  & .is-horizontal .bar {
    width: auto;
    height: var(--lc-bar-chart-bar-thickness, 0.75rem);
    min-width: var(--lc-bar-chart-min-extent, 10px);
    min-height: 0;
  }

  & .bar:hover {
    opacity: 0.85;
  }

  & [data-state="empty"] .bar {
    background: var(--lc-bar-chart-empty-color, var(--color-surface-lighter));
  }

  & [data-state="current"] .bar {
    background: var(--lc-bar-chart-current-color, var(--color-primary));
  }

  & .bar-value,
  & .bar-label {
    font-size: var(--lc-bar-chart-label-size, 0.625rem);
    line-height: 1.2;
    white-space: nowrap;
  }

  /*
   * A long label ellipsises inside its own group rather than over the next one.
   * Clipping is two-dimensional, so the line box has to clear the descenders.
   */
  & .bar-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.45;
  }

  & .bar-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--lc-bar-chart-value-color, var(--text-color));
  }

  & .bar-label {
    font-weight: 500;
    color: var(--lc-bar-chart-label-color, var(--text-disabled, var(--text-muted)));
  }

  & [data-state="current"] .bar-label {
    color: var(--lc-bar-chart-current-label-color, var(--text-color));
  }

  /*
   * The variant sets a fallback rather than the value, so a caller setting
   * `--lc-bar-chart-color` on the element still wins; the variant class lands
   * on a nearer element than the host.
   */
  & .bar-chart-primary { --lc-bar-chart-variant-color: var(--color-primary); }
  & .bar-chart-secondary { --lc-bar-chart-variant-color: var(--color-secondary); }
  & .bar-chart-success { --lc-bar-chart-variant-color: var(--color-success); }
  & .bar-chart-warning { --lc-bar-chart-variant-color: var(--color-warning); }
  & .bar-chart-error { --lc-bar-chart-variant-color: var(--color-danger); }
  & .bar-chart-info { --lc-bar-chart-variant-color: var(--color-info, #83a598); }

  & [data-state="filled"] .bar {
    background: var(--lc-bar-chart-color, var(--lc-bar-chart-variant-color, var(--color-primary)));
  }

  & .bar {
    position: relative;
  }

  & .bar-callout {
    position: absolute;
    bottom: calc(100% + var(--lc-bar-chart-callout-offset, 8px));
    left: 50%;
    translate: -50% 0;
    padding: var(--lc-bar-chart-callout-padding, 3px 8px);
    border-radius: var(--lc-bar-chart-callout-border-radius, 999px);
    background: var(--lc-bar-chart-callout-background, var(--color-primary, #101210));
    color: var(--lc-bar-chart-callout-color, var(--color-on-primary, var(--color-inverse, #ffffff)));
    font-size: var(--lc-bar-chart-callout-font-size, 0.6875rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;

    &::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      translate: -50% 0;
      border: 4px solid transparent;
      border-top-color: var(--lc-bar-chart-callout-background, var(--color-primary, #101210));
    }
  }

  & .has-callout {
    padding-top: var(--lc-bar-chart-callout-space, 1.75rem);
  }

  & .bar-chart-frame {
    display: flex;
    width: 100%;
  }

  & .bar-axis {
    position: relative;
    flex: none;
    width: var(--lc-bar-chart-axis-width, 2.5rem);
  }

  & .bar-tick {
    position: absolute;
    right: 0.5rem;
    translate: 0 50%;
    font-size: var(--lc-bar-chart-label-size, 0.625rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--lc-bar-chart-tick-color, var(--text-muted, #6b716b));
  }

  & .bar-plot {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 100%;

    .bar-chart {
      position: relative;
    }

    .bar {
      min-height: 0;
    }
  }

  & .bar-gridline {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px solid var(--lc-bar-chart-gridline-color, var(--border-color, #d2d5d0));
  }

  & .bar-chart-labels {
    display: flex;
    margin-top: var(--lc-bar-chart-group-gap, 0.375rem);
    margin-left: var(--lc-bar-chart-axis-width, 2.5rem);

    .bar-label {
      flex: 1 1 0;
      min-width: 0;
      text-align: center;
    }
  }
}


:where(.lc-bottom-nav, lc-bottom-nav) {
  display: flex;
  flex-direction: row;
  width: 100%;

  align-items: center;
  justify-content: space-around;
  gap: var(--lc-bottom-nav-gap, var(--spacing-xs, 0.5rem));
  min-height: var(--lc-bottom-nav-height, 56px);
  padding: var(--lc-bottom-nav-padding-y, var(--spacing-xs, 0.5rem))
    var(--lc-bottom-nav-padding-x, var(--spacing-sm, 0.75rem));
  background: var(--lc-bottom-nav-background, var(--color-surface, white));

  padding-bottom: calc(
    var(--lc-bottom-nav-padding-bottom, var(--lc-bottom-nav-padding-y, var(--spacing-xs, 0.5rem))) +
    max(0px, max(env(safe-area-inset-bottom, 0px), var(--sab, 0px)) - var(--lc-bottom-nav-inset-overlap, 0px))
  );
  padding-left: calc(
    var(--lc-bottom-nav-padding-x, var(--spacing-sm, 0.75rem)) +
    env(safe-area-inset-left)
  );
  padding-right: calc(
    var(--lc-bottom-nav-padding-x, var(--spacing-sm, 0.75rem)) +
    env(safe-area-inset-right)
  );

  &[fixed] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }

  &[variant="floating"] {
    --lc-bottom-nav-background: var(--color-surface);
    --lc-bottom-nav-border-radius: var(--radius-xl);
    margin: var(--lc-bottom-nav-margin, var(--spacing-md));
    margin-bottom: calc(
      var(--lc-bottom-nav-margin, var(--spacing-md)) +
      max(env(safe-area-inset-bottom, 0px), var(--sab, 0px))
    );
    border-radius: var(--lc-bottom-nav-border-radius);
  }

  &[variant="filled"] {
    --lc-bottom-nav-item-active-background: var(--color-primary);
    --lc-bottom-nav-item-active-color: white;
  }

  > * {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    --justify-content: center;
    gap: var(--lc-bottom-nav-item-gap, var(--spacing-xs, 0.25rem));
    padding: var(
      --lc-bottom-nav-item-padding,
      var(--spacing-xs, 0.5rem) var(--spacing-sm, 0.75rem)
    );
    flex: 1;
    min-width: 0;
    color: var(--lc-bottom-nav-item-color, var(--text-muted));
    text-decoration: none;
    border-radius: var(--lc-bottom-nav-item-border-radius, var(--radius-sm, 0.25rem));
    transition: var(--lc-bottom-nav-item-transition, all 0.2s ease);
    cursor: pointer;

    &:hover {
      background: var(--lc-bottom-nav-item-hover-background, var(--color-primary-lighter));
      color: var(--lc-bottom-nav-item-hover-color, var(--text-color));
    }

    &.active,
    &[aria-current] {
      color: var(--lc-bottom-nav-item-active-color, var(--color-primary));
    }
  }

  lc-icon, svg {
    width: var(--lc-bottom-nav-icon-size, 24px);
    height: var(--lc-bottom-nav-icon-size, 24px);
    flex-shrink: 0;
  }

  span {
    font-size: var(--lc-bottom-nav-text-size, var(--text-xs, 0.75rem));
    font-weight: var(--lc-bottom-nav-text-font-weight, var(--font-medium, 500));
    text-align: center;
  }

  /**
   * A pill hugs its items and floats centred, rather than spanning the width in
   * equal shares: the shape an app uses when the bar is a few round icons and a
   * prominent action rather than a row of labelled tabs.
   */
  &[variant="pill"] {
    box-sizing: border-box;
    width: var(--lc-bottom-nav-width, fit-content);
    justify-content: var(--lc-bottom-nav-justify, center);
    margin-inline: auto;
    gap: var(--lc-bottom-nav-gap, 0.25rem);
    padding: var(--lc-bottom-nav-padding-y, 0.375rem) var(--lc-bottom-nav-padding-x, 0.625rem);
    padding-bottom: var(--lc-bottom-nav-padding-y, 0.375rem);
    min-height: 0;
    border-radius: var(--lc-bottom-nav-border-radius, 9999px);
    background: var(--lc-bottom-nav-background, var(--color-surface));
    box-shadow: var(--lc-bottom-nav-shadow, none);
    backdrop-filter: var(--lc-bottom-nav-backdrop, none);
  }

  &[variant="pill"] > * {
    flex: 0 0 auto;
    width: var(--lc-bottom-nav-item-size, 2.75rem);
    height: var(--lc-bottom-nav-item-size, 2.75rem);
    padding: 0;
    border-radius: 9999px;
    background: var(--lc-bottom-nav-item-background, transparent);
    box-shadow: var(--lc-bottom-nav-item-shadow, none);
    backdrop-filter: var(--lc-bottom-nav-item-backdrop, none);
  }

  /**
   * A child that is a control in its own right (a segmented switch, a search
   * field) keeps its own width inside the pill instead of the round item box.
   */
  &[variant="pill"] > [wide] {
    width: auto;
    min-width: var(--lc-bottom-nav-item-size, 2.75rem);
    padding-inline: var(--lc-bottom-nav-wide-padding-x, 0);
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  /** The bar is fixed to the viewport but only as wide as itself, so it centres. */
  &[fixed][variant="pill"] {
    bottom: calc(var(--lc-bottom-nav-offset, 0.375rem) + max(var(--sab, 0px), 0.75rem));
    z-index: var(--lc-bottom-nav-z, 100);
  }

  /**
   * One pill of one colour, a fixed height, and items that morph in place: the
   * active one widens to show its label, a `primary` child takes the room left
   * and becomes the screen's one action, a `collapsed` child shrinks to
   * nothing. Same nodes, different attributes, so the sizes transition.
   */
  &[variant="dock"] {
    box-sizing: border-box;
    width: var(--lc-bottom-nav-width, calc(100% - 2 * var(--lc-bottom-nav-dock-inset, 1rem)));
    max-width: var(--lc-bottom-nav-max-width, 100%);
    height: var(--lc-bottom-nav-dock-height, 64px);
    min-height: 0;
    justify-content: var(--lc-bottom-nav-justify, center);
    margin-inline: auto;
    gap: var(--lc-bottom-nav-gap, 0.375rem);
    padding: var(--lc-bottom-nav-dock-padding, 6px);
    border-radius: var(--lc-bottom-nav-border-radius, 9999px);
    background: var(--lc-bottom-nav-background, var(--text-color));
    box-shadow: var(--lc-bottom-nav-shadow, var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.16)));
    --lc-nav-item-color: var(--lc-bottom-nav-item-color, rgba(255, 255, 255, 0.62));
    --lc-nav-item-active-background: var(--lc-bottom-nav-item-active-background, var(--color-primary));
    --lc-nav-item-active-color: var(--lc-bottom-nav-item-active-color, var(--color-on-primary, #fff));
    --lc-nav-item-active-font-weight: var(--lc-bottom-nav-active-font-weight, 800);
    --lc-nav-item-hover-background: var(--lc-bottom-nav-item-hover-background, transparent);
    --lc-nav-item-hover-color: var(--lc-bottom-nav-item-color, rgba(255, 255, 255, 0.62));
  }

  /* An idle item brightens under a pointer that hovers, and only there: a
     tap on a touch screen leaves its hover behind, which would mark a tab
     nobody is on. The active item keeps its colours under the pointer. */
  @media (hover: hover) {
    &[variant="dock"] {
      --lc-nav-item-hover-color: var(--lc-bottom-nav-item-hover-color, #fff);
    }
  }

  &[variant="dock"] > :is(.active, [active], [aria-current="page"]) {
    --lc-nav-item-hover-background: var(--lc-bottom-nav-item-active-background, var(--color-primary));
    --lc-nav-item-hover-color: var(--lc-bottom-nav-item-active-color, var(--color-on-primary, #fff));
  }

  &[variant="dock"] > * {
    flex: 0 0 auto;
    flex-direction: row;
    box-sizing: border-box;
    width: var(--lc-bottom-nav-item-size, 52px);
    min-width: 0;
    height: var(--lc-bottom-nav-item-size, 52px);
    padding: 0;
    border: 0;
    font: inherit;
    gap: 0.5rem;
    border-radius: 9999px;
    overflow: hidden;
    white-space: nowrap;
    color: var(--lc-bottom-nav-item-color, rgba(255, 255, 255, 0.62));
    background: var(--lc-bottom-nav-item-background, transparent);
    transition: var(--lc-bottom-nav-item-transition, flex-grow 0.3s ease, width 0.3s ease, min-width 0.3s ease, opacity 0.3s ease, padding 0.3s ease, margin 0.3s ease, background-color 0.3s ease);
  }

  /* With --lc-bottom-nav-item-grow on, the idle items of a dock showing its
     nav share whatever room the active one leaves: the row fills the bar, and
     an active item at either end sits against the bar's own padding. When the
     active label leaves less than the item size, they give way down to
     --lc-bottom-nav-item-min-width rather than push the row out of the bar. */
  &[variant="dock"]:not(:has(> [primary])) > :not(.active, [active], [aria-current="page"], [collapsed]) {
    flex-grow: var(--lc-bottom-nav-item-grow, 0);
    flex-shrink: 1;
    min-width: var(--lc-bottom-nav-item-min-width, var(--lc-bottom-nav-item-size, 52px));
  }

  &[variant="dock"] > *:hover {
    background: var(--lc-nav-item-hover-background);
    color: var(--lc-nav-item-hover-color);
  }

  &[variant="dock"] > .active,
  &[variant="dock"] > [active],
  &[variant="dock"] > [aria-current="page"] {
    flex-shrink: 1;
    width: auto;
    min-width: var(--lc-bottom-nav-item-size, 52px);
    padding-inline: var(--lc-bottom-nav-active-padding-x, 1rem);
    font-weight: var(--lc-bottom-nav-active-font-weight, 800);
  }

  &[variant="dock"] > [primary] {
    flex: 1 1 auto;
    width: auto;
    min-width: var(--lc-bottom-nav-item-size, 52px);
    justify-content: center;
    padding-inline: var(--lc-bottom-nav-primary-padding-x, 1.125rem);
    font-size: var(--lc-bottom-nav-primary-font-size, 0.9375rem);
    font-weight: var(--lc-bottom-nav-active-font-weight, 800);
    background: var(--lc-bottom-nav-item-active-background, var(--color-primary));
    color: var(--lc-bottom-nav-item-active-color, var(--color-on-primary, #fff));
  }

  &[variant="dock"] > [wide] {
    width: auto;
  }

  &[variant="dock"] > [collapsed] {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    padding: 0;
    margin-inline-start: calc(-1 * var(--lc-bottom-nav-gap, 0.375rem));
    opacity: 0;
    pointer-events: none;
  }

  &[fixed][variant="dock"] {
    left: 50%;
    right: auto;
    translate: -50% 0;
    bottom: calc(var(--lc-bottom-nav-offset, 0.375rem) + max(var(--sab, 0px), 0.75rem));
    z-index: var(--lc-bottom-nav-z, 100);
  }

/**
 * A `lc-nav-item` paints its own active state and needs `activeBg` to do it
 * with a background at all, so hand it the bar's colours through its own
 * variables rather than trying to outweigh its rule.
 */
  --lc-nav-item-color: var(--lc-bottom-nav-item-color, var(--text-muted));
  --lc-nav-item-active-background: var(--lc-bottom-nav-item-active-background, var(--color-primary));
  --lc-nav-item-active-color: var(--lc-bottom-nav-item-active-color, #fff);
}

:where(.lc-bottom-nav[variant="filled"], lc-bottom-nav[variant="filled"]) > *.active,
:where(.lc-bottom-nav[variant="filled"], lc-bottom-nav[variant="filled"]) > *[aria-current] {
  background: var(--lc-bottom-nav-item-active-background, var(--color-primary));
  color: var(--lc-bottom-nav-item-active-color, white);
}

/**
 * Where the state lives, so a view never names a colour to show it.
 *
 * These feed the item's own variables as well as painting it: a child
 * component styles its host at zero specificity too, and two rules that both
 * weigh nothing are settled by whichever bundle loaded last. A custom property
 * inherits, so there is no contest to lose.
 */
.lc-bottom-nav > *.active,
lc-bottom-nav > *.active,
.lc-bottom-nav > *[active],
lc-bottom-nav > *[active],
.lc-bottom-nav > *[aria-current="page"],
lc-bottom-nav > *[aria-current="page"] {
  background: var(--lc-bottom-nav-item-active-background, transparent);
  color: var(--lc-bottom-nav-item-active-color, var(--color-primary));
}

/** One item that is the point of the bar: larger, and its own colours. */
.lc-bottom-nav > [prominent],
lc-bottom-nav > [prominent] {
  width: var(--lc-bottom-nav-prominent-size, 3rem);
  height: var(--lc-bottom-nav-prominent-size, 3rem);
  margin-inline: var(--lc-bottom-nav-prominent-gap, 0.125rem);
  --lc-nav-item-background: var(--lc-bottom-nav-prominent-background, var(--text-color));
  --lc-nav-item-color: var(--lc-bottom-nav-prominent-color, var(--color-primary));
  background: var(--lc-bottom-nav-prominent-background, var(--text-color));
  color: var(--lc-bottom-nav-prominent-color, var(--color-primary));
  box-shadow: var(--lc-bottom-nav-prominent-shadow, none);
}


:where(.lc-bottom-sheet, lc-bottom-sheet) {
  position: fixed;
  inset: 0;
  z-index: var(--lc-bottom-sheet-z-index, 999);
  pointer-events: none;

  &[open] {
    pointer-events: auto;
  }

  /* Slotted children inherit pointer-events from light DOM parent (host),
     NOT from shadow DOM slot context: override so they stay interactive */
  & slot > * {
    pointer-events: auto;
  }

  &[nobackdrop] [part~=lc-bottom-sheet-backdrop] {
    display: none !important;
  }

  &[nobackdrop][open] {
    pointer-events: none;
  }

  /* Backdrop: always in DOM, opacity-controlled */
  & [part~=lc-bottom-sheet-backdrop] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  &[open] [part~=lc-bottom-sheet-backdrop] {
    opacity: 1;
    pointer-events: auto;
  }

  /* Panel: single sliding unit (content + nav) */
  & [part~=lc-bottom-sheet-panel] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    background: var(--lc-bottom-sheet-background, var(--color-surface-light, #1a1a1a));
    border-radius: var(--lc-bottom-sheet-border-radius, 16px) var(--lc-bottom-sheet-border-radius, 16px) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    /* Collapsed: push down so only nav peeks above viewport */
    transform: translateY(var(--lc-bottom-sheet-drag-y, calc(100% - var(--lc-bottom-sheet-nav-height, 56px) - min(var(--lc-bottom-sheet-nav-height, 56px), max(env(safe-area-inset-bottom, 0px), var(--sab, 0px))))));
    transition: var(--lc-bottom-sheet-panel-transition, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94));
    will-change: transform;
  }

  &[open] [part~=lc-bottom-sheet-panel] {
    transform: translateY(var(--lc-bottom-sheet-drag-y, 0px));
  }

  /* Content: always full height, transform hides/reveals.
     Inset and the device's bottom inset belong here, not to every caller;
     `--sab` is the shell's reported inset, 0 on the web. All four default to
     inert, so a sheet that never asked looks exactly as it did.
     A sheet sized to its content is never taller than the screen below the
     status bar (`--sat`, as `--sab` below): past that it scrolls inside
     rather than running off the top. */
  & [part~=lc-bottom-sheet-content] {
    margin-bottom: var(--lc-bottom-sheet-gutter, 0px);
    height: var(--lc-bottom-sheet-sheet-height, calc(100vh - 104px));
    max-height: var(
      --lc-bottom-sheet-max-height,
      calc(100dvh - var(--lc-bottom-sheet-nav-height, 56px) - var(--lc-bottom-sheet-gutter, 0px) - max(env(safe-area-inset-top, 0px), var(--sat, 0px)) - var(--lc-bottom-sheet-top-gap, 0.75rem) + var(--lc-bottom-sheet-lift, 0px))
    );
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--lc-bottom-sheet-padding, 0px);
    padding-bottom: calc(
      var(--lc-bottom-sheet-padding-bottom, var(--lc-bottom-sheet-padding, 0px)) +
        max(var(--lc-bottom-sheet-safe-bottom, 0px), var(--sab, 0px))
    );
  }

  /* Detent stops: written after the [open] rule so, at equal specificity,
     source order lets each stop override the two-state transform. */
  &[detent="closed"] [part~=lc-bottom-sheet-panel] {
    transform: translateY(var(--lc-bottom-sheet-drag-y, calc(100% - var(--lc-bottom-sheet-nav-height, 56px) - min(var(--lc-bottom-sheet-nav-height, 56px), max(env(safe-area-inset-bottom, 0px), var(--sab, 0px))))));
  }

  &[detent="half"] [part~=lc-bottom-sheet-panel] {
    transform: translateY(var(--lc-bottom-sheet-drag-y, calc(100% - var(--lc-bottom-sheet-half-height, 50dvh))));
  }

  &[detent="full"] [part~=lc-bottom-sheet-panel] {
    transform: translateY(var(--lc-bottom-sheet-drag-y, 0px));
  }

  &[expandable] [part~=lc-bottom-sheet-content] {
    transition: max-height var(--lc-bottom-sheet-lift-duration, 0.3s) cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  &[expandable][dragging] [part~=lc-bottom-sheet-content] {
    transition: none;
  }

  /* Nav: top of panel, always visible when collapsed */
  & [part~=lc-bottom-sheet-nav] {
    flex-shrink: 0;
    min-height: var(--lc-bottom-sheet-nav-height, 56px);
    touch-action: none;
    user-select: none;
  }

  &[grabber] [part~=lc-bottom-sheet-nav] {
    padding-block: var(--lc-bottom-sheet-grabber-padding, 0.625rem);
    cursor: grab;
  }

  &[grabber][dragging] [part~=lc-bottom-sheet-nav] {
    cursor: grabbing;
  }

  & [part~=lc-bottom-sheet-grabber] {
    width: var(--lc-bottom-sheet-grabber-width, 2.5rem);
    height: var(--lc-bottom-sheet-grabber-height, 0.3125rem);
    margin-inline: auto;
    border-radius: 9999px;
    background: var(--lc-bottom-sheet-grabber-color, var(--border-control, rgba(127, 127, 127, 0.4)));
  }
}


:where(.lc-breadcrumbs, lc-breadcrumbs) {
  display: block;

  .breadcrumbs {
    padding: 0;
  }

  .breadcrumbs-list {
    display: flex;
    align-items: center;
    gap: var(--lc-breadcrumbs-gap, 0.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
  }

  .breadcrumbs-item {
    display: flex;
    align-items: center;
    gap: var(--lc-breadcrumbs-gap, 0.5rem);

    lc-link {
      color: var(--lc-breadcrumbs-link-color, var(--text-muted, #6b7280));
      font-size: var(--lc-breadcrumbs-font-size, var(--text-sm, 0.875rem));
      font-weight: var(--lc-breadcrumbs-font-weight, var(--control-weight, var(--font-medium, 500)));
      text-transform: var(--lc-breadcrumbs-text-transform, var(--control-transform, none));
      letter-spacing: var(--lc-breadcrumbs-letter-spacing, var(--control-tracking, normal));

      &:hover {
        color: var(--lc-breadcrumbs-link-hover-color, var(--color-primary));
      }
    }

    .current {
      color: var(--lc-breadcrumbs-current-color, var(--text-color));
      font-size: var(--lc-breadcrumbs-font-size, var(--text-sm, 0.875rem));
      font-weight: var(--lc-breadcrumbs-current-font-weight, var(--font-bold, 700));
      text-transform: var(--lc-breadcrumbs-text-transform, var(--control-transform, none));
      letter-spacing: var(--lc-breadcrumbs-letter-spacing, var(--control-tracking, normal));
    }

    .separator {
      color: var(--lc-breadcrumbs-separator-color, var(--text-muted, #9ca3af));
      font-size: var(--lc-breadcrumbs-font-size, var(--text-sm, 0.875rem));
    }
  }

  &[size="sm"] {
    --lc-breadcrumbs-font-size: var(--text-xs, 0.75rem);
    --lc-breadcrumbs-gap: 0.375rem;
  }

  &[size="md"] {
    --lc-breadcrumbs-font-size: var(--text-sm, 0.875rem);
    --lc-breadcrumbs-gap: 0.5rem;
  }

  &[size="lg"] {
    --lc-breadcrumbs-font-size: var(--text-base, 1rem);
    --lc-breadcrumbs-gap: 0.625rem;
  }
}


:where(.lc-calendar, lc-calendar) {
  display: block;
  color: var(--text-color, currentColor);

  & [part~=lc-calendar-view-toggle] {
    display: inline-flex;
    gap: 2px;
    margin-bottom: 0.75rem;
    padding: 2px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 0.5rem);
    background: var(--color-surface);
  }

  & [part~=lc-calendar-toggle-btn] {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm, 0.25rem);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
  }
  & [part~=lc-calendar-toggle-btn]:hover {
    color: var(--text-color);
  }
  & [part~=lc-calendar-toggle-btn-active] {
    background: var(--color-primary);
    color: var(--color-inverse, var(--text-color));
  }

  & [part~=lc-calendar-header] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
  }

  & [part~=lc-calendar-nav-btn] {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 0.25rem);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  }
  & [part~=lc-calendar-nav-btn]:hover {
    color: var(--text-color);
    border-color: var(--color-primary);
  }

  & [part~=lc-calendar-month-label] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
    letter-spacing: 0.02em;
    text-transform: none;
    margin: 0;
  }

  & [part~=lc-calendar-today-btn] {
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.75rem;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 0.25rem);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: none;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  }
  & [part~=lc-calendar-today-btn]:hover {
    color: var(--text-color);
    border-color: var(--color-primary);
  }

  & [part~=lc-calendar-grid] {
    background: var(--color-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 0.5rem);
    padding: 0.5rem;
    overflow: hidden;
  }

  & [part~=lc-calendar-weekday-header] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
  }

  & [part~=lc-calendar-weekday] {
    text-align: center;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.25rem 0;
  }

  & [part~=lc-calendar-days-grid] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }

  & [part~=lc-calendar-day] {
    min-height: 84px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.25rem 0.35rem;
    border-radius: var(--radius-sm, 0.25rem);
    border: 1px solid var(--border-color);
    background: var(--color-surface-light, var(--color-surface));
    color: var(--text-color);
    cursor: pointer;
    overflow: hidden;
    transition: background 0.12s ease, border-color 0.12s ease;
  }
  & [part~=lc-calendar-day]:hover {
    border-color: var(--color-primary);
  }

  & [part~=lc-calendar-day-today] {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
  }

  & [part~=lc-calendar-day-selected] {
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
    border-color: var(--color-primary);
  }

  & [part~=lc-calendar-day-other-month] {
    opacity: 0.4;
  }

  & [part~=lc-calendar-day-number] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
  }

  & [part~=lc-calendar-day-events] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
  }

  & [part~=lc-calendar-event] {
    font-size: 0.65rem;
    line-height: 1.2;
    font-weight: 500;
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm, 0.25rem);
    background: color-mix(in srgb, var(--color-primary) 22%, transparent);
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  & [part~=lc-calendar-more-events] {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: 0 0.25rem;
  }

  & [part~=lc-calendar-list] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  & [part~=lc-calendar-list-section-title] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
  }

  & [part~=lc-calendar-list-item] {
    display: flex;
    gap: 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 0.5rem);
    padding: 0.75rem;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
  }
  & [part~=lc-calendar-list-item]:hover {
    border-color: var(--color-primary);
  }

  & [part~=lc-calendar-list-item-image] {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: var(--radius-sm, 0.25rem);
    border: 1px solid var(--border-color);
  }

  & [part~=lc-calendar-list-item-title] {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--text-color);
    margin: 0;
  }

  & [part~=lc-calendar-list-item-meta] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
  }

  & [part~=lc-calendar-recurring-badge] {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 500;
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-sm, 0.25rem);
  }

  & [part~=lc-calendar-panel-overlay] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
  }

  & [part~=lc-calendar-panel] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-surface);
    color: var(--text-color);
    border-top: 1px solid var(--border-color);
    border-radius: 1rem 1rem 0 0;
    z-index: 50;
    max-height: 70vh;
    overflow-y: auto;
  }

  & [part~=lc-calendar-panel-header] {
    position: sticky;
    top: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  & [part~=lc-calendar-panel-title] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-color);
    margin: 0;
  }

  & [part~=lc-calendar-panel-close] {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 0.25rem);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
  }
  & [part~=lc-calendar-panel-close]:hover {
    color: var(--text-color);
    background: var(--color-surface-light);
  }

  & [part~=lc-calendar-panel-content] {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  & [part~=lc-calendar-panel-item] {
    display: flex;
    gap: 0.75rem;
    background: var(--color-surface-light, var(--color-surface));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 0.5rem);
    padding: 0.6rem;
    cursor: pointer;
    transition: border-color 0.12s ease;
  }
  & [part~=lc-calendar-panel-item]:hover {
    border-color: var(--color-primary);
  }

  & [part~=lc-calendar-panel-item-image] {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: var(--radius-sm, 0.25rem);
    border: 1px solid var(--border-color);
  }

  & [part~=lc-calendar-panel-item-title] {
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.3;
    color: var(--text-color);
    margin: 0;
  }

  & [part~=lc-calendar-panel-item-meta] {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
  }

  & [part~=lc-calendar-panel-empty] {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 1.5rem 0;
  }

  & [part~=lc-calendar-empty] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    color: var(--text-muted);

    .empty-icon {
      font-size: 2.5rem;
      margin-bottom: 0.75rem;
      opacity: 0.6;
    }

    .empty-text {
      font-size: 0.95rem;
      font-weight: 500;
    }
  }

  & [part~=lc-calendar-week-view] {
    display: flex;
    flex-direction: column;
  }

  & [part~=lc-calendar-week-day] {
    display: flex;
    align-items: flex-start;
    gap: var(--lc-calendar-week-gap, 1.5rem);
    padding: var(--lc-calendar-week-day-padding, 1rem 0);
    border-bottom: 1px solid var(--lc-calendar-week-border-color, var(--border-color, #d2d5d0));
    cursor: pointer;
  }

  & [part~=lc-calendar-week-day-selected] {
    background: var(--lc-calendar-week-selected-background, color-mix(in srgb, var(--color-primary, #101210) 5%, transparent));
  }

  & [part~=lc-calendar-week-day-label] {
    display: flex;
    flex-direction: column;
    flex: none;
    width: var(--lc-calendar-week-label-width, 8rem);
  }

  & [part~=lc-calendar-week-day-number] {
    font-family: var(--font-heading, inherit);
    font-size: var(--lc-calendar-week-number-font-size, 72px);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--lc-calendar-week-number-color, var(--text-muted, #6b716b));
  }

  & [part~=lc-calendar-week-day-number-today] {
    color: var(--lc-calendar-week-number-today-color, var(--text-color, #101210));
  }

  & [part~=lc-calendar-weekday-name] {
    margin-top: 0.375rem;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    color: var(--text-muted, #6b716b);
  }

  & [part~=lc-calendar-week-events] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
  }

  & [part~=lc-calendar-week-event-card] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-color, #d2d5d0);
    border-radius: var(--radius-box, var(--radius-md, 0.5rem));
    background: var(--color-surface, #ffffff);
  }

  & [part~=lc-calendar-week-event-time] {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    color: var(--text-muted, #6b716b);
  }

  & [part~=lc-calendar-week-event-title] {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--text-color, #101210);
  }
}


:where(.lc-checkbox, lc-checkbox) {
  display: inline-flex;
  align-items: center;
  gap: var(--lc-checkbox-gap, 0.5rem);

  &:has(.checkbox:disabled) {
    cursor: not-allowed;
    opacity: 0.6;
  }

  .checkbox {
    appearance: none;
    width: var(--lc-checkbox-size, 1.5rem);
    height: var(--lc-checkbox-size, 1.5rem);
    border: var(--lc-checkbox-border-width, 2px) solid var(--lc-checkbox-border-color, var(--color-primary));
    border-radius: var(--lc-checkbox-border-radius, var(--radius-selector, var(--radius-md, 0.375rem)));
    background-color: var(--lc-checkbox-background-color, var(--color-surface));
    box-shadow: var(--lc-checkbox-shadow, var(--shadow-field, none));
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    position: relative;
    flex-shrink: 0;

    &:hover:not(:disabled) {
      border-color: var(--lc-checkbox-hover-border-color, var(--color-primary));
    }

    &:checked {
      background-color: var(--lc-checkbox-checked-background-color, var(--color-primary));
      border-color: var(--lc-checkbox-checked-border-color, var(--color-primary));

      &::after {
        content: "";
        position: absolute;
        left: 30%;
        top: 10%;
        width: 30%;
        height: 60%;
        border: solid var(--lc-checkbox-checked-color, white);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }
    }

    &:indeterminate {
      background-color: var(--lc-checkbox-checked-background-color, var(--color-primary));
      border-color: var(--lc-checkbox-checked-border-color, var(--color-primary));

      &::after {
        content: "";
        position: absolute;
        left: 20%;
        top: 45%;
        width: 60%;
        height: 2px;
        background-color: var(--lc-checkbox-checked-color, white);
      }
    }

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

    &:disabled {
      cursor: not-allowed;
      background-color: var(--lc-checkbox-disabled-background-color, var(--color-surface-dark));
    }
  }

  .checkbox-label {
    color: var(--lc-checkbox-label-color, var(--text-color));
    font-size: var(--lc-checkbox-label-font-size, var(--text-base, 1rem));
    font-weight: var(--lc-checkbox-label-font-weight, var(--font-medium, 500));
    text-transform: var(--lc-checkbox-label-text-transform, var(--control-transform, none));
    letter-spacing: var(--lc-checkbox-label-letter-spacing, var(--control-tracking, normal));
    line-height: var(--leading-normal, 1.5);
    cursor: pointer;
    user-select: none;
  }

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

  &[size="xs"] {
    --lc-checkbox-size: 1rem;
    --lc-checkbox-label-font-size: var(--text-xs, 0.75rem);
    --lc-checkbox-gap: 0.375rem;
  }

  &[size="sm"] {
    --lc-checkbox-size: 1.25rem;
    --lc-checkbox-label-font-size: var(--text-sm, 0.875rem);
    --lc-checkbox-gap: 0.5rem;
  }

  &[size="md"] {
    --lc-checkbox-size: 1.5rem;
    --lc-checkbox-label-font-size: var(--text-base, 1rem);
    --lc-checkbox-gap: 0.5rem;
  }

  &[size="lg"] {
    --lc-checkbox-size: 1.75rem;
    --lc-checkbox-label-font-size: var(--text-lg, 1.125rem);
    --lc-checkbox-gap: 0.625rem;
  }

  &[size="xl"] {
    --lc-checkbox-size: 2rem;
    --lc-checkbox-label-font-size: var(--text-xl, 1.25rem);
    --lc-checkbox-gap: 0.75rem;
  }

  &[shape="round"] .checkbox {
    --lc-checkbox-border-radius: 50%;
    --lc-checkbox-border-color: var(--lc-checkbox-round-border-color, rgba(0, 0, 0, 0.18));
    border-width: var(--lc-checkbox-round-border-width, 1.5px);

    &:checked::after {
      left: 34%;
      top: 16%;
      width: 28%;
      height: 52%;
    }

    &:indeterminate {
      background-color: var(--lc-checkbox-background-color, var(--color-surface));

      &::after {
        left: 50%;
        top: 50%;
        width: 40%;
        height: 40%;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--lc-checkbox-checked-background-color, var(--color-primary));
      }
    }
  }

  &[variant="primary"] .checkbox:checked,
  &[variant="primary"] .checkbox:indeterminate {
    --lc-checkbox-checked-background-color: var(--color-primary);
    --lc-checkbox-checked-border-color: var(--color-primary);
  }

  &[variant="secondary"] .checkbox:checked,
  &[variant="secondary"] .checkbox:indeterminate {
    --lc-checkbox-checked-background-color: var(--color-secondary);
    --lc-checkbox-checked-border-color: var(--color-secondary);
  }

  &[variant="success"] .checkbox:checked,
  &[variant="success"] .checkbox:indeterminate {
    --lc-checkbox-checked-background-color: var(--color-success);
    --lc-checkbox-checked-border-color: var(--color-success);
  }

  &[variant="warning"] .checkbox:checked,
  &[variant="warning"] .checkbox:indeterminate {
    --lc-checkbox-checked-background-color: var(--color-warning);
    --lc-checkbox-checked-border-color: var(--color-warning);
  }

  &[variant="error"] .checkbox:checked,
  &[variant="error"] .checkbox:indeterminate {
    --lc-checkbox-checked-background-color: var(--color-danger);
    --lc-checkbox-checked-border-color: var(--color-danger);
  }
}


:where(.lc-circle, lc-circle) {
  &:not([solid]) {
    background-color: transparent;
  }
}


:where(.lc-clipboard, lc-clipboard) {
  display: inline-flex;
  color: var(--lc-clipboard-color, inherit);

  &[copied] {
    color: var(--lc-clipboard-copied-color, var(--color-success));
  }
}


:where(.lc-code-block, lc-code-block) {
  display: block;
  overflow: hidden;
  border: var(--lc-code-block-border-width, var(--border-width, 1px)) solid var(--lc-code-block-border-color, var(--border-color));
  border-radius: var(--lc-code-block-border-radius, var(--radius-box, var(--radius-md, 0.375rem)));
  background: var(--lc-code-block-background, var(--color-surface-light));
  color: var(--lc-code-block-color, var(--text-color));
  font-family: var(--lc-code-block-font-family, var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace));
  font-size: var(--lc-code-block-font-size, var(--text-caption, 0.8125rem));
  line-height: var(--lc-code-block-line-height, 1.6);

  --tok-keyword: var(--color-secondary, #c678dd);
  --tok-atom: var(--color-info, #56b6c2);
  --tok-number: var(--color-info, #56b6c2);
  --tok-string: var(--color-success, #98c379);
  --tok-comment: var(--text-muted, #8a8a8a);
  --tok-property: var(--color-primary, #61afef);
  --tok-definition: var(--color-warning, #e5c07b);
  --tok-variable: var(--text-color);
  --tok-tag: var(--color-danger, #e06c75);
  --tok-attribute: var(--color-warning, #e5c07b);
  --tok-regexp: var(--color-success, #98c379);
  --tok-escape: var(--color-accent, #d19a66);
  --tok-meta: var(--text-muted, #8a8a8a);
  --tok-link: var(--color-primary, #61afef);

  .code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm, 0.5rem);
    padding: var(--spacing-xs, 0.25rem) var(--spacing-xs, 0.25rem) var(--spacing-xs, 0.25rem) var(--spacing-md, 0.75rem);
    border-bottom: var(--border-width, 1px) solid var(--lc-code-block-border-color, var(--border-color));
    background: var(--lc-code-block-header-background, transparent);
    color: var(--lc-code-block-header-color, var(--text-muted));
    font-family: var(--font-family-base);
    font-size: var(--text-caption, 0.8125rem);
    font-weight: 600;
    min-height: 2rem;
  }

  .code-block-copy {
    margin-left: auto;
  }

  .code-block-pre {
    margin: 0;
    padding: var(--spacing-md, 0.75rem) var(--spacing-lg, 1rem);
    overflow-x: auto;
    white-space: pre;
    font: inherit;
  }

  &[wrap] .code-block-pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .code-block-code {
    display: block;
    font: inherit;
  }

  .code-block-line {
    display: block;
    min-height: 1.6em;
  }

  .code-block-line[data-marked] {
    margin: 0 calc(-1 * var(--spacing-lg, 1rem));
    padding: 0 var(--spacing-lg, 1rem);
    background: var(--lc-code-block-highlight-background, color-mix(in srgb, var(--color-primary) 10%, transparent));
  }

  .code-block-gutter {
    display: inline-block;
    width: 2rem;
    margin-right: var(--spacing-md, 0.75rem);
    text-align: right;
    color: var(--lc-code-block-gutter-color, var(--text-disabled));
    user-select: none;
  }

  .code-block-fold {
    margin: 0 var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.5rem);
  }

  .tok-keyword { color: var(--tok-keyword); }
  .tok-atom { color: var(--tok-atom); }
  .tok-number { color: var(--tok-number); }
  .tok-string { color: var(--tok-string); }
  .tok-comment { color: var(--tok-comment); font-style: italic; }
  .tok-property { color: var(--tok-property); }
  .tok-definition { color: var(--tok-definition); }
  .tok-variable { color: var(--tok-variable); }
  .tok-tag { color: var(--tok-tag); }
  .tok-attribute { color: var(--tok-attribute); }
  .tok-regexp { color: var(--tok-regexp); }
  .tok-escape { color: var(--tok-escape); }
  .tok-meta { color: var(--tok-meta); }
  .tok-link { color: var(--tok-link); text-decoration: underline; }
}


:where(.lc-color-picker, lc-color-picker) {
  display: flex;
  flex-direction: column;
  gap: var(--lc-color-picker-gap, 0.5rem);
  width: 100%;
  font-family: inherit;

  .lc-color-picker-row {
    display: flex;
    align-items: center;
    gap: var(--lc-color-picker-gap, 0.5rem);
  }

  .lc-color-picker-swatch {
    position: relative;
    flex-shrink: 0;
    width: var(--lc-color-picker-swatch-size, 2rem);
    height: var(--lc-color-picker-swatch-size, 2rem);
    border-radius: var(--lc-input-border-radius, var(--radius-md, 0.375rem));
    border: 1px solid var(--lc-input-border-color, var(--border-color));
    background-color: var(--lc-color-picker-checker-a, #d9d9d9);
    background-image:
      linear-gradient(45deg, var(--lc-color-picker-checker-b, #8a8a8a) 25%, transparent 25%, transparent 75%, var(--lc-color-picker-checker-b, #8a8a8a) 75%),
      linear-gradient(45deg, var(--lc-color-picker-checker-b, #8a8a8a) 25%, transparent 25%, transparent 75%, var(--lc-color-picker-checker-b, #8a8a8a) 75%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--lc-color-picker-value, transparent);
      opacity: var(--lc-color-picker-opacity, 1);
    }
  }

  .lc-color-picker-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;

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

  .lc-color-picker-hex {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--lc-color-picker-hex-font, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--lc-input-font-size, var(--text-sm, 0.875rem));
    line-height: var(--lc-input-line-height, var(--leading-normal, 1.5));
    padding: var(--lc-input-padding-y, 0.5rem) var(--lc-input-padding-x, 0.75rem);
    background-color: var(--lc-input-background-color, var(--color-surface));
    color: var(--lc-input-color, var(--text-color));
    border: 1px solid var(--lc-input-border-color, var(--border-color));
    border-radius: var(--lc-input-border-radius, var(--radius-md, 0.375rem));
    outline: none;
    text-transform: lowercase;

    &:focus {
      border-color: var(--lc-input-focus-border-color, var(--color-primary));
      box-shadow: var(--lc-input-focus-shadow, 0 0 0 3px var(--lc-input-focus-shadow-color, rgba(124, 111, 100, 0.1)));
    }

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

  .lc-color-picker-alpha {
    flex: 1 1 5rem;
    min-width: 4rem;
    accent-color: var(--lc-color-picker-accent, var(--color-primary));
  }

  .lc-color-picker-percent {
    flex-shrink: 0;
    min-width: 2.6rem;
    text-align: right;
    font-size: var(--text-xs, 0.75rem);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted, inherit);
  }

  .lc-color-picker-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: var(--radius-sm, 0.25rem);
    background: transparent;
    color: var(--text-muted, inherit);
    cursor: pointer;

    &:hover:not(:disabled) {
      background: var(--color-surface-light);
      color: var(--text-color);
    }
  }

  .lc-color-picker-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-color-picker-chip-gap, 0.375rem);
  }

  .lc-color-picker-chip {
    position: relative;
    width: var(--lc-color-picker-chip-size, 1.5rem);
    height: var(--lc-color-picker-chip-size, 1.5rem);
    padding: 0;
    border: 1px solid var(--lc-input-border-color, var(--border-color));
    border-radius: var(--radius-sm, 0.25rem);
    background-color: var(--lc-color-picker-checker-a, #d9d9d9);
    background-image:
      linear-gradient(45deg, var(--lc-color-picker-checker-b, #8a8a8a) 25%, transparent 25%, transparent 75%, var(--lc-color-picker-checker-b, #8a8a8a) 75%),
      linear-gradient(45deg, var(--lc-color-picker-checker-b, #8a8a8a) 25%, transparent 25%, transparent 75%, var(--lc-color-picker-checker-b, #8a8a8a) 75%);
    background-size: 6px 6px;
    background-position: 0 0, 3px 3px;
    overflow: hidden;
    cursor: pointer;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--lc-color-picker-value, transparent);
      opacity: var(--lc-color-picker-opacity, 1);
    }

    &[aria-selected="true"] {
      border-color: var(--lc-color-picker-accent, var(--color-primary));
      box-shadow: 0 0 0 1px var(--lc-color-picker-accent, var(--color-primary));
    }

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


:where(.lc-command-palette, lc-command-palette) {
  display: inline-block;

  .command-palette-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    width: var(--lc-command-palette-trigger-width, 16rem);
    height: 2.25rem;
    padding: 0 var(--spacing-sm, 0.5rem) 0 var(--spacing-md, 0.75rem);
    border: var(--border-width, 1px) solid var(--lc-command-palette-trigger-border-color, var(--border-color));
    border-radius: var(--lc-command-palette-trigger-border-radius, var(--radius-field, var(--radius-md, 0.375rem)));
    background: var(--lc-command-palette-trigger-background, var(--color-surface));
    color: var(--lc-command-palette-trigger-color, var(--text-muted));
    font: inherit;
    font-size: var(--text-sm, 0.875rem);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease;

    &:hover {
      border-color: var(--lc-command-palette-trigger-hover-border-color, var(--text-muted));
    }

    &[data-compact] {
      width: 2.25rem;
      padding: 0;
      justify-content: center;
      border-color: transparent;
      background: transparent;
      color: inherit;

      .command-palette-placeholder {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
      }

      .command-palette-keys {
        display: none;
      }
    }
  }

  .command-palette-placeholder {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .command-palette-keys {
    display: inline-flex;
    gap: 0.125rem;
  }

  .command-palette-modal {
    --lc-modal-padding: 0;
  }

  .command-palette-footer {
    display: flex;
    gap: var(--spacing-lg, 1rem);
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 0.75rem);
    border-top: var(--border-width, 1px) solid var(--border-color);
    font-size: var(--text-xs, 0.75rem);
    color: var(--text-muted);

    lc-kbd {
      margin-right: 0.25rem;
    }
  }
}


:where(.lc-comment, lc-comment) {
  display: flex;
  align-items: flex-start;
  gap: var(--lc-comment-gap, 0.75rem);
  font-family: inherit;
  color: var(--lc-comment-color, var(--text-color, inherit));

  .comment-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lc-comment-main-gap, 0.25rem);
  }

  .comment-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    min-width: 0;
  }

  .comment-author {
    --lc-link-padding-y: 0;
    --lc-link-padding-x: 0;
    --lc-link-hover-text-decoration: underline;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: var(--lc-comment-author-font-size, var(--text-sm, 0.875rem));
    font-weight: var(--lc-comment-author-font-weight, var(--font-semibold, 600));
    line-height: 1.4;
    color: var(--lc-comment-author-color, var(--text-color, inherit));
  }

  .comment-time {
    white-space: nowrap;
    font-size: var(--lc-comment-time-font-size, var(--text-xs, 0.75rem));
    color: var(--lc-comment-time-color, var(--text-muted, #6b7280));
  }

  .comment-body {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: var(--lc-comment-body-font-size, var(--text-sm, 0.875rem));
    line-height: 1.5;
    color: var(--lc-comment-body-color, var(--text-color, inherit));
  }

  .comment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lc-comment-actions-gap, 0.25rem);
  }

  &[concealed] {
    .comment-avatar,
    .comment-author,
    .comment-body {
      opacity: var(--lc-comment-hidden-opacity, 0.55);
    }
  }
}


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

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

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

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

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

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

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

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

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

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


/**
 * A card pads its own parts, so the host must not pad as well. lc-card extends
 * lc-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.
 */
lc-card[padding],
.lc-card[padding] {
  padding: 0;
}

:where(.lc-card, lc-card) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--lc-card-color, inherit);
  --lc-container-background: var(--lc-card-background, var(--color-surface));
  --lc-container-border-color: var(--lc-card-border-color, var(--border-color));
  --lc-container-border-width: var(--lc-card-border-width, var(--border-width, 1px));
  --lc-container-border-radius: var(
    --lc-card-border-radius,
    var(--radius-box, var(--radius-md, 0.75rem))
  );
  box-shadow: var(--lc-card-shadow, var(--shadow-box, none));

  & [part~=lc-card-body] {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  & [part~=lc-card-header-row] {
    display: flex;
    align-items: center;
    gap: var(--lc-card-header-gap, 0.5rem);
    padding: var(--lc-card-header-padding, var(--lc-card-sm-padding, 1rem));
    padding-bottom: 0;
  }

  & [part~=lc-card-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: var(--lc-card-icon-border-radius, 6px);
    background: var(--lc-card-icon-background, var(--color-surface-light, #f8f9f7));
    color: var(--lc-card-icon-color, var(--text-secondary, #3f443f));
  }

  & [part~=lc-card-heading] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--lc-card-heading-font-size, 14px);
    font-weight: var(--lc-card-heading-font-weight, 600);
    color: var(--lc-card-heading-color, var(--text-color, #101210));
  }

  & [part~=lc-card-header-spacer] {
    flex: 1;
  }

  & [part~=lc-card-actions] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: none;
  }

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

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

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

  &[padding="none"] {
    --lc-card-footer-padding: 0;
  }
  &[padding="none"] [part~=lc-card-header-row] {
    padding: var(--lc-card-header-padding, var(--lc-card-sm-padding, 1rem));
    border-bottom: var(--lc-card-header-border-width, 1px) solid
      var(--lc-card-header-border-color, var(--border-color, rgba(0, 0, 0, 0.08)));
  }
  &[padding="none"] [part~=lc-card-body] {
    padding: 0;
  }

  &[padding="xs"] {
    --lc-card-header-padding: var(--lc-card-xs-padding, 0.6rem);
    --lc-card-footer-padding: var(--lc-card-xs-padding, 0.6rem);
  }
  &[padding="xs"] [part~=lc-card-body] {
    padding: var(--lc-card-xs-padding, 0.6rem);
  }

  &[padding="sm"] {
    --lc-card-header-padding: var(--lc-card-sm-padding, 1rem);
    --lc-card-footer-padding: var(--lc-card-sm-padding, 1rem);
  }
  &[padding="sm"] [part~=lc-card-body] {
    padding: var(--lc-card-sm-padding, 1rem);
  }

  &[padding="md"] {
    --lc-card-header-padding: var(--lc-card-md-padding, 1.3rem);
    --lc-card-footer-padding: var(--lc-card-md-padding, 1.3rem);
  }
  &[padding="md"] [part~=lc-card-body] {
    padding: var(--lc-card-md-padding, 1.3rem);
  }

  &[padding="lg"] {
    --lc-card-header-padding: var(--lc-card-lg-padding, 1.8rem);
    --lc-card-footer-padding: var(--lc-card-lg-padding, 1.8rem);
  }
  &[padding="lg"] [part~=lc-card-body] {
    padding: var(--lc-card-lg-padding, 1.8rem);
  }

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

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

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

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

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

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

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

  &[gap="none"] [part~=lc-card-body] {
    gap: 0;
  }

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

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

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

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

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

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

  &[shadow="md"] {
    box-shadow: var(
      --lc-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(
      --lc-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(--lc-card-hover-border-color, var(--color-primary));
      box-shadow: var(
        --lc-card-hover-shadow,
        var(--lc-card-shadow, var(--shadow-box, none))
      );
      translate: var(--lc-card-hover-translate, var(--motion-lift, 0 0));
    }

    &:active {
      box-shadow: var(--lc-card-active-shadow, none);
      translate: var(--lc-card-active-translate, var(--motion-press, 0 0));
    }
  }

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

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

  &[variant="elevated"] {
    --lc-container-background: var(--color-surface-lighter);
    --lc-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.
   */
  &[href] {
    cursor: pointer;
  }
}

.lc-card [part~=lc-card-link],
lc-card [part~=lc-card-link] {
  display: flex;
  flex-direction: column;
  gap: inherit;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}


:where(.lc-context-menu, lc-context-menu) {
  position: fixed;
  z-index: 10000;
  display: none;
  font-family: inherit;

  &[data-open] {
    display: block;
    min-width: var(--lc-context-menu-min-width, 200px);
    max-width: var(--lc-context-menu-max-width, 360px);
    background: var(--lc-context-menu-background, var(--color-surface-dark));
    color: var(--lc-context-menu-color, var(--text-color, inherit));
    border: var(--border-width, 1px) solid var(--lc-context-menu-border-color, var(--color-surface));
    border-radius: var(--lc-context-menu-border-radius, var(--radius-md, 0.375rem));
    box-shadow: var(--lc-context-menu-shadow, var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.35)));
    font-size: var(--lc-context-menu-font-size, var(--text-sm, 0.875rem));
  }

  lc-menu {
    box-shadow: none;
  }

  li[role="separator"] {
    height: 1px;
    margin: var(--spacing-xs, 0.25rem) 0;
    background: var(--lc-context-menu-separator, var(--color-surface));
    list-style: none;
  }

  .lc-context-menu-row {
    display: flex;
    align-items: center;
    gap: var(--lc-context-menu-gap, 0.5rem);
    padding: var(--lc-context-menu-item-padding, 0.3rem 0.75rem);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;

    &:hover {
      background: var(--lc-context-menu-hover-background, var(--color-surface-light));
    }

    &[aria-disabled="true"] {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  .lc-context-menu-icon {
    opacity: 0.7;
    flex-shrink: 0;
  }

  .lc-context-menu-label {
    flex: 1;
  }

  .lc-context-menu-key {
    margin-left: var(--spacing-xl, 1.5rem);
    font-size: var(--text-xs, 0.75rem);
    opacity: 0.5;
  }

  .lc-context-menu-chevron {
    margin-left: var(--spacing-xl, 1.5rem);
    opacity: 0.5;
    flex-shrink: 0;
  }

  .is-danger .lc-context-menu-row {
    color: var(--lc-context-menu-danger-color, var(--color-danger));
  }

  .lc-context-menu-parent {
    position: relative;
  }

  .lc-context-menu-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 1;
    min-width: var(--lc-context-menu-min-width, 200px);
    background: var(--lc-context-menu-background, var(--color-surface-dark));
    border: var(--border-width, 1px) solid var(--lc-context-menu-border-color, var(--color-surface));
    border-radius: var(--lc-context-menu-border-radius, var(--radius-md, 0.375rem));
    box-shadow: var(--lc-context-menu-shadow, var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.35)));
  }
}


:where(.lc-cta-section, lc-cta-section) {
  display: block;

  .cta-section {
    padding: var(--spacing-4xl) var(--spacing-xl);
  }

  .cta-section-dark {
    background: var(--color-surface-inverse);
    color: var(--color-surface);
  }

  .cta-section-light {
    background: var(--color-surface);
    color: var(--text-color);
  }

  .cta-headline {
    font-size: var(--text-section);
    font-weight: var(--font-black);
    letter-spacing: -0.03em;
    margin-bottom: var(--spacing-lg);
  }

  .cta-section-light .cta-headline {
    color: var(--text-color);
  }

  .cta-subheadline {
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
    max-width: 450px;
    margin: 0 auto var(--spacing-2xl);
  }

  .cta-section-dark .cta-subheadline {
    color: color-mix(in srgb, var(--color-surface) 60%, transparent);
  }

  .cta-section-light .cta-subheadline {
    color: var(--text-secondary);
  }

  .cta-btn {
    font-size: var(--text-body);
    font-weight: var(--font-bold);
    border-radius: var(--radius-full);
    padding: var(--spacing-lg) var(--spacing-2xl);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;

    &:hover {
      transform: translateY(-2px);
    }
  }

  .cta-section-dark .cta-btn-primary {
    background: var(--color-surface);
    color: var(--color-surface-inverse);

    &:hover {
      background: color-mix(in srgb, var(--color-surface) 92%, black);
    }
  }

  .cta-section-light .cta-btn-primary {
    background: var(--color-surface-inverse);
    color: var(--color-surface);

    &:hover {
      background: black;
    }
  }

  .cta-section-dark .cta-btn-secondary {
    background: color-mix(in srgb, var(--color-surface) 10%, transparent);
    color: var(--color-surface);
    border: 1px solid
      color-mix(in srgb, var(--color-surface) 10%, transparent);
    box-shadow: none;

    &:hover {
      background: color-mix(in srgb, var(--color-surface) 15%, transparent);
    }
  }

  .cta-section-light .cta-btn-secondary {
    background: color-mix(
      in srgb,
      var(--color-surface-inverse) 6%,
      transparent
    );
    color: var(--text-color);
    border: 1px solid
      color-mix(in srgb, var(--color-surface-inverse) 10%, transparent);
    box-shadow: none;

    &:hover {
      background: color-mix(
        in srgb,
        var(--color-surface-inverse) 10%,
        transparent
      );
    }
  }
}


:where(.lc-darkmode, lc-darkmode) {
  display: block;

  & .darkmode-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lc-darkmode-gap, 0.75rem);
    width: 100%;
  }

  & .darkmode-label {
    font-size: var(--lc-darkmode-label-size, var(--lc-label-font-size, 0.75rem));
    font-weight: var(--lc-darkmode-label-font-weight, var(--lc-label-font-weight, 600));
    letter-spacing: var(--lc-darkmode-label-tracking, var(--lc-label-letter-spacing, normal));
    text-transform: var(--lc-darkmode-label-transform, var(--lc-label-text-transform, none));
    color: var(--lc-darkmode-label-color, var(--lc-label-color, var(--text-color)));
    white-space: nowrap;
  }

  &[compact] button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
}


:where(.lc-data-table, lc-data-table) {
  display: flex;
  flex-direction: column;
  width: var(--lc-data-table-width, 100%);
  height: var(--lc-data-table-height, 100%);
  min-height: 0;

  > lc-table {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  > lc-table .lc-table-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
  }

  .lc-data-table-footer {
    display: flex;
    align-items: center;
    justify-content: var(--lc-data-table-footer-justify, flex-end);
    gap: var(--lc-data-table-footer-gap, 1rem);
    flex-wrap: wrap;
    flex: none;
    padding: var(--lc-data-table-footer-padding, 0.5rem 0.75rem);
    border-top: 1px solid var(--lc-data-table-footer-border-color, var(--border-color, rgba(0, 0, 0, 0.08)));
    font-size: var(--text-xs, 0.75rem);
    color: var(--text-muted, #6b7280);
  }

  .lc-data-table-range {
    margin-right: auto;
    font-variant-numeric: tabular-nums;
  }

  .lc-data-table-size {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
}


:where(.lc-day-strip, lc-day-strip) {
  display: block;

  .day-strip-track {
    display: flex;
    gap: var(--lc-day-strip-gap, 0.375rem);
  }

  .day-strip-day {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lc-day-strip-day-gap, 0.125rem);
    appearance: none;
    margin: 0;
    border: 0;
    padding: var(--lc-day-strip-padding-y, 0.4375rem) 0 var(--lc-day-strip-padding-bottom, 0.375rem);
    border-radius: var(--lc-day-strip-border-radius, 9999px);
    background: var(--lc-day-strip-background, transparent);
    color: var(--lc-day-strip-color, var(--text-muted, inherit));
    font: inherit;
    line-height: 1;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .day-strip-weekday {
    font-size: var(--lc-day-strip-weekday-font-size, 0.625rem);
    font-weight: var(--lc-day-strip-weekday-font-weight, 700);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .day-strip-number {
    font-size: var(--lc-day-strip-number-font-size, 0.9375rem);
    font-weight: var(--lc-day-strip-number-font-weight, 800);
    color: var(--lc-day-strip-number-color, var(--text-color, inherit));
  }

  .day-strip-dot {
    width: var(--lc-day-strip-dot-size, 4px);
    height: var(--lc-day-strip-dot-size, 4px);
    border-radius: 50%;
    background: var(--lc-day-strip-dot-color, var(--color-primary, currentColor));
    opacity: 0;
  }

  .has-dot .day-strip-dot {
    opacity: 1;
  }

  .is-today .day-strip-number {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: var(--lc-day-strip-today-color, var(--color-primary, currentColor));
  }

  .day-strip-day:hover:not(.is-selected):not(:disabled) {
    color: var(--lc-day-strip-hover-color, var(--text-color, inherit));
  }

  .day-strip-day.is-selected {
    background: var(--lc-day-strip-selected-background, var(--color-primary));
    color: var(--lc-day-strip-selected-color, var(--color-on-primary, #ffffff));
  }

  .day-strip-day.is-selected .day-strip-number {
    color: inherit;
    text-decoration: none;
  }

  .day-strip-day.is-selected .day-strip-dot {
    background: currentColor;
  }

  .day-strip-day:focus-visible {
    outline: 2px solid var(--lc-day-strip-selected-background, var(--color-primary));
    outline-offset: 2px;
  }

  .day-strip-day:disabled {
    cursor: not-allowed;
  }

  .day-strip-track[aria-disabled="true"] {
    opacity: 0.5;
  }
}


:where(.lc-device, lc-device) {
  display: inline-flex;
  justify-content: center;
  padding: var(--spacing-xl);

  &[device="iphone"] [part~=lc-device-container] {
    --lc-device-border-radius: 36px;
    --lc-device-screen-border-radius: 28px;
    --lc-device-padding: 12px;
  }

  &[device="android"] [part~=lc-device-container] {
    --lc-device-border-radius: 24px;
    --lc-device-screen-border-radius: 16px;
    --lc-device-padding: 8px;
  }

  &[device="ipad"] [part~=lc-device-container] {
    --lc-device-border-radius: 18px;
    --lc-device-screen-border-radius: 12px;
    --lc-device-padding: 16px;
  }

  &[device="desktop"] [part~=lc-device-container] {
    --lc-device-border-radius: 8px;
    --lc-device-screen-border-radius: 4px;
    --lc-device-padding: 24px;
    --lc-device-background: #e5e7eb;
  }

  &[center] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }

  &[device="iphone"] [part~=lc-device-screen], &[device="android"] [part~=lc-device-screen], &[device="ipad"] [part~=lc-device-screen] {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  &[device="iphone"] [part~=lc-device-screen]::-webkit-scrollbar, &[device="android"] [part~=lc-device-screen]::-webkit-scrollbar, &[device="ipad"] [part~=lc-device-screen]::-webkit-scrollbar {
    display: none;
  }

  &[device="desktop"] [part~=lc-device-screen] {
    overflow-y: auto;
    overflow-x: hidden;
  }

  & [part~=lc-device-container] {
    width: var(--device-width);
    height: var(--device-height);
    transform: scale(var(--device-scale));
    transform-origin: top center;
    background: var(--device-background, #000);
    border-radius: var(--device-radius, 36px);
    padding: var(--device-padding, 12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
    position: relative;
  }

  & [part~=lc-device-screen] {
    display: flex;
    width: 100%;
    height: 100%;
    background: var(--color-surface, #fff);
    border-radius: var(--screen-radius, 28px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  & [part~=lc-device-screen]::-webkit-scrollbar {
    display: none;
  }

  & [part~=lc-device-notch] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 24px;
    background: var(--device-background, #000);
    border-radius: 0 0 16px 16px;
    z-index: 10;
  }

  & [part~=lc-device-home-indicator] {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    z-index: 10;
  }
}

@media (max-width: 768px) {
  :where(.lc-device, lc-device) {
    --lc-device-scale: 0.8;
  }
}

@media (max-width: 480px) {
  :where(.lc-device, lc-device) {
    --lc-device-scale: 0.6;
  }
}

@media (prefers-color-scheme: dark) {
  :where(.lc-device, lc-device)[device="desktop"] [part~=lc-device-container] {
    --lc-device-background: #374151;
  }
}


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

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

  &[resizable] {
    cursor: row-resize;
    touch-action: none;
    user-select: none;
    height: var(--lc-divider-resize-handle, 6px);

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

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

  &[label] {
    padding: var(--lc-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(--lc-divider-padding, 1rem);
    }
  }
}


:where(.lc-draggable, lc-draggable) {
  --lc-draggable-height: auto;
  transition:
    transform 0.6s ease,
    opacity 0.6s ease;
  will-change: transform;

  &.dragging {
    opacity: 0.1;
  }
}


:where(.lc-drawer, lc-drawer) {

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--lc-drawer-z-index, 1000);
  pointer-events: none;

  &[open] {
    pointer-events: auto;
    display: flex;
  }

  & [part~=lc-drawer-backdrop] {
    display: none;
    pointer-events: none;
  }

  &[open] [part~=lc-drawer-backdrop] {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--lc-drawer-overlay-background, rgba(0, 0, 0, 0.6));
    backdrop-filter: var(--lc-drawer-overlay-blur, blur(2px));
    z-index: var(--lc-drawer-overlay-z-index, 100);
    animation: drawer-backdrop-fade-in var(--lc-drawer-animation-duration, 0.25s) ease-out;
    cursor: pointer;
    pointer-events: auto;
  }

  & [part~=lc-drawer-panel] {
    position: absolute;
    background-color: var(--lc-drawer-background, var(--color-surface-light, #ffffff));
    box-shadow: var(--lc-drawer-shadow, var(--shadow-box, var(--shadow-xl, 0 0 30px rgba(0, 0, 0, 0.4))));
    border: var(--lc-drawer-border-width, 0) solid var(--lc-drawer-border-color, var(--color-surface));
    z-index: var(--lc-drawer-panel-z-index, 1001);
    overflow-y: auto;
    overflow-x: hidden;
    transition: var(
      --lc-drawer-transition,
      transform var(--lc-drawer-animation-duration, 0.3s) ease-in-out,
      opacity var(--lc-drawer-animation-duration, 0.3s) ease-in-out
    );
    opacity: 0;
    pointer-events: none;
  }

  &[open] [part~=lc-drawer-panel] {
    opacity: 1;
    pointer-events: auto;
  }

  &:not([position]),
  &[position="left"] {
    & [part~=lc-drawer-panel] {
      top: 0;
      left: 0;
      bottom: 0;
      width: var(--lc-drawer-width, 280px);
      min-width: var(--lc-drawer-min-width, min(70%, 280px));
      max-width: var(--lc-drawer-max-width, 400px);
      height: 100%;
      transform: translateX(-100%);
      border-radius: 0 var(--lc-drawer-border-radius, 0) var(--lc-drawer-border-radius, 0) 0;
    }

    &[open] [part~=lc-drawer-panel] {
      transform: translateX(0);
    }
  }

  &[position="right"] {
    & [part~=lc-drawer-panel] {
      top: 0;
      right: 0;
      bottom: 0;
      width: var(--lc-drawer-width, 280px);
      min-width: var(--lc-drawer-min-width, min(70%, 280px));
      max-width: var(--lc-drawer-max-width, 400px);
      height: 100%;
      transform: translateX(100%);
      border-radius: var(--lc-drawer-border-radius, 0) 0 0 var(--lc-drawer-border-radius, 0);
    }

    &[open] [part~=lc-drawer-panel] {
      transform: translateX(0);
    }
  }

  &[position="top"] {
    & [part~=lc-drawer-panel] {
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: var(--lc-drawer-height, 50vh);
      min-height: var(--lc-drawer-min-height, 200px);
      max-height: var(--lc-drawer-max-height, 80vh);
      transform: translateY(-100%);
      border-radius: 0 0 var(--lc-drawer-border-radius, 0) var(--lc-drawer-border-radius, 0);
    }

    &[open] [part~=lc-drawer-panel] {
      transform: translateY(0);
    }
  }

  &[position="bottom"] {
    & [part~=lc-drawer-panel] {
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: var(--lc-drawer-height, 50vh);
      min-height: var(--lc-drawer-min-height, 200px);
      max-height: var(--lc-drawer-max-height, 80vh);
      transform: translateY(100%);
      border-radius: var(--lc-drawer-border-radius, 0) var(--lc-drawer-border-radius, 0) 0 0;
    }

    &[open] [part~=lc-drawer-panel] {
      transform: translateY(0);
    }
  }

  &[size="sm"] {
    --lc-drawer-width: 240px;
    --lc-drawer-height: 30vh;
  }

  &[size="md"] {
    --lc-drawer-width: 320px;
    --lc-drawer-height: 50vh;
  }

  &[size="lg"] {
    --lc-drawer-width: 400px;
    --lc-drawer-height: 70vh;
  }

  &[size="xl"] {
    --lc-drawer-width: 500px;
    --lc-drawer-height: 85vh;
  }

  &[size="full"] {
    --lc-drawer-width: 100%;
    --lc-drawer-height: 100vh;
    --lc-drawer-max-width: 100%;
    --lc-drawer-max-height: 100vh;
  }
}

@keyframes drawer-backdrop-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


:where(.lc-droparea, lc-droparea) {
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  will-change: transform;
  min-height: 100px;

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

  &.over {
    background-color: rgba(0, 0, 0, 0.3);
  }

  &[orderable] {
    position: relative;
    min-height: 0;

    &.over {
      background-color: transparent;
    }

    &[data-dropping]::before {
      content: "";
      position: absolute;
      left: 8px;
      right: 8px;
      height: 2px;
      background: var(--color-primary, #fabd2f);
      border-radius: 1px;
      top: var(--drop-indicator-y, 0);
      pointer-events: none;
      z-index: 10;
    }

    &[direction="horizontal"][data-dropping]::before {
      top: 4px;
      bottom: 4px;
      left: var(--drop-indicator-x, 0);
      right: auto;
      width: 2px;
      height: auto;
    }
  }
}


:where(.lc-dropdown, lc-dropdown) {
  position: fixed;
  z-index: 10000;
  display: none;

  &[data-open] {
    display: flex;
    flex-direction: column;
    min-width: var(--lc-dropdown-min-width, 200px);
    max-width: var(--lc-dropdown-max-width, 400px);
    background: var(
      --lc-dropdown-background,
      var(--color-surface-light, #282828)
    );
    color: var(--lc-dropdown-color, var(--text-color, default));
    padding: var(--lc-dropdown-padding);
    gap: 1px;
    border: var(--border-width, 1px) solid
      var(--lc-dropdown-border-color, var(--border-color, #504945));
    border-radius: var(--radius-box, var(--radius-md, 0.375rem));
    box-shadow: var(--lc-dropdown-shadow, var(--shadow-box, 0 8px 24px rgba(0, 0, 0, 0.5)));
  }

  &[variant="elevated"][data-open] {
    background: var(--color-surface-light, #3c3836);
  }

  &[variant="primary"][data-open] {
    background: var(--color-primary, #fabd2f);
    color: var(--color-surface-darker, #282828);
  }

  &[variant="card"][data-open] {
    background: var(--color-surface-dark, #32302f);
  }

  &[rounded][data-open] {
    border-radius: var(--radius-md, 0.375rem);
  }

  &[bordered][data-open] {
    border: var(--border-width, 1px) solid var(--color-surface, #504945);
  }

  &[shadow][data-open] {
    box-shadow: var(
      --shadow-md,
      0 8px 16px rgba(0, 0, 0, 0.3),
      0 2px 4px rgba(0, 0, 0, 0.2)
    );
  }

  > * {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 0.75rem);
    color: inherit;
    text-decoration: none;
    display: block;
    border-radius: var(--radius-sm, 0.25rem);
    transition:
      background-color 0.15s ease,
      color 0.15s ease;
    cursor: pointer;
    white-space: nowrap;
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.5;

    &:hover {
      background-color: var(
        --lc-dropdown-hover-background,
        rgba(255, 255, 255, 0.1)
      );
    }

    &:focus {
      outline: none;
    }

    &:focus-visible {
      background-color: var(
        --lc-dropdown-hover-background,
        rgba(255, 255, 255, 0.1)
      );
      outline: 1px solid var(--color-primary, #fabd2f);
      outline-offset: -1px;
    }

    &:active {
      background-color: var(--lc-dropdown-active-background, var(--color-primary, #fabd2f));
      color: var(--color-surface-darker, #282828);
    }

    &:disabled,
    &[disabled] {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }

    lc-icon {
      margin-right: var(--spacing-xs, 0.25rem);
      vertical-align: middle;
    }

    > * {
      pointer-events: none;
    }
  }

  > hr {
    border: none;
    border-top: var(--border-width, 1px) solid
      var(
        --lc-dropdown-separator,
        var(--color-surface-dark, rgba(80, 73, 69, 0.5))
      );
    margin: 3px 0;
    padding: 0;
  }

  > .dropdown-header,
  > [role="heading"] {
    padding: 10px 10px 2px;
    font-size: 9px;
    font-weight: var(--font-bold, 700);
    color: var(--lc-dropdown-text-muted, var(--text-muted, #a89984));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: default;

    &:hover {
      background-color: transparent;
    }
  }

  > button.lc-dropdown-item {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 5px 10px;
    border: none;
    background: transparent;
    text-align: left;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
    color: var(--lc-dropdown-color, var(--text-color));
  }

  > button.lc-dropdown-item:hover {
    background-color: var(
      --lc-dropdown-hover-background,
      var(--color-surface-dark, rgba(255, 255, 255, 0.1))
    );
  }

  > button.lc-dropdown-item.is-danger {
    color: var(--color-danger, #f87171);
  }

  > button.lc-dropdown-item lc-icon {
    margin-right: 0;
    flex-shrink: 0;
  }

  .lc-dropdown-check {
    width: 14px;
    display: inline-flex;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-primary);
  }

  .lc-dropdown-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
  }
}


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

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

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

  & [part~=lc-empty-state-title] {
    font-size: var(--lc-empty-state-title-size, var(--text-base, 0.95rem));
    font-weight: var(--lc-empty-state-title-font-weight, var(--font-semibold, 600));
  }

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

  & [part~=lc-empty-state-actions] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;

    &:empty {
      display: none;
    }
  }
}


:where(.lc-example, lc-example) {
  display: block;
  overflow: hidden;
  border: var(--border-width, 1px) solid var(--lc-example-border-color, var(--border-color));
  border-radius: var(--lc-example-border-radius, var(--radius-box, var(--radius-md, 0.375rem)));
  background: var(--lc-example-background, var(--color-surface));

  .example-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 0.75rem);
    padding: var(--spacing-md, 0.75rem) var(--spacing-lg, 1rem);
    border-bottom: var(--border-width, 1px) solid var(--lc-example-border-color, var(--border-color));
    background: var(--lc-example-header-background, transparent);
  }

  .example-heading {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
  }

  .example-title {
    font-size: var(--text-base, 1rem);
    font-weight: var(--font-bold, 700);
  }

  .example-description {
    font-size: var(--text-caption, 0.8125rem);
    color: var(--text-muted);
  }

  .example-stage {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 7.5rem;
    padding: var(--spacing-xl, 1.5rem);
    background-color: var(--lc-example-stage-background, var(--canvas-background));
    background-image: radial-gradient(var(--lc-example-pattern-color, var(--border-color)) 1px, transparent 1px);
    background-size: 18px 18px;
    overflow-x: auto;

    &[data-align="start"] {
      justify-content: flex-start;
    }
  }

  .example-stage-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin: 0 auto;
    transition: width 0.2s ease;
  }

  .example-stage[data-align="start"] .example-stage-inner {
    justify-content: flex-start;
    margin: 0;
  }

  .example-code {
    border: 0;
    border-top: var(--border-width, 1px) solid var(--lc-example-border-color, var(--border-color));
    border-radius: 0;
  }

  .example-strip {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 0.75rem);
    padding: var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.5rem) var(--spacing-lg, 1rem);
    border-top: var(--border-width, 1px) solid var(--lc-example-border-color, var(--border-color));
    background: var(--lc-example-strip-background, var(--color-surface-light));
  }

  .example-strip-code {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: var(--text-caption, 0.8125rem);
    color: var(--text-secondary);
  }
}


:where(.lc-faq-section, lc-faq-section) {
  display: block;

  .faq-eyebrow {
    display: inline-block;
    background: var(--color-surface-inverse);
    color: var(--color-surface);
    font-size: var(--text-eyebrow);
    font-weight: var(--font-bold);
    padding: 6px var(--spacing-lg);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--spacing-xl);
  }

  .faq-headline {
    font-size: var(--text-section);
    font-weight: var(--font-black);
    letter-spacing: -0.03em;
    color: var(--text-color);
    margin-bottom: var(--spacing-lg);
  }

  .faq-subheadline {
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto;
  }

  .faq-item {
    background: var(--color-surface);
    border-radius: var(--radius-card);
    border: 1px solid
      color-mix(in srgb, var(--text-color) 8%, transparent);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .faq-toggle {
    width: 100%;
    text-align: left;
    padding: var(--spacing-xl) 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    background: transparent;
    border: none;
    cursor: pointer;
  }

  .faq-question {
    font-size: var(--text-body);
    font-weight: var(--font-bold);
    color: var(--text-color);
  }

  .faq-chevron {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }

  .faq-answer-wrap {
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .faq-answer {
    padding: 0 28px;
    font-size: 14px;
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    line-height: 1.6;
  }
}


:where(.lc-feature-grid, lc-feature-grid) {
  display: block;

  .feature-grid-section {
    padding: 7rem var(--spacing-xl);
  }

  .feature-grid-section-dark {
    background: var(--color-surface-inverse);
    color: var(--color-surface);
  }

  .feature-grid-eyebrow {
    display: inline-block;
    font-size: var(--text-eyebrow);
    font-weight: var(--font-bold);
    padding: 6px var(--spacing-lg);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--spacing-xl);
  }

  .feature-grid-section-light .feature-grid-eyebrow {
    background: var(--color-surface-inverse);
    color: var(--color-surface);
  }

  .feature-grid-section-dark .feature-grid-eyebrow {
    background: color-mix(in srgb, var(--color-surface) 10%, transparent);
    color: color-mix(in srgb, var(--color-surface) 80%, transparent);
    border: 1px solid
      color-mix(in srgb, var(--color-surface) 10%, transparent);
  }

  .feature-grid-headline {
    font-size: var(--text-section);
    font-weight: var(--font-black);
    letter-spacing: -0.03em;
    margin-bottom: var(--spacing-lg);
  }

  .feature-grid-section-light .feature-grid-headline {
    color: var(--text-color);
  }

  .feature-grid-section-dark .feature-grid-headline {
    color: var(--color-surface);
  }

  .feature-grid-subheadline {
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
    max-width: 500px;
    margin: 0 auto;
  }

  .feature-grid-section-light .feature-grid-subheadline {
    color: var(--text-secondary);
  }

  .feature-grid-section-dark .feature-grid-subheadline {
    color: color-mix(in srgb, var(--color-surface) 60%, transparent);
  }

  .feature-card {
    border-radius: var(--radius-panel);
    padding: 1.75rem;
    transition: all 0.3s ease;
  }

  .feature-grid-section-light .feature-card {
    background: var(--color-surface);
    border: 1px solid
      color-mix(in srgb, var(--text-color) 8%, transparent);

    &:hover {
      border-color: color-mix(
        in srgb,
        var(--text-color) 16%,
        transparent
      );
    }
  }

  .feature-grid-section-dark .feature-card {
    background: color-mix(in srgb, var(--color-surface) 4%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid
      color-mix(in srgb, var(--color-surface) 8%, transparent);

    &:hover {
      background: color-mix(in srgb, var(--color-surface) 7%, transparent);
      border-color: color-mix(
        in srgb,
        var(--color-surface) 12%,
        transparent
      );
    }
  }

  .feature-card-icon-box {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    transition: background 0.2s ease;
  }

  .feature-grid-section-light .feature-card-icon-box {
    background: color-mix(
      in srgb,
      var(--text-color) 4%,
      transparent
    );
    border: 1px solid
      color-mix(in srgb, var(--text-color) 8%, transparent);
  }

  .feature-grid-section-dark .feature-card-icon-box {
    background: color-mix(in srgb, var(--color-surface) 6%, transparent);
    border: 1px solid
      color-mix(in srgb, var(--color-surface) 8%, transparent);
  }

  .feature-grid-section-dark .feature-card:hover .feature-card-icon-box {
    background: color-mix(in srgb, var(--color-surface) 10%, transparent);
  }

  .feature-card-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .feature-grid-section-light .feature-card-icon {
    color: color-mix(in srgb, var(--text-color) 80%, transparent);
  }

  .feature-grid-section-dark .feature-card-icon {
    color: color-mix(in srgb, var(--color-surface) 70%, transparent);
  }

  .feature-card-title {
    font-size: 1.15rem;
    font-weight: var(--font-bold);
    margin-bottom: var(--spacing-sm);
  }

  .feature-grid-section-light .feature-card-title {
    color: var(--text-color);
  }

  .feature-grid-section-dark .feature-card-title {
    color: var(--color-surface);
  }

  .feature-card-desc {
    font-size: 14px;
    font-weight: var(--font-medium);
    line-height: 1.65;
  }

  .feature-grid-section-light .feature-card-desc {
    color: var(--text-secondary);
  }

  .feature-grid-section-dark .feature-card-desc {
    color: color-mix(in srgb, var(--color-surface) 60%, transparent);
  }
}


:where(.lc-file-upload, lc-file-upload) {
  display: block;

  .file-upload {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 0.75rem);
  }

  .file-upload-label {
    display: inline-block;
    cursor: pointer;
  }

  .file-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .file-dropzone {
    border: 2px dashed var(--lc-file-upload-border-color, var(--color-primary));
    border-radius: var(--lc-file-upload-border-radius, var(--radius-lg, 0.5rem));
    padding: var(--spacing-xl, 1.5rem);
    text-align: center;
    background-color: var(--lc-file-upload-background, var(--color-surface));
    transition: border-color 0.2s ease, background-color 0.2s ease;
    cursor: pointer;

    &:hover:not(.disabled) {
      border-color: var(--lc-file-upload-hover-border-color, var(--color-primary));
      background-color: var(--lc-file-upload-hover-background, var(--color-hover));
    }

    &.dragover {
      border-color: var(--color-primary);
      background-color: var(--color-hover);
    }

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

  .file-dropzone-label {
    display: block;
    cursor: pointer;
  }

  .file-dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md, 0.75rem);
  }

  .file-dropzone-text {
    color: var(--color-primary);
    font-size: var(--text-sm, 0.875rem);
    margin: 0;
  }

  .file-dropzone-hint {
    color: var(--text-muted);
    font-size: var(--text-xs, 0.75rem);
    margin: 0;
  }

  .file-upload-error {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 0.75rem);
    background-color: var(--color-danger);
    color: var(--color-danger);
    border-radius: var(--radius-md);
    font-size: var(--text-sm, 0.875rem);
  }

  .file-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
  }

  .file-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 0.75rem);
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 0.75rem);
    background-color: var(--color-surface-darker);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
  }

  .file-preview {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
  }

  .file-icon {
    width: 2rem;
    height: 2rem;
    color: var(--color-secondary);
    flex-shrink: 0;
  }

  .file-info {
    flex: 1;
    min-width: 0;
  }

  .file-name {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .file-size {
    font-size: var(--text-xs, 0.75rem);
    color: var(--text-muted);
  }

  .file-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background-color: transparent;
    color: var(--color-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease;

    &:hover:not(:disabled) {
      background-color: var(--color-danger);
      color: var(--color-danger);
    }

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


:where(.lc-flex, lc-flex) {
  display: flex;
  flex-direction: var(--lc-flex-direction, row);
  gap: var(--lc-flex-gap);
  align-items: var(--lc-flex-align, stretch);
  justify-content: var(--lc-flex-justify, flex-start);
  flex-wrap: var(--lc-flex-wrap, nowrap);
  box-sizing: border-box;

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

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

  &[direction="row-reverse"] {
    --lc-flex-direction: row-reverse;
  }

  &[direction="column-reverse"] {
    --lc-flex-direction: column-reverse;
  }

  &[gap="none"] {
    --lc-flex-gap: 0;
  }

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

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

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

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

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

  &[gap="2xl"] {
    --lc-flex-gap: var(--spacing-2xl, 2rem);
  }

  &[gap="3xl"] {
    --lc-flex-gap: var(--spacing-3xl, 3rem);
  }

  &[align="start"] {
    --lc-flex-align: flex-start;
  }

  &[align="center"] {
    --lc-flex-align: center;
  }

  &[align="end"] {
    --lc-flex-align: flex-end;
  }

  &[align="stretch"] {
    --lc-flex-align: stretch;
  }

  &[align="baseline"] {
    --lc-flex-align: baseline;
  }

  &[justify="start"] {
    --lc-flex-justify: flex-start;
  }

  &[justify="center"] {
    --lc-flex-justify: center;
  }

  &[justify="end"] {
    --lc-flex-justify: flex-end;
  }

  &[justify="space-between"] {
    --lc-flex-justify: space-between;
  }

  &[justify="space-around"] {
    --lc-flex-justify: space-around;
  }

  &[justify="space-evenly"] {
    --lc-flex-justify: space-evenly;
  }

  &[wrap="wrap"] {
    --lc-flex-wrap: wrap;
  }

  &[wrap="nowrap"] {
    --lc-flex-wrap: nowrap;
  }

  &[wrap="wrap-reverse"] {
    --lc-flex-wrap: wrap-reverse;
  }

  &[responsive] {
    --lc-flex-direction: column;
    @media (min-width: 1024px) {
      --lc-flex-direction: row;
    }
  }

  > [flex-1] {
    flex: 1 1 0%;
    min-width: 0;
  }

  > [flex-auto] {
    flex: 1 1 auto;
  }

  > [flex-initial] {
    flex: 0 1 auto;
  }

  > [flex-none] {
    flex: none;
  }

  > [flex-grow] {
    flex-grow: 1;
  }

  > [flex-grow="0"] {
    flex-grow: 0;
  }

  > [flex-shrink] {
    flex-shrink: 1;
  }

  > [flex-shrink="0"] {
    flex-shrink: 0;
  }

  > [flex-basis="auto"] {
    flex-basis: auto;
  }

  > [flex-basis="0"] {
    flex-basis: 0;
  }

  > [align-self="start"] {
    align-self: flex-start;
  }

  > [align-self="center"] {
    align-self: center;
  }

  > [align-self="end"] {
    align-self: flex-end;
  }

  > [align-self="stretch"] {
    align-self: stretch;
  }

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

  > [hidden-below-lg] {
    display: none;
    @media (min-width: 1024px) {
      display: block;
    }
  }

  > [hidden-above-lg] {
    display: block;
    @media (min-width: 1024px) {
      display: none;
    }
  }
}


:where(.lc-float-card, lc-float-card) {
  display: block;
  position: absolute;
  z-index: 30;
  --lc-float-card-slow-lift: -14px;
  --lc-float-card-delayed-lift: -10px;
  --lc-float-card-fast-lift: -8px;

  &[animation="slow"] {
    animation: lc-float-card-slow 7s ease-in-out infinite;
  }

  &[animation="delayed"] {
    animation: lc-float-card-delayed 6s ease-in-out 1s infinite;
  }

  &[animation="fast"] {
    animation: lc-float-card-fast 4.5s ease-in-out infinite;
  }
}

@media (max-width: 639px) {
  :where(.lc-float-card, lc-float-card)[hide="sm"] {
    display: none;
  }
}

@media (max-width: 767px) {
  :where(.lc-float-card, lc-float-card)[hide="md"] {
    display: none;
  }
}

@media (max-width: 1023px) {
  :where(.lc-float-card, lc-float-card)[hide="lg"] {
    display: none;
  }
}

@keyframes lc-float-card-slow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(var(--lc-float-card-slow-lift, -14px));
  }
}

@keyframes lc-float-card-delayed {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(var(--lc-float-card-delayed-lift, -10px));
  }
}

@keyframes lc-float-card-fast {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(var(--lc-float-card-fast-lift, -8px));
  }
}


:where(lc-float-panel) {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  resize: both;
  overflow: hidden;
  background: var(--color-surface, #fff);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-lg, 0.5rem);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.25), 0 4px 6px -4px rgba(0, 0, 0, 0.25));

  & > [data-float-handle] {
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }
}


:where(.lc-flow, lc-flow) {
  display: block;
  container-type: inline-size;
  --lc-flow-gap-size: var(--lc-flow-gap, var(--spacing-lg, 1rem));

  & .flow {
    display: grid;
    grid-template-columns: var(--lc-flow-lane-width, 7.5rem) repeat(var(--lc-flow-phases), auto);
    gap: var(--spacing-sm, 0.5rem) var(--lc-flow-gap-size);
    align-items: stretch;
  }

  & .flow-phase {
    color: var(--text-muted);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  & .flow-lane-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    color: var(--text-color);
    font-size: var(--text-sm, 0.875rem);

    & span {
      color: var(--text-muted);
      font-size: var(--text-xs, 0.75rem);
    }
  }

  & .flow-cell {
    display: flex;
    gap: var(--lc-flow-gap-size);
  }

  /*
   * A phase the lane skips on its way to a later step: a line across the cell,
   * meeting the arrows on either side of it.
   */
  & .flow-cell[data-pass] {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: calc(var(--lc-flow-gap-size) * -1);
      right: 0;
      border-top: 1px dashed var(--lc-flow-arrow-color, var(--text-muted));
    }
  }

  & .flow-step {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 0.75rem);
    border: var(--border-width, 1px) solid var(--lc-flow-step-border-color, var(--border-color));
    border-radius: var(--lc-flow-step-border-radius, var(--radius-field, var(--radius-md, 0.375rem)));
    background: var(--lc-flow-step-background, var(--color-surface));
    color: var(--text-color);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;

    &:hover {
      border-color: var(--lc-flow-step-hover-border-color, var(--text-muted));
    }

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

    &[aria-pressed="true"] {
      border-color: var(--lc-flow-selected-border-color, var(--color-primary));
      background: var(--lc-flow-selected-background, var(--color-surface-light));
      box-shadow: inset 0 0 0 1px var(--lc-flow-selected-border-color, var(--color-primary));
    }

    &[data-tone="accent"] .flow-step-label {
      color: var(--lc-flow-accent-color, var(--color-primary));
    }

    &[data-tone="muted"] {
      border-style: dashed;
      background: transparent;
    }

    /* The arrow from the step before: a shaft across the gap and its head. */
    &[data-after]::before,
    &[data-after]::after {
      content: "";
      position: absolute;
      top: 50%;
      pointer-events: none;
    }

    &[data-after]::before {
      right: calc(100% + 1px);
      width: var(--lc-flow-gap-size);
      border-top: 1px solid var(--lc-flow-arrow-color, var(--text-muted));
    }

    &[data-after]::after {
      right: calc(100% + 1px);
      translate: 0 -4px;
      border-block: 4px solid transparent;
      border-left: 6px solid var(--lc-flow-arrow-color, var(--text-muted));
    }
  }

  & .flow-step-phase {
    display: none;
    color: var(--text-muted);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  & .flow-step-label {
    overflow-wrap: break-word;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
  }

  & .flow-step-detail {
    overflow-wrap: break-word;
    color: var(--text-muted);
    font-size: var(--text-xs, 0.75rem);
  }

  /* Narrow: lanes stack, each one top to bottom. */
  @container (max-width: 40rem) {
    & .flow {
      grid-template-columns: minmax(0, 1fr);
      row-gap: var(--lc-flow-gap-size);
    }

    & .flow-corner,
    & .flow-phase,
    & .flow-cell[data-pass],
    & .flow-cell[data-empty] {
      display: none;
    }

    & .flow-lane-label {
      margin-top: var(--spacing-md, 0.75rem);
    }

    & .flow-cell {
      flex-direction: column;
    }

    & .flow-step-phase {
      display: block;
    }

    & .flow-step[data-after]::before {
      top: auto;
      right: auto;
      bottom: calc(100% + 1px);
      left: var(--spacing-lg, 1rem);
      width: 0;
      height: var(--lc-flow-gap-size);
      border-top: 0;
      border-left: 1px solid var(--lc-flow-arrow-color, var(--text-muted));
    }

    & .flow-step[data-after]::after {
      top: auto;
      right: auto;
      bottom: calc(100% + 1px);
      left: calc(var(--spacing-lg, 1rem) - 4px);
      translate: 0;
      border-block: 0;
      border-inline: 4px solid transparent;
      border-top: 6px solid var(--lc-flow-arrow-color, var(--text-muted));
    }
  }
}


:where(.lc-footer, lc-footer) {
  display: block;

  .footer-root {
    background: var(--color-surface-inverse);
    color: var(--color-surface);
    padding: 0 var(--spacing-xl) var(--spacing-2xl);
  }

  .footer-divider {
    border-top: 1px solid
      color-mix(in srgb, var(--color-surface) 10%, transparent);
  }

  .footer-brand {
    font-weight: var(--font-bold);
    font-size: var(--text-body);
  }

  .footer-tagline {
    font-size: var(--text-caption);
    font-weight: var(--font-medium);
    line-height: 1.6;
    color: color-mix(in srgb, var(--color-surface) 60%, transparent);
  }

  .footer-social {
    color: color-mix(in srgb, var(--color-surface) 60%, transparent);
    transition: color 0.2s ease;

    &:hover {
      color: var(--color-surface);
    }
  }

  .footer-col-title {
    font-size: var(--text-caption);
    font-weight: var(--font-bold);
    color: color-mix(in srgb, var(--color-surface) 80%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--spacing-lg);
  }

  .footer-link {
    font-size: var(--text-caption);
    font-weight: var(--font-medium);
    color: color-mix(in srgb, var(--color-surface) 60%, transparent);
    transition: color 0.2s ease;

    &:hover {
      color: var(--color-surface);
    }
  }

  .footer-copyright {
    font-size: 12px;
    font-weight: var(--font-medium);
    color: color-mix(in srgb, var(--color-surface) 45%, transparent);
  }
}


lc-form form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lc-form-gap, 1.25rem);
}

@media (min-width: 640px) {
  lc-form[layout="grid"] form {
    grid-template-columns: repeat(2, 1fr);
  }

  lc-form[layout="grid"] .form-field:has(lc-textarea) {
    grid-column: 1 / -1;
  }
}

:where(.lc-form, lc-form) {
  .form-field {
    display: flex;
    flex-direction: column;
    gap: var(--lc-form-field-gap, 0.5rem);

    &.has-error {
      lc-input,
      lc-select,
      lc-textarea {
        --lc-input-border-color: var(--lc-form-error-color, #ef4444);
      }
    }
  }

  .form-error {
    color: var(--lc-form-error-color, #ef4444);
    font-size: 0.75rem;
    margin-top: 0.25rem;
  }

  .form-hint {
    color: var(--lc-form-hint-color, var(--text-muted, #6b7280));
    font-size: 0.75rem;
  }
  .lc-form-group,
  .lc-form-list {
    display: flex;
    flex-direction: column;
    gap: var(--lc-form-field-gap, 0.5rem);
    border: var(--border-width, 1px) solid var(--lc-form-group-border-color, var(--border-color, #d4d4d8));
    border-radius: var(--radius-md, 0.375rem);
    padding: var(--spacing-md, 0.75rem);
    min-inline-size: 0;

    > legend {
      padding-inline: var(--spacing-xs, 0.25rem);
      font-size: 0.75rem;
      font-weight: var(--font-bold, 700);
      color: var(--lc-form-group-legend, var(--text-muted, #6b7280));
    }
  }

  .lc-form-group-body {
    display: flex;
    flex-direction: column;
    gap: var(--lc-form-field-gap, 0.5rem);
    min-inline-size: 0;
  }

  .lc-form-list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm, 0.5rem);
  }

  .lc-form-list-fields {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--lc-form-field-gap, 0.5rem);
    min-inline-size: 0;
  }

  .lc-form-list-actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.125rem;
  }

  .lc-form-list-add {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm, 0.5rem);
  }

  .lc-form-list-empty {
    margin: 0;
    color: var(--lc-form-hint-color, var(--text-muted, #6b7280));
    font-size: 0.75rem;
  }
}


:where(.lc-grid, lc-grid) {
  display: block;

  & [part~=lc-grid-container] {
    display: grid;
    gap: var(--lc-grid-gap, var(--spacing-md, 0.75rem));
    grid-template-columns: var(
      --lc-grid-cols,
      var(
        --lc-grid-columns,
        repeat(auto-fit, minmax(var(--lc-grid-min-column-width, 250px), 1fr))
      )
    );
    grid-template-rows: var(--lc-grid-rows, auto);
    align-items: var(--lc-grid-align, stretch);
    justify-items: var(--lc-grid-justify, start);
  }

  &[gap="none"] [part~=lc-grid-container] {
    gap: 0;
  }

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

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

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

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

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

  &[gap="2xl"] [part~=lc-grid-container] {
    gap: var(--spacing-2xl, 2rem);
  }

  &[gap="3xl"] [part~=lc-grid-container] {
    gap: var(--spacing-3xl, 3rem);
  }

  &[align="start"] [part~=lc-grid-container] {
    align-items: start;
  }

  &[align="center"] [part~=lc-grid-container] {
    align-items: center;
  }

  &[align="end"] [part~=lc-grid-container] {
    align-items: end;
  }

  &[align="stretch"] [part~=lc-grid-container] {
    align-items: stretch;
  }

  &[justify="start"] [part~=lc-grid-container] {
    justify-items: start;
  }

  &[justify="center"] [part~=lc-grid-container] {
    justify-items: center;
  }

  &[justify="end"] [part~=lc-grid-container] {
    justify-items: end;
  }

  &[justify="stretch"] [part~=lc-grid-container] {
    justify-items: stretch;
  }

  &[columns="1"] [part~=lc-grid-container] {
    grid-template-columns: repeat(1, 1fr);
  }

  &[columns="2"] [part~=lc-grid-container] {
    grid-template-columns: repeat(2, 1fr);
  }

  &[columns="3"] [part~=lc-grid-container] {
    grid-template-columns: repeat(3, 1fr);
  }

  &[columns="4"] [part~=lc-grid-container] {
    grid-template-columns: repeat(4, 1fr);
  }

  &[columns="5"] [part~=lc-grid-container] {
    grid-template-columns: repeat(5, 1fr);
  }

  &[columns="6"] [part~=lc-grid-container] {
    grid-template-columns: repeat(6, 1fr);
  }

  &[columns="auto-fill"] [part~=lc-grid-container] {
    grid-template-columns: repeat(
      auto-fill,
      minmax(var(--lc-grid-min-column-width, 250px), 1fr)
    );
  }
}


:where(.lc-hero-section, lc-hero-section) {
  display: block;

  .hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(
        ellipse 60% 45% at 20% 15%,
        rgba(255, 180, 120, 0.45),
        transparent 65%
      ),
      radial-gradient(
        ellipse 55% 45% at 80% 25%,
        rgba(160, 210, 255, 0.5),
        transparent 65%
      ),
      radial-gradient(
        ellipse 70% 40% at 50% 80%,
        rgba(255, 220, 180, 0.4),
        transparent 70%
      );
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-md);
    background: color-mix(in srgb, var(--color-surface) 60%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-surface);
    padding: 6px var(--spacing-lg) 6px 6px;
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-2xl);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background 0.2s ease;

    &:hover {
      background: color-mix(in srgb, var(--color-surface) 80%, transparent);
    }
  }

  .hero-eyebrow-badge {
    background: var(--color-primary);
    color: var(--color-surface);
    font-size: var(--text-eyebrow);
    font-weight: var(--font-bold);
    padding: 6px var(--spacing-md);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .hero-eyebrow-label {
    font-size: var(--text-caption);
    font-weight: var(--font-bold);
    color: var(--text-color);
  }

  .hero-eyebrow-meta {
    font-size: var(--text-caption);
    font-weight: var(--font-medium);
    color: var(--text-muted);
  }

  .hero-headline {
    font-size: var(--text-hero);
    line-height: 1.08;
    font-weight: var(--font-bold);
    letter-spacing: -0.025em;
    color: var(--color-primary);
    margin-bottom: 1.25rem;
  }

  .hero-subheadline {
    font-size: var(--text-subhead);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto var(--spacing-3xl);
    line-height: 1.65;
    font-weight: var(--font-medium);
  }

  .hero-cta {
    font-size: var(--text-body);
    font-weight: var(--font-semibold);
    padding: 14px var(--spacing-2xl);
    border-radius: var(--radius-full);
    transition: all 0.2s ease;

    &:hover {
      transform: translateY(-2px);
    }
  }

  .hero-cta-primary {
    background: var(--color-primary);
    color: var(--color-surface);
    box-shadow: var(--shadow-lg);

    &:hover {
      background: var(--color-secondary, var(--color-primary-dark));
    }
  }

  .hero-cta-secondary {
    background: color-mix(in srgb, var(--color-surface) 70%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    border: 1px solid color-mix(in srgb, var(--color-surface) 60%, transparent);

    &:hover {
      background: color-mix(in srgb, var(--color-surface) 90%, transparent);
    }
  }
}


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

  --lc-icon-mask: initial;
  --lc-icon-paint: transparent;
  -webkit-mask-image: var(--lc-icon-mask);
  mask-image: var(--lc-icon-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--lc-icon-paint);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;

  svg {
    display: none;
  }

  &[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"] {
    --lc-icon-size: calc(var(--spacing, 0.25rem) * 3);
  }

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

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

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

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

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

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

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


:where(.lc-icon-picker, lc-icon-picker) {
  position: fixed;
  z-index: 10000;
  display: none;

  &[data-open] {
    display: flex;
    flex-direction: column;
  }

  .picker-container {
    width: 320px;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    background: var(--color-surface-darker, #1a1a1a);
    border: 1px solid var(--border-color, #333);
    border-radius: var(--radius-md, 0.375rem);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    overflow: hidden;
  }

  .picker-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color, #333);
  }

  .picker-tab {
    flex: 1;
    padding: 8px;
    background: none;
    border: none;
    color: var(--text-muted, #888);
    font-size: 13px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;

    &:hover {
      background: var(--color-surface-dark, rgba(255, 255, 255, 0.05));
    }

    &.active {
      color: var(--text-color, #ddd);
      border-bottom: 2px solid var(--color-primary, #fabd2f);
      margin-bottom: -1px;
    }
  }

  .picker-search {
    padding: 8px;
    border-bottom: 1px solid var(--border-color, #333);

    input {
      width: 100%;
      padding: 6px 8px;
      background: var(--color-surface-dark, #111);
      border: 1px solid var(--border-color, #333);
      border-radius: var(--radius-sm, 0.25rem);
      color: var(--text-color, #ddd);
      font-size: 13px;
      outline: none;

      &:focus {
        border-color: var(--color-primary, #fabd2f);
      }

      &::placeholder {
        color: var(--text-muted, #666);
      }
    }
  }

  .picker-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid var(--border-color, #333);
  }

  .category-pill {
    padding: 2px 8px;
    background: var(--color-surface-dark, #222);
    border: 1px solid var(--border-color, #333);
    border-radius: 999px;
    color: var(--text-muted, #888);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;

    &:hover {
      background: var(--color-surface-light, #333);
      color: var(--text-color, #ddd);
    }

    &.active {
      background: var(--color-primary, #fabd2f);
      color: var(--color-surface-darker, #111);
      border-color: var(--color-primary, #fabd2f);
    }
  }

  .picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 8px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  .emoji-grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .picker-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 0.25rem);
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
    color: var(--text-color, #ddd);

    &:hover {
      background: var(--color-surface-light, #333);
      border-color: var(--border-color, #444);
    }

    &.selected {
      background: var(--color-primary, #fabd2f);
      color: var(--color-surface-darker, #111);
      border-color: var(--color-primary, #fabd2f);

      lc-icon {
        color: inherit;
      }
    }
  }

  .emoji-cell {
    font-size: 18px;
    line-height: 1;
  }

  .picker-empty {
    grid-column: 1 / -1;
    padding: 16px;
    text-align: center;
    color: var(--text-muted, #666);
    font-size: 13px;
  }
}


:where(.lc-image-crop, lc-image-crop) {
  display: block;

  .image-crop-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--lc-image-crop-radius, 1rem);
    background: var(--lc-image-crop-background, color-mix(in srgb, var(--text-color, #000) 6%, transparent));
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
    cursor: grab;
  }

  .image-crop-frame:active {
    cursor: grabbing;
  }

  .image-crop-frame:focus-visible {
    box-shadow: 0 0 0 var(--lc-image-crop-outline-width, 2px) var(--lc-image-crop-outline-color, var(--color-primary, currentColor));
  }

  .image-crop-frame:not([data-status="ready"]) {
    cursor: default;
  }

  .image-crop-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  .image-crop-mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: var(--lc-image-crop-ring-width, 2px) solid var(--lc-image-crop-ring, rgb(255 255 255 / 0.9));
    box-shadow: 0 0 0 100vmax var(--lc-image-crop-shade, rgb(0 0 0 / 0.45));
  }

  .image-crop-frame[data-shape="circle"] .image-crop-mask {
    border-radius: 9999px;
  }

  .image-crop-choose,
  .image-crop-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    color: var(--lc-image-crop-color, var(--text-color, inherit));
  }

  .image-crop-choose {
    appearance: none;
    margin: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
  }

  .image-crop-choose-label {
    font-weight: var(--lc-image-crop-label-weight, 700);
  }

  .image-crop-choose-sub,
  .image-crop-hint {
    font-size: var(--lc-image-crop-small-size, 0.8125rem);
    color: var(--lc-image-crop-muted, var(--text-muted, currentColor));
  }

  .image-crop-again {
    appearance: none;
    border: 0;
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    font: inherit;
    font-weight: 700;
    background: var(--lc-image-crop-button-background, var(--color-primary, currentColor));
    color: var(--lc-image-crop-button-color, #fff);
    cursor: pointer;
  }

  .image-crop-zoom {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: var(--lc-image-crop-gap, 0.875rem);
    color: var(--lc-image-crop-muted, var(--text-muted, currentColor));
  }

  .image-crop-zoom[hidden] {
    display: none;
  }

  .image-crop-slider {
    flex: 1 1 auto;
  }

  .image-crop-hint {
    margin: 0.5rem 0 0;
    text-align: center;
  }
}


:where(.lc-input, lc-input) {

  display: inline-block;
  width: var(--lc-input-width, auto);
  box-sizing: border-box;

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

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

  input {
    width: 100%;
    height: var(--lc-input-height, 2.5rem);
    padding: var(--lc-input-padding-y, 0.5rem) var(--lc-input-padding-x, 0.75rem);
    font-size: var(--lc-input-font-size, var(--text-sm, 0.9rem));
    font-weight: var(--lc-input-font-weight, var(--font-normal, 400));
    line-height: var(--lc-input-line-height, 1.5rem);
    font-family: inherit;
    color: var(--lc-input-color, var(--text-color, inherit));
    box-sizing: border-box;

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

    transition: var(
      --lc-input-transition,
      border-color 0.2s ease,
      background-color 0.2s ease,
      box-shadow 0.15s ease
    );

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

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

    &:focus {
      border-color: var(--lc-input-focus-border-color, var(--color-primary));
      background: var(--lc-input-focus-background, var(--lc-input-background));
      box-shadow: var(--lc-input-focus-shadow, var(--shadow-focus, 0 0 0 3px color-mix(in srgb, var(--color-focus, var(--color-primary)) 15%, transparent)));
    }

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

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

  @supports (-webkit-touch-callout: none) {
    input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"], [type="week"]) {
      -webkit-appearance: none;
      appearance: none;

      &::-webkit-date-and-time-value {
        text-align: start;
      }
    }
  }

  .input-affixed {
    position: relative;
    display: block;

    input {
      padding-left: calc(
        var(--lc-input-padding-x, 0.75rem) + var(--lc-input-prefix-chars, 1) * 1ch +
          var(--lc-input-prefix-gap, 0.25rem)
      );
    }
  }

  .input-prefix {
    position: absolute;
    left: var(--lc-input-padding-x, 0.75rem);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--lc-input-font-size, var(--text-sm, 0.9rem));
    font-weight: var(--lc-input-prefix-font-weight, var(--lc-input-font-weight, var(--font-normal, 400)));
    color: var(--lc-input-prefix-color, var(--text-muted, #9ca3af));
    pointer-events: none;
  }

  &[size="xs"] {
    --lc-input-height: 1.5rem;
    --lc-input-padding-y: 0.2rem;
    --lc-input-padding-x: 0.5rem;
    --lc-input-font-size: var(--text-xs, 0.75rem);
    --lc-input-line-height: 1rem;
    --lc-input-icon-size: 0.75rem;
  }

  &[size="sm"] {
    --lc-input-height: 2rem;
    --lc-input-padding-y: 0.3rem;
    --lc-input-padding-x: 0.6rem;
    --lc-input-font-size: var(--text-sm, 0.875rem);
    --lc-input-line-height: 1.25rem;
    --lc-input-icon-size: 0.875rem;
  }

  &[size="md"] {
    --lc-input-height: 2.5rem;
    --lc-input-padding-y: 0.5rem;
    --lc-input-padding-x: 0.75rem;
    --lc-input-font-size: var(--text-base, 1rem);
    --lc-input-line-height: 1.5rem;
    --lc-input-icon-size: 1rem;
  }

  &[size="lg"] {
    --lc-input-height: 3rem;
    --lc-input-padding-y: 0.625rem;
    --lc-input-padding-x: 1rem;
    --lc-input-font-size: var(--text-lg, 1.125rem);
    --lc-input-line-height: 1.75rem;
    --lc-input-icon-size: 1.25rem;
  }

  &[size="xl"] {
    --lc-input-height: 3.5rem;
    --lc-input-padding-y: 0.75rem;
    --lc-input-padding-x: 1.25rem;
    --lc-input-font-size: var(--text-xl, 1.25rem);
    --lc-input-line-height: 2rem;
    --lc-input-icon-size: 1.5rem;
  }

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

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

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

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

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

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

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

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

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

  &:has(.lc-icon) {
    position: relative;

    .lc-icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: var(--lc-input-icon-offset, 0.75rem);
      width: var(--lc-input-icon-size, 1rem);
      height: var(--lc-input-icon-size, 1rem);
      color: var(--lc-input-icon-color, var(--text-muted));
      pointer-events: none;
    }

    input {
      padding-right: calc(
        var(--lc-input-icon-size, 1rem) +
        var(--lc-input-icon-offset, 0.75rem) *
        2
      );
    }
  }

  &:has(.lc-icon[left]) {
    .lc-icon {
      left: var(--lc-input-icon-offset, 0.75rem);
      right: auto;
    }

    input {
      padding-left: calc(
        var(--lc-input-icon-size, 1rem) +
        var(--lc-input-icon-offset, 0.75rem) *
        2
      );
      padding-right: var(--lc-input-padding-x, 0.75rem);
    }
  }
}


:where(.lc-join, lc-join) {
  display: inline-flex;
  flex-direction: row;
  border: var(--lc-input-border-width, 1px) solid
    var(--lc-join-border-color, var(--lc-input-border-color, var(--border-color)));
  border-radius: var(--lc-join-border-radius, var(--radius-md, 0.375rem));
  background: var(--lc-join-background, transparent);
  box-shadow: var(--lc-join-shadow, none);
  -webkit-backdrop-filter: var(--lc-join-backdrop, none);
  backdrop-filter: var(--lc-join-backdrop, none);
  overflow: var(--lc-join-overflow, hidden);

  /* Remove borders from all children */
  > * {
    border: none;
    border-radius: 0;
    margin: 0;
    flex: 0 0 auto;
  }

  /* Remove borders from inner form elements */
  input,
  select,
  textarea,
  button {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Separator line between children */
  > * + * {
    border-left: 1px solid
      var(--lc-join-divider-color, var(--lc-input-border-color, var(--border-color)));
  }

  /* Focus on entire container */
  &:focus-within {
    border-color: var(--lc-input-focus-border-color, var(--color-primary));
  }

  /* Vertical orientation */
  &[orientation="vertical"] {
    flex-direction: column;

    > * {
      width: 100%;
    }

    > * + * {
      border-left: none;
      border-top: 1px solid
        var(--lc-join-divider-color, var(--lc-input-border-color, var(--border-color)));
    }
  }
}


:where(.lc-kanban, lc-kanban) {
  display: flex;
  gap: 1rem;
  width: 100%;
  height: 100%;
  overflow-x: auto;

  .lc-kanban-column {
    display: flex;
    flex-direction: column;
    min-width: 17.5rem;
    flex: 1 1 17.5rem;
    background: var(--color-surface-dark, color-mix(in srgb, currentColor 4%, transparent));
    border-radius: 0.5rem;
    overflow: hidden;
  }

  .lc-kanban-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--color-border-dim, color-mix(in srgb, currentColor 8%, transparent));
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted, color-mix(in srgb, currentColor 60%, transparent));
  }

  .lc-kanban-header > lc-icon {
    color: var(--column-accent, currentColor);
  }

  .lc-kanban-count {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 0.0625rem 0.4rem;
    border-radius: 0.5rem;
    background: var(--color-surface, color-mix(in srgb, currentColor 8%, transparent));
    color: var(--text-color, currentColor);
    text-transform: none;
    letter-spacing: normal;
  }

  .lc-kanban-actions {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    opacity: 0;
    transition: opacity 120ms;
  }

  .lc-kanban-header:hover .lc-kanban-actions {
    opacity: 1;
  }

  .lc-kanban-body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.5rem;
    flex: 1;
    overflow-y: auto;
    min-height: 4rem;
  }

  .lc-kanban-body lc-draggable,
  .lc-kanban-body .lc-kanban-card-wrapper {
    display: block;
    cursor: grab;
    position: relative;
  }

  .lc-kanban-body lc-draggable.dragging {
    opacity: 0.4;
    cursor: grabbing;
  }

  .lc-kanban-card-wrapper.drop-above::before,
  .lc-kanban-card-wrapper.drop-below::after {
    content: "";
    position: absolute;
    left: 0.25rem;
    right: 0.25rem;
    height: 2px;
    background: var(--color-primary, #f59e0b);
    border-radius: 2px;
    z-index: 10;
    pointer-events: none;
  }

  .lc-kanban-card-wrapper.drop-above::before {
    top: -3px;
  }

  .lc-kanban-card-wrapper.drop-below::after {
    bottom: -3px;
  }

  .lc-kanban-card-wrapper.drop-on > * {
    outline: 2px solid var(--color-focus, var(--color-primary, #f59e0b));
    outline-offset: -1px;
    background: color-mix(in srgb, var(--color-primary, #f59e0b) 8%, transparent);
    border-radius: inherit;
  }

  .lc-kanban-footer {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--color-border-dim, color-mix(in srgb, currentColor 8%, transparent));
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-muted, color-mix(in srgb, currentColor 60%, transparent));
  }

  .lc-kanban-footer > lc-icon {
    opacity: 0.4;
    flex-shrink: 0;
  }

  .lc-kanban-footer input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.8rem;
    color: var(--text-color, currentColor);
    padding: 0.125rem 0;
    min-width: 0;
  }

  .lc-kanban-footer input::placeholder {
    color: var(--text-muted, color-mix(in srgb, currentColor 50%, transparent));
    opacity: 1;
  }

  .lc-kanban-card {
    display: block;
    padding: 0.5rem 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
    background: var(--color-surface, color-mix(in srgb, currentColor 6%, transparent));
    border-radius: 0.375rem;
  }
}


:where(.lc-kbd, lc-kbd) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 var(--lc-kbd-padding-x, 0.375rem);
  border: var(--lc-kbd-border-width, 1px) solid var(--lc-kbd-border-color, var(--border-color));
  border-radius: var(--lc-kbd-border-radius, var(--radius-selector, var(--radius-sm, 0.25rem)));
  background: var(--lc-kbd-background, var(--color-surface-light));
  color: var(--lc-kbd-color, var(--text-muted));
  box-shadow: var(--lc-kbd-shadow, var(--shadow-field, none));
  font-family: var(--lc-kbd-font-family, var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace));
  font-size: var(--lc-kbd-font-size, 0.6875rem);
  font-weight: var(--lc-kbd-font-weight, 600);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;

  & + & {
    margin-left: 0.125rem;
  }

  &[size="xs"] {
    min-width: 1.125rem;
    height: 1.125rem;
    font-size: 0.625rem;
  }

  &[size="md"] {
    min-width: 1.75rem;
    height: 1.75rem;
    font-size: 0.8125rem;
  }
}


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

  .label {
    display: block;
    font-size: var(--lc-label-font-size, var(--text-sm, 0.875rem));
    font-weight: var(--lc-label-font-weight, var(--control-weight, var(--font-semibold, 600)));
    margin-bottom: var(--lc-label-margin, 0.5rem);
    color: var(--lc-label-color, var(--text-color, #1a1a1a));
    letter-spacing: var(--lc-label-letter-spacing, var(--control-tracking, 0));
    text-transform: var(--lc-label-text-transform, var(--control-transform, none));
    line-height: var(--lc-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"] {
    --lc-label-font-size: var(--text-xs, 0.75rem);
  }

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

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

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

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


:where(.lc-line-chart, lc-line-chart) {
	display: block;
	width: 100%;

	& .line-chart {
		width: 100%;
	}

	& .line-chart-svg {
		width: 100%;
		height: 100%;
		display: block;
	}

	& .line-chart-empty {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100px;
		color: var(--text-muted);
		font-size: 0.875rem;
	}

	& .line-path {
		stroke: var(--lc-line-chart-color, var(--color-primary));
		vector-effect: non-scaling-stroke;
	}

	& .line-area-top {
		stop-color: var(--lc-line-chart-color, var(--color-primary));
		stop-opacity: var(--lc-line-chart-area-opacity-top, 0.28);
	}

	& .line-area-bottom {
		stop-color: var(--lc-line-chart-color, var(--color-primary));
		stop-opacity: 0;
	}

	& .line-reference {
		stroke: var(--lc-line-chart-reference-color, var(--text-muted));
		stroke-width: 1;
		vector-effect: non-scaling-stroke;
	}

	& .line-dot {
		fill: var(--lc-line-chart-color, var(--color-primary));
		stroke: var(--color-surface);
		stroke-width: 2;
		vector-effect: non-scaling-stroke;
	}

	& .line-label {
		fill: var(--text-muted);
		font-size: 8px;
	}

	& .line-chart-primary {
		--lc-line-chart-color: var(--color-primary);
	}

	& .line-chart-secondary {
		--lc-line-chart-color: var(--color-secondary);
	}

	& .line-chart-success {
		--lc-line-chart-color: var(--color-success);
	}

	& .line-chart-warning {
		--lc-line-chart-color: var(--color-warning);
	}

	& .line-chart-error {
		--lc-line-chart-color: var(--color-danger);
	}

	& .line-chart-info {
		--lc-line-chart-color: var(--color-info, #83a598);
	}
}


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

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

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

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

  &[vertical] [part~=lc-link-anchor] {
    display: flex;
    flex-direction: column;
  }

  & [part~=lc-link-anchor] {
    appearance: none;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: var(--lc-link-justify-content, left);
    width: 100%;
    height: 100%;
    gap: var(--lc-link-gap, var(--spacing-xs, 0.25rem));
    flex-direction: var(--lc-link-direction, row);

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

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

    color: inherit;
    cursor: pointer;

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

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

    &:active {
      color: var(--lc-link-active-color, var(--lc-link-color));
      transform: var(--lc-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(--lc-link-visited-color, var(--lc-link-color));
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


:where(.lc-button, lc-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--lc-button-width, fit-content);
  height: var(--lc-button-height, 2.5rem);
  white-space: nowrap;
  box-sizing: border-box;
  & [part~=lc-link-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(--lc-button-padding-x, 1rem);
  }

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

  border-radius: var(--lc-button-border-radius, var(--radius-field, var(--radius-md, 0.375rem)));
  box-shadow: var(--lc-button-shadow, var(--shadow-field, none));
  text-decoration: none;
  cursor: pointer;
  text-transform: var(--lc-button-text-transform, var(--control-transform, none));
  letter-spacing: var(--lc-button-letter-spacing, var(--control-tracking, normal));
  transition: var(
    --lc-button-transition,
    translate 0.1s ease-in-out,
    scale 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(--lc-button-backdrop, none);
  -webkit-backdrop-filter: var(--lc-button-backdrop, none);
  background-color: var(--lc-button-background, var(--color-surface-lighter, #e9e6dd));
  color: var(--lc-button-color, var(--lc-button-text-color, var(--text-color, #131711)));

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

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

  &:not([disabled]):not([aria-disabled="true"]):hover {
    background-color: var(
      --lc-button-hover-background,
      var(--color-primary-dark)
    );
    border-color: var(
      --lc-button-hover-border-color,
      var(--lc-button-border-color, transparent)
    );
    color: var(--lc-button-hover-color, var(--lc-button-color));
    box-shadow: var(
      --lc-button-hover-shadow,
      var(--lc-button-shadow, var(--shadow-field, none))
    );
    translate: var(--lc-button-hover-translate, var(--motion-lift, 0 0));
  }

  &:not([disabled]):not([aria-disabled="true"]):active {
    background-color: var(
      --lc-button-active-background,
      var(--color-primary-darker)
    );
    box-shadow: var(
      --lc-button-active-shadow,
      var(--lc-button-shadow, var(--shadow-field, none))
    );
    translate: var(--lc-button-active-translate, var(--motion-press, 0 0));
    scale: 0.97;
  }

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

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

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

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

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

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

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

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

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

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

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

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

  &[border] {
    --lc-button-background: var(--color-surface);
    --lc-button-color: var(--text-color);
    --lc-button-border-color: var(--border-color, #404040);
    --lc-button-hover-background: var(--color-surface-light);
    --lc-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(--lc-button-ghost-color, var(--text-color));
    --lc-button-background: transparent;
    --lc-button-border-color: transparent;
    --lc-button-shadow: none;
    --lc-button-hover-shadow: none;
    --lc-button-active-shadow: none;
    --lc-button-hover-translate: 0 0;
    --lc-button-active-translate: 0 0;
    --lc-button-hover-background: var(--lc-button-ghost-hover-background, var(--color-surface-dark));
    --lc-button-hover-color: var(--lc-button-ghost-hover-color, var(--lc-button-ghost-color, var(--text-color)));

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

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

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

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

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

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

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

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

  /* Glass is declared after selected, so an on/off glass control needs both to win. */
  &[glass][selected] {
    --lc-button-background: var(--lc-button-selected-background, var(--color-primary));
    --lc-button-color: var(--lc-button-selected-color, var(--lc-button-primary-color, #fff));
    --lc-button-border-color: var(--lc-button-selected-border-color, var(--color-primary));
    --lc-button-hover-background: var(--lc-button-selected-hover-background, var(--color-primary-dark));
  }

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

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

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

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

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

  &[size="xl"] {
    --lc-button-height: 3.5rem;
    --lc-button-padding-x: 2rem;
    --lc-button-font-size: var(--lc-button-xl-font-size, 1.25rem);
    --lc-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. */
  &[icon-only] {
    width: var(--lc-button-height, 2.5rem);
    aspect-ratio: 1;
  }
}

.lc-button [part~=lc-link-anchor],
lc-button [part~=lc-link-anchor] {
  padding: 0 var(--lc-button-padding-x, 1rem);
  width: 100%;
  box-sizing: border-box;
}

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

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


:where(.lc-link-preview, lc-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(--lc-link-preview-thumb-width, 8rem);
    min-height: var(--lc-link-preview-thumb-height, 5.5rem);
    object-fit: cover;
    background: var(--lc-link-preview-thumb-background, var(--color-surface-light));
  }

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

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

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

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

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


/*
 * The spacing lands on the host. This used to style a rendered `<ul>` wrapping
 * a `<slot>`, which projects nothing in light DOM; the items sat outside it
 * and the gap applied to an empty element.
 */
:where(.lc-list, lc-list) {
  display: flex;
  flex-direction: column;
  gap: var(--lc-list-spacing, var(--spacing-sm, 0.5rem));
  background: var(--lc-list-background, transparent);
  color: var(--lc-list-color, inherit);
  padding: 0;
  margin: 0;

  &[spacing="none"] { --lc-list-spacing: 0; }
  &[spacing="xs"] { --lc-list-spacing: var(--spacing-xs, 0.25rem); }
  &[spacing="sm"] { --lc-list-spacing: var(--spacing-sm, 0.5rem); }
  &[spacing="md"] { --lc-list-spacing: var(--spacing-md, 0.75rem); }
  &[spacing="lg"] { --lc-list-spacing: var(--spacing-lg, 1rem); }
  &[spacing="xl"] { --lc-list-spacing: var(--spacing-xl, 1.5rem); }
}


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

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

  & [part~=lc-list-row-row]:hover {
    background: var(--lc-list-row-hover-background, var(--color-hover, var(--color-surface-light)));
  }

  & [part~=lc-list-row-row]:focus-visible {
    outline: 2px solid var(--color-focus, var(--color-primary));
    outline-offset: 2px;
  }

  & [part~=lc-list-row-badge] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--lc-list-row-badge-size, 2.5rem);
    height: var(--lc-list-row-badge-size, 2.5rem);
    border-radius: var(--lc-list-row-badge-border-radius, 999px);
    background: var(--lc-list-row-badge-background, var(--color-surface-lighter));
    color: var(--lc-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~=lc-list-row-text] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
  }

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

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

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

  & [part~=lc-list-row-chevron] {
    flex-shrink: 0;
    color: var(--lc-list-row-chevron-color, var(--text-muted));
  }

  /*
   * Set through the badge's own variable rather than as a background here: an
   * explicit `--lc-badge-background` wins over its variant fallback, which a
   * competing background declaration of equal weight would not reliably do.
   */
  & [part~=lc-list-row-dot] {
    flex-shrink: 0;
    --lc-badge-background: var(--lc-list-row-unread-color, var(--color-primary));
  }

  &[wrap] [part~=lc-list-row-row] {
    align-items: flex-start;
  }

  &[wrap] [part~=lc-list-row-label],
  &[wrap] [part~=lc-list-row-hint] {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  &[wrap] [part~=lc-list-row-meta] {
    margin-top: 0.25rem;
  }

  &[unread] [part~=lc-list-row-label] {
    font-weight: var(--lc-list-row-unread-font-weight, 700);
  }

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

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

  &[flat] [part~=lc-list-row-row] {
    background: transparent;
    border-color: transparent;
  }

  &[selected] [part~=lc-list-row-row],
  &[selected] [part~=lc-list-row-row]:hover {
    background: var(--lc-list-row-selected-background, var(--color-primary-surface, color-mix(in srgb, var(--color-primary, #101210) 8%, transparent)));
    border-color: var(--lc-list-row-selected-border-color, var(--lc-list-row-border-color, transparent));
  }

  &[static] [part~=lc-list-row-row],
  &[static] [part~=lc-list-row-row]:hover {
    background: var(--lc-list-row-background, var(--color-surface));
    cursor: default;
  }

  &[static][selected] [part~=lc-list-row-row] {
    background: var(--lc-list-row-selected-background, var(--color-primary-surface, color-mix(in srgb, var(--color-primary, #101210) 8%, transparent)));
  }

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


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

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

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

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

  .anchor {
    margin-left: 0.35em;
    color: var(--lc-markdown-anchor-color, var(--text-muted));
    text-decoration: none;
    opacity: 0;
    font-weight: var(--font-normal, 400);
  }

  h1:hover .anchor,
  h2:hover .anchor,
  h3:hover .anchor,
  h4:hover .anchor,
  h5:hover .anchor,
  h6:hover .anchor,
  .anchor:focus-visible {
    opacity: 1;
  }

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

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

  h3 {
    font-size: var(--lc-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(--lc-markdown-block-space, 1em);
  }

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

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

  ul,
  ol {
    margin: 0 0 var(--lc-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(--lc-markdown-block-space, 1em);
    padding: 0.25em 1em;
    border-left: var(--lc-markdown-blockquote-border-width, 3px) solid
      var(--lc-markdown-blockquote-border-color, var(--color-primary));
    color: var(--lc-markdown-blockquote-color, var(--text-muted));

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

  code {
    background-color: var(--lc-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(--lc-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(.lc-media-card, lc-media-card) {
  display: flex;
  flex-direction: column;
  min-width: 0;

  & [part~=lc-media-card-media] {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: var(--lc-media-card-border-radius, var(--radius-box, 0.75rem));
    box-shadow: var(--lc-media-card-shadow, var(--shadow-box, none));
    background: var(--lc-media-card-background, var(--color-surface-dark, #e8eae6));
  }

  & [part~=lc-media-card-image] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  & [part~=lc-media-card-scrim] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--lc-media-card-scrim, linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 55%));
  }

  & [part~=lc-media-card-top] {
    position: absolute;
    top: var(--lc-media-card-inset, 0.75rem);
    left: var(--lc-media-card-inset, 0.75rem);
    display: flex;
    gap: 0.375rem;
  }

  & [part~=lc-media-card-bottom] {
    position: absolute;
    left: var(--lc-media-card-inset, 0.75rem);
    right: var(--lc-media-card-inset, 0.75rem);
    bottom: var(--lc-media-card-inset, 0.75rem);
    color: var(--lc-media-card-bottom-color, #ffffff);
  }

  & [part~=lc-media-card-body] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-top: var(--lc-media-card-gap, 0.625rem);
    color: var(--lc-media-card-color, var(--text-color, #101210));
  }

  & [part~=lc-media-card-body][hidden] {
    display: none;
  }
}


:where(.lc-menu, lc-menu) {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  box-shadow: var(
    --lc-menu-shadow,
    var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.1))
  );

  &[size="sm"] {
    --lc-menu-item-font-size: var(--text-sm, 0.875rem);
    --lc-menu-item-padding: 0.375rem 0.75rem;
    --lc-menu-item-gap: 0.5rem;
  }

  &[size="md"] {
    --lc-menu-item-font-size: var(--text-sm, 0.875rem);
    --lc-menu-item-padding: 0.5rem 0.75rem;
    --lc-menu-item-gap: 0.75rem;
  }

  &[size="lg"] {
    --lc-menu-item-font-size: var(--text-base, 1rem);
    --lc-menu-item-padding: 0.625rem 1rem;
    --lc-menu-item-gap: 1rem;
  }

  > li[role="menuitem"] {
    list-style: none;
    margin: 0;
    padding: 0;

    > a,
    > button {
      display: flex;
      width: 100%;
      padding: var(--lc-menu-item-padding, 0.5rem 0.75rem);
      font-size: var(--lc-menu-item-font-size, var(--text-sm, 0.875rem));
      color: var(--dropdown-color, var(--text-color, default));
      text-decoration: none;
      background-color: transparent;
      border: none;
      cursor: pointer;
      transition:
        background-color 0.15s ease,
        color 0.15s ease;
      text-align: left;
      white-space: nowrap;

      &:hover {
        background-color: var(--color-primary, #fabd2f);
        color: var(--color-inverse, #282828);
      }

      &:active {
        background-color: var(--color-primary, #fabd2f);
        color: var(--color-inverse, #282828);
      }

      &[aria-current],
      &[active],
      &.active {
        background-color: var(--lc-menu-active-background, color-mix(in srgb, var(--color-primary) 12%, transparent));
        color: var(--lc-menu-active-color, var(--color-primary));
        font-weight: var(--font-semibold, 600);
      }
    }
  }

  > li[role="separator"] {
    height: 1px;
    background-color: var(--panel-border, var(--dropdown-separator, #504945));
    margin: 0.25rem 0;
    padding: 0;
  }


  &[variant="compact"] {
    --lc-menu-item-padding: 0.375rem 0.5rem;
  }



  &[variant="sidebar"] {
    box-shadow: none;
    background: transparent;
    padding: var(--lc-sidebar-nav-padding, 0);
    gap: var(--lc-sidebar-nav-gap, 0.25rem);

    > li {
      list-style: none;
      margin: 0;
      padding: 0;

      > a,
      > lc-link,
      > button {
        display: flex;
        align-items: center;
        gap: var(--lc-sidebar-item-gap, 0.75rem);
        width: 100%;
        padding: var(--lc-sidebar-item-padding, 0.75rem 1rem);
        border-radius: var(
          --lc-sidebar-item-border-radius,
          var(--radius-md, 0.5rem)
        );
        color: var(--lc-sidebar-item-color, var(--text-muted));
        font-weight: var(--lc-sidebar-item-font-weight, 500);
        font-size: var(--lc-menu-item-font-size, inherit);
        text-decoration: none;
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
        transition:
          background-color 0.2s ease,
          color 0.2s ease;

        &:hover {
          background-color: var(
            --lc-sidebar-item-hover-background,
            var(--color-surface-dark)
          );
          color: var(--lc-sidebar-item-hover-color, var(--text-color));
        }

        &.active,
        &[aria-current="page"] {
          background-color: var(
            --lc-sidebar-item-active-background,
            var(--color-surface-darker)
          );
          color: var(--lc-sidebar-item-active-color, var(--text-color));
          font-weight: var(--lc-sidebar-item-active-font-weight, 600);
        }
      }
    }

    > li.divider,
    > li[role="separator"] {
      height: 0;
      padding-top: var(--lc-sidebar-section-padding, 1rem);
      margin-top: var(--lc-sidebar-section-margin, 0.5rem);
      border-top: var(--border-width, 1px) solid
        var(--lc-sidebar-border-color, var(--color-surface-dark));
      background: none;
    }

    details {
      summary {
        display: flex;
        align-items: center;
        gap: var(--lc-sidebar-item-gap, 0.75rem);
        padding: var(--lc-sidebar-item-padding, 0.75rem 1rem);
        border-radius: var(
          --lc-sidebar-item-border-radius,
          var(--radius-md, 0.5rem)
        );
        color: var(--lc-sidebar-item-color, var(--text-muted));
        font-weight: var(--lc-sidebar-item-font-weight, 500);
        cursor: pointer;
        list-style: none;
        transition:
          background-color 0.2s ease,
          color 0.2s ease;

        &::-webkit-details-marker {
          display: none;
        }

        &:hover {
          background-color: var(
            --lc-sidebar-item-hover-background,
            var(--color-surface-dark)
          );
          color: var(--lc-sidebar-item-hover-color, var(--text-color));
        }

        .badge {
          display: inline-flex;
          align-items: center;
          padding: 0.1rem 0.4rem;
          font-size: 0.65rem;
          font-weight: 600;
          color: var(--text-muted);
          background: var(--color-surface-darker);
          border-radius: var(--radius-md, 0.375rem);
        }

        lc-icon:last-child {
          flex-shrink: 0;
          transition: transform 0.2s ease;
        }
      }

      &[open] summary lc-icon:last-child {
        transform: rotate(90deg);
      }

      > ul {
        list-style: none;
        margin: 0;
        padding: 0;
        padding-inline: var(--lc-sidebar-item-padding, 0.25rem);
        display: flex;
        flex-direction: column;
        gap: 0;

        > li {
          > a,
          > lc-link {
            display: flex;
            align-items: center;
            gap: var(--lc-sidebar-item-gap, 0.75rem);
            padding: var(--lc-sidebar-nested-item-padding, 0.375rem 1rem);
            border-radius: var(
              --lc-sidebar-item-border-radius,
              var(--radius-md, 0.5rem)
            );
            color: var(--lc-sidebar-item-color, var(--text-muted));
            font-size: var(--lc-sidebar-nested-item-font-size, 0.875rem);
            text-decoration: none;
            cursor: pointer;
            transition:
              background-color 0.2s ease,
              color 0.2s ease;

            &:hover {
              background-color: var(
                --lc-sidebar-item-hover-background,
                var(--color-surface-dark)
              );
              color: var(--lc-sidebar-item-hover-color, var(--text-color));
            }

            &.active,
            &[aria-current="page"] {
              background-color: var(
                --lc-sidebar-item-active-background,
                var(--color-surface-dark)
              );
              color: var(--lc-sidebar-item-active-color, var(--text-color));
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}


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

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

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

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

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

    & [part~=lc-modal-body] {
      max-height: none;
      flex: 1;
      overflow-y: auto;
    }
  }

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

    &:empty {
      display: none;
    }
  }

  & [part~=lc-modal-close-button] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--lc-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(--lc-modal-close-hover-background-color, var(--color-surface-light, #f3f4f6));
      color: var(--lc-modal-close-hover-color, var(--text-color));
    }
  }

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

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

    &:empty {
      display: none;
    }
  }

  & [part~=lc-modal-caption] {
    padding: var(--lc-modal-caption-padding, 1rem 1.5rem);
    text-align: center;
    font-size: var(--lc-modal-caption-size, var(--text-xs, 0.75rem));
    font-weight: var(--lc-modal-caption-font-weight, 600);
    color: var(--lc-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~=lc-modal-dialog]:modal {
      display: flex;
      flex-direction: column;
    }

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

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

    & [part~=lc-modal-header] {
      padding: var(--lc-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~=lc-modal-close-button] {
      margin-left: auto;
      width: var(--lc-modal-media-button-size, 2.5rem);
      height: var(--lc-modal-media-button-size, 2.5rem);
      border-radius: 999px;
      background: var(--lc-modal-media-button-background, rgba(255, 255, 255, 0.15));
      color: inherit;

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

    & [part~=lc-modal-body] {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      min-height: 0;
      max-height: none;
      padding: 1rem;
      color: inherit;
    }

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

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

  /* A sheet over whatever is open: no rules between its parts, and on a phone it rises from the bottom edge sized to its content. */
  &[variant="sheet"] {
    & [part~=lc-modal-header] {
      padding: var(--lc-modal-sheet-header-padding, 1rem 1rem 0.25rem);
      border-bottom: none;
      gap: 0.75rem;
    }

    & [part~=lc-modal-close-button] {
      width: var(--lc-modal-sheet-button-size, 2.25rem);
      height: var(--lc-modal-sheet-button-size, 2.25rem);
      border-radius: 999px;
      background: var(--lc-modal-sheet-button-background, var(--color-surface-light, #f3f4f6));
    }

    & [part~=lc-modal-body] {
      padding: var(--lc-modal-sheet-body-padding, 0.5rem 1rem 1.25rem);
      max-height: none;
    }

    @media (max-width: 639px) {
      & [part~=lc-modal-dialog] {
        margin: auto 0 0;
        height: fit-content;
        max-height: calc(100dvh - 2rem);
        border-radius: var(--lc-modal-sheet-radius, 1.5rem 1.5rem 0 0);
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }

      & [part~=lc-modal-body] {
        flex: none;
      }
    }
  }

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

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


:where(.lc-month-picker, lc-month-picker) {
  display: block;

  .month-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: var(--lc-month-picker-head-gap, 0.5rem);
  }

  .month-picker-title {
    flex: 1 1 auto;
    text-align: center;
    font-size: var(--lc-month-picker-title-font-size, 0.875rem);
    font-weight: var(--lc-month-picker-title-font-weight, 800);
    color: var(--lc-month-picker-title-color, var(--text-color, inherit));
    text-transform: capitalize;
  }

  .month-picker-nav {
    appearance: none;
    margin: 0;
    border: 0;
    width: var(--lc-month-picker-nav-size, 2rem);
    height: var(--lc-month-picker-nav-size, 2rem);
    border-radius: 9999px;
    background: var(--lc-month-picker-nav-background, transparent);
    color: var(--lc-month-picker-nav-color, var(--text-color, inherit));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .month-picker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-bottom: 0.125rem;
  }

  .month-picker-weekdays > span {
    text-align: center;
    font-size: var(--lc-month-picker-weekday-font-size, 0.625rem);
    font-weight: var(--lc-month-picker-weekday-font-weight, 700);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lc-month-picker-weekday-color, var(--text-muted, inherit));
    line-height: 1.5rem;
  }

  .month-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    row-gap: var(--lc-month-picker-row-gap, 0.125rem);
  }

  .month-picker-day {
    position: relative;
    appearance: none;
    margin: 0;
    border: 0;
    padding: 0;
    height: var(--lc-month-picker-day-height, 2.375rem);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.0625rem;
    background: transparent;
    color: var(--lc-month-picker-color, var(--text-color, inherit));
    font: inherit;
    font-size: var(--lc-month-picker-font-size, 0.8125rem);
    font-weight: var(--lc-month-picker-font-weight, 600);
    line-height: 1;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .month-picker-day.is-outside {
    color: var(--lc-month-picker-outside-color, var(--text-muted, inherit));
    opacity: var(--lc-month-picker-outside-opacity, 0.45);
  }

  .month-picker-dot {
    width: var(--lc-month-picker-dot-size, 4px);
    height: var(--lc-month-picker-dot-size, 4px);
    border-radius: 50%;
    background: var(--lc-month-picker-dot-color, var(--color-primary, currentColor));
    opacity: 0;
  }

  .has-dot .month-picker-dot {
    opacity: 1;
  }

  .month-picker-day.is-today {
    box-shadow: inset 0 0 0 2px var(--lc-month-picker-today-color, var(--color-primary, currentColor));
    border-radius: var(--lc-month-picker-day-border-radius, 0.75rem);
  }

  .month-picker-day.is-inside {
    background: var(--lc-month-picker-range-background, var(--color-primary-light, rgba(127, 127, 127, 0.2)));
    color: var(--lc-month-picker-range-color, var(--text-color, inherit));
    opacity: 1;
  }

  .month-picker-day.is-edge {
    background: var(--lc-month-picker-selected-background, var(--color-primary));
    color: var(--lc-month-picker-selected-color, var(--color-on-primary, #ffffff));
    border-radius: var(--lc-month-picker-day-border-radius, 0.75rem);
    font-weight: var(--lc-month-picker-selected-font-weight, 800);
    box-shadow: none;
    opacity: 1;
  }

  .month-picker-day.is-edge .month-picker-dot {
    background: currentColor;
  }

  .month-picker-day:hover:not(.is-edge):not(:disabled) {
    background: var(--lc-month-picker-hover-background, var(--color-surface-lighter, rgba(127, 127, 127, 0.12)));
    border-radius: var(--lc-month-picker-day-border-radius, 0.75rem);
  }

  .month-picker-day:focus-visible {
    outline: 2px solid var(--lc-month-picker-selected-background, var(--color-primary));
    outline-offset: -2px;
    border-radius: var(--lc-month-picker-day-border-radius, 0.75rem);
  }

  .month-picker-day:disabled {
    cursor: not-allowed;
    opacity: var(--lc-month-picker-disabled-opacity, 0.3);
  }

  .month-picker-grid[aria-disabled="true"] {
    opacity: 0.5;
  }
}


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

  all: unset;
  display: flex;
  align-items: center;
  gap: var(--lc-nav-item-gap, 0.75rem);
  font-size: var(--lc-nav-item-font-size, var(--text-sm, 0.875rem));
  line-height: var(--lc-nav-item-line-height, var(--leading-tight, 1.25rem));
  color: var(--lc-nav-item-color, var(--text-color, inherit));
  background-color: var(--lc-nav-item-background, transparent);
  border-radius: var(--lc-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%;
  }

  > .nav-item {
    min-width: 0;
  }

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

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

    button {
      cursor: pointer;
    }
  }

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

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

  &[active][activeBg],
  &[active][active-bg] {
    background-color: var(--lc-nav-item-active-background, #111);
    color: var(--lc-nav-item-active-color, #fff);
    font-weight: var(--lc-nav-item-active-font-weight, var(--font-semibold, 600));
    box-shadow: inset var(--lc-nav-item-active-bar-width, 0) 0 0 0 var(--lc-nav-item-active-bar-color, var(--color-primary, currentColor));
  }

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

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

  .lc-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(--lc-nav-item-padding-y, 0.5rem) var(--lc-nav-item-padding-x, 0.75rem);
  }

  .nav-item-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &:not([stacked]) .label > .nav-item-icon:has(> .nav-item-count) {
    margin-inline-end: var(--lc-nav-item-count-room, 0.375rem);
  }

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

  &[badge-variant="primary"] .badge {
    min-width: 1.25em;
    border-radius: 999px;
    color: var(--lc-nav-item-badge-color, var(--color-on-primary, var(--color-inverse, #fff)));
    background-color: var(--lc-nav-item-badge-background, var(--color-primary, #111));
  }

  &[badge-variant="muted"] .badge {
    color: var(--lc-nav-item-badge-color, var(--text-muted, #888));
    background-color: var(--lc-nav-item-badge-background, transparent);
  }

  &[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],
  &[icon-only] {
    justify-content: center;

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

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

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

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

    &[active]::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: var(--lc-nav-item-indicator-width, 2px);
      height: var(--lc-nav-item-indicator-length, 50%);
      background-color: var(--lc-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(--lc-nav-item-indicator-width, 2px);
      height: var(--lc-nav-item-indicator-length, 50%);
      background-color: var(--lc-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(--lc-nav-item-indicator-width, 2px);
      width: var(--lc-nav-item-indicator-length, 50%);
      background-color: var(--lc-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(--lc-nav-item-indicator-width, 2px);
      width: var(--lc-nav-item-indicator-length, 50%);
      background-color: var(--lc-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(--lc-nav-item-hover-color, var(--text-color, inherit));
  }

  &[stacked] {
  position: relative;
  justify-content: center;

  .label {
    flex: none;
    flex-direction: column;
    justify-content: center;
    gap: var(--lc-nav-item-stacked-gap, 0.2rem);
    padding: var(--lc-nav-item-stacked-padding-y, 0.45rem) var(--lc-nav-item-stacked-padding-x, 0.25rem);
    font-size: var(--lc-nav-item-stacked-font-size, 0.625rem);
    font-weight: var(--font-semibold, 600);
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-align: center;
    white-space: normal;
    width: 100%;
  }

  .badge {
    position: absolute;
    top: 0.25rem;
    right: 0.4rem;
    min-width: 1rem;
    padding: 0.1rem 0.3rem;
    border-radius: 999px;
    color: var(--lc-nav-item-badge-color, var(--color-primary-color, #fff));
    background-color: var(--lc-nav-item-badge-background, var(--color-primary));
  }
}

  .nav-item-icon:has(> .nav-item-dot, > .nav-item-count) {
    position: relative;
  }

  .nav-item-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: var(--lc-nav-item-dot-offset-x, 0.2rem) var(--lc-nav-item-dot-offset-y, -0.75rem);
    width: var(--lc-nav-item-dot-size, 0.5rem);
    height: var(--lc-nav-item-dot-size, 0.5rem);
    border-radius: 9999px;
    background: var(--lc-nav-item-dot-color, var(--color-primary, #e11d48));
    box-shadow: 0 0 0 var(--lc-nav-item-dot-ring-width, 2px) var(--lc-nav-item-dot-ring-color, var(--color-surface, #fff));
  }

  .nav-item-count {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: var(--lc-nav-item-count-offset-x, 0.2rem) var(--lc-nav-item-count-offset-y, -1.1rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--lc-nav-item-count-size, 1.125rem);
    height: var(--lc-nav-item-count-size, 1.125rem);
    padding: 0 0.25rem;
    border-radius: 9999px;
    font-size: var(--lc-nav-item-count-font-size, 0.625rem);
    font-weight: var(--lc-nav-item-count-font-weight, 800);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--lc-nav-item-count-color, var(--color-on-primary, #fff));
    background: var(--lc-nav-item-count-background, var(--color-primary, #e11d48));
    box-shadow: 0 0 0 var(--lc-nav-item-count-ring-width, 2px) var(--lc-nav-item-count-ring-color, var(--color-surface, #fff));
    pointer-events: none;
  }

  &[active][activeBg] .nav-item-count,
  &[active][active-bg] .nav-item-count {
    --lc-nav-item-count-ring-color: var(--lc-nav-item-active-background, #111);
  }
}


:where(.lc-nav-tree, lc-nav-tree) {
  display: block;
  font-size: var(--lc-nav-tree-font-size, var(--text-sm, 0.875rem));

  .nav-tree {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg, 1rem);
  }

  .nav-tree-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .nav-tree-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    width: 100%;
    height: 2rem;
    padding: 0 var(--spacing-md, 0.75rem);
    border: 0;
    border-radius: var(--lc-nav-tree-border-radius, var(--radius-field, var(--radius-sm, 0.25rem)));
    background: transparent;
    color: var(--lc-nav-tree-group-color, var(--text-muted));
    font: inherit;
    font-size: var(--text-eyebrow, 0.6875rem);
    font-weight: var(--font-bold, 700);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;

    &:hover {
      background: var(--lc-nav-tree-hover-background, var(--color-hover));
      color: var(--lc-nav-tree-color, var(--text-color));
    }
  }

  .nav-tree-group[data-open] .nav-tree-head {
    color: var(--lc-nav-tree-color, var(--text-color));
  }

  .nav-tree-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-tree-count {
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-semibold, 600);
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-disabled);
  }

  .nav-tree-chevron {
    color: var(--text-disabled);
    transition: transform 0.15s ease;
  }

  .nav-tree-group[data-open] .nav-tree-chevron {
    transform: rotate(90deg);
  }

  .nav-tree-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: var(--lc-nav-tree-indent, 1.5rem);
  }

  .nav-tree-item {
    --lc-nav-item-active-background: var(--lc-nav-tree-active-background, color-mix(in srgb, var(--color-primary) 12%, transparent));
    --lc-nav-item-active-color: var(--lc-nav-tree-active-color, var(--color-primary));
  }

  .nav-tree-more {
    display: inline-flex;
    align-items: center;
    height: 1.75rem;
    padding: 0 var(--spacing-md, 0.75rem);
    border: 0;
    border-radius: var(--lc-nav-tree-border-radius, var(--radius-field, var(--radius-sm, 0.25rem)));
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--text-caption, 0.8125rem);
    font-weight: var(--font-semibold, 600);
    text-align: left;
    cursor: pointer;

    &:hover {
      color: var(--text-color);
    }
  }
}


:where(.lc-navbar, lc-navbar) {
  display: flex;

  & [part~=lc-navbar-container] {
    display: flex;
    flex-grow: 1;
    background-color: var(--lc-navbar-background, var(--color-surface));
    border-bottom: 1px solid
      var(--lc-navbar-border-color, var(--color-primary));
    box-shadow: var(--lc-navbar-shadow, none);
  }

  & [part~=lc-navbar-inner] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-height: var(--lc-navbar-height, auto);
    padding: var(
      --lc-navbar-padding,
      var(--spacing-md, 0.75rem) var(--spacing-lg, 1rem)
    );
    max-width: var(--lc-navbar-max-width, 100%);
    margin: 0 auto;
    box-sizing: border-box;
  }

  & [part~=lc-navbar-brand] {
    display: flex;
    align-items: center;
    gap: var(--lc-navbar-brand-gap, 0.75rem);
    font-size: var(--lc-navbar-brand-font-size, var(--text-xl, 1.25rem));
    font-weight: var(--lc-navbar-brand-font-weight, var(--font-bold, 700));
    color: var(--lc-navbar-brand-color, var(--color-primary));
  }

  & [part~=lc-navbar-toggle] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--lc-navbar-toggle-color, var(--color-primary));
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease;

    &:hover {
      background-color: var(
        --lc-navbar-toggle-hover-background,
        var(--color-hover)
      );
    }
  }

  & [part~=lc-navbar-menu] {
    display: flex;
    align-items: center;
    flex: 1;
    width: 100%;
    gap: var(--lc-navbar-menu-gap, 2rem);
    flex-direction: var(--flex-direction);
  }

  & [part~=lc-navbar-start],
  & [part~=lc-navbar-center],
  & [part~=lc-navbar-end] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--lc-navbar-items-gap, 1.5rem);
  }

  & [part~=lc-navbar-center] {
    flex: 1;
  }

  &[fixed="top"] [part~=lc-navbar-container] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }

  &[fixed="bottom"] [part~=lc-navbar-container] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }

  &[variant="bordered"] [part~=lc-navbar-container] {
    border-bottom-width: 2px;
  }

  &[variant="floating"] [part~=lc-navbar-container] {
    margin: var(--spacing-md, 0.75rem);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  &[transparent] [part~=lc-navbar-container] {
    background-color: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
  }

  &[direction="horizontal"] [part~=lc-navbar-start] {
    margin-left: var(--lc-navbar-start-margin, 2rem);
  }

  &[direction="vertical"] [part~=lc-navbar-inner] {
    flex-direction: column;
  }

  /* Collapsible vertical navbar */
  &[direction="vertical"][collapsible] {
    width: var(--lc-navbar-width, auto);
    transition: width 0.15s ease;
    overflow: hidden;
  }

  &[direction="vertical"][collapsed] {
    width: var(--lc-navbar-collapsed-width, 48px);
  }

  &[direction="vertical"][collapsed] [part~=lc-navbar-inner] {
    align-items: center;
    padding: var(--lc-navbar-collapsed-padding, 0);
  }

  &[direction="vertical"][collapsed] [part~=lc-navbar-menu] {
    align-items: center;
  }

  &[direction="vertical"][collapsed] [part~=lc-navbar-start],
  &[direction="vertical"][collapsed] [part~=lc-navbar-center],
  &[direction="vertical"][collapsed] [part~=lc-navbar-end] {
    align-items: center;
  }

  &[direction="vertical"]:not([collapsed]) [part~=lc-navbar-menu],
  &[direction="vertical"]:not([collapsed]) [part~=lc-navbar-start],
  &[direction="vertical"]:not([collapsed]) [part~=lc-navbar-center],
  &[direction="vertical"]:not([collapsed]) [part~=lc-navbar-end] {
    align-items: stretch;
  }

  @media (max-width: 768px) {
    & [part~=lc-navbar-toggle] {
      display: flex;
    }

    & [part~=lc-navbar-menu] {
      position: fixed;
      top: calc(var(--lc-navbar-height, 4rem));
      left: 0;
      right: 0;
      flex-direction: var(--flex-direction);
      align-items: stretch;
      background-color: var(--lc-navbar-background, var(--color-surface));
      border-top: 1px solid var(--lc-navbar-border-color, var(--color-primary));
      padding: var(--spacing-md, 0.75rem);
      gap: 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;

      &.active {
        max-height: calc(100vh - var(--lc-navbar-height, 4rem));
      }
    }

    & [part~=lc-navbar-start],
    & [part~=lc-navbar-center],
    & [part~=lc-navbar-end] {
      flex-direction: var(--flex-direction);
      align-items: stretch;
      gap: 0.5rem;
      margin: 0;
    }

    & [part~=lc-navbar-start] {
      padding-bottom: var(--spacing-md, 0.75rem);
      border-bottom: 1px solid var(--color-primary);
    }

    & [part~=lc-navbar-center] {
      padding: var(--spacing-md, 0.75rem) 0;
      border-bottom: 1px solid var(--color-primary);
    }

    & [part~=lc-navbar-end] {
      padding-top: var(--spacing-md, 0.75rem);
    }
  }
}


:where(.lc-number-input, lc-number-input) {
  display: inline-block;
  width: 100%;

  .number-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  .number-input {
    width: 100%;
    font-family: inherit;
    font-size: var(--lc-input-font-size, var(--text-sm, 0.875rem));
    line-height: var(--lc-input-line-height, var(--leading-normal, 1.5));
    padding: var(--lc-input-padding-y, 0.5rem) var(--lc-input-padding-x, 0.75rem);
    padding-right: var(--lc-number-input-padding-right, 2.5rem);
    background-color: var(--lc-input-background-color, var(--color-surface));
    color: var(--lc-input-color, var(--color-primary));
    border: 1px solid var(--lc-input-border-color, var(--color-primary));
    border-radius: var(--lc-input-border-radius, var(--radius-field, var(--radius-md)));
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;

    &:focus {
      border-color: var(--lc-input-focus-border-color, var(--color-primary));
      box-shadow: var(--lc-input-focus-shadow, var(--shadow-focus, 0 0 0 3px color-mix(in srgb, var(--color-focus, var(--color-primary)) 15%, transparent)));
    }

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

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

    &[readonly] {
      background-color: var(--lc-input-readonly-background-color, var(--color-surface-dark));
      cursor: default;
    }

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    &[type="number"] {
      -moz-appearance: textfield;
    }
  }

  .number-input-buttons {
    position: absolute;
    right: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .number-input-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1rem;
    padding: 0;
    border: none;
    background-color: var(--lc-number-input-button-background, var(--color-hover));
    color: var(--lc-number-input-button-color, var(--color-secondary));
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;

    &:hover:not(:disabled) {
      background-color: var(--lc-number-input-button-hover-background, var(--color-surface-darker));
      color: var(--lc-number-input-button-hover-color, var(--color-primary));
    }

    &:active:not(:disabled) {
      transform: scale(0.95);
    }

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

    lc-icon {
      width: 0.75rem;
      height: 0.75rem;
    }
  }

  &[size="xs"] .number-input {
    --lc-input-font-size: var(--text-xs, 0.75rem);
    --lc-input-padding-y: 0.25rem;
    --lc-input-padding-x: 0.5rem;
    --lc-number-input-padding-right: 2rem;
  }

  &[size="sm"] .number-input {
    --lc-input-font-size: var(--text-sm, 0.8125rem);
    --lc-input-padding-y: 0.375rem;
    --lc-input-padding-x: 0.625rem;
    --lc-number-input-padding-right: 2.25rem;
  }

  &[size="md"] .number-input {
    --lc-input-font-size: var(--text-sm, 0.875rem);
    --lc-input-padding-y: 0.5rem;
    --lc-input-padding-x: 0.75rem;
    --lc-number-input-padding-right: 2.5rem;
  }

  &[size="lg"] .number-input {
    --lc-input-font-size: var(--text-base, 1rem);
    --lc-input-padding-y: 0.625rem;
    --lc-input-padding-x: 1rem;
    --lc-number-input-padding-right: 3rem;
  }

  &[size="xl"] .number-input {
    --lc-input-font-size: var(--text-lg, 1.125rem);
    --lc-input-padding-y: 0.75rem;
    --lc-input-padding-x: 1.25rem;
    --lc-number-input-padding-right: 3.5rem;
  }

  &[show-buttons="false"] {
    .number-input {
      padding-right: var(--lc-input-padding-x, 0.75rem);
    }

    .number-input-buttons {
      display: none;
    }
  }

  .stepper-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lc-number-input-stepper-gap, 0.75rem);
  }

  .stepper-label {
    font-size: var(--lc-number-input-label-size, 0.875rem);
    font-weight: var(--lc-number-input-label-font-weight, 600);
    text-transform: var(--lc-number-input-label-transform, none);
    letter-spacing: var(--lc-number-input-label-tracking, normal);
    color: var(--lc-number-input-label-color, inherit);
  }

  .stepper-controls {
    display: flex;
    align-items: center;
    gap: var(--lc-number-input-controls-gap, 0.625rem);
    flex-shrink: 0;
  }

  .stepper-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--lc-number-input-stepper-button-size, 2.25rem);
    height: var(--lc-number-input-stepper-button-size, 2.25rem);
    border: var(--lc-number-input-stepper-button-border-width, 0) solid
      var(--lc-number-input-stepper-button-border-color, transparent);
    border-radius: var(--lc-number-input-stepper-button-border-radius, 999px);
    background: var(--lc-number-input-stepper-button-background, var(--canvas-background));
    color: var(--lc-number-input-stepper-button-color, var(--text-color));
    cursor: pointer;
    transition: background-color 0.2s ease;

    &:hover:not(:disabled) {
      background: var(--lc-number-input-stepper-button-hover-background, var(--color-hover));
    }

    &:disabled {
      opacity: var(--lc-number-input-stepper-disabled-opacity, 0.35);
      cursor: not-allowed;
    }

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

  /* Fixed width so the row does not jump between 9 and 10. */
  .stepper-value {
    min-width: var(--lc-number-input-value-width, 4.5rem);
    text-align: center;
    font-size: var(--lc-number-input-value-size, 1rem);
    font-weight: var(--lc-number-input-value-font-weight, 600);
    font-variant-numeric: tabular-nums;
    color: var(--lc-number-input-value-color, inherit);
  }

  .stepper-unit {
    margin-left: 0.125rem;
    font-size: 0.6875em;
    font-weight: 500;
    color: var(--lc-number-input-unit-color, var(--text-muted));
  }

  &[stepper][size="sm"] {
    --lc-number-input-stepper-button-size: 1.75rem;
    --lc-number-input-value-size: 0.875rem;
    --lc-number-input-value-width: 4rem;
  }

  /* One number the screen is about: the reading leads and the label recedes. */
  &[stepper][size="lg"] {
    --lc-number-input-stepper-button-size: 3rem;
    --lc-number-input-value-size: 1.875rem;
    --lc-number-input-label-size: 0.6875rem;
    --lc-number-input-label-transform: uppercase;
    --lc-number-input-label-tracking: 0.1em;
    --lc-number-input-label-color: var(--text-muted);
  }
}


:where(.lc-page, lc-page) {
  display: block;
  background: var(--color-surface);
  color: var(--color-primary);
  min-height: 100vh;
  font-family: var(--font-family-base);
  line-height: 1.5;
  overflow-x: hidden;

  .dashboard-border {
    border: 1px solid
      color-mix(in srgb, var(--text-color) 6%, transparent);
    box-shadow:
      0 40px 80px -20px rgba(0, 0, 0, 0.18),
      0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    border-radius: var(--radius-panel);
    overflow: hidden;
    background: var(--color-surface);
  }

  .chart-bg {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-accent) 18%, transparent) 0%,
      color-mix(in srgb, var(--color-accent) 0%, transparent) 100%
    );
  }

  .chart-bg-down {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-danger) 18%, transparent) 0%,
      color-mix(in srgb, var(--color-danger) 0%, transparent) 100%
    );
  }

  .font-caveat,
  .font-handwriting {
    font-family: var(--font-handwriting);
  }
}


:where(.lc-page-header, lc-page-header) {
  display: block;

  & [part~=lc-page-header-row] {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    height: var(--lc-page-header-height, 56px);
    padding: var(--lc-page-header-padding, 0 32px 0 40px);
    background: var(--lc-page-header-background, transparent);
    border-bottom: 1px solid var(--lc-page-header-border-color, var(--border-color, #d2d5d0));
  }

  & [part~=lc-page-header-heading] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  & [part~=lc-page-header-crumbs] {
    flex: none;
    --lc-breadcrumbs-link-color: var(--lc-page-header-crumb-color, var(--text-muted, #6b716b));
    --lc-breadcrumbs-current-color: var(--lc-page-header-crumb-color, var(--text-muted, #6b716b));
    --lc-breadcrumbs-current-font-weight: 500;
    --lc-breadcrumbs-separator-color: var(--lc-page-header-crumb-color, var(--text-muted, #6b716b));
  }

  & [part~=lc-page-header-crumb-separator] {
    color: var(--lc-page-header-crumb-color, var(--text-muted, #6b716b));
    font-size: var(--text-sm, 0.875rem);
  }

  & [part~=lc-page-header-title] {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-heading, inherit);
    font-size: var(--lc-page-header-title-font-size, 18px);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--lc-page-header-title-color, var(--text-color, #101210));
  }

  & [part~=lc-page-header-subtitle] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-muted, #6b716b);
  }

  & [part~=lc-page-header-spacer] {
    flex: 1;
    min-width: 0;
  }

  & [part~=lc-page-header-controls],
  & [part~=lc-page-header-tools] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
  }

  & [part~=lc-page-header-divider] {
    flex: none;
    width: 1px;
    height: 22px;
    background: var(--border-color, #d2d5d0);
  }
}


:where(.lc-pagination, lc-pagination) {
  display: block;

  & .pagination {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
  }

  & .pagination-list {
    display: flex;
    align-items: center;
    gap: var(--lc-pagination-gap, 0.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  & .pagination-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: var(--lc-pagination-button-size, 2rem);
    height: var(--lc-pagination-button-size, 2rem);
    padding: 0 var(--lc-pagination-button-padding, 0.5rem);
    border: var(--lc-pagination-border-width, var(--border-width, 1px)) solid var(--lc-pagination-border-color, var(--color-surface-dark, #444));
    border-radius: var(--lc-pagination-border-radius, var(--radius-md, 0.375rem));
    box-shadow: var(--lc-pagination-shadow, none);
    background: var(--lc-pagination-background, transparent);
    color: var(--lc-pagination-color, inherit);
    font-size: var(--lc-pagination-font-size, 0.8125rem);
    font-weight: var(--lc-pagination-font-weight, var(--control-weight, var(--font-medium, 500)));
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;

    &:hover:not(:disabled):not(.disabled):not(.active) {
      background: var(--lc-pagination-hover-background, var(--color-surface-dark, #333));
      border-color: var(--lc-pagination-hover-border-color, var(--color-surface-light, #555));
      box-shadow: var(--lc-pagination-hover-shadow, var(--lc-pagination-shadow, none));
    }

    &.active {
      background: var(--lc-pagination-active-background, var(--color-primary, #fabd2f));
      border-color: var(--lc-pagination-active-border-color, var(--lc-pagination-active-background, var(--color-primary, #fabd2f)));
      color: var(--lc-pagination-active-color, var(--color-inverse, #000));
      font-weight: var(--lc-pagination-active-font-weight, 600);
      box-shadow: var(--lc-pagination-active-shadow, var(--lc-pagination-shadow, none));
    }

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

    &.disabled {
      opacity: 0.35;
      cursor: default;
      pointer-events: none;
    }

    &.loadmore {
      width: 100%;
      min-width: unset;
      padding: 0.5rem 1.5rem;
    }
  }

  & lc-link.pagination-button [part~=lc-link-anchor] {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0;
    color: inherit;
    text-decoration: none;
  }

  & .pagination-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--lc-pagination-button-size, 2rem);
    height: var(--lc-pagination-button-size, 2rem);
    color: inherit;
    opacity: 0.4;
    font-size: var(--lc-pagination-font-size, 0.8125rem);
  }

  /* Simple variant */
  & .pagination-simple {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  & .pagination-info {
    font-size: var(--lc-pagination-font-size, 0.8125rem);
    color: inherit;
    opacity: 0.6;
    white-space: nowrap;
  }

  /* Load more variant */
  & .pagination-loadmore {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
  }

  /* Size: sm */
  &[size="sm"] {
    --lc-pagination-button-size: 1.75rem;
    --lc-pagination-font-size: 0.75rem;
    --lc-pagination-button-padding: 0.375rem;
    --lc-pagination-gap: 0.125rem;
  }

  /* Size: lg */
  &[size="lg"] {
    --lc-pagination-button-size: 2.5rem;
    --lc-pagination-font-size: 0.9375rem;
    --lc-pagination-button-padding: 0.625rem;
    --lc-pagination-gap: 0.375rem;
  }

  & .pagination-pager {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-md, 0.75rem);

    .pagination-pager-link {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: var(--spacing-sm, 0.5rem);
      padding: var(--spacing-md, 0.75rem) var(--spacing-lg, 1rem);
      border: var(--border-width, 1px) solid var(--lc-pagination-border-color, var(--border-color));
      border-radius: var(--lc-pagination-border-radius, var(--radius-box, var(--radius-md, 0.375rem)));
      background: var(--lc-pagination-background, var(--color-surface));
      color: var(--lc-pagination-color, var(--text-color));
      text-decoration: none;
      transition: border-color 0.15s ease;

      &.next {
        justify-content: flex-end;
        text-align: right;
      }

      &:hover {
        border-color: var(--lc-pagination-hover-border-color, var(--color-primary));
      }

      &[aria-disabled] {
        border-color: transparent;
        background: transparent;
      }

      & [part~=lc-link-anchor] {
        min-width: 0;
      }
    }

    .pagination-pager-text {
      display: flex;
      flex-direction: column;
      gap: 0.125rem;
      min-width: 0;
    }

    .pagination-pager-hint {
      font-size: var(--text-eyebrow, 0.6875rem);
      font-weight: var(--font-bold, 700);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .pagination-pager-label {
      font-size: var(--text-sm, 0.875rem);
      font-weight: var(--font-semibold, 600);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}


:where(.lc-palette, lc-palette) {
  display: flex;
  flex-direction: column;
  gap: var(--lc-palette-gap, 0.375rem);
  min-width: 0;
  outline: none;

  & [part~=lc-palette-stripes] {
    position: relative;
    display: flex;
    height: var(--lc-palette-height, 2.25rem);
    border-radius: var(--lc-palette-border-radius, var(--radius-field, var(--radius-sm, 0.375rem)));
    overflow: hidden;
    background: var(--lc-palette-background, var(--color-surface));
    transition: outline-color 0.15s ease;
  }

  & [part~=lc-palette-stripes]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--lc-palette-ring-color, color-mix(in srgb, var(--text-color) 8%, transparent));
    pointer-events: none;
  }

  & [part~=lc-palette-stripe] {
    flex: 1 1 0;
    min-width: 0;
  }

  &[size="sm"] [part~=lc-palette-stripes] {
    height: var(--lc-palette-sm-height, 1.5rem);
  }

  &[selected] [part~=lc-palette-stripes] {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px;
    outline-color: var(--lc-palette-selected-color, var(--color-primary));
  }

  &[interactive] {
    cursor: pointer;
  }

  &[interactive]:not([selected]):hover [part~=lc-palette-stripes] {
    outline: 2px solid var(--lc-palette-hover-color, var(--border-color));
    outline-offset: 2px;
  }

  &[interactive]:focus-visible [part~=lc-palette-stripes] {
    outline: 2px solid var(--color-focus, var(--color-primary));
    outline-offset: 2px;
  }

  & [part~=lc-palette-line] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    font-size: var(--lc-palette-font-size, var(--text-xs, 0.6875rem));
    line-height: 1.3;
    color: var(--lc-palette-color, var(--text-muted));
    font-variant-numeric: tabular-nums;
  }

  & [part~=lc-palette-label],
  & [part~=lc-palette-meta] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  & [part~=lc-palette-meta] {
    flex-shrink: 0;
  }
}


:where(.lc-panel, lc-panel) {
  display: block;

  & [part~=lc-panel-container] {
    display: flex;
    flex-direction: column;
    background-color: var(--lc-panel-background, var(--color-surface));
    border: var(--border-width, 1px) solid var(--lc-panel-border-color, var(--color-primary));
    border-radius: var(--lc-panel-border-radius, var(--radius-box, var(--radius-lg, 0.5rem)));
    overflow: hidden;
  }

  & [part~=lc-panel-header] {
    padding: var(
      --lc-panel-header-padding,
      var(--spacing-md, 0.75rem) var(--spacing-lg, 1rem)
    );
    border-bottom: var(--border-width, 1px) solid
      var(--lc-panel-header-border-color, var(--color-primary));
    background-color: var(--lc-panel-header-background, inherit);
    color: var(--lc-panel-header-color, inherit);
  }

  & [part~=lc-panel-body] {
    flex: 1;
    padding: var(--lc-panel-body-padding, var(--spacing-lg, 1rem));
  }

  & [part~=lc-panel-footer] {
    padding: var(
      --lc-panel-footer-padding,
      var(--spacing-md, 0.75rem) var(--spacing-lg, 1rem)
    );
    border-top: var(--border-width, 1px) solid var(--lc-panel-footer-border-color, var(--color-primary));
    background-color: var(--lc-panel-footer-background, inherit);
    display: flex;
    gap: var(--spacing-sm, 0.5rem);
    align-items: center;
    justify-content: flex-end;
  }

  &[variant="bordered"] [part~=lc-panel-container] {
    border-width: 2px;
  }

  &[variant="elevated"] [part~=lc-panel-container] {
    box-shadow: var(--lc-panel-elevated-shadow, var(--shadow-box, var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.1))));
    border: none;
  }

  &[padding="none"] [part~=lc-panel-body] {
    padding: 0;
  }

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

  &[padding="md"] [part~=lc-panel-body] {
    padding: var(--spacing-md, 0.75rem) var(--spacing-lg, 1rem);
  }

  &[padding="lg"] [part~=lc-panel-body] {
    padding: var(--spacing-lg, 1rem) var(--spacing-xl, 1.5rem);
  }
}


:where(.lc-pattern, lc-pattern) {
  display: block;

  &.pattern-1 {
    --s: 150px;
    --c1: #046d8b;
    --c2: #2fb8ac;
    --_g: #0000 90deg, var(--c1) 0;
    background:
      conic-gradient(from 116.56deg at calc(100% / 3) 0, var(--_g)),
      conic-gradient(from -63.44deg at calc(200% / 3) 100%, var(--_g)) var(--c2);
    background-size: var(--s) var(--s);
  }

  &.pattern-2 {
    --s: 100px;
    --c1: #d4d4d8;
    --c2: #f4f4f5;
    --c3: #e4e4e7;
    background:
      repeating-conic-gradient(from 30deg, #0000 0 120deg, var(--c1) 0 180deg)
        calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
      repeating-conic-gradient(from 30deg, var(--c2) 0 120deg, var(--c3) 0 180deg);
    background-size: var(--s) calc(var(--s) * 0.577);
  }

  &.pattern-3 {
    --s: 80px;
    --c1: #a8a29e;
    --c2: #f5f5f4;
    background:
      radial-gradient(circle at 50% 50%, #0000 24%, var(--c1) 25%, var(--c1) 29%, #0000 30%) 0 0,
      radial-gradient(circle at 50% 50%, #0000 24%, var(--c1) 25%, var(--c1) 29%, #0000 30%)
        calc(var(--s) / 2) calc(var(--s) / 2),
      var(--c2);
    background-size: var(--s) var(--s);
  }

  &.pattern-4 {
    --s: 60px;
    --c: #78716c;
    --_g: #0000 10%, var(--c) 0 15%, #0000 0;
    background:
      linear-gradient(45deg, var(--_g)),
      linear-gradient(-45deg, var(--_g)),
      #fafaf9;
    background-size: var(--s) var(--s);
  }
}


:where(.lc-pie-chart, lc-pie-chart) {
	display: block;

	& .pie-chart {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}

	& .pie-chart-empty {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100px;
		color: var(--text-muted);
		font-size: 0.875rem;
	}

	& .pie-chart-svg {
		display: block;
	}

	& .pie-slice {
		transition: opacity 0.2s ease, transform 0.2s ease;
		transform-origin: center;
	}

	& .pie-slice:hover {
		opacity: 0.85;
	}

	& .pie-center {
		pointer-events: none;
	}

	& .pie-figure {
		position: relative;
		display: inline-flex;
	}

	& .pie-center-text {
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.125rem;
		text-align: center;
		pointer-events: none;
	}

	& .pie-center-label {
		font-family: var(--font-heading, inherit);
		font-size: var(--lc-pie-chart-center-label-font-size, 1.5rem);
		font-weight: var(--lc-pie-chart-center-label-font-weight, 700);
		line-height: 1.1;
		letter-spacing: -0.02em;
		font-variant-numeric: tabular-nums;
		color: var(--lc-pie-chart-center-label-color, var(--text-color, #101210));
	}

	& .pie-center-sub {
		font-size: var(--lc-pie-chart-center-sub-font-size, 0.75rem);
		line-height: 1.3;
		color: var(--lc-pie-chart-center-sub-color, var(--text-muted, #6b716b));
	}

	& .pie-legend {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1rem;
		justify-content: center;
		max-width: 100%;
	}

	& .pie-legend-item {
		display: flex;
		align-items: center;
		gap: 0.375rem;
		font-size: 0.75rem;
	}

	& .pie-legend-color {
		width: 10px;
		height: 10px;
		border-radius: 2px;
		flex-shrink: 0;
	}

	& .pie-legend-label {
		color: var(--text-color);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100px;
	}

	& .pie-legend-value {
		color: var(--text-muted);
		font-weight: 600;
	}
}


:where(.lc-popover, lc-popover) {
  position: fixed;
  z-index: 10000;
  display: none;

  &[data-open] {
    display: block;
    z-index: var(--lc-popover-z, 1100);
    min-width: var(--lc-popover-min-width, 250px);
    max-width: var(--lc-popover-max-width, 400px);
    background: var(--lc-popover-background, var(--color-surface-light, #3c3836));
    color: var(--lc-popover-color, var(--text-color, default));
    border: var(--lc-popover-border-width, 1px) solid var(--lc-popover-border-color, var(--color-surface, #504945));
    border-radius: var(--lc-popover-border-radius, var(--radius-box, var(--radius-md, 0.375rem)));
    box-shadow: var(--lc-popover-shadow, var(--shadow-box, 0 8px 16px rgba(0, 0, 0, 0.3)));
    padding: var(--lc-popover-padding, var(--spacing-md, 0.75rem));
    backdrop-filter: var(--lc-popover-backdrop, none);
    -webkit-backdrop-filter: var(--lc-popover-backdrop, none);

    > * {
      margin: 0;
    }

    > * + * {
      margin-top: var(--spacing-sm, 0.5rem);
    }
  }

  &[data-open][arrow]::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
  }

  &[position="bottom"][arrow]::before,
  &[position="bottom-left"][arrow]::before,
  &[position="bottom-right"][arrow]::before {
    top: -8px;
    left: 20px;
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent
      var(--color-surface-light, #3c3836) transparent;
  }

  &[position="bottom"][arrow]::after,
  &[position="bottom-left"][arrow]::after,
  &[position="bottom-right"][arrow]::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    top: -9px;
    left: 20px;
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent
      var(--color-surface, #504945) transparent;
  }

  &[position="top"][arrow]::before,
  &[position="top-left"][arrow]::before,
  &[position="top-right"][arrow]::before {
    bottom: -8px;
    left: 20px;
    border-width: 8px 8px 0 8px;
    border-color: var(--color-surface-light, #3c3836) transparent
      transparent transparent;
  }

  &[position="top"][arrow]::after,
  &[position="top-left"][arrow]::after,
  &[position="top-right"][arrow]::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    bottom: -9px;
    left: 20px;
    border-width: 8px 8px 0 8px;
    border-color: var(--color-surface, #504945) transparent
      transparent transparent;
  }

  &[position="left"][arrow]::before {
    right: -8px;
    top: 20px;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent
      var(--color-surface-light, #3c3836);
  }

  &[position="left"][arrow]::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    right: -9px;
    top: 20px;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent
      var(--color-surface, #504945);
  }

  &[position="right"][arrow]::before {
    left: -8px;
    top: 20px;
    border-width: 8px 8px 8px 0;
    border-color: transparent var(--color-surface-light, #3c3836)
      transparent transparent;
  }

  &[position="right"][arrow]::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    left: -9px;
    top: 20px;
    border-width: 8px 8px 8px 0;
    border-color: transparent var(--color-surface, #504945)
      transparent transparent;
  }
}


:where(.lc-pricing-card, lc-pricing-card) {
  display: block;
  height: 100%;

  .pricing-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-2xl);
    border-radius: var(--radius-panel);
    background: var(--color-surface);
    border: 1px solid
      color-mix(in srgb, var(--text-color) 8%, transparent);
    box-shadow: var(--shadow-card);
    transition: all 0.25s ease;
    height: 100%;
    position: relative;

    &:hover {
      border-color: color-mix(
        in srgb,
        var(--text-color) 16%,
        transparent
      );
      box-shadow: var(--shadow-card-hover);
    }
  }

  .pricing-card-highlighted {
    background: var(--color-surface-inverse);
    color: var(--color-surface);
    border-color: var(--color-surface-inverse);
    box-shadow: var(--shadow-lg);

    &:hover {
      border-color: var(--color-surface-inverse);
      box-shadow: var(--shadow-xl);
    }
  }

  .pricing-card-badge {
    position: absolute;
    top: calc(var(--spacing-xl) * -0.5);
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--text-eyebrow);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px var(--spacing-md);
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: white;
  }

  .pricing-card-name {
    font-size: 1.25rem;
    font-weight: var(--font-bold);
    letter-spacing: -0.01em;
  }

  .pricing-card-standard .pricing-card-name {
    color: var(--text-color);
  }

  .pricing-card-desc {
    font-size: var(--text-caption);
    line-height: 1.5;
  }

  .pricing-card-standard .pricing-card-desc {
    color: var(--text-secondary);
  }

  .pricing-card-highlighted .pricing-card-desc {
    color: color-mix(in srgb, var(--color-surface) 65%, transparent);
  }

  .pricing-card-price-row {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
  }

  .pricing-card-price {
    font-size: 2.25rem;
    font-weight: var(--font-black);
    letter-spacing: -0.02em;
    line-height: 1;
  }

  .pricing-card-standard .pricing-card-price {
    color: var(--text-color);
  }

  .pricing-card-period {
    font-size: var(--text-caption);
    font-weight: var(--font-medium);
  }

  .pricing-card-standard .pricing-card-period {
    color: var(--text-secondary);
  }

  .pricing-card-highlighted .pricing-card-period {
    color: color-mix(in srgb, var(--color-surface) 65%, transparent);
  }

  .pricing-card-features {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0;
    flex: 1;
  }

  .pricing-card-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: var(--text-body);
    line-height: 1.5;
  }

  .pricing-card-standard .pricing-card-feature {
    color: var(--text-color);
  }

  .pricing-card-feature-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
  }

  .pricing-card-standard .pricing-card-feature-icon {
    color: var(--color-success);
  }

  .pricing-card-highlighted .pricing-card-feature-icon {
    color: color-mix(in srgb, var(--color-surface) 85%, transparent);
  }

  .pricing-card-cta {
    display: block;
    text-align: center;
    font-size: var(--text-body);
    font-weight: var(--font-bold);
    border-radius: var(--radius-full);
    padding: var(--spacing-md) var(--spacing-xl);
    margin-top: var(--spacing-md);
    transition: all 0.2s ease;
  }

  .pricing-card-standard .pricing-card-cta {
    background: var(--color-surface-inverse);
    color: var(--color-surface);

    &:hover {
      background: black;
    }
  }

  .pricing-card-highlighted .pricing-card-cta {
    background: var(--color-surface);
    color: var(--color-surface-inverse);

    &:hover {
      background: color-mix(in srgb, var(--color-surface) 92%, black);
    }
  }
}


:where(.lc-pricing-table, lc-pricing-table) {
  display: block;

  .pricing-table-section {
    padding: var(--spacing-4xl) var(--spacing-xl);
    background: var(--color-surface);
    color: var(--text-color);
  }

  .pricing-table-inner {
    max-width: 1100px;
    margin: 0 auto;
  }

  .pricing-table-head {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
  }

  .pricing-table-eyebrow {
    display: inline-block;
    font-size: var(--text-eyebrow);
    font-weight: var(--font-bold);
    padding: 6px var(--spacing-lg);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--spacing-xl);
  }

  .pricing-table-headline {
    font-size: var(--text-section);
    font-weight: var(--font-black);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: var(--spacing-lg);
    color: var(--text-color);
  }

  .pricing-table-subheadline {
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.55;
  }

  .pricing-table-grid {
    display: grid;
    gap: var(--spacing-xl);
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  @media (min-width: 640px) {
    .pricing-table-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .pricing-table-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}


:where(.lc-progress-bar, lc-progress-bar) {
  display: block;
  width: 100%;

  .progress-container {
    width: 100%;
  }

  .progress-bar {
    width: 100%;
    height: var(--lc-progress-bar-height, 1rem);
    background: var(--lc-progress-bar-background, var(--color-surface-dark, #e5e5e5));
    border-radius: var(--lc-progress-bar-border-radius, var(--radius-full, 9999px));
    border: var(--lc-progress-bar-border-width, 0) solid var(--lc-progress-bar-border-color, transparent);
    box-shadow: var(--lc-progress-bar-shadow, none);
    overflow: hidden;
    position: relative;
  }

  .progress-fill {
    height: 100%;
    background: var(--lc-progress-bar-fill-background, var(--color-primary, #fabd2f));
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  .progress-label {
    color: var(--color-inverse, #1a1a1a);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-semibold, 600);
    line-height: 1;
    white-space: nowrap;
  }

  &[size="sm"] .progress-bar {
    height: var(--lc-progress-bar-sm-height, 0.5rem);
  }

  &[size="sm"] .progress-label {
    font-size: 0.625rem;
  }

  &[size="lg"] .progress-bar {
    height: var(--lc-progress-bar-lg-height, 1.5rem);
  }

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

  &[variant="success"] .progress-fill {
    background: var(--color-success, #22c55e);
  }

  &[variant="danger"] .progress-fill {
    background: var(--color-danger, #ef4444);
  }

  &[variant="warning"] .progress-fill {
    background: var(--color-warning, #f97316);
  }

  &[variant="info"] .progress-fill {
    background: var(--color-info, #3b82f6);
  }

  &[striped] .progress-fill {
    background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent
    );
    background-size: 1rem 1rem;
  }

  &[animated] .progress-fill {
    animation: progress-bar-stripes 1s linear infinite;
  }
}

@keyframes progress-bar-stripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 1rem 0;
  }
}


lc-prose {
  margin-inline: auto;
}

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

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

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

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

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


:where(.lc-pull-indicator, lc-pull-indicator) {
  display: block;

  .lc-pull-indicator-band {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    transition: height var(--lc-pull-indicator-transition-duration, 0.2s) ease;
  }

  .lc-pull-indicator-knob {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--lc-pull-indicator-size, 2.25rem);
    height: var(--lc-pull-indicator-size, 2.25rem);
    margin-bottom: 0.375rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--lc-pull-indicator-background, var(--color-surface, #fff));
    color: var(--lc-pull-indicator-color, var(--color-muted, #78716c));
    box-shadow: var(--lc-pull-indicator-shadow, var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.12)));
    flex-shrink: 0;

    lc-icon {
      transition: transform 0.15s ease;
    }
  }

  &[open] .lc-pull-indicator-band {
    transition: none;
  }

  &[ready] .lc-pull-indicator-knob {
    color: var(--lc-pull-indicator-ready-color, var(--color-primary, #0f766e));

    lc-icon {
      transform: rotate(180deg);
    }
  }
}


:where(.lc-radio, lc-radio) {
  display: inline-block;

  .radio-wrapper {
    display: inline-flex;
    align-items: center;
    gap: var(--lc-radio-gap, 0.5rem);
    cursor: pointer;
    user-select: none;

    &:has(.radio:disabled) {
      cursor: not-allowed;
      opacity: 0.6;
    }
  }

  .radio {
    appearance: none;
    width: var(--lc-radio-size, 1.125rem);
    height: var(--lc-radio-size, 1.125rem);
    border: 2px solid var(--lc-radio-border-color, var(--color-primary));
    border-radius: 50%;
    background-color: var(--lc-radio-background-color, var(--color-surface));
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    position: relative;
    flex-shrink: 0;

    &:hover:not(:disabled) {
      border-color: var(--lc-radio-hover-border-color, var(--color-primary));
    }

    &:checked {
      border-color: var(--lc-radio-checked-border-color, var(--color-primary));

      &::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 50%;
        height: 50%;
        border-radius: 50%;
        background-color: var(--lc-radio-checked-background-color, var(--color-primary));
        transform: translate(-50%, -50%);
      }
    }

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

    &:disabled {
      cursor: not-allowed;
      background-color: var(--lc-radio-disabled-background-color, var(--color-surface-dark));
    }
  }

  .radio-label {
    color: var(--lc-radio-label-color, var(--text-color));
    font-size: var(--lc-radio-label-font-size, var(--text-sm, 0.875rem));
    line-height: var(--leading-normal, 1.5);
  }

  &[size="xs"] {
    --lc-radio-size: 0.875rem;
    --lc-radio-label-font-size: var(--text-xs, 0.75rem);
    --lc-radio-gap: 0.375rem;
  }

  &[size="sm"] {
    --lc-radio-size: 1rem;
    --lc-radio-label-font-size: var(--text-sm, 0.8125rem);
    --lc-radio-gap: 0.4375rem;
  }

  &[size="md"] {
    --lc-radio-size: 1.125rem;
    --lc-radio-label-font-size: var(--text-sm, 0.875rem);
    --lc-radio-gap: 0.5rem;
  }

  &[size="lg"] {
    --lc-radio-size: 1.25rem;
    --lc-radio-label-font-size: var(--text-base, 1rem);
    --lc-radio-gap: 0.625rem;
  }

  &[size="xl"] {
    --lc-radio-size: 1.5rem;
    --lc-radio-label-font-size: var(--text-lg, 1.125rem);
    --lc-radio-gap: 0.75rem;
  }

  &[variant="primary"] .radio:checked {
    --lc-radio-checked-border-color: var(--color-primary);

    &::after {
      --lc-radio-checked-background-color: var(--color-primary);
    }
  }

  &[variant="secondary"] .radio:checked {
    --lc-radio-checked-border-color: var(--color-secondary);

    &::after {
      --lc-radio-checked-background-color: var(--color-secondary);
    }
  }

  &[variant="success"] .radio:checked {
    --lc-radio-checked-border-color: var(--color-success);

    &::after {
      --lc-radio-checked-background-color: var(--color-success);
    }
  }

  &[variant="warning"] .radio:checked {
    --lc-radio-checked-border-color: var(--color-warning);

    &::after {
      --lc-radio-checked-background-color: var(--color-warning);
    }
  }

  &[variant="error"] .radio:checked {
    --lc-radio-checked-border-color: var(--color-danger);

    &::after {
      --lc-radio-checked-background-color: var(--color-danger);
    }
  }
}


:where(.lc-radio-group, lc-radio-group) {
  display: inline-flex;

  & [part~=lc-radio-group-container] {
    display: flex;
    flex-direction: column;
    gap: var(--lc-radio-group-gap, 0.75rem);
  }

  &[orientation="horizontal"] [part~=lc-radio-group-container] {
    flex-direction: row;
    flex-wrap: wrap;
  }
}


:where(.lc-rating, lc-rating) {
  display: inline-flex;

  .lc-rating__container {
    display: flex;
    align-items: center;
    gap: 0.25rem;

    :where(lc-icon, .lc-icon) {
      width: 1.25rem;
      height: 1.25rem;
      cursor: pointer;
      transition: color 0.15s ease, transform 0.1s ease;

      &:hover {
        transform: scale(1.15);
      }
    }

    .star-empty {
      color: var(--lc-rating-empty-color, var(--text-muted, #6b7280));
    }

    .star-filled {
      color: var(--lc-rating-color, var(--color-primary, #fabd2f));
    }
  }

  &[readonly] .lc-rating__container :where(lc-icon, .lc-icon) {
    cursor: default;

    &:hover {
      transform: none;
    }
  }
}


:where(.lc-scroller, lc-scroller) {
  display: block;
  position: relative;

  & [part~=lc-scroller-track] {
    display: flex;
    align-items: var(--lc-scroller-align, center);
    gap: var(--lc-scroller-gap, 0.75rem);
    padding-inline: var(--lc-scroller-pad, 0);
    padding-block: var(--lc-scroller-pad-block, 0);
    height: var(--lc-scroller-height, auto);
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  & [part~=lc-scroller-track]::-webkit-scrollbar {
    display: none;
  }

  &[snap] [part~=lc-scroller-track] {
    scroll-snap-type: x mandatory;
  }

  &[snap] [part~=lc-scroller-track] > slot > * {
    scroll-snap-align: center;
  }

  & [part~=lc-scroller-nav] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--lc-scroller-nav-size, 2rem);
    height: var(--lc-scroller-nav-size, 2rem);
    padding: 0;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    color: var(--lc-scroller-nav-color, var(--text-color, #111));
    background: var(--lc-scroller-nav-background, var(--color-surface, #fff));
    box-shadow: var(--lc-scroller-nav-shadow, 0 2px 8px rgba(0, 0, 0, 0.18));
  }

  & [part~=lc-scroller-prev] {
    left: var(--lc-scroller-nav-inset, 0.25rem);
  }

  & [part~=lc-scroller-next] {
    right: var(--lc-scroller-nav-inset, 0.25rem);
  }

  @media (hover: hover) {
    & [part~=lc-scroller-nav]:not([hidden]) {
      display: flex;
    }
  }
}


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

  &[collapsible]:not([expanded]) {
    flex: 0 0 auto;
  }

  &[expanded] {
    flex: 1 1 auto;
    min-width: 0;
  }

  .search-join {
    --lc-join-overflow: visible;
    width: 100%;
  }

  &[collapsible]:not([expanded]) .search-join {
    cursor: pointer;
  }

  .search-join .search-wrapper {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  .search-join .search-input,
  .search-join .search-trigger {
    background: transparent;
  }

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

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

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

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

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

    &::-webkit-search-cancel-button {
      display: none;
    }
  }

  .search-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--lc-search-collapsed-width, var(--lc-search-height, var(--lc-input-height, 2.5rem)));
    height: var(--lc-search-height, var(--lc-input-height, 2.5rem));
    padding: 0;
    background: var(--lc-search-background, var(--lc-input-background, var(--color-surface)));
    color: var(--lc-search-icon-color, var(--text-muted));
    border: var(--lc-search-border-width, 1px) solid
      var(--lc-search-border-color, var(--lc-input-border-color, var(--border-color)));
    border-radius: var(--lc-search-border-radius, var(--lc-input-border-radius, var(--radius-md, 0.375rem)));
    font: inherit;
    cursor: pointer;
  }

  .search-clear {
    position: absolute;
    right: var(--lc-search-icon-offset, 0.75rem);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--lc-search-icon-color, var(--text-muted));
    font: inherit;
    cursor: pointer;
  }

  .search-aside {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    opacity: 1;
  }

  .search-aside-body {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    line-height: normal;
    padding: 0 var(--lc-search-aside-padding-x, 0.75rem);
  }

  &[collapsible][expanded] {
    .search-join > * {
      border-left-width: 0;
    }

    .search-aside {
      grid-template-columns: 0fr;
      opacity: 0;
    }

    .search-aside-body {
      padding-left: 0;
      padding-right: 0;
    }

    .search-input {
      padding-right: calc(var(--lc-search-icon-offset, 0.75rem) + 1.5rem);
    }
  }

  &[icon-position="right"] {
    .search-icon {
      left: auto;
      right: var(--lc-search-icon-offset, 0.75rem);
    }

    .search-clear {
      right: auto;
      left: var(--lc-search-icon-offset, 0.75rem);
    }

    .search-input {
      padding-left: var(--lc-search-padding-x, var(--lc-input-padding-x, 0.75rem));
      padding-right: calc(var(--lc-search-icon-offset, 0.75rem) + 1.5rem);
    }

    &[collapsible][expanded] .search-input {
      padding-left: calc(var(--lc-search-icon-offset, 0.75rem) + 1.5rem);
    }
  }

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

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

  .search-result {
    display: flex;
    align-items: center;
    gap: var(--lc-search-result-gap, 0.75rem);
    width: 100%;
    padding: var(--lc-search-result-padding, 0.5rem);
    background: transparent;
    border: none;
    border-radius: var(--lc-search-result-border-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(--lc-search-active-result-background, 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(--lc-search-title-size, var(--text-sm, 0.875rem));
    font-weight: var(--lc-search-title-font-weight, 600);
    color: var(--lc-search-title-color, var(--text-color));
  }

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

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

@media (prefers-reduced-motion: no-preference) {
  :where(.lc-search, lc-search) {
    .search-aside {
      transition:
        grid-template-columns var(--lc-search-transition, 220ms ease),
        opacity var(--lc-search-transition, 220ms ease);
    }

    .search-aside-body {
      transition: padding var(--lc-search-transition, 220ms ease);
    }
  }

  &[inline] .search-dropdown {
    position: static;
    margin-top: var(--spacing-sm, 0.5rem);
    max-height: var(--lc-search-inline-max-height, 60vh);
    border: 0;
    border-top: var(--border-width, 1px) solid var(--lc-search-dropdown-border-color, var(--border-color));
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}


:where(.lc-section, lc-section) {
  display: block;

  & [part~=lc-section-container] {
    width: 100%;
    padding: var(--lc-section-padding, var(--spacing-xl, 1.5rem) var(--spacing-lg, 1rem));
  }

  & [part~=lc-section-inner] {
    width: 100%;
    max-width: var(--lc-section-max-width, 1024px);
    margin: 0 auto;
  }

  &[centered] [part~=lc-section-inner] {
    text-align: center;
  }

  &[max-width="sm"] [part~=lc-section-inner] {
    max-width: 640px;
  }

  &[max-width="md"] [part~=lc-section-inner] {
    max-width: 768px;
  }

  &[max-width="lg"] [part~=lc-section-inner] {
    max-width: 1024px;
  }

  &[max-width="xl"] [part~=lc-section-inner] {
    max-width: 1280px;
  }

  &[max-width="2xl"] [part~=lc-section-inner] {
    max-width: 1536px;
  }

  &[max-width="full"] [part~=lc-section-inner] {
    max-width: 100%;
  }

  &[padding="none"] [part~=lc-section-container] {
    padding: 0;
  }

  &[padding="sm"] [part~=lc-section-container] {
    padding: var(--spacing-md, 0.75rem) var(--spacing-lg, 1rem);
  }

  &[padding="md"] [part~=lc-section-container] {
    padding: var(--spacing-xl, 1.5rem) var(--spacing-lg, 1rem);
  }

  &[padding="lg"] [part~=lc-section-container] {
    padding: var(--spacing-2xl, 2rem) var(--spacing-xl, 1.5rem);
  }

  &[padding="xl"] [part~=lc-section-container] {
    padding: var(--spacing-3xl, 3rem) var(--spacing-2xl, 2rem);
  }
}


:where(.lc-segmented, lc-segmented) {
  display: inline-block;

  &[block] {
    display: block;
  }

  .segmented-track {
    display: inline-flex;
    align-items: stretch;
    gap: 0.125rem;
    padding: 0.1875rem;
    background: var(--lc-segmented-track-background, var(--color-surface-lighter, rgba(127, 127, 127, 0.16)));
    border: var(--lc-segmented-track-border-width, 0) solid var(--lc-segmented-track-border-color, transparent);
    border-radius: var(--lc-segmented-border-radius, 999px);
    box-shadow: var(--lc-segmented-track-shadow, none);
    backdrop-filter: var(--lc-segmented-track-backdrop, none);
    -webkit-backdrop-filter: var(--lc-segmented-track-backdrop, none);
  }

  &[block] .segmented-track {
    display: flex;
    width: 100%;
  }

  /* No border and no radius per segment; the track is the only shape. */
  .segmented-option {
    flex: 1 1 auto;
    appearance: none;
    border: 0;
    margin: 0;
    background: transparent;
    color: var(--lc-segmented-color, var(--text-muted, inherit));
    border-radius: var(--lc-segmented-border-radius, 999px);
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: var(--lc-segmented-font-weight, var(--control-weight, var(--font-semibold, 600)));
    line-height: 1.25;
    white-space: nowrap;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
  }

  .segmented-option:hover:not(.is-selected):not(:disabled) {
    color: var(--lc-segmented-hover-color, var(--text-color, inherit));
  }

  .segmented-option.is-selected {
    background: var(--lc-segmented-selected-background, var(--color-primary));
    color: var(--lc-segmented-selected-color, var(--color-on-primary, #ffffff));
  }

  .segmented-count {
    margin-inline-start: 0.375rem;
    font-size: 0.6875rem;
    font-weight: var(--lc-segmented-count-weight, var(--font-semibold, 600));
    color: var(--lc-segmented-count-color, currentColor);
    opacity: var(--lc-segmented-count-opacity, 0.6);
  }

  .segmented-option:focus-visible {
    outline: 2px solid var(--lc-segmented-selected-background, var(--color-primary));
    outline-offset: 2px;
  }

  .segmented-option:disabled {
    cursor: not-allowed;
  }

  &[aria-disabled="true"] .segmented-track,
  .segmented-track[aria-disabled="true"] {
    opacity: 0.5;
  }

  &[size="sm"] .segmented-option {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
  }

  &[size="lg"] .segmented-option {
    padding: 0.5rem 1.125rem;
    font-size: 0.9375rem;
  }
}


:where(.lc-select, lc-select) {
  display: inline-block;
  width: var(--lc-select-width, auto);
  box-sizing: border-box;

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

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

  .select-wrapper {
    position: relative;
    height: var(--lc-select-height, var(--lc-input-height, 2.5rem));
    box-sizing: border-box;
    background: var(
      --lc-select-background,
      var(--lc-input-background, var(--color-surface-light, #ffffff))
    );
    border: var(--lc-select-border-width, var(--lc-input-border-width, var(--border-width, 1px)))
      solid
      var(
        --lc-select-border-color,
        var(--lc-input-border-color, var(--border-color, var(--color-surface, #e5e7eb)))
      );
    border-radius: var(
      --lc-select-border-radius,
      var(--lc-input-border-radius, var(--radius-field, var(--radius-md, 0.375rem)))
    );
    box-shadow: var(--lc-select-shadow, var(--lc-input-shadow, var(--shadow-field, 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(
      --lc-select-transition,
      border-color 0.2s ease,
      background-color 0.2s ease,
      box-shadow 0.15s ease,
      transform 0.15s ease
    );

    &:hover:not(:focus-within) {
      border-color: var(
        --lc-select-hover-border-color,
        var(--lc-input-hover-border-color, var(--color-primary-light))
      );
    }

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

  .select-wrapper select {
    appearance: none;
    background: transparent;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    height: 100%;
    padding: var(--lc-select-padding-y, var(--lc-input-padding-y, 0.5rem))
      var(--lc-select-padding-x, var(--lc-input-padding-x, 0.75rem));
    padding-right: calc(
      var(--lc-select-padding-x, var(--lc-input-padding-x, 0.75rem)) +
      var(--lc-select-arrow-size, 1rem) +
      0.5rem
    );
    font-size: var(
      --lc-select-font-size,
      var(--lc-input-font-size, var(--text-sm, 0.875rem))
    );
    font-weight: var(
      --lc-select-font-weight,
      var(--lc-input-font-weight, var(--font-normal, 400))
    );
    font-family: inherit;
    line-height: var(--lc-select-line-height, 1.5);
    color: var(
      --lc-select-color,
      var(--lc-input-color, var(--text-color, inherit))
    );
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: var(--lc-select-transition, background-color 0.2s ease);

    option {
      background: var(
        --lc-select-option-background,
        var(--color-surface-light)
      );
      color: var(--lc-select-option-color, var(--text-color));
      padding: var(--spacing-xs, 0.25rem);

      &:checked {
        background: var(
          --lc-select-option-checked-background,
          var(--color-primary)
        );
        color: var(--lc-select-option-checked-color, var(--color-inverse));
      }
    }

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

    &:focus {
      outline: none;
    }
  }

  .select-wrapper .select-arrow {
    position: absolute;
    right: var(--lc-select-padding-x, var(--lc-input-padding-x, 0.75rem));
    top: 50%;
    transform: translateY(-50%);
    width: var(--lc-select-arrow-size, 1rem);
    height: var(--lc-select-arrow-size, 1rem);
    color: var(
      --lc-select-arrow-color,
      var(--lc-input-icon, var(--text-muted))
    );
    opacity: 0.7;
    transition:
      opacity 0.2s ease,
      transform 0.2s ease;
    pointer-events: auto;
    cursor: pointer;
  }

  .select-wrapper:focus-within .select-arrow {
    opacity: 1;
  }

  &:has(select:disabled) {
    .select-wrapper {
      opacity: var(--lc-select-disabled-opacity, 0.6);
      cursor: not-allowed;
    }

    select {
      background: var(
        --lc-select-disabled-background,
        var(--lc-input-disabled-background, var(--color-surface-dark))
      );
      color: var(--lc-select-disabled-color, var(--text-muted));
      cursor: not-allowed;
    }

    .select-wrapper .select-arrow {
      opacity: 0.4;
    }
  }

  &[size="xs"] {
    --lc-select-height: 1.5rem;
    --lc-select-padding-y: 0.2rem;
    --lc-select-padding-x: 0.5rem;
    --lc-select-font-size: var(--text-xs, 0.75rem);
    --lc-select-arrow-size: 0.75rem;
  }

  &[size="sm"] {
    --lc-select-height: 2rem;
    --lc-select-padding-y: 0.3rem;
    --lc-select-padding-x: 0.6rem;
    --lc-select-font-size: var(--text-sm, 0.875rem);
    --lc-select-arrow-size: 0.875rem;
  }

  &[size="md"] {
    --lc-select-height: 2.5rem;
    --lc-select-padding-y: 0.5rem;
    --lc-select-padding-x: 0.75rem;
    --lc-select-font-size: var(--text-base, 1rem);
    --lc-select-arrow-size: 1rem;
  }

  &[size="lg"] {
    --lc-select-height: 3rem;
    --lc-select-padding-y: 0.625rem;
    --lc-select-padding-x: 1rem;
    --lc-select-font-size: var(--text-lg, 1.125rem);
    --lc-select-arrow-size: 1.25rem;
  }

  &[size="xl"] {
    --lc-select-height: 3.5rem;
    --lc-select-padding-y: 0.75rem;
    --lc-select-padding-x: 1.25rem;
    --lc-select-font-size: var(--text-xl, 1.25rem);
    --lc-select-arrow-size: 1.5rem;
  }

  &[required] .select-wrapper {
    border-left: 3px solid
      var(--lc-select-required-color, var(--color-warning));
  }

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

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

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

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

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

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

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

  /* Searchable select */
  .select-search-input {
    appearance: none;
    background: transparent;
    border: none;
    width: 100%;
    height: 100%;
    padding: var(--lc-select-padding-y, var(--lc-input-padding-y, 0.5rem))
      var(--lc-select-padding-x, var(--lc-input-padding-x, 0.75rem));
    padding-right: calc(
      var(--lc-select-padding-x, var(--lc-input-padding-x, 0.75rem)) +
      var(--lc-select-arrow-size, 1rem) +
      0.5rem
    );
    font-size: var(
      --lc-select-font-size,
      var(--lc-input-font-size, var(--text-sm, 0.875rem))
    );
    font-weight: var(
      --lc-select-font-weight,
      var(--lc-input-font-weight, var(--font-normal, 400))
    );
    font-family: inherit;
    line-height: var(--lc-select-line-height, 1.5);
    color: var(
      --lc-select-color,
      var(--lc-input-color, var(--text-color, inherit))
    );
    outline: none;
    box-sizing: border-box;

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

  .select-dropdown {
    position: absolute;
    top: 100%;
    scroll-margin-bottom: var(--lc-select-dropdown-scroll-margin, 0.5rem);
    left: -1px;
    right: -1px;
    z-index: 50;
    max-height: 200px;
    overflow-y: auto;
    background: var(
      --lc-select-dropdown-background,
      var(--color-surface-light, #fff)
    );
    border: 1px solid
      var(--lc-select-dropdown-border-color, var(--color-surface-dark, #e5e7eb));
    border-top: none;
    border-radius: 0 0
      var(
        --lc-select-border-radius,
        var(--lc-input-border-radius, var(--radius-md, 0.375rem))
      )
      var(
        --lc-select-border-radius,
        var(--lc-input-border-radius, var(--radius-md, 0.375rem))
      );
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
  }

  .select-option {
    padding: var(--lc-select-padding-y, 0.375rem)
      var(--lc-select-padding-x, 0.75rem);
    cursor: pointer;
    font-size: var(
      --lc-select-font-size,
      var(--lc-input-font-size, var(--text-sm, 0.875rem))
    );
    color: var(--lc-select-color, var(--text-color, inherit));
    transition: background-color 0.1s ease;

    &:hover,
    &.highlighted {
      background: var(
        --lc-select-hover-option-background,
        var(--color-surface-dark, #f3f4f6)
      );
    }
  }

  .select-option {
    display: flex;
    align-items: center;
    gap: var(--lc-select-option-gap, 0.5rem);
  }

  .select-option-label {
    flex: 1;
    min-width: 0;
  }

  .select-leading {
    display: inline-flex;
    flex: 0 0 auto;
    line-height: 1;
  }

  .select-check {
    flex: 0 0 auto;
    color: var(--lc-select-check-color, var(--color-primary));
  }

  /* Searchable and multiple: the picks as tags, the field to type the next */
  .select-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .select-count {
    flex: 0 0 auto;
    font-size: var(--lc-select-count-font-size, var(--text-xs, 0.75rem));
    font-weight: var(--lc-select-count-font-weight, var(--font-semibold, 600));
    color: var(--lc-select-count-color, var(--text-muted, #6b7280));
  }

  .select-wrapper.select-tags {
    height: auto;
    min-height: var(--lc-select-height, var(--lc-input-height, 2.5rem));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lc-select-tags-gap, 0.375rem);
    padding: var(--lc-select-tags-padding, 0.375rem);
    cursor: text;
  }

  .select-tags .select-tag {
    flex: 0 0 auto;
    max-width: 100%;
  }

  .select-tags .select-tags-input {
    flex: 1 1 8rem;
    min-width: 8rem;
    width: auto;
    height: var(--lc-select-tags-input-height, 2rem);
    padding: 0 var(--lc-select-tags-input-padding-x, 0.375rem);
  }

  .select-tags .select-dropdown {
    top: calc(100% + var(--lc-select-dropdown-offset, 0.25rem));
    max-height: var(--lc-select-dropdown-max-height, 16rem);
    border-top: 1px solid
      var(--lc-select-dropdown-border-color, var(--color-surface-dark, #e5e7eb));
    border-radius: var(
      --lc-select-dropdown-border-radius,
      var(--lc-select-border-radius, var(--lc-input-border-radius, var(--radius-md, 0.375rem)))
    );
    padding: var(--lc-select-dropdown-padding, 0.25rem);
  }

  .select-tags .select-option {
    border-radius: var(--lc-select-option-border-radius, var(--radius-sm, 0.25rem));
  }

  .select-no-results {
    cursor: default;
    opacity: 0.5;
    &:hover {
      background: transparent;
    }
  }

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


:where(.lc-showcase-section, lc-showcase-section) {
  display: block;

  .showcase-section {
    padding: var(--spacing-4xl) var(--spacing-xl);
    background: var(--color-surface);
    color: var(--text-color);
  }

  .showcase-section-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    gap: var(--spacing-3xl);
    grid-template-columns: 1fr;
    align-items: center;
  }

  @media (min-width: 768px) {
    .showcase-section-inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }

  .showcase-media {
    border-radius: var(--radius-panel);
    overflow: hidden;
    background: color-mix(in srgb, var(--text-color) 5%, transparent);
    box-shadow: var(--shadow-card);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .showcase-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .showcase-media-empty {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-accent) 10%, transparent),
      color-mix(in srgb, var(--text-color) 8%, transparent)
    );
  }

  .showcase-copy {
    display: flex;
    flex-direction: column;
  }

  .showcase-eyebrow {
    display: inline-block;
    align-self: flex-start;
    font-size: var(--text-eyebrow);
    font-weight: var(--font-bold);
    padding: 6px var(--spacing-lg);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--spacing-xl);
  }

  .showcase-headline {
    font-size: var(--text-section);
    font-weight: var(--font-black);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: var(--spacing-lg);
    color: var(--text-color);
  }

  .showcase-subheadline {
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: var(--spacing-lg);
  }

  .showcase-body {
    font-size: var(--text-body);
    line-height: 1.7;
    color: var(--text-color);
    margin-bottom: var(--spacing-xl);
  }

  .showcase-body :is(p, ul, ol) {
    margin-bottom: var(--spacing-md);
  }

  .showcase-body a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .showcase-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
  }

  .showcase-cta {
    font-size: var(--text-body);
    font-weight: var(--font-bold);
    border-radius: var(--radius-full);
    padding: var(--spacing-md) var(--spacing-xl);
    transition: all 0.2s ease;

    &:hover {
      transform: translateY(-2px);
    }
  }

  .showcase-cta-primary {
    background: var(--color-surface-inverse);
    color: var(--color-surface);

    &:hover {
      background: black;
    }
  }

  .showcase-cta-secondary {
    background: color-mix(
      in srgb,
      var(--color-surface-inverse) 6%,
      transparent
    );
    color: var(--text-color);
    border: 1px solid
      color-mix(in srgb, var(--color-surface-inverse) 10%, transparent);

    &:hover {
      background: color-mix(
        in srgb,
        var(--color-surface-inverse) 10%,
        transparent
      );
    }
  }
}


:where(.lc-sidebar, lc-sidebar) {
  display: flex;
  flex-direction: column;
  width: var(--lc-sidebar-width, 256px);
  height: 100%;
  background-color: var(--lc-sidebar-background, var(--color-surface, #ffffff));
  border-right-width: var(--lc-sidebar-border-width, var(--border-width, 1px));
  border-right-style: solid;
  border-right-color: var(--lc-sidebar-border-color, var(--border-color, #e5e7eb));
  box-shadow: var(--lc-sidebar-shadow, none);
  border-radius: var(--lc-sidebar-border-radius, 0);
  overflow: hidden;
  transition: width 0.3s ease;

  &[position="right"] {
    border-right: none;
    border-left-width: var(--lc-sidebar-border-width, var(--border-width, 1px));
    border-left-style: solid;
    border-left-color: var(--lc-sidebar-border-color, var(--border-color, #e5e7eb));
  }

  &[collapsed] {
    width: var(--lc-sidebar-collapsed-width, 80px);
  }

  @media (max-width: 768px) {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1000;
    transform: translateX(-100%);

    &[position="left"] {
      left: 0;
    }

    &[position="right"] {
      right: 0;
      transform: translateX(100%);
    }

    &[open] {
      transform: translateX(0);
    }
  }

  @media (min-width: 769px) {
    position: relative;
    transform: none;
  }
}

lc-sidebar [part~=lc-sidebar-header] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--lc-sidebar-header-padding, 1rem);
  background: var(--lc-sidebar-header-background, transparent);
  border-bottom-width: var(
    --lc-sidebar-header-border-width,
    var(--lc-sidebar-border-width, var(--border-width, 1px))
  );
  border-bottom-style: solid;
  border-bottom-color: var(--lc-sidebar-border-color, var(--border-color, #e5e7eb));
  font-weight: var(--lc-sidebar-header-font-weight, inherit);
  min-height: var(--lc-sidebar-header-min-height, auto);
  flex-shrink: 0;
}

lc-sidebar [part~=lc-sidebar-toggle] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: var(--lc-sidebar-toggle-background, transparent);
  color: var(--lc-sidebar-toggle-color, var(--text-muted, #6b7280));
  cursor: pointer;
  border-radius: var(--lc-sidebar-toggle-border-radius, var(--radius-md, 0.5rem));
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  flex-shrink: 0;
}

lc-sidebar [part~=lc-sidebar-toggle]:hover {
  background-color: var(
    --lc-sidebar-toggle-hover-background,
    var(--color-hover, #f5f5f5)
  );
  color: var(--lc-sidebar-toggle-hover-color, var(--text-color, #1a1a1a));
}

lc-sidebar [part~=lc-sidebar-content] {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--lc-sidebar-content-padding, 0.5rem 0);
}

lc-sidebar [part~=lc-sidebar-footer] {
  padding: var(--lc-sidebar-footer-padding, 1rem);
  background: var(--lc-sidebar-footer-background, transparent);
  border-top-width: var(
    --lc-sidebar-footer-border-width,
    var(--lc-sidebar-border-width, var(--border-width, 1px))
  );
  border-top-style: solid;
  border-top-color: var(--lc-sidebar-border-color, var(--border-color, #e5e7eb));
  flex-shrink: 0;
}

lc-sidebar [part~=lc-sidebar-footer]:empty {
  display: none;
}

lc-sidebar[collapsed] [part~=lc-sidebar-header] {
  justify-content: center;
  padding: var(--lc-sidebar-header-padding, 1rem) 0.5rem;
}

lc-sidebar {
  &[collapsed] {
    .sidebar-label,
    .sidebar-title,
    .sidebar-text {
      opacity: 0;
      width: 0;
      overflow: hidden;
      white-space: nowrap;
    }

    [slot="header"] span:not(.icon),
    [slot="footer"] span:not(.icon) {
      opacity: 0;
      width: 0;
      overflow: hidden;
    }
  }

  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--lc-sidebar-nav-gap, 0.25rem);
    padding: var(--lc-sidebar-nav-padding, 0 0.75rem);
  }

  .sidebar-nav-item,
  .sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--lc-sidebar-item-gap, 0.75rem);
    padding: var(--lc-sidebar-item-padding, 0.75rem 1rem);
    border-radius: var(--lc-sidebar-item-border-radius, var(--radius-md, 0.5rem));
    color: var(--lc-sidebar-item-color, var(--text-muted, #6b7280));
    font-weight: var(--lc-sidebar-item-font-weight, 500);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-size: inherit;
    font-family: inherit;
    transition:
      background-color 0.2s ease,
      color 0.2s ease;

    &:hover {
      background-color: var(--lc-sidebar-item-hover-background, #f5f5f5);
      color: var(--lc-sidebar-item-hover-color, var(--text-color, #1a1a1a));
    }

    &.active,
    &[aria-current="page"] {
      background-color: var(--lc-sidebar-item-active-background, #000000);
      color: var(--lc-sidebar-item-active-color, #ffffff);
      font-weight: var(--lc-sidebar-item-active-font-weight, 600);
    }
  }

  .sidebar-section {
    padding-top: var(--lc-sidebar-section-padding, 1rem);
    margin-top: var(--lc-sidebar-section-margin, 0.5rem);
    border-top: var(--border-width, 1px) solid
      var(--lc-sidebar-border-color, var(--border-color, #e5e7eb));
  }

  .sidebar-section-title {
    padding: var(--lc-sidebar-section-title-padding, 0.5rem 1rem);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--lc-sidebar-section-title-font-weight, 600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #6b7280);
  }

  .sidebar-nested {
    padding-left: var(--lc-sidebar-nested-indent, 1rem);
  }

  .sidebar-nested-item {
    padding: var(--lc-sidebar-nested-item-padding, 0.5rem 1rem);
    font-size: var(--lc-sidebar-nested-item-font-size, 0.875rem);
  }
}


:where(.lc-sidebar-section, lc-sidebar-section) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-bottom: 1px solid var(--lc-sidebar-section-border-color, var(--border-color, rgba(128, 128, 128, 0.2)));

  & [part~=lc-sidebar-section-header] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--lc-sidebar-section-header-padding, 7px 10px 5px);
    flex: 0 0 auto;
  }

  & [part~=lc-sidebar-section-toggle],
  & [part~=lc-sidebar-section-heading] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: var(--lc-sidebar-section-header-font-size, 10px);
    font-weight: var(--lc-sidebar-section-header-font-weight, 700);
    text-transform: var(--lc-sidebar-section-header-transform, uppercase);
    letter-spacing: var(--lc-sidebar-section-header-letter-spacing, 0.07em);
    color: var(--lc-sidebar-section-header-color, var(--text-muted, #888));
    cursor: pointer;
  }

  & [part~=lc-sidebar-section-heading] {
    cursor: default;
  }

  & [part~=lc-sidebar-section-toggle]:hover {
    color: var(--text-color, #ddd);
  }

  & [part~=lc-sidebar-section-chevron] {
    opacity: 0.5;
  }

  & [part~=lc-sidebar-section-label] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & [part~=lc-sidebar-section-actions] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }

  & [part~=lc-sidebar-section-body] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: var(--lc-sidebar-section-body-padding, 0 4px 8px);
    overflow-y: auto;
    max-height: var(--lc-sidebar-section-body-max-height, 38vh);
  }

  & [part~=lc-sidebar-section-body]:where([hidden]) {
    display: none;
  }

  &:where([size="md"]) [part~=lc-sidebar-section-header] {
    padding: var(--lc-sidebar-section-header-padding, 14px 16px 10px);
  }

  &:where([size="md"]) [part~=lc-sidebar-section-toggle],
  &:where([size="md"]) [part~=lc-sidebar-section-heading] {
    font-size: var(--lc-sidebar-section-header-font-size, 15px);
    text-transform: var(--lc-sidebar-section-header-transform, none);
    letter-spacing: var(--lc-sidebar-section-header-letter-spacing, 0);
    color: var(--lc-sidebar-section-header-color, var(--text-color, #222));
  }

  &:where([size="md"]) [part~=lc-sidebar-section-body] {
    padding: var(--lc-sidebar-section-body-padding, 0 16px 14px);
    max-height: var(--lc-sidebar-section-body-max-height, none);
  }

  &:where([fill]:not([collapsed])) {
    flex: 1;
  }

  &:where([fill]) [part~=lc-sidebar-section-body] {
    max-height: none;
    flex: 1;
  }
}


:where(.lc-site-header, lc-site-header) {
  display: contents;

  .site-header-nav {
    background: color-mix(
      in srgb,
      var(--color-surface-inverse) 95%,
      transparent
    );
    color: var(--color-surface);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-nav);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .site-header-brand {
    background: var(--color-surface);
    border-radius: var(--radius-full);
    width: 2rem;
    height: 2rem;
  }

  .site-header-links {
    font-size: var(--text-caption);
    font-weight: var(--font-medium);
    color: color-mix(in srgb, var(--color-surface) 70%, transparent);

    a {
      transition: color 0.2s ease;
    }

    a:hover {
      color: var(--color-surface);
    }
  }

  .site-header-divider {
    border-left: 1px solid
      color-mix(in srgb, var(--color-surface) 25%, transparent);
  }

  .site-header-action-secondary {
    font-size: var(--text-caption);
    font-weight: var(--font-medium);
    color: color-mix(in srgb, var(--color-surface) 70%, transparent);
    transition: color 0.2s ease;

    &:hover {
      color: var(--color-surface);
    }
  }

  .site-header-action-primary {
    font-size: var(--text-caption);
    font-weight: var(--font-bold);
    background: var(--color-surface);
    color: var(--text-color);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;

    &:hover {
      background: color-mix(in srgb, var(--color-surface) 92%, black);
      transform: scale(1.02);
    }
  }
}


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

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

  & .skeleton {
    background-color: var(--lc-skeleton-background, var(--color-surface-darker));
    background-image: linear-gradient(
      90deg,
      transparent,
      var(--lc-skeleton-shimmer-color, rgba(255, 255, 255, 0.1)),
      transparent
    );
    background-size: 200% 100%;
    border-radius: var(--lc-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(--lc-skeleton-border-radius, var(--radius-sm, 0.25rem));
  }

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

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

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

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


:where(.lc-slider, lc-slider) {
  display: block;
  width: 100%;

  .slider {
    width: 100%;
    height: 1.5rem;
    background: transparent;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    border-radius: var(--radius-full, 9999px);
    touch-action: none;

    &::-webkit-slider-runnable-track {
      width: 100%;
      height: var(--lc-slider-track-h, 0.5rem);
      border-radius: var(--radius-full, 9999px);
      background: linear-gradient(
        to right,
        var(--lc-slider-fill-color, var(--color-primary, #fabd2f)) var(--lc-slider-fill, 50%),
        var(--lc-slider-track-background, var(--color-surface-lighter, #d5d0c4)) var(--lc-slider-fill, 50%)
      );
    }

    &::-moz-range-track {
      width: 100%;
      height: var(--lc-slider-track-h, 0.5rem);
      border-radius: var(--radius-full, 9999px);
      background: var(--lc-slider-track-background, var(--color-surface-lighter, #d5d0c4));
    }

    &::-moz-range-progress {
      height: var(--lc-slider-track-h, 0.5rem);
      border-radius: var(--radius-full, 9999px) 0 0 var(--radius-full, 9999px);
      background: var(--lc-slider-fill-color, var(--color-primary, #fabd2f));
    }

    &::-webkit-slider-thumb {
      appearance: none;
      -webkit-appearance: none;
      width: 1.5rem;
      height: 1.5rem;
      background: var(--lc-slider-thumb-background, #ffffff);
      border: 0.25rem solid var(--lc-slider-fill-color, var(--color-primary, #fabd2f));
      border-radius: var(--radius-full, 9999px);
      cursor: pointer;
      transition: transform 0.1s ease;
      box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.1));
      transform: translateY(-50%);
      top: 50%;
      position: relative;

      &:hover {
        transform: translateY(-50%) scale(1.1);
      }
    }

    &::-moz-range-thumb {
      width: 1.5rem;
      height: 1.5rem;
      background: var(--lc-slider-thumb-background, #ffffff);
      border: 0.25rem solid var(--lc-slider-fill-color, var(--color-primary, #fabd2f));
      border-radius: var(--radius-full, 9999px);
      cursor: pointer;
      transition: transform 0.1s ease;
      box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.1));

      &:hover {
        transform: scale(1.1);
      }
    }

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

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;

      &::-webkit-slider-thumb { cursor: not-allowed; }
      &::-moz-range-thumb { cursor: not-allowed; }
    }
  }

  &[size="xs"] .slider {
    height: 1rem;
    --lc-slider-track-h: 0.25rem;
    &::-webkit-slider-thumb, &::-moz-range-thumb { width: 1rem; height: 1rem; }
  }

  &[size="sm"] .slider {
    height: 1.25rem;
    --lc-slider-track-h: 0.375rem;
    &::-webkit-slider-thumb, &::-moz-range-thumb { width: 1.25rem; height: 1.25rem; }
  }

  &[size="lg"] .slider {
    height: 1.75rem;
    --lc-slider-track-h: 0.625rem;
    &::-webkit-slider-thumb, &::-moz-range-thumb { width: 1.75rem; height: 1.75rem; }
  }

  &[size="xl"] .slider {
    height: 2rem;
    --lc-slider-track-h: 0.75rem;
    &::-webkit-slider-thumb, &::-moz-range-thumb { width: 2rem; height: 2rem; }
  }

  &[variant="secondary"] { --lc-slider-fill-color: var(--color-secondary, #83a598); }
  &[variant="success"] { --lc-slider-fill-color: var(--color-success, #b8bb26); }
  &[variant="warning"] { --lc-slider-fill-color: var(--color-warning, #fe8019); }
  &[variant="error"] { --lc-slider-fill-color: var(--color-danger, #fb4934); }

  .slider.slider-nofill {
    &::-webkit-slider-runnable-track {
      background: var(--lc-slider-track-background, var(--color-surface-lighter, #d5d0c4));
    }
    &::-moz-range-progress { background: transparent; }
  }

  .slider-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    .slider { flex: 1; min-width: 0; }
  }

  .slider-step {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    color: inherit;
    background: var(--lc-slider-step-background, var(--color-surface-lighter, #e9e6dd));
    border: 0;
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;

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


:where(.lc-sparkline, lc-sparkline) {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;

	& .sparkline-empty {
		color: var(--text-muted);
		font-size: 0.75rem;
	}

	/*
	 * The variant sets a fallback rather than the value: it lands on the inner
	 * svg, which is nearer than the host, so setting `--lc-sparkline-color`
	 * directly would otherwise never win.
	 */
	& .sparkline-line {
		stroke: var(--lc-sparkline-color, var(--lc-sparkline-variant-color, var(--color-primary)));
		stroke-width: var(--lc-sparkline-width, 1.5);
	}

	& .sparkline-area-top {
		stop-color: var(--lc-sparkline-color, var(--lc-sparkline-variant-color, var(--color-primary)));
		stop-opacity: var(--lc-sparkline-area-opacity-top, 0.28);
	}

	& .sparkline-area-bottom {
		stop-color: var(--lc-sparkline-color, var(--lc-sparkline-variant-color, var(--color-primary)));
		stop-opacity: 0;
	}

	& .sparkline-primary {
		--lc-sparkline-variant-color: var(--color-primary);
	}

	& .sparkline-secondary {
		--lc-sparkline-variant-color: var(--color-secondary);
	}

	& .sparkline-success {
		--lc-sparkline-variant-color: var(--color-success);
	}

	& .sparkline-warning {
		--lc-sparkline-variant-color: var(--color-warning);
	}

	& .sparkline-error {
		--lc-sparkline-variant-color: var(--color-danger);
	}
}


:where(.lc-spinner, lc-spinner) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--lc-spinner-size, 2rem);
  height: var(--lc-spinner-size, 2rem);
  position: relative;

  &[primary] {
    --lc-spinner-color: var(--color-primary);
  }

  &[secondary] {
    --lc-spinner-color: var(--color-secondary);
  }

  &[success] {
    --lc-spinner-color: var(--color-success);
  }

  &[danger] {
    --lc-spinner-color: var(--color-danger);
  }

  &[warning] {
    --lc-spinner-color: var(--color-warning);
  }

  &[info] {
    --lc-spinner-color: var(--color-info);
  }

  &[size="xs"] {
    --lc-spinner-size: 1rem;
  }

  &[size="sm"] {
    --lc-spinner-size: 1.5rem;
  }

  &[size="md"] {
    --lc-spinner-size: 2rem;
  }

  &[size="lg"] {
    --lc-spinner-size: 3rem;
  }

  &[size="xl"] {
    --lc-spinner-size: 4rem;
  }

  &[variant="circular"]::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: calc(var(--lc-spinner-size, 2rem) / 8) solid var(--color-surface-darker);
    border-top-color: var(--lc-spinner-color, var(--color-primary));
    border-radius: 50%;
    animation: spinner-circular 0.8s linear infinite;
  }

  &[variant="dots"] {
    gap: calc(var(--lc-spinner-size, 2rem) / 6);
  }

  &[variant="dots"] .dot {
    display: block;
    width: calc(var(--lc-spinner-size, 2rem) / 4);
    height: calc(var(--lc-spinner-size, 2rem) / 4);
    background-color: var(--lc-spinner-color, var(--color-primary));
    border-radius: 50%;
    animation: spinner-dots 1.4s ease-in-out infinite;
  }

  &[variant="dots"] .dot:nth-child(1) {
    animation-delay: -0.32s;
  }

  &[variant="dots"] .dot:nth-child(2) {
    animation-delay: -0.16s;
  }

  &[variant="dots"] .dot:nth-child(3) {
    animation-delay: 0s;
  }

  &[variant="bars"] {
    gap: calc(var(--lc-spinner-size, 2rem) / 8);
  }

  &[variant="bars"] .bar {
    display: block;
    width: calc(var(--lc-spinner-size, 2rem) / 6);
    height: 100%;
    background-color: var(--lc-spinner-color, var(--color-primary));
    border-radius: calc(var(--lc-spinner-size, 2rem) / 12);
    animation: spinner-bars 1.2s ease-in-out infinite;
  }

  &[variant="bars"] .bar:nth-child(1) {
    animation-delay: -0.24s;
  }

  &[variant="bars"] .bar:nth-child(2) {
    animation-delay: -0.12s;
  }

  &[variant="bars"] .bar:nth-child(3) {
    animation-delay: 0s;
  }
}

@keyframes spinner-circular {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinner-dots {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes spinner-bars {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    opacity: 0.5;
  }
  20% {
    transform: scaleY(1);
    opacity: 1;
  }
}


:where(.lc-split-pane, lc-split-pane) {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;

  & slot > [slot] {
    width: 100%;
  }

  & [part~=lc-split-pane-primary],
  & [part~=lc-split-pane-secondary] {
    width: 100%;
    display: flex;
    overflow: auto;
    background: var(
      --lc-split-pane-panel-background,
      var(--color-surface-darker, #282828)
    );
    flex-shrink: 0;
    flex-grow: 0;
  }

  & [part~=lc-split-pane-primary] {
    min-width: 0;
    min-height: 0;
  }

  & [part~=lc-split-pane-secondary] {
    flex: 1;
    min-width: 0;
    min-height: 0;
  }

  & [part~=lc-split-pane-divider] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(
      --lc-split-pane-divider-background,
      var(--color-surface, #504945)
    );
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    transition: background 0.15s ease;
  }

  &[direction="horizontal"],
  &:not([direction]) {
    flex-direction: row;

    & [part~=lc-split-pane-divider] {
      width: var(--lc-split-pane-divider-size, 4px);
      cursor: default;

      &::before {
        width: var(--lc-split-pane-divider-size, 4px);
        height: 48px;
      }
    }
  }

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

    & [part~=lc-split-pane-divider] {
      height: var(--lc-split-pane-divider-size, 4px);
      cursor: default;

      &::before {
        width: 48px;
        height: var(--lc-split-pane-divider-size, 4px);
      }
    }
  }

  &[resizable] {
    & [part~=lc-split-pane-divider] {
      touch-action: none;
    }

    & [part~=lc-split-pane-divider]:hover {
      background: var(
        --lc-split-pane-divider-hover-background,
        var(--color-primary, #fabd2f)
      );
    }

    & [part~=lc-split-pane-divider]:active {
      background: var(
        --lc-split-pane-divider-active-background,
        var(--color-primary, #fabd2f)
      );
    }

    & [part~=lc-split-pane-divider]::before {
      content: "";
      position: absolute;
      background: var(--color-surface-light, #3c3836);
      border-radius: var(--radius-full, 9999px);
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    & [part~=lc-split-pane-divider]:hover::before {
      opacity: 1;
    }

    &[direction="horizontal"] [part~=lc-split-pane-divider],
    &:not([direction]) [part~=lc-split-pane-divider] {
      cursor: col-resize;
    }

    &[direction="vertical"] [part~=lc-split-pane-divider] {
      cursor: row-resize;
    }
  }

  &[dragging] {
    user-select: none;

    &[direction="horizontal"],
    &:not([direction]) {
      cursor: col-resize;

      * {
        cursor: col-resize !important;
      }
    }

    &[direction="vertical"] {
      cursor: row-resize;

      * {
        cursor: row-resize !important;
      }
    }
  }
}

@media (pointer: coarse) {
  :where(.lc-split-pane, lc-split-pane) {
    &[direction="horizontal"] [part~=lc-split-pane-divider],
    &:not([direction]) [part~=lc-split-pane-divider] {
      width: calc(var(--lc-split-pane-divider-size, 4px) * 2);
      margin-left: calc(var(--lc-split-pane-divider-size, 4px) * -0.5);
      margin-right: calc(var(--lc-split-pane-divider-size, 4px) * -0.5);
    }

    &[direction="vertical"] [part~=lc-split-pane-divider] {
      height: calc(var(--lc-split-pane-divider-size, 4px) * 2);
      margin-top: calc(var(--lc-split-pane-divider-size, 4px) * -0.5);
      margin-bottom: calc(var(--lc-split-pane-divider-size, 4px) * -0.5);
    }
  }
}


:where(.lc-stat, lc-stat) {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--lc-stat-gap, var(--spacing-md, 0.75rem));
  padding: var(--lc-stat-padding, var(--spacing-lg, 1rem));
  background: var(--lc-stat-background, transparent);
  border: var(--lc-stat-border-width, 0) solid var(--lc-stat-border-color, transparent);
  border-radius: var(--lc-stat-border-radius, 0);
  box-shadow: var(--lc-stat-shadow, none);
  min-width: 0;
  position: relative;

  & [part~=lc-stat-figure] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    order: 1;

    &:empty {
      display: none;
    }
  }

  & [part~=lc-stat-body] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
    flex: 1;
    min-width: 0;
  }

  & [part~=lc-stat-title] {
    font-size: var(--lc-stat-title-font-size, var(--text-sm, 0.875rem));
    font-weight: var(--lc-stat-title-font-weight, var(--font-normal, 400));
    text-transform: var(--lc-stat-title-transform, none);
    letter-spacing: var(--lc-stat-title-letter-spacing, normal);
    color: var(--lc-stat-title-color, var(--text-color));
    opacity: var(--lc-stat-title-opacity, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  & [part~=lc-stat-value] {
    font-size: var(--lc-stat-value-font-size, var(--text-3xl, 1.875rem));
    font-weight: var(--lc-stat-value-font-weight, var(--font-extrabold, 800));
    color: var(--lc-stat-value-color, var(--text-color));
    line-height: var(--leading-tight, 1.2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  & [part~=lc-stat-headline] {
    display: flex;
    align-items: center;
    gap: var(--lc-stat-headline-gap, 0.5rem);
    min-width: 0;
  }

  & [part~=lc-stat-delta] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: none;
    padding: var(--lc-stat-delta-padding, 2px 7px);
    border-radius: var(--lc-stat-delta-border-radius, 999px);
    font-size: var(--lc-stat-delta-font-size, var(--text-xs, 0.75rem));
    font-weight: var(--lc-stat-delta-font-weight, var(--font-semibold, 600));
    line-height: 1.3;
    white-space: nowrap;
    background: var(--lc-stat-delta-background, color-mix(in srgb, var(--text-color, #101210), transparent 92%));
    color: var(--lc-stat-delta-color, var(--text-secondary, #3f443f));
  }

  & [part~=lc-stat-delta-up] {
    background: var(--lc-stat-delta-up-background, var(--color-success-surface, color-mix(in srgb, var(--color-success, #15803d), transparent 88%)));
    color: var(--lc-stat-delta-up-color, var(--color-success-text, var(--color-success, #15803d)));
  }

  & [part~=lc-stat-delta-down] {
    background: var(--lc-stat-delta-down-background, var(--color-danger-surface, color-mix(in srgb, var(--color-danger, #dc2626), transparent 88%)));
    color: var(--lc-stat-delta-down-color, var(--color-danger-text, var(--color-danger, #dc2626)));
  }

  & [part~=lc-stat-desc] {
    font-size: var(--lc-stat-desc-font-size, var(--text-sm, 0.875rem));
    font-weight: var(--lc-stat-desc-font-weight, inherit);
    text-transform: var(--lc-stat-desc-transform, none);
    letter-spacing: var(--lc-stat-desc-letter-spacing, normal);
    color: var(--lc-stat-desc-color, var(--text-color));
    opacity: var(--lc-stat-desc-opacity, 0.6);

    &:empty {
      display: none;
    }
  }

  &[size="sm"] {
    --lc-stat-value-font-size: var(--text-xl, 1.25rem);
    --lc-stat-title-font-size: var(--text-xs, 0.75rem);
    --lc-stat-desc-font-size: var(--text-xs, 0.75rem);
  }

  &[size="lg"] {
    --lc-stat-value-font-size: var(--text-5xl, 3rem);
    --lc-stat-title-font-size: var(--text-base, 1rem);
    --lc-stat-desc-font-size: var(--text-base, 1rem);
  }

  &[variant="primary"] {
    --lc-stat-value-color: var(--color-primary);
  }

  &[variant="secondary"] {
    --lc-stat-value-color: var(--color-secondary);
  }

  &[variant="success"] {
    --lc-stat-value-color: var(--color-success);
  }

  &[variant="danger"] {
    --lc-stat-value-color: var(--color-danger);
  }

  &[variant="warning"] {
    --lc-stat-value-color: var(--color-warning);
  }

  &[variant="info"] {
    --lc-stat-value-color: var(--color-info);
  }

  &[centered] {
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;

    & [part~=lc-stat-figure] {
      order: 0;
      margin-bottom: var(--spacing-sm, 0.5rem);
    }

    & [part~=lc-stat-body] {
      align-items: center;
    }

    slot > [slot="figure"] {
      width: var(--lc-stat-figure-size, 2.5rem);
      height: var(--lc-stat-figure-size, 2.5rem);
    }
  }
}

:where(.lc-join) {
  > lc-stat {
    flex: 1;
    position: relative;
    border-radius: 0;
  }

  &:not([orientation="vertical"]) > lc-stat + lc-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    border-left: 1px solid var(--color-surface-dark, rgba(255, 255, 255, 0.1));
  }

  &[orientation="vertical"] > lc-stat + lc-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 15%;
    width: 70%;
    border-top: 1px solid var(--color-surface-dark, rgba(255, 255, 255, 0.1));
  }

  > lc-stat + lc-stat {
    margin-left: 0;
    margin-top: 0;
  }
}


:where(.lc-stats-section, lc-stats-section) {
  display: block;

  .stats-section {
    padding: var(--spacing-4xl) var(--spacing-xl);
  }

  .stats-section-light {
    background: var(--color-surface);
    color: var(--text-color);
  }

  .stats-section-dark {
    background: var(--color-surface-inverse);
    color: var(--color-surface);
  }

  .stats-section-inner {
    max-width: 1100px;
    margin: 0 auto;
  }

  .stats-section-head {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
  }

  .stats-eyebrow {
    display: inline-block;
    font-size: var(--text-eyebrow);
    font-weight: var(--font-bold);
    padding: 6px var(--spacing-lg);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--spacing-xl);
  }

  .stats-section-light .stats-eyebrow {
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
    color: var(--text-color);
  }

  .stats-section-dark .stats-eyebrow {
    background: color-mix(in srgb, var(--color-surface) 10%, transparent);
    color: color-mix(in srgb, var(--color-surface) 80%, transparent);
    border: 1px solid
      color-mix(in srgb, var(--color-surface) 10%, transparent);
  }

  .stats-headline {
    font-size: var(--text-section);
    font-weight: var(--font-black);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: var(--spacing-lg);
  }

  .stats-section-light .stats-headline {
    color: var(--text-color);
  }

  .stats-section-dark .stats-headline {
    color: var(--color-surface);
  }

  .stats-subheadline {
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.55;
  }

  .stats-section-light .stats-subheadline {
    color: var(--text-secondary);
  }

  .stats-section-dark .stats-subheadline {
    color: color-mix(in srgb, var(--color-surface) 60%, transparent);
  }

  .stats-grid {
    display: grid;
    gap: var(--spacing-2xl);
    grid-template-columns: 1fr;
  }

  @media (min-width: 640px) {
    .stats-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .stats-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-xl);
    border-radius: var(--radius-panel);
    transition: transform 0.25s ease;

    &:hover {
      transform: translateY(-3px);
    }
  }

  .stats-section-light .stat-item {
    background: var(--color-surface);
    border: 1px solid
      color-mix(in srgb, var(--text-color) 8%, transparent);
  }

  .stats-section-dark .stat-item {
    background: color-mix(in srgb, var(--color-surface) 4%, transparent);
    border: 1px solid
      color-mix(in srgb, var(--color-surface) 8%, transparent);
  }

  .stat-icon-box {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-sm);
  }

  .stats-section-light .stat-icon-box {
    background: color-mix(in srgb, var(--text-color) 5%, transparent);
  }

  .stats-section-dark .stat-icon-box {
    background: color-mix(in srgb, var(--color-surface) 6%, transparent);
  }

  .stat-icon {
    width: 1.2rem;
    height: 1.2rem;
  }

  .stats-section-light .stat-icon {
    color: color-mix(in srgb, var(--text-color) 70%, transparent);
  }

  .stats-section-dark .stat-icon {
    color: color-mix(in srgb, var(--color-surface) 70%, transparent);
  }

  .stat-value {
    font-size: 2.5rem;
    font-weight: var(--font-black);
    letter-spacing: -0.02em;
    line-height: 1;
  }

  .stats-section-light .stat-value {
    color: var(--text-color);
  }

  .stats-section-dark .stat-value {
    color: var(--color-surface);
  }

  .stat-label {
    font-size: var(--text-body);
    font-weight: var(--font-bold);
  }

  .stats-section-light .stat-label {
    color: var(--text-color);
  }

  .stats-section-dark .stat-label {
    color: color-mix(in srgb, var(--color-surface) 90%, transparent);
  }

  .stat-description {
    font-size: var(--text-caption);
    font-weight: var(--font-medium);
    line-height: 1.5;
  }

  .stats-section-light .stat-description {
    color: var(--text-secondary);
  }

  .stats-section-dark .stat-description {
    color: color-mix(in srgb, var(--color-surface) 60%, transparent);
  }
}


:where(.lc-stepper, lc-stepper) {
  display: block;
  font-family: inherit;
  --lc-stepper-dot-size: 1.75rem;

  .stepper-steps {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .stepper-step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lc-stepper-gap, 0.375rem);
    text-align: center;
  }

  .stepper-step + .stepper-step::before {
    content: "";
    position: absolute;
    top: calc(var(--lc-stepper-dot-size) / 2 - var(--lc-stepper-connector-height, 2px) / 2);
    left: calc(-50% + var(--lc-stepper-dot-size) / 2 + var(--lc-stepper-connector-inset, 0.25rem));
    right: calc(50% + var(--lc-stepper-dot-size) / 2 + var(--lc-stepper-connector-inset, 0.25rem));
    height: var(--lc-stepper-connector-height, 2px);
    border-radius: var(--radius-full, 9999px);
    background: var(--lc-stepper-connector-background, var(--border-color, #e5e7eb));
    transition: background 0.2s ease;
  }

  .stepper-step + .stepper-step:not([data-state="pending"])::before {
    background: var(--lc-stepper-reached-connector-background, var(--color-primary, #3b82f6));
  }

  .stepper-dot {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--lc-stepper-dot-size);
    height: var(--lc-stepper-dot-size);
    border-radius: var(--lc-stepper-dot-border-radius, var(--radius-full, 9999px));
    border: var(--lc-stepper-dot-border-width, 2px) solid var(--lc-stepper-dot-border-color, var(--border-color, #e5e7eb));
    background: var(--lc-stepper-dot-background, var(--color-surface, #ffffff));
    color: var(--lc-stepper-dot-color, var(--text-muted, #6b7280));
    font-size: var(--lc-stepper-dot-font-size, var(--text-xs, 0.75rem));
    font-weight: var(--font-semibold, 600);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;

    lc-icon {
      --lc-icon-size: calc(var(--lc-stepper-dot-size) * 0.55);
    }

    lc-spinner {
      --lc-spinner-size: calc(var(--lc-stepper-dot-size) * 0.6);
      --lc-spinner-color: var(--color-primary, #3b82f6);
    }
  }

  .stepper-label {
    max-width: 100%;
    padding: 0 0.25rem;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    font-size: var(--lc-stepper-label-font-size, var(--text-sm, 0.875rem));
    line-height: 1.25;
    color: var(--lc-stepper-label-color, var(--text-muted, #6b7280));
  }

  [data-state="done"] {
    .stepper-dot {
      border-color: var(--lc-stepper-done-border-color, var(--color-primary, #3b82f6));
      background: var(--lc-stepper-done-background, var(--color-primary, #3b82f6));
      color: var(--lc-stepper-done-color, var(--color-on-primary, var(--color-inverse, #ffffff)));
    }

    .stepper-label {
      color: var(--lc-stepper-done-label-color, var(--text-color, inherit));
    }
  }

  [data-state="active"],
  [data-state="running"] {
    .stepper-dot {
      border-color: var(--lc-stepper-active-border-color, var(--color-primary, #3b82f6));
      color: var(--lc-stepper-active-color, var(--color-primary, #3b82f6));
    }

    .stepper-label {
      color: var(--lc-stepper-active-label-color, var(--text-color, inherit));
      font-weight: var(--font-semibold, 600);
    }
  }

  [data-state="failed"] {
    .stepper-dot {
      border-color: var(--lc-stepper-failed-border-color, var(--color-danger, #ef4444));
      background: var(--lc-stepper-failed-background, var(--color-danger, #ef4444));
      color: var(--lc-stepper-failed-color, var(--color-on-danger, var(--color-inverse, #ffffff)));
    }

    .stepper-label {
      color: var(--lc-stepper-failed-label-color, var(--color-danger, #ef4444));
      font-weight: var(--font-semibold, 600);
    }
  }

  .stepper-error {
    margin: var(--lc-stepper-error-margin, 0.625rem 0 0);
    font-size: var(--lc-stepper-error-font-size, var(--text-sm, 0.875rem));
    line-height: 1.4;
    text-align: center;
    color: var(--lc-stepper-error-color, var(--color-danger, #ef4444));
  }

  &[size="sm"] {
    --lc-stepper-dot-size: 1.25rem;
    --lc-stepper-gap: 0.25rem;
    --lc-stepper-dot-font-size: 0.625rem;
    --lc-stepper-label-font-size: var(--text-xs, 0.75rem);
    --lc-stepper-error-font-size: var(--text-xs, 0.75rem);
  }

  &[vertical] {
    --lc-stepper-dot-size: var(--lc-stepper-vertical-dot-size, 16px);

    .stepper-steps {
      flex-direction: column;
      gap: var(--lc-stepper-vertical-gap, 0.875rem);
    }

    .stepper-step {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--lc-stepper-gap, 0.625rem);
      text-align: start;
    }

    .stepper-step + .stepper-step::before {
      content: none;
    }

    .stepper-dot {
      margin-top: 0.125rem;
      border-width: 1.5px;
      border-color: var(--lc-stepper-pending-border-color, var(--border-color, #d2d5d0));
      background: transparent;

      .lc-icon {
        --lc-icon-size: 10px;
      }
    }

    .stepper-text {
      display: flex;
      flex-direction: column;
      gap: 0.125rem;
      min-width: 0;
    }

    .stepper-label {
      padding: 0;
      font-weight: var(--font-medium, 500);
      color: var(--lc-stepper-label-color, var(--text-secondary, #3f443f));
    }

    .stepper-description {
      font-size: var(--lc-stepper-description-font-size, var(--text-xs, 0.75rem));
      line-height: 1.4;
      color: var(--lc-stepper-description-color, var(--text-muted, #6b716b));
    }

    [data-state="done"] .stepper-dot {
      border-color: var(--lc-stepper-vertical-done-background, var(--color-success, #15803d));
      background: var(--lc-stepper-vertical-done-background, var(--color-success, #15803d));
      color: var(--lc-stepper-vertical-done-color, var(--color-inverse, #ffffff));
    }

    [data-state="active"] .stepper-dot,
    [data-state="running"] .stepper-dot {
      border-color: var(--lc-stepper-vertical-current-border-color, var(--text-color, #101210));
      background: transparent;
    }

    [data-state="active"] .stepper-label,
    [data-state="running"] .stepper-label {
      color: var(--text-color, #101210);
      font-weight: var(--font-semibold, 600);
    }

    [data-state="failed"] .stepper-dot {
      border-color: var(--color-danger, #dc2626);
      background: var(--color-danger, #dc2626);
      color: var(--color-inverse, #ffffff);
    }
  }
}


:where(.lc-steps-section, lc-steps-section) {
  display: block;

  .steps-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-surface-inverse);
    color: var(--color-surface);
    font-size: var(--text-eyebrow);
    font-weight: var(--font-bold);
    padding: 6px var(--spacing-lg);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1.25rem;
  }

  .steps-headline {
    font-size: var(--text-section);
    font-weight: var(--font-black);
    letter-spacing: -0.03em;
    color: var(--text-color);
    margin-bottom: var(--spacing-lg);
  }

  .steps-subheadline {
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0 auto;
  }

  .step-icon-box {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid
      color-mix(in srgb, var(--text-color) 8%, transparent);
    box-shadow: var(--shadow-sm);
  }

  .step-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .step-number {
    font-size: var(--text-eyebrow);
    font-weight: var(--font-bold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }

  .step-title {
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    color: var(--text-color);
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .step-description {
    font-size: var(--text-body);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: var(--spacing-xl);
  }

  .step-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-caption);
    font-weight: var(--font-bold);
    color: var(--text-color);
    background: var(--color-surface);
    border: 1px solid
      color-mix(in srgb, var(--text-color) 10%, transparent);
    padding: 10px 1.25rem;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;

    &:hover {
      background: color-mix(
        in srgb,
        var(--text-color) 3%,
        var(--color-surface)
      );
      gap: var(--spacing-md);
    }
  }

  .step-mockup-glow {
    position: absolute;
    inset: 0;
    border-radius: 32px;
    filter: blur(2rem);
    opacity: 0.5;
    transform: scale(0.95);
  }

  .steps-footer-divider {
    width: 1px;
    height: 3rem;
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--text-color) 12%, transparent),
      transparent
    );
  }

  .steps-footer-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-primary);
    color: var(--color-surface);
    padding: var(--spacing-md) 1.5rem;
    border-radius: var(--radius-full);
    font-weight: var(--font-bold);
    font-size: var(--text-caption);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      background: var(--color-secondary, var(--color-primary-dark));
      transform: translateY(-2px);
    }
  }
}


@keyframes lc-stories-fill {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

:where(.lc-stories, lc-stories) {
  .lc-stories-fill {
    width: 0;
  }

  .is-done .lc-stories-fill {
    width: 100%;
  }

  .is-current .lc-stories-fill {
    width: 100%;
    animation-name: lc-stories-fill;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }

  .is-current .lc-stories-fill[style*="animation-duration"] {
    width: 0;
  }
}


:where(.lc-story-circle, lc-story-circle) {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: var(--lc-story-circle-width, 72px);
  flex: 0 0 auto;
  --lc-story-circle-size: 58px;

  &[size="lg"] {
    --lc-story-circle-size: 76px;
    --lc-story-circle-width: 92px;
  }

  .story-circle-hit {
    all: unset;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lc-story-circle-gap, 0.375rem);
    width: 100%;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .story-circle-hit:focus-visible {
    outline: 2px solid var(--color-primary, currentColor);
    outline-offset: 4px;
    border-radius: var(--lc-story-circle-border-radius, 0.75rem);
  }

  .story-circle-media {
    position: relative;
    display: inline-flex;
  }

  .story-circle-media > lc-avatar {
    --lc-avatar-size: var(--lc-story-circle-size);
    --lc-avatar-border: var(--lc-story-circle-media-border, 0);
    --lc-avatar-ring-gap: var(--lc-story-circle-ring-gap, 3px);
    --lc-avatar-ring-width: var(--lc-story-circle-ring-width, 2.5px);
    --lc-avatar-ring-gap-color: var(--lc-story-circle-background, var(--canvas-background, #fff));
  }

  &[masked] .story-circle-media {
    border-radius: 50%;
    outline: var(--lc-story-circle-masked-ring-width, 2px) dashed var(--lc-story-circle-masked-ring-color, var(--border-control, rgba(127, 127, 127, 0.5)));
    outline-offset: 1px;
  }

  &[masked] .story-circle-media > lc-avatar {
    --lc-avatar-fill: var(--lc-story-circle-masked-background, var(--color-surface-lighter, rgba(127, 127, 127, 0.16))) !important;
    --lc-avatar-color: var(--lc-story-circle-masked-color, var(--text-muted, inherit));
    --lc-avatar-ring-width: 0px;
  }

  .story-circle-badge {
    position: absolute;
    right: -4px;
    bottom: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
    min-width: var(--lc-story-circle-badge-size, 22px);
    height: var(--lc-story-circle-badge-size, 22px);
    padding: 0 6px;
    border-radius: 9999px;
    background: var(--lc-story-circle-badge-background, var(--text-color, #111));
    color: var(--lc-story-circle-badge-color, var(--color-surface, #fff));
    font-size: var(--lc-story-circle-badge-font-size, 11px);
    font-weight: var(--lc-story-circle-badge-font-weight, 700);
    line-height: 1;
    box-shadow: 0 0 0 2px var(--lc-story-circle-background, var(--canvas-background, #fff));
  }

  .story-circle-label,
  .story-circle-sub {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }

  .story-circle-label {
    font-size: var(--lc-story-circle-label-font-size, 12px);
    font-weight: var(--lc-story-circle-label-font-weight, 700);
    color: var(--lc-story-circle-label-color, var(--text-color, inherit));
  }

  .story-circle-sub {
    margin-top: -0.25rem;
    font-size: var(--lc-story-circle-sub-font-size, 10.5px);
    font-weight: var(--lc-story-circle-sub-font-weight, 600);
    color: var(--lc-story-circle-sub-color, var(--text-muted, inherit));
  }
}


:where(.lc-swipe-deck, lc-swipe-deck) {
  display: flex;
  flex-direction: column;
  gap: var(--lc-swipe-deck-gap, 0.75rem);
  height: var(--lc-swipe-deck-height, 100%);
  min-height: 0;
  outline: none;

  &[dragging] {
    user-select: none;
    -webkit-user-select: none;
  }

  & > [part~=lc-swipe-deck-stage] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: var(--lc-swipe-deck-border-radius, 1.5rem);
    background-size: cover;
    background-position: center;
  }

  & [part~=lc-swipe-deck-card] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--lc-swipe-deck-border-radius, 1.5rem);
    background: var(--lc-swipe-deck-card-background, var(--color-surface, #fff));
    border: var(--lc-swipe-deck-card-border-width, 0) solid var(--lc-swipe-deck-card-border-color, transparent);
    box-shadow: var(--lc-swipe-deck-card-shadow, 0 16px 40px rgba(0, 0, 0, 0.16));
    transform: translateY(calc(var(--lc-swipe-deck-depth, 0) * var(--lc-swipe-deck-peek-offset, 12px)))
      scale(calc(1 - var(--lc-swipe-deck-depth, 0) * var(--lc-swipe-deck-peek-scale, 0.04)));
    transform-origin: 50% 100%;
    transition: transform var(--lc-swipe-deck-spring-duration, 220ms) ease, opacity var(--lc-swipe-deck-throw-duration, 320ms) ease;
    touch-action: none;
    will-change: transform;
    cursor: grab;
  }

  &[dragging] [part~=lc-swipe-deck-card][data-depth="0"] {
    transition: none;
    cursor: grabbing;
  }

  &[data-throw] [part~=lc-swipe-deck-card][data-depth="0"] {
    transition: transform var(--lc-swipe-deck-throw-duration, 320ms) cubic-bezier(0.2, 0.7, 0.3, 1),
      opacity var(--lc-swipe-deck-throw-duration, 320ms) ease;
  }

  & [part~=lc-swipe-deck-tint] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 80ms linear;
  }

  & [part~=lc-swipe-deck-tint][data-tint="save"] {
    background: var(--lc-swipe-deck-tint-save, rgba(249, 115, 22, 0.35));
  }

  & [part~=lc-swipe-deck-tint][data-tint="skip"] {
    background: var(--lc-swipe-deck-tint-skip, rgba(20, 26, 33, 0.35));
  }

  &[data-dir="right"] [part~=lc-swipe-deck-tint][data-tint="save"],
  &[data-dir="left"] [part~=lc-swipe-deck-tint][data-tint="skip"] {
    opacity: var(--lc-swipe-deck-p, 0);
  }

  & > [part~=lc-swipe-deck-footer] {
    flex: 0 0 auto;
  }

  & > [part~=lc-swipe-deck-actions] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lc-swipe-deck-action-gap, 1.5rem);
  }

  & [part~=lc-swipe-deck-action] {
    display: grid;
    place-items: center;
    width: var(--lc-swipe-deck-action-size, 3.25rem);
    height: var(--lc-swipe-deck-action-size, 3.25rem);
    border-radius: 9999px;
    border: 1px solid var(--lc-swipe-deck-action-border-color, var(--border-control, rgba(0, 0, 0, 0.16)));
    background: var(--lc-swipe-deck-action-background, var(--color-surface, #fff));
    box-shadow: var(--lc-swipe-deck-action-shadow, var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08)));
    cursor: pointer;
    font: inherit;
    padding: 0;
  }

  & [part~=lc-swipe-deck-skip] {
    color: var(--lc-swipe-deck-skip-color, var(--text-muted, #6b7280));
  }

  & [part~=lc-swipe-deck-save] {
    color: var(--lc-swipe-deck-save-color, var(--color-secondary, #f97316));
  }

  & [part~=lc-swipe-deck-counter] {
    min-width: 4rem;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--lc-swipe-deck-counter-color, var(--text-muted, #6b7280));
  }

  & > [part~=lc-swipe-deck-empty] {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
  }

  @media (prefers-reduced-motion: reduce) {
    & [part~=lc-swipe-deck-card] {
      transition: none;
    }
  }
}


:where(.lc-switch, lc-switch) {
  display: inline-block;

  .switch-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;

    &:hover .switch-control:not(:has(.switch-native:disabled)) {
      opacity: 0.9;
    }

    &:has(.switch-native:disabled) {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  .switch-label {
    font-size: 0.875rem;
    color: var(--text-color);
  }

  .switch-control {
    position: relative;
    width: 2.5rem;
    height: 1.5rem;
    background: var(--lc-switch-track-background, var(--color-surface-lighter, #d5d0c4));
    border-radius: var(--radius-full, 9999px);
    transition: background-color 0.2s ease;
    cursor: pointer;
    padding: 0.125rem;

    &:has(.switch-native:disabled) {
      cursor: not-allowed;
    }

    &:has(.switch-native:focus-visible) {
      outline: 2px solid var(--color-focus, var(--color-primary, #fabd2f));
      outline-offset: 2px;
    }
  }

  .switch-thumb {
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--lc-switch-thumb-background, #ffffff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-full, 9999px);
    transition: transform 0.1s ease;
    top: 0.125rem;
    left: 0.125rem;
  }

  .switch-native {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;

    &:focus-visible ~ .switch-control {
      outline: 2px solid var(--color-focus, var(--color-primary, #fabd2f));
      outline-offset: 2px;
    }
  }

  &:has(.switch-native:checked) .switch-thumb {
    transform: translateX(1rem);
  }

  &[disabled] {
    .switch-wrapper {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .switch-control {
      cursor: not-allowed;
    }
  }

  &[size="xs"] {
    .switch-control {
      width: 1.75rem;
      height: 1rem;
      padding: 0.0625rem;
    }

    .switch-thumb {
      width: 0.875rem;
      height: 0.875rem;
      top: 0.0625rem;
      left: 0.0625rem;
    }

    &:has(.switch-native:checked) .switch-thumb {
      transform: translateX(0.75rem);
    }
  }

  &[size="sm"] {
    .switch-control {
      width: 2rem;
      height: 1.25rem;
      padding: 0.125rem;
    }

    .switch-thumb {
      width: 1rem;
      height: 1rem;
      top: 0.125rem;
      left: 0.125rem;
    }

    &:has(.switch-native:checked) .switch-thumb {
      transform: translateX(0.75rem);
    }
  }

  &[size="lg"] {
    .switch-control {
      width: 3rem;
      height: 1.75rem;
      padding: 0.125rem;
    }

    .switch-thumb {
      width: 1.5rem;
      height: 1.5rem;
      top: 0.125rem;
      left: 0.125rem;
    }

    &:has(.switch-native:checked) .switch-thumb {
      transform: translateX(1.25rem);
    }
  }

  &[size="xl"] {
    .switch-control {
      width: 3.5rem;
      height: 2rem;
      padding: 0.125rem;
    }

    .switch-thumb {
      width: 1.75rem;
      height: 1.75rem;
      top: 0.125rem;
      left: 0.125rem;
    }

    &:has(.switch-native:checked) .switch-thumb {
      transform: translateX(1.5rem);
    }
  }

  &[variant="primary"]:has(.switch-native:checked) .switch-control {
    background: var(--lc-switch-checked-track-background, var(--color-primary, #fabd2f));
  }

  &[variant="secondary"]:has(.switch-native:checked) .switch-control {
    background: var(--lc-switch-checked-track-background, var(--color-secondary, #83a598));
  }

  &[variant="success"]:has(.switch-native:checked) .switch-control {
    background: var(--lc-switch-checked-track-background, var(--color-success, #b8bb26));
  }

  &[variant="warning"]:has(.switch-native:checked) .switch-control {
    background: var(--lc-switch-checked-track-background, var(--color-warning, #fe8019));
  }

  &[variant="error"]:has(.switch-native:checked) .switch-control {
    background: var(--color-danger, #fb4934);
  }
}


:where(.lc-table, lc-table) {
  display: block;
  width: 100%;

  --_lc-table-pad-y: var(--lc-table-cell-padding-y, var(--spacing-sm, 0.5rem));
  --_lc-table-pad-x: var(--lc-table-cell-padding-x, var(--spacing-md, 0.75rem));
  --_lc-table-line: var(--lc-table-border-color, color-mix(in srgb, var(--text-color, #1a1a1a) 10%, transparent));
  --_lc-table-line-width: var(--lc-table-border-width, 1px);

  .lc-table-scroll {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--lc-table-border-radius, var(--radius-box, var(--radius-md, 0.5rem)));
    background: var(--lc-table-row-background, var(--color-surface, #ffffff));
    box-shadow: var(--lc-table-shadow, none);
  }

  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--lc-table-row-background, var(--color-surface, #ffffff));
    color: var(--lc-table-cell-color, var(--text-color, #4b5563));
  }

  thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--lc-table-header-background, var(--color-surface, #ffffff));
  }

  th {
    padding: var(--lc-table-cell-padding, var(--_lc-table-pad-y) var(--_lc-table-pad-x));
    text-align: left;
    font-weight: var(--lc-table-header-font-weight, var(--font-semibold, 600));
    font-size: var(--lc-table-header-font-size, var(--text-xs, 0.75rem));
    text-transform: var(--lc-table-header-text-transform, uppercase);
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(--lc-table-header-color, var(--text-muted, #6b7280));
    background-color: var(--lc-table-header-background, var(--color-surface, #ffffff));
    border-bottom: var(--_lc-table-line-width) solid var(--_lc-table-line);
  }

  th[align="right"], td[align="right"] { text-align: right; }
  th[align="center"], td[align="center"] { text-align: center; }

  th[aria-sort] { cursor: pointer; user-select: none; }

  th .lc-table-sort {
    margin-left: var(--spacing-xs, 0.25rem);
    opacity: 0.3;
    transition: opacity 0.15s ease, transform 0.15s ease;
    vertical-align: middle;
  }
  th[aria-sort="ascending"] .lc-table-sort,
  th[aria-sort="descending"] .lc-table-sort { opacity: 0.85; }
  th[aria-sort="descending"] .lc-table-sort { transform: rotate(180deg); }

  tbody tr {
    background-color: var(--lc-table-row-background, var(--color-surface, #ffffff));
    transition: background-color 0.12s ease;
  }

  tbody tr:hover {
    background-color: var(--lc-table-row-hover-background, var(--color-surface-light, #f3f4f6));
  }

  tbody tr.clickable { cursor: pointer; }

  tbody tr.is-selected {
    background-color: var(--lc-table-row-selected-background, var(--color-primary-surface, var(--color-surface-light, #eef2ff)));
    box-shadow: inset 3px 0 0 var(--lc-table-row-selected-edge, var(--color-primary, #4f46e5));
  }

  td {
    padding: var(--lc-table-cell-padding, var(--_lc-table-pad-y) var(--_lc-table-pad-x));
    font-size: var(--lc-table-cell-font-size, var(--text-sm, 0.875rem));
    color: var(--lc-table-cell-color, var(--text-color, #4b5563));
    vertical-align: middle;
    border-bottom: var(--_lc-table-line-width) solid var(--_lc-table-line);
  }

  tbody tr:last-child td { border-bottom: none; }

  &[zebra] tbody tr:nth-child(even) {
    background-color: var(--lc-table-zebra-background, color-mix(in srgb, var(--text-color, #000) 3%, transparent));
  }

  &[compact],
  &[density="compact"] {
    --_lc-table-pad-y: var(--lc-table-cell-padding-y, var(--spacing-xs, 0.3rem));
    --_lc-table-pad-x: var(--lc-table-cell-padding-x, var(--spacing-sm, 0.5rem));

    & td { font-size: var(--lc-table-cell-font-size, var(--text-xs, 0.8125rem)); }
  }

  &[density="comfortable"] {
    --_lc-table-pad-y: var(--lc-table-cell-padding-y, var(--spacing-md, 0.85rem));
    --_lc-table-pad-x: var(--lc-table-cell-padding-x, var(--spacing-lg, 1rem));
  }

  .lc-table-empty {
    padding: var(--lc-table-empty-padding, var(--spacing-2xl, 2rem));
    text-align: center;
    color: var(--lc-table-empty-color, var(--text-muted, #6b7280));
    font-size: var(--text-sm, 0.875rem);
  }

  .lc-table-link {
    display: inline-block;
    max-width: var(--lc-table-link-max-width, 22ch);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    color: var(--lc-table-link-color, var(--color-primary, #2563eb));
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .lc-table-link:hover {
    color: var(--lc-table-link-hover-color, var(--color-primary-dark, #1d4ed8));
  }
}


:where(.lc-tabs, lc-tabs) {
  display: flex;
  flex-direction: column;
  width: 100%;

  border: var(--lc-tabs-border-width, 0) solid var(--lc-tabs-border-color, transparent);
  border-radius: var(--lc-tabs-border-radius, 0);
  box-shadow: var(--lc-tabs-shadow, none);
  background: var(--lc-tabs-background, transparent);
  overflow: hidden;

  & [part~=lc-tabs-tab-list] {
    display: flex;
    flex-direction: row;
    background: var(--lc-tabs-list-background, transparent);
    border-bottom: var(--border-width, 1px) solid
      var(--lc-tabs-list-border-color, var(--color-surface-dark));
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
  }

  [slot="tab"] {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    gap: var(--lc-tabs-gap, var(--spacing-xs, 0.25rem));
    padding: var(
      --lc-tabs-padding,
      var(--spacing-md, 0.75rem) var(--spacing-lg, 1rem)
    );
    font-family: inherit;
    font-size: var(--lc-tabs-font-size, var(--text-sm, 0.875rem));
    font-weight: var(--lc-tabs-font-weight, var(--control-weight, var(--font-medium, 500)));
    text-transform: var(--lc-tabs-text-transform, var(--control-transform, none));
    letter-spacing: var(--lc-tabs-letter-spacing, var(--control-tracking, normal));
    color: var(--lc-tabs-color, var(--text-muted));
    background: var(--lc-tabs-background, transparent);
    border: none;
    border-bottom: var(--lc-tabs-border-width, 2px) solid transparent;
    outline: none;
    transition:
      color 0.2s ease,
      background-color 0.2s ease,
      border-color 0.2s ease;

    &:hover {
      color: var(--lc-tabs-hover-color, var(--color-primary-light));
      background: var(--lc-tabs-hover-background, var(--color-surface-dark));
    }

    &:focus-visible {
      background: var(--lc-tabs-hover-background, var(--color-surface-dark));
    }

    &[active] {
      color: var(--lc-tabs-active-color, var(--text-color));
      background: var(--lc-tabs-active-background, transparent);
      border-bottom-color: var(--lc-tabs-active-border-color, var(--color-primary));
    }

    &[disabled] {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
  }

  &[variant="pills"] {
    & [part~=lc-tabs-tab-list] {
      gap: 4px;
      width: fit-content;
      max-width: 100%;
      padding: 4px;
      border-bottom: 0;
      border-radius: var(--lc-tabs-list-border-radius, var(--radius-field, var(--radius-md, 0.5rem)));
      background: var(--lc-tabs-list-background, var(--color-surface-dark));
    }

    [slot="tab"] {
      padding: var(--lc-tabs-padding, 6px var(--spacing-md, 0.75rem));
      border-bottom: 0;
      border-radius: var(--lc-tabs-item-border-radius, var(--radius-selector, var(--radius-sm, 0.375rem)));

      &:hover { background: transparent; color: var(--text-color); }
    }

    [slot="tab"][active] {
      color: var(--lc-tabs-active-color, var(--text-color));
      background: var(--lc-tabs-active-background, var(--color-surface));
      box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));
    }
  }

  [slot="panel"] {
    min-height: 0;
    overflow-y: auto;
    padding: var(--lc-tabs-panel-padding, var(--spacing-lg, 1rem));
    flex-grow: 1;
    animation: fadeIn 0.2s ease-in-out;

    &[hide] {
      display: none;
    }
  }

  &[fullWidth] [slot="tab"] {
    flex: 1;
  }

  &[vertical] {
    flex-direction: row;
    height: 100%;

    & [part~=lc-tabs-tab-list] {
      flex-direction: column;
      border-bottom: none;
      border-right: var(--border-width, 1px) solid
        var(--lc-tabs-list-border-color, var(--color-surface-dark));
      min-width: 150px;
    }

    [slot="tab"] {
      justify-content: flex-start;
      border-bottom: none;
      border-right: var(--lc-tabs-border-width, 2px) solid transparent;

      &[active] {
        border-color: transparent;
        border-right-color: var(--lc-tabs-active-border-color, var(--color-primary));
      }
    }
  }
}

@media (min-width: 1024px) {
  :where(.lc-tabs, lc-tabs)[vertical][responsive] {
    height: auto;
    overflow: visible;
  }

  :where(.lc-tabs, lc-tabs)[vertical][responsive] [part~=lc-tabs-tab-list] {
    align-self: flex-start;
    position: sticky;
    top: var(--lc-tabs-sticky-top, 5rem);
  }
}

@media (max-width: 1023px) {
  :where(.lc-tabs, lc-tabs)[vertical][responsive] {
    flex-direction: column;
    height: auto;
  }

  :where(.lc-tabs, lc-tabs)[vertical][responsive] [part~=lc-tabs-tab-list] {
    flex-direction: row;
    border-right: none;
    border-bottom: var(--border-width, 1px) solid var(--lc-tabs-list-border-color, var(--color-surface-dark));
    min-width: unset;
    overflow-x: auto;
    scrollbar-width: none;
  }

  :where(.lc-tabs, lc-tabs)[vertical][responsive] [slot="tab"] {
    justify-content: center;
    border-right: none;
    border-bottom: var(--lc-tabs-border-width, 2px) solid transparent;

    &[active] {
      border-color: transparent;
      border-bottom-color: var(--lc-tabs-active-border-color, var(--color-primary));
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


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

  & [part~=lc-tag-container] {
    display: inline-flex;
    align-items: center;
    gap: var(--lc-tag-gap, 0.375rem);
    padding: var(--lc-tag-padding-y, 0.25rem) var(--lc-tag-padding-x, 0.625rem);
    background-color: var(--lc-tag-background, var(--color-surface-darker));
    color: var(--lc-tag-color, var(--text-color));
    font-size: var(--lc-tag-font-size, var(--text-xs, 0.75rem));
    font-weight: var(--lc-tag-font-weight, var(--control-weight, var(--font-medium, 500)));
    line-height: 1.5;
    border: var(--lc-tag-border-width, 1px) solid var(--lc-tag-border-color, transparent);
    border-radius: var(--lc-tag-border-radius, var(--radius-selector, var(--radius-md)));
    box-shadow: var(--lc-tag-shadow, none);
    backdrop-filter: var(--lc-tag-backdrop, none);
    -webkit-backdrop-filter: var(--lc-tag-backdrop, 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(--lc-tag-rounded-border-radius, 9999px);
    }

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

  &[clickable]:not([disabled]) [part~=lc-tag-container] {
    cursor: pointer;
  }
  &[selected] [part~=lc-tag-container] {
    background-color: var(--lc-tag-selected-background, var(--color-primary));
    color: var(--lc-tag-selected-color, var(--lc-button-primary-color, #fff));
    border-color: var(--lc-tag-selected-border-color, var(--color-primary));
  }

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

  & [part~=lc-tag-label] {
    flex: 1;
  }

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

  & [part~=lc-tag-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"] {
    --lc-tag-font-size: var(--text-xs, 0.625rem);
    --lc-tag-padding-y: 0.0625rem;
    --lc-tag-padding-x: 0.375rem;
    --lc-tag-gap: 0.1875rem;
  }

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

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

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

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

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

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

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

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

  &[outlined] [part~=lc-tag-container] {
    background-color: transparent;
  }

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

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

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

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

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

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

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


:where(.lc-testimonial-section, lc-testimonial-section) {
  display: block;

  .testimonial-eyebrow {
    display: inline-block;
    background: var(--color-surface-inverse);
    color: var(--color-surface);
    font-size: var(--text-eyebrow);
    font-weight: var(--font-bold);
    padding: 6px var(--spacing-lg);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--spacing-xl);
  }

  .testimonial-headline {
    font-size: var(--text-section);
    font-weight: var(--font-black);
    letter-spacing: -0.03em;
    color: var(--text-color);
    margin-bottom: var(--spacing-lg);
  }

  .testimonial-subheadline {
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto;
  }

  .testimonial-card {
    background: var(--color-surface);
    border-radius: var(--radius-hero);
    border: 1px solid
      color-mix(in srgb, var(--text-color) 8%, transparent);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-card);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: var(--shadow-card-hover);
      transform: translateY(-4px);
    }
  }

  .testimonial-star {
    fill: var(--color-warning);
    color: var(--color-warning);
  }

  .testimonial-quote {
    font-size: var(--text-body);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: var(--spacing-xl);
  }

  .testimonial-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    object-fit: cover;
    background: color-mix(
      in srgb,
      var(--text-color) 6%,
      transparent
    );
  }

  .testimonial-author {
    font-size: 14px;
    font-weight: var(--font-bold);
    color: var(--text-color);
  }

  .testimonial-role {
    font-size: 12px;
    font-weight: var(--font-medium);
    color: var(--text-muted);
  }
}


/*
 * Every declaration sits on the host selector, which `:where()` holds at zero
 * specificity; the attribute rules below only set variables. So a utility class
 * on the call site always wins, and the 45 headings that carry one keep looking
 * exactly as they did.
 */
:where(.lc-text, lc-text) {
  display: var(--lc-text-display, inline);
  font-size: var(--lc-text-size, inherit);
  font-weight: var(--lc-text-font-weight, inherit);
  font-family: var(--lc-text-font-family, inherit);
  line-height: var(--lc-text-line-height, inherit);
  letter-spacing: var(--lc-text-tracking, inherit);
  text-transform: var(--lc-text-transform, none);
  text-align: var(--lc-text-align, inherit);
  color: var(--lc-text-color, inherit);

  &[size="xs"] { --lc-text-size: var(--text-xs, 0.75rem); }
  &[size="sm"] { --lc-text-size: var(--text-sm, 0.875rem); }
  &[size="base"] { --lc-text-size: var(--text-base, 1rem); }
  &[size="lg"] { --lc-text-size: var(--text-lg, 1.125rem); }
  &[size="xl"] { --lc-text-size: var(--text-xl, 1.25rem); }
  &[size="2xl"] { --lc-text-size: var(--text-2xl, 1.5rem); }
  &[size="3xl"] { --lc-text-size: var(--text-3xl, 1.875rem); }
  &[size="4xl"] { --lc-text-size: var(--text-4xl, 2.25rem); }

  &[weight="normal"] { --lc-text-font-weight: var(--font-normal, 400); }
  &[weight="medium"] { --lc-text-font-weight: var(--font-medium, 500); }
  &[weight="semibold"] { --lc-text-font-weight: var(--font-semibold, 600); }
  &[weight="bold"] { --lc-text-font-weight: var(--font-bold, 700); }
  &[weight="black"] { --lc-text-font-weight: var(--font-black, 800); }

  &[tracking="tight"] { --lc-text-tracking: -0.015em; }
  &[tracking="normal"] { --lc-text-tracking: 0; }
  &[tracking="wide"] { --lc-text-tracking: 0.025em; }
  &[tracking="wider"] { --lc-text-tracking: 0.05em; }
  &[tracking="widest"] { --lc-text-tracking: 0.1em; }

  &[align="left"] { --lc-text-align: left; }
  &[align="center"] { --lc-text-align: center; }
  &[align="right"] { --lc-text-align: right; }

  &[transform="capitalize"] { --lc-text-transform: capitalize; }
  &[transform="uppercase"] { --lc-text-transform: uppercase; }
  &[transform="lowercase"] { --lc-text-transform: lowercase; }
  &[transform="none"] { --lc-text-transform: none; }

  &[muted],
  &[color="muted"] { --lc-text-color: var(--text-muted); }
  &[color="primary"] { --lc-text-color: var(--color-primary); }
  &[color="secondary"] { --lc-text-color: var(--color-secondary); }
  &[color="success"] { --lc-text-color: var(--color-success); }
  &[color="danger"] { --lc-text-color: var(--color-danger); }
  &[color="warning"] { --lc-text-color: var(--color-warning); }
  &[color="info"] { --lc-text-color: var(--color-info); }
  &[color="inverse"] { --lc-text-color: var(--color-inverse); }

  &[mono] { --lc-text-font-family: var(--font-mono, monospace); }

  /* A heading has no element to be, so it takes the block and the type scale. */
  &[level] {
    --lc-text-display: block;
    --lc-text-font-family: var(--font-heading, var(--font-family-base));
    --lc-text-font-weight: var(--font-bold, 700);
    --lc-text-line-height: var(--leading-tight, 1.2);
  }

  &[level="1"] { --lc-text-size: var(--text-4xl, 2.25rem); }
  &[level="2"] { --lc-text-size: var(--text-3xl, 1.875rem); }
  &[level="3"] { --lc-text-size: var(--text-2xl, 1.5rem); }
  &[level="4"] { --lc-text-size: var(--text-xl, 1.25rem); }
  &[level="5"] { --lc-text-size: var(--text-lg, 1.125rem); }
  &[level="6"] { --lc-text-size: var(--text-base, 1rem); }

  /*
   * The section label. Its tracking is the whole look and it is far wider than
   * the `tracking` scale goes, so a theme sets its own through these.
   */
  &[eyebrow] {
    --lc-text-display: block;
    --lc-text-size: var(--lc-text-eyebrow-size, var(--text-xs, 0.75rem));
    --lc-text-font-weight: var(--lc-text-eyebrow-font-weight, var(--font-semibold, 600));
    --lc-text-tracking: var(--lc-text-eyebrow-tracking, 0.1em);
    --lc-text-color: var(--lc-text-eyebrow-color, var(--text-muted));
    --lc-text-transform: uppercase;
  }

  /* Last, so an explicit size or colour beside `eyebrow` still means something. */
  &[eyebrow][size="xs"] { --lc-text-size: var(--text-xs, 0.75rem); }
  &[eyebrow][size="sm"] { --lc-text-size: var(--text-sm, 0.875rem); }
  &[eyebrow][color="danger"] { --lc-text-color: var(--color-danger); }
  &[eyebrow][color="primary"] { --lc-text-color: var(--color-primary); }
}


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

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

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

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

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

    background: var(--lc-textarea-background, var(--lc-input-background, var(--color-surface-light, #ffffff)));
    border: var(--lc-textarea-border-width, var(--lc-input-border-width, var(--border-width, 1px))) solid var(--lc-textarea-border-color, var(--lc-input-border-color, var(--border-color, var(--color-surface, #e5e7eb))));
    border-radius: var(--lc-textarea-border-radius, var(--lc-input-border-radius, var(--radius-field, var(--radius-md, 0.375rem))));
    box-shadow: var(--lc-textarea-shadow, var(--lc-input-shadow, var(--shadow-field, 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(
      --lc-input-transition,
      border-color 0.2s ease,
      background-color 0.2s ease,
      box-shadow 0.15s ease
    );
    font-size: var(--lc-input-font-size, var(--text-sm, 0.9rem));
    font-weight: var(--lc-input-font-weight, var(--font-normal, 400));
    line-height: var(--lc-textarea-line-height, var(--leading-normal, 1.5));
    font-family: inherit;
    color: var(--lc-textarea-color, var(--lc-input-color, var(--text-color, inherit)));
    outline: none;
    resize: var(--lc-textarea-resize, vertical);

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

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

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

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

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

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

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

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

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

  &[size="xl"] {
    --lc-input-padding-y: 0.75rem;
    --lc-input-padding-x: 1.25rem;
    --lc-input-font-size: var(--text-xl, 1.25rem);
    --lc-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(--lc-input-required-color, var(--color-warning));
  }

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

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

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

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

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

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

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

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


:where(.lc-tile, lc-tile) {
  display: flex;
  flex-direction: column;
  gap: var(--lc-tile-gap, 0.5rem);
  width: var(--lc-tile-width, 8rem);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  color: var(--lc-tile-color, var(--text-color, inherit));
  font-family: inherit;
  outline: none;

  &[size="sm"] {
    --lc-tile-width: 5.5rem;
    --lc-tile-label-size: var(--text-xs, 0.7rem);
  }

  &[size="lg"] {
    --lc-tile-width: 12rem;
  }

  &[size="fill"] {
    --lc-tile-width: 100%;
  }

  & [part~=lc-tile-media] {
    position: relative;
    width: 100%;
    aspect-ratio: var(--lc-tile-aspect, 1 / 1);
    border-radius: var(--lc-tile-border-radius, var(--radius-md, 0.5rem));
    overflow: hidden;
    background: var(--lc-tile-media-background, var(--color-surface));
    border: var(--lc-tile-border-width, 1px) solid var(--lc-tile-border-color, var(--border-color, var(--color-surface)));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  &[aspect="auto"] [part~=lc-tile-media] {
    aspect-ratio: auto;
    min-height: 3rem;
  }

  &[selected] [part~=lc-tile-media] {
    border-color: var(--lc-tile-selected-color, var(--color-primary));
    box-shadow: 0 0 0 1px var(--lc-tile-selected-color, var(--color-primary));
  }

  &[interactive]:not([disabled]) {
    cursor: pointer;
  }

  &[interactive]:not([disabled]) [part~=lc-tile-media]:hover {
    border-color: var(--lc-tile-hover-border-color, var(--color-surface-lighter, var(--border-color)));
  }

  &:focus-visible [part~=lc-tile-media] {
    box-shadow: 0 0 0 2px var(--color-focus, var(--color-primary));
  }

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

  & [part~=lc-tile-image] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  & [part~=lc-tile-icon] {
    color: var(--lc-tile-icon-color, var(--text-muted, currentColor));
  }

  & [part~=lc-tile-badge] {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm, 0.25rem);
    background: var(--lc-tile-badge-background, rgba(8, 8, 7, 0.6));
    color: var(--lc-tile-badge-color, #fff);
    font-size: var(--text-xs, 0.7rem);
    font-weight: var(--font-bold, 700);
    letter-spacing: 0.04em;
    line-height: 1.4;
  }

  & [part~=lc-tile-actions] {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    display: flex;
    gap: 0.25rem;
  }

  & [part~=lc-tile-shimmer] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--lc-tile-shimmer, rgba(255, 255, 255, 0.08)), transparent);
    animation: lc-tile-shimmer 1.2s infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    & [part~=lc-tile-shimmer] {
      animation: none;
    }
  }

  & [part~=lc-tile-footer] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
  }

  & [part~=lc-tile-label] {
    font-size: var(--lc-tile-label-size, var(--text-sm, 0.8rem));
    font-weight: var(--lc-tile-label-font-weight, var(--font-semibold, 600));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  & [part~=lc-tile-meta] {
    font-size: var(--lc-tile-meta-size, var(--text-xs, 0.7rem));
    color: var(--lc-tile-meta-color, var(--text-muted));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@keyframes lc-tile-shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}


:where(.lc-title-bar, lc-title-bar) {

  display: block;
  width: 100%;
  user-select: none;

  &[draggable] {
    -webkit-app-region: drag;
  }

  &[variant="unified"] {
    --lc-title-bar-background: transparent;
    --lc-title-bar-border: none;
  }

  &[variant="hidden"],
  &[data-host="native"] {
    display: none;
  }

  &[data-host="frameless"] [part~=lc-title-bar-titlebar] {
    background: var(--lc-title-bar-background, transparent);
    border-bottom: var(--lc-title-bar-border, none);
  }

  &[data-native-controls] [part~=lc-title-bar-titlebar] {
    height: var(--lc-title-bar-height, 38px);
    padding-left: var(--lc-title-bar-inset, 78px);
  }

  &[data-native-controls][data-fullscreen] [part~=lc-title-bar-titlebar] {
    padding-left: var(--spacing-xs);
  }

  &[data-inactive] [part~=lc-title-bar-title] {
    opacity: 0.6;
  }

  & [part~=lc-title-bar-titlebar] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    height: var(--lc-title-bar-height, 32px);
    padding: 0 var(--spacing-xs);
    background: var(--lc-title-bar-background, var(--color-surface));
    border-bottom: var(--lc-title-bar-border, 1px solid var(--border-color));
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: var(--text-sm, 0.875rem);

    button {
      -webkit-app-region: no-drag;
    }
  }

  & [part~=lc-title-bar-left] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 0;
    flex-shrink: 0;
  }

  & [part~=lc-title-bar-center] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  & [part~=lc-title-bar-title] {
    color: var(--text-color);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-medium, 500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & [part~=lc-title-bar-right] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 0;
    flex-shrink: 0;
  }

  & [part~=lc-title-bar-controls] {
    display: flex;
    align-items: center;
    gap: var(--lc-title-bar-control-gap, 2px);
    margin-left: var(--spacing-xs);
  }

  & [part~=lc-title-bar-minimize],
  & [part~=lc-title-bar-maximize],
  & [part~=lc-title-bar-close] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--lc-title-bar-control-size, 28px);
    height: var(--lc-title-bar-control-size, 28px);
    margin: 0;
    padding: 0;
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.15s ease;

    &:hover {
      background: var(--color-surface-light);
    }

    &:active {
      background: var(--color-surface-dark);
    }

    lc-icon {
      opacity: 0.7;
    }

    &:hover lc-icon {
      opacity: 1;
    }
  }

  & [part~=lc-title-bar-close] {
    &:hover {
      background: #e81123;
      color: white;
    }

    &:active {
      background: #c50f1f;
    }
  }

  [slot="left"] button,
  [slot="center"] button,
  [slot="right"] button,
  [slot="left"] [role="button"],
  [slot="center"] [role="button"],
  [slot="right"] [role="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: transparent;
    border: none;
    color: var(--text-color);
    font-size: var(--text-sm, 0.875rem);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease;

    &:hover {
      background: var(--color-surface-light);
    }

    &:active {
      background: var(--color-surface-dark);
    }
  }

  [slot="left"] img,
  [slot="center"] img,
  [slot="right"] img {
    flex-shrink: 0;
  }

  &[data-platform="mac"] {
    & [part~=lc-title-bar-titlebar] {
      padding-left: 80px;
    }

    & [part~=lc-title-bar-controls] {
      order: -1;
      margin-left: 0;
      margin-right: auto;
      gap: 8px;
    }

    & [part~=lc-title-bar-close],
    & [part~=lc-title-bar-minimize],
    & [part~=lc-title-bar-maximize] {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      padding: 0;

      svg {
        display: none;
      }
    }

    & [part~=lc-title-bar-close] {
      background: #ff5f57;
      border: 1px solid #e0443e;

      &:hover {
        background: #ff5f57;
        filter: brightness(1.1);
      }
    }

    & [part~=lc-title-bar-minimize] {
      background: #ffbd2e;
      border: 1px solid #dea123;

      &:hover {
        background: #ffbd2e;
        filter: brightness(1.1);
      }
    }

    & [part~=lc-title-bar-maximize] {
      background: #28ca42;
      border: 1px solid #24a73e;

      &:hover {
        background: #28ca42;
        filter: brightness(1.1);
      }
    }
  }
}

@media (max-width: 767px) {
  :where(.lc-title-bar, lc-title-bar):not([data-host="frameless"]) [part~=lc-title-bar-titlebar] {
    display: none;
  }
}


:where(.lc-toast, lc-toast) {
  & [part~=lc-toast-container] {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--lc-toast-gap, 0.75rem);
    padding: var(--lc-toast-container-padding, 1rem);
    pointer-events: none;
  }

  &[position="top-left"] [part~=lc-toast-container] {
    top: var(--lc-toast-top, 0);
    left: 0;
  }

  &[position="top-center"] [part~=lc-toast-container] {
    top: var(--lc-toast-top, 0);
    left: 50%;
    transform: translateX(-50%);
  }

  &[position="top-right"] [part~=lc-toast-container] {
    top: var(--lc-toast-top, 0);
    right: 0;
  }

  &[position="bottom-left"] [part~=lc-toast-container] {
    bottom: var(--lc-toast-bottom, 0);
    left: 0;
  }

  &[position="bottom-center"] [part~=lc-toast-container] {
    bottom: var(--lc-toast-bottom, 0);
    left: 50%;
    transform: translateX(-50%);
  }

  &[position="bottom-right"] [part~=lc-toast-container] {
    bottom: var(--lc-toast-bottom, 0);
    right: 0;
  }

  & [part~=lc-toast-toast] {
    display: flex;
    align-items: flex-start;
    gap: var(--lc-toast-content-gap, 0.75rem);
    min-width: min(var(--lc-toast-min-width, 20rem), calc(100vw - 2rem));
    max-width: min(var(--lc-toast-max-width, 28rem), calc(100vw - 2rem));
    box-sizing: border-box;
    padding: var(--lc-toast-padding, 1rem);
    background-color: var(--lc-toast-background, var(--color-surface));
    border: var(--border-width, 1px) solid var(--lc-toast-border-color, var(--color-primary));
    border-radius: var(--lc-toast-border-radius, var(--radius-box, var(--radius-lg, 0.5rem)));
    box-shadow: var(--lc-toast-shadow, var(--shadow-box, var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15))));
    pointer-events: auto;
    animation: toastSlideIn 0.3s ease;
  }

  & [part~=lc-toast-body] {
    display: flex;
    flex: 1;
    align-items: flex-start;
    gap: var(--lc-toast-content-gap, 0.75rem);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
  }

  & [part~=lc-toast-tap] {
    cursor: pointer;
  }

  & [part~=lc-toast-icon] {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--lc-toast-icon-color, var(--color-secondary));
  }

  & [part~=lc-toast-content] {
    flex: 1;
    min-width: 0;
  }

  & [part~=lc-toast-title] {
    font-size: var(--lc-toast-title-font-size, var(--text-sm, 0.875rem));
    font-weight: var(--lc-toast-title-font-weight, var(--font-semibold, 600));
    color: var(--lc-toast-title-color, var(--color-primary));
    margin-bottom: 0.25rem;
  }

  & [part~=lc-toast-message] {
    font-size: var(--lc-toast-message-font-size, var(--text-sm, 0.875rem));
    color: var(--lc-toast-message-color, var(--color-secondary));
    line-height: 1.5;
  }

  & [part~=lc-toast-close] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--lc-toast-close-color, var(--text-muted));
    cursor: pointer;
    border-radius: var(--radius-sm, 0.25rem);
    transition:
      background-color 0.2s ease,
      color 0.2s ease;

    &:hover {
      background-color: var(--lc-toast-close-hover-background, var(--color-hover));
      color: var(--lc-toast-close-hover-color, var(--color-primary));
    }
  }

  & [part~=lc-toast-toast].toast-success {
    --lc-toast-border-color: var(--color-success);
    --lc-toast-icon-color: var(--color-success);
    border-left-width: 4px;
  }

  & [part~=lc-toast-toast].toast-warning {
    --lc-toast-border-color: var(--color-warning);
    --lc-toast-icon-color: var(--color-warning);
    border-left-width: 4px;
  }

  & [part~=lc-toast-toast].toast-error {
    --lc-toast-border-color: var(--color-danger);
    --lc-toast-icon-color: var(--color-danger);
    border-left-width: 4px;
  }

  & [part~=lc-toast-toast].toast-info {
    --lc-toast-border-color: var(--color-primary);
    --lc-toast-icon-color: var(--color-primary);
    border-left-width: 4px;
  }
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(-1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


:where(.lc-toc, lc-toc) {
  display: block;
  font-size: var(--lc-toc-font-size, var(--text-caption, 0.8125rem));

  .toc-title {
    display: block;
    margin-bottom: var(--spacing-sm, 0.5rem);
    font-size: var(--text-eyebrow, 0.6875rem);
    font-weight: var(--font-bold, 700);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lc-toc-title-color, var(--text-muted));
  }

  .toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: var(--border-width, 1px) solid var(--lc-toc-border-color, var(--border-color));
  }

  .toc-item {
    margin: 0;
  }

  .toc-link {
    display: block;
    margin-left: calc(-1 * var(--border-width, 1px));
    padding: var(--spacing-xs, 0.25rem) 0 var(--spacing-xs, 0.25rem) var(--lc-toc-indent, 0.75rem);
    border-left: 2px solid transparent;
    color: var(--lc-toc-color, var(--text-muted));
    font-weight: var(--font-medium, 500);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;

    &:hover {
      color: var(--lc-toc-hover-color, var(--text-color));
    }

    &[aria-current] {
      border-left-color: var(--lc-toc-active-border-color, var(--color-primary));
      color: var(--lc-toc-active-color, var(--text-color));
      font-weight: var(--font-bold, 700);
    }
  }

  .toc-item[data-level="2"] .toc-link {
    padding-left: calc(var(--lc-toc-indent, 0.75rem) * 2);
  }

  .toc-item[data-level="3"] .toc-link {
    padding-left: calc(var(--lc-toc-indent, 0.75rem) * 3);
  }
}


:where(.lc-toolbar, lc-toolbar) {
  display: flex;
  align-items: center;
  gap: var(--lc-toolbar-gap, 0.125rem);
  padding: var(--lc-toolbar-padding, 0.25rem 0.5rem);
  min-height: var(--lc-toolbar-height, 2.5rem);
  background: var(--lc-toolbar-background, var(--color-surface-dark));
  border-bottom: var(--lc-toolbar-border-width, 1px) solid var(--lc-toolbar-border-color, var(--border-color, var(--color-surface)));
  font-family: inherit;
  box-sizing: border-box;
  --lc-button-height: var(--lc-toolbar-control-height, 2rem);
  --lc-button-padding-x: var(--lc-toolbar-control-padding-x, 0.6rem);
  --lc-button-font-size: var(--lc-toolbar-control-font-size, var(--text-sm, 0.8rem));
  --lc-button-border-width: 0;
  --lc-divider-margin: 0 0.25rem;

  &[size="xs"] {
    --lc-toolbar-height: 2rem;
    --lc-toolbar-control-height: 1.5rem;
    --lc-toolbar-control-padding-x: 0.4rem;
    --lc-toolbar-control-font-size: var(--text-xs, 0.7rem);
  }

  &[size="md"] {
    --lc-toolbar-height: 3rem;
    --lc-toolbar-control-height: 2.5rem;
    --lc-toolbar-control-padding-x: 0.9rem;
    --lc-toolbar-control-font-size: var(--text-base, 0.875rem);
  }

  &[align="center"] {
    justify-content: center;
  }

  &[align="end"] {
    justify-content: flex-end;
  }

  &[align="between"] {
    justify-content: space-between;
  }

  &[vertical] {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    min-width: var(--lc-toolbar-height, 2.5rem);
    padding: var(--lc-toolbar-vertical-padding, 0.5rem 0.25rem);
    border-bottom: 0;
    border-right: var(--lc-toolbar-border-width, 1px) solid var(--lc-toolbar-border-color, var(--border-color, var(--color-surface)));
    --lc-divider-margin: 0.25rem 0;
  }

  &[wrap] {
    flex-wrap: wrap;
  }

  &[scrollable] {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  &[variant="floating"] {
    border: var(--lc-toolbar-border-width, 1px) solid var(--lc-toolbar-border-color, var(--border-color, var(--color-surface)));
    border-radius: var(--lc-toolbar-border-radius, var(--radius-lg, 0.75rem));
    background: var(--lc-toolbar-floating-background, var(--color-surface));
    box-shadow: var(--lc-toolbar-shadow, var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.25)));
    padding: var(--lc-toolbar-padding, 0.25rem);
  }

  &[variant="ghost"] {
    background: transparent;
    border: 0;
    padding: 0;
  }

  > lc-divider {
    align-self: stretch;
    margin: var(--lc-divider-margin);
  }
}


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

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

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

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

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

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

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

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

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

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

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


:where(.lc-tree, lc-tree) {
  display: block;
  background: var(--lc-tree-background, var(--color-surface-darker));
  color: var(--lc-tree-color, var(--text-color));
  user-select: none;
}


:where(.lc-tree-item, lc-tree-item) {
  display: block;

  & [part~=lc-tree-item-item-content] {
    display: flex;
    align-items: center;
    gap: var(--lc-tree-item-gap, 0.5rem);
    padding: var(--lc-tree-item-padding, 0.25rem 0.5rem);
    cursor: pointer;
    border-radius: var(--lc-tree-item-border-radius, var(--radius-selector, 0.25rem));
    transition: background 0.15s ease;

    &:hover {
      background: var(--lc-tree-item-hover-background, var(--color-surface-dark, rgba(255, 255, 255, 0.05)));
    }
  }

  &[active] [part~=lc-tree-item-item-content] {
    background: var(--lc-tree-item-active-background, color-mix(in srgb, var(--color-primary) 20%, transparent));
    color: var(--lc-tree-item-active-color, var(--color-primary));
    margin-left: -1rem;
    padding-left: 1.5rem;
    border-radius: 0;
  }

  & [part~=lc-tree-item-children] {
    padding-left: var(--lc-tree-item-indent, 1rem);
  }

  &:not([expanded]) [part~=lc-tree-item-children] {
    display: none;
  }

  .actions {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
  }

  .label {
    flex: 1;
    min-width: 0;
    font-size: var(--lc-tree-item-font-size, 0.875rem);
  }

  .modified {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lc-tree-item-marker-color, var(--color-primary));
    flex-shrink: 0;
    margin-left: auto;
  }

  lc-icon {
    width: var(--lc-tree-item-icon-size, 16px);
    height: var(--lc-tree-item-icon-size, 16px);
    flex-shrink: 0;
    color: var(--lc-tree-item-icon-color, inherit);
  }

  .glyph {
    width: var(--lc-tree-item-icon-size, 16px);
    text-align: center;
    line-height: 1;
    flex-shrink: 0;
  }

}


:where(.lc-week-hours, lc-week-hours) {
  display: block;
  font-family: inherit;

  .week-hours-label {
    display: block;
    margin-bottom: var(--lc-week-hours-label-gap, 0.5rem);
    font-size: var(--lc-week-hours-label-font-size, var(--text-sm, 0.875rem));
    font-weight: var(--lc-week-hours-label-font-weight, 700);
    color: var(--lc-week-hours-label-color, var(--text-color, inherit));
  }

  .week-hours-days {
    display: flex;
    flex-direction: column;
    border: var(--lc-week-hours-border-width, 1px) solid var(--lc-week-hours-border-color, var(--border-color, rgba(0, 0, 0, 0.1)));
    border-radius: var(--lc-week-hours-border-radius, var(--radius-box, var(--radius-lg, 0.75rem)));
    background: var(--lc-week-hours-background, var(--color-surface, transparent));
    overflow: hidden;
  }

  .week-hours-day {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--lc-week-hours-row-gap, 0.5rem);
    min-height: var(--lc-week-hours-row-height, 3rem);
    padding: var(--lc-week-hours-padding-y, 0.5rem) var(--lc-week-hours-padding-x, 0.875rem);

    & + .week-hours-day {
      border-top: var(--lc-week-hours-border-width, 1px) solid var(--lc-week-hours-border-color, var(--border-color, rgba(0, 0, 0, 0.1)));
    }
  }

  .week-hours-closed {
    font-size: var(--lc-week-hours-font-size, var(--text-sm, 0.875rem));
    font-weight: 600;
    color: var(--lc-week-hours-muted-color, var(--text-muted, inherit));
  }

  .week-hours-times {
    display: flex;
    flex: 1 1 var(--lc-week-hours-times-basis, 16rem);
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--lc-week-hours-times-gap, 0.375rem);
    min-width: 0;
    font-size: var(--lc-week-hours-font-size, var(--text-sm, 0.875rem));
  }

  .week-hours-time {
    flex: 1 1 0;
    min-width: 0;
    max-width: var(--lc-week-hours-time-max-width, 10rem);
    appearance: none;
    margin: 0;
    padding: var(--lc-week-hours-time-padding-y, 0.3125rem) var(--lc-week-hours-time-padding-x, 0.375rem);
    border: var(--lc-week-hours-border-width, 1px) solid var(--lc-week-hours-time-border-color, var(--border-control, var(--border-color, rgba(0, 0, 0, 0.15))));
    border-radius: var(--lc-week-hours-time-border-radius, var(--radius-field, var(--radius-md, 0.5rem)));
    background: var(--lc-week-hours-time-background, transparent);
    color: var(--lc-week-hours-color, var(--text-color, inherit));
    font: inherit;
    font-size: var(--lc-week-hours-font-size, var(--text-sm, 0.875rem));
    font-weight: 600;
    font-variant-numeric: tabular-nums;

    &::-webkit-calendar-picker-indicator {
      margin-inline-start: 0.125rem;
      padding: 0;
    }

    &:focus-visible {
      outline: 2px solid var(--lc-week-hours-focus-color, var(--color-primary, currentColor));
      outline-offset: 1px;
    }

    &:disabled {
      opacity: 0.5;
    }
  }

  .week-hours-to,
  .week-hours-next {
    color: var(--lc-week-hours-muted-color, var(--text-muted, inherit));
    font-weight: 600;
  }

  .week-hours-next {
    flex: 0 0 100%;
    text-align: end;
    font-size: var(--lc-week-hours-next-font-size, 0.75rem);
  }
}


:where(.lc-wizard, lc-wizard) {
  display: block;

  & [part~=lc-wizard-overlay] {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--lc-wizard-overlay-background, rgba(0, 0, 0, 0.6));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
  }

  & [part~=lc-wizard-container] {
    background: var(--color-surface, #1a1a1a);
    border: var(--lc-wizard-border-width, 3px) solid var(--lc-wizard-border-color, var(--border-color, #404040));
    border-radius: var(--lc-wizard-border-radius, var(--radius-xl, 1.5rem));
    width: 100%;
    max-width: 28rem;
    overflow: hidden;
    box-shadow: var(--lc-wizard-shadow, none);
  }

  &:not([modal]) [part~=lc-wizard-container] {
    max-width: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  & [part~=lc-wizard-header] {
    background: var(--color-surface-dark, #141414);
    border-bottom: var(--lc-wizard-border-width, 3px) solid var(--lc-wizard-border-color, var(--border-color, #404040));
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &:not([modal]) [part~=lc-wizard-header] {
    background: transparent;
    border-bottom: 1px solid var(--border-color, #404040);
    padding: 0.75rem 0;
  }

  & [part~=lc-wizard-btn-back] {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-muted, #a3a3a3);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;

    &:hover {
      color: var(--text-color, #fafafa);
    }
  }

  & [part~=lc-wizard-step-counter] {
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--text-muted, #a3a3a3);
  }

  & [part~=lc-wizard-progress] {
    width: 100%;
    height: var(--lc-wizard-progress-height, 0.375rem);
    background: var(--color-surface-light, #222222);
  }

  & [part~=lc-wizard-progress-fill] {
    height: 100%;
    background: var(--lc-wizard-progress-fill, var(--color-primary, #fabd2f));
    transition: width 0.3s ease;
  }

  & [part~=lc-wizard-content] {
    padding: 1.5rem;
  }

  &:not([modal]) [part~=lc-wizard-content] {
    padding: 1.5rem 0;
  }

  & [part~=lc-wizard-footer] {
    padding: 0 1.5rem 1.5rem 1.5rem;
  }

  &:not([modal]) [part~=lc-wizard-footer] {
    padding: 0 0 1.5rem 0;
  }

  & [part~=lc-wizard-btn-next] {
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: var(--color-primary, #fabd2f);
    color: var(--canvas-background, #0a0a0a);
    border: none;
    border-radius: var(--radius-md, 0.75rem);
    font-weight: 900;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: opacity 0.15s ease;

    &:hover {
      opacity: 0.9;
    }

    &:active {
      opacity: 0.8;
    }
  }
}


:where(.showcase-catalogue, showcase-catalogue) {
  display: block;
  container-type: inline-size;

  .catalogue {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xl, 3rem);
  }

  .catalogue-lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-2xl, 2rem);
    align-items: center;
  }

  .catalogue-lead-copy {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl, 1.5rem);

    h1 {
      margin: 0;
      font-size: var(--text-hero, clamp(2.25rem, 5vw, 3.5rem));
      font-weight: var(--font-black, 800);
      letter-spacing: -0.03em;
      line-height: 1.05;
    }

    p {
      margin: 0;
      max-width: 34rem;
      font-size: var(--text-lg, 1.125rem);
      line-height: 1.55;
      color: var(--text-secondary);
    }
  }

  .catalogue-lead-actions {
    flex-wrap: wrap;
  }

  .catalogue-lead-sink {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
  }

  .catalogue-card-preview {
    background-color: var(--canvas-background);
    background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
    background-size: 18px 18px;
  }

  .catalogue-wearing {
    margin: 0;
    padding: 0 var(--spacing-xs, 0.25rem);
    font-size: var(--text-caption, 0.8125rem);
    color: var(--text-muted);

    b {
      color: var(--text-color);
    }
  }

  .catalogue-category {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 0.75rem);
  }

  .catalogue-category-head {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm, 0.5rem);

    h2 {
      margin: 0;
      font-size: var(--text-2xl, 1.5rem);
      font-weight: var(--font-black, 800);
      letter-spacing: -0.02em;
    }

    p {
      margin: 0 0 0 auto;
      font-size: var(--text-sm, 0.875rem);
      color: var(--text-muted);
    }
  }

  .catalogue-count {
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-semibold, 600);
    color: var(--text-muted);
  }

  .catalogue-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-md, 0.75rem);
  }

  .catalogue-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: var(--border-width, 1px) solid var(--border-color);
    border-radius: var(--radius-box, var(--radius-md, 0.375rem));
    background: var(--color-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease;

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

  .catalogue-card-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6.25rem;
    padding: var(--spacing-md, 0.75rem);
    overflow: hidden;
    contain: paint;
  }

  .catalogue-card-scaled {
    display: block;
    flex-shrink: 0;
    pointer-events: none;
  }

  .catalogue-card-chip {
    padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
    border: var(--border-width, 1px) solid var(--border-color);
    border-radius: var(--radius-selector, var(--radius-sm, 0.25rem));
    background: var(--color-surface);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-caption, 0.8125rem);
    color: var(--text-muted);
  }

  .catalogue-card-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm, 0.5rem);
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 0.75rem);
    border-top: var(--border-width, 1px) solid var(--border-color);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-bold, 700);

    span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    code {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: var(--font-mono, ui-monospace, monospace);
      font-size: var(--text-xs, 0.75rem);
      font-weight: var(--font-medium, 500);
      color: var(--text-muted);
    }
  }

  @container (max-width: 900px) {
    .catalogue-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @container (max-width: 600px) {
    .catalogue-lead {
      grid-template-columns: minmax(0, 1fr);
    }

    .catalogue-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catalogue-category-head p {
      display: none;
    }
  }
}


:where(.showcase-component-doc, showcase-component-doc) {
  display: block;

  .component-doc {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xl, 3rem);
  }

  .component-doc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-lg, 1rem);
  }

  .component-doc-title {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);

    h1 {
      margin: 0;
      font-size: var(--text-4xl, 2.5rem);
      font-weight: var(--font-black, 800);
      letter-spacing: -0.025em;
      line-height: 1.1;
    }
  }

  .component-doc-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
    align-self: flex-start;
    padding-left: var(--spacing-sm, 0.5rem);
    border: var(--border-width, 1px) solid var(--border-color);
    border-radius: var(--radius-field, var(--radius-md, 0.375rem));
    background: var(--color-surface);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-caption, 0.8125rem);
  }

  .component-doc-lede {
    margin: calc(-1 * var(--spacing-xl, 1.5rem)) 0 0;
    max-width: 62ch;
    font-size: var(--text-lg, 1.125rem);
    line-height: 1.55;
    color: var(--text-secondary);
  }

  .component-doc-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg, 1rem);

    h2 {
      margin: 0;
      font-size: var(--text-2xl, 1.5rem);
      font-weight: var(--font-black, 800);
      letter-spacing: -0.02em;
    }

    h3 {
      margin: var(--spacing-lg, 1rem) 0 0;
      font-size: var(--text-lg, 1.125rem);
      font-weight: var(--font-bold, 700);
    }

    h2 + p,
    h3 + p {
      margin: calc(-1 * var(--spacing-sm, 0.5rem)) 0 0;
      color: var(--text-secondary);
    }
  }

  .component-doc-example + .component-doc-example {
    margin-top: var(--spacing-sm, 0.5rem);
  }

  .component-doc-playground {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: var(--spacing-lg, 1rem);
    align-items: start;
  }

  .component-doc-playground-props {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
    max-height: 32rem;
    overflow: auto;
  }

  .component-doc-table {
    font-size: var(--text-sm, 0.875rem);

    code {
      font-family: var(--font-mono, ui-monospace, monospace);
      font-size: var(--text-caption, 0.8125rem);
    }
  }

  .component-doc-type {
    color: var(--text-secondary);

    &.is-role {
      color: var(--color-primary);
    }
  }

  .component-doc-count {
    margin-left: var(--spacing-xs, 0.25rem);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-semibold, 600);
    color: var(--text-muted);
  }

  .component-doc-muted {
    color: var(--text-muted);
  }

  .component-doc-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md, 0.75rem);
    padding: var(--spacing-4xl, 5rem) 0;
    color: var(--text-muted);
  }

  @media (max-width: 767px) {
    .component-doc-playground {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}


:where(showcase-preview) {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--color-bg, var(--color-surface, #fff));
  color: var(--text-color, inherit);
}

:where(showcase-preview) .showcase-preview__toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 0.5rem);
  padding: var(--spacing-xs, 0.5rem) var(--spacing-md, 0.75rem);
  border-bottom: 1px solid var(--color-surface-dark, rgba(0, 0, 0, 0.1));
  background: var(--color-surface-lighter, var(--color-surface, #fff));
  flex: 0 0 auto;
}

:where(showcase-preview) .showcase-preview__preset {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 0.375rem);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

:where(showcase-preview) .showcase-preview__preset:hover {
  background: var(--color-surface-dark, rgba(0, 0, 0, 0.05));
  color: var(--text-color, inherit);
}

:where(showcase-preview) .showcase-preview__preset.is-active {
  background: var(--color-primary, #3b82f6);
  color: var(--color-primary-contrast, #fff);
  border-color: var(--color-primary, #3b82f6);
}

:where(showcase-preview) .showcase-preview__width {
  margin-left: auto;
  font-size: 0.7rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-muted, #6b7280);
}

:where(showcase-preview) .showcase-preview__frame {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 0;
  overflow: auto;
  background: var(--color-surface-dark, rgba(0, 0, 0, 0.03));
  padding: 0;
}

:where(showcase-preview) .showcase-preview__stage {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  background: var(--color-bg, var(--color-surface, #fff));
  transform: translateZ(0);
  isolation: isolate;
  transition: width 300ms ease;
  box-shadow: 0 0 0 1px var(--color-surface-dark, rgba(0, 0, 0, 0.08));
}

:where(showcase-preview) .showcase-preview__status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md, 0.75rem);
  flex: 1 1 auto;
  color: var(--text-muted, #6b7280);
}


:where(.showcase-property-editor, showcase-property-editor) {
  display: block;

  .prop-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacing-md, 0.75rem);
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 0.75rem);
    border-top: var(--border-width, 1px) solid var(--color-surface-dark);

    &:first-child { border-top: 0; }

    &.is-wide {
      grid-template-columns: 1fr;
      gap: var(--spacing-xs, 0.25rem);
    }

    &.is-inert { opacity: 0.6; }
  }

  .prop-name {
    display: flex;
    flex-direction: column;
    min-width: 0;

    span {
      font-family: var(--font-mono, ui-monospace, monospace);
      font-size: var(--text-sm, 0.875rem);
      font-weight: var(--font-semibold, 600);
      color: var(--text-color);
      overflow-wrap: anywhere;
    }

    em {
      margin-left: 6px;
      font-style: normal;
      font-family: var(--font-family-base);
      font-size: var(--text-xs, 0.75rem);
      font-weight: var(--font-normal, 400);
      color: var(--color-danger);
    }

    small {
      font-family: var(--font-mono, ui-monospace, monospace);
      font-size: var(--text-xs, 0.75rem);
      color: var(--text-muted);
      overflow-wrap: anywhere;
    }
  }

  .prop-control {
    min-width: 0;
    max-width: 150px;
    justify-self: end;
  }

  .is-wide .prop-control {
    max-width: none;
    justify-self: stretch;
  }

  .prop-note,
  .prop-empty {
    font-size: var(--text-xs, 0.75rem);
    color: var(--text-muted);
  }

  .prop-empty { padding: var(--spacing-md, 0.75rem); margin: 0; }
}


:where(.showcase-sink, showcase-sink) {
  display: block;

  .sink {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-lg, 1rem);
    padding: var(--spacing-xl, 1.5rem);
    border: var(--border-width, 1px) solid var(--border-color);
    border-radius: var(--radius-box, var(--radius-md, 0.375rem));
    background-color: var(--canvas-background);
    background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
    background-size: 18px 18px;
    color: var(--text-color);
  }

  .sink-side {
    justify-content: space-between;
  }

  @media (max-width: 767px) {
    .sink {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}


showcase-theme-editor {
  display: block;
  min-height: 0;
}


: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);
  }
}


:where(template-shell) {
  --docs-header: 3.5rem;
  --docs-nav: 16rem;
  --docs-aside: 13.75rem;
  --docs-measure: 53.75rem;
  --docs-landing: 72rem;
  display: block;
  min-height: 100vh;

  lc-app-shell {
    --lc-app-shell-max-width: 90rem;

    & [part~=lc-app-shell-navbar],
    & [part~=lc-app-shell-header] {
      background: var(--canvas-background);
      border-bottom: var(--border-width, 1px) solid var(--border-color);
    }
  }

  .shell-header {
    display: flex;
    align-items: center;
    flex: 1;
    gap: var(--spacing-md);
    height: var(--docs-header);
    padding: 0 var(--spacing-xl);
  }

  .shell-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-color);
    font-weight: var(--font-black);
    letter-spacing: -0.01em;
  }

  .shell-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: var(--radius-field);
    background: var(--color-primary);
    color: var(--color-inverse);
  }

  .shell-links {
    --lc-nav-item-active-background: var(--color-surface-dark);
    --lc-nav-item-active-color: var(--text-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-left: var(--spacing-lg);
  }

  .shell-spacer {
    flex: 1;
  }

  .shell-skin {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    height: 2.25rem;
    padding: 0 var(--spacing-sm) 0 var(--spacing-md);
    border: var(--border-width, 1px) solid var(--border-color);
    border-radius: var(--radius-field);
    background: var(--color-surface);
    color: var(--text-color);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    white-space: nowrap;

    lc-circle {
      width: 0.625rem;
      height: 0.625rem;
    }

    lc-icon {
      color: var(--text-muted);
    }
  }

  .shell-skin-row {
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .shell-skin-swatches {
    display: inline-flex;
    gap: 2px;
    padding-top: 2px;

    lc-circle {
      width: 0.75rem;
      height: 0.75rem;
    }
  }

  .shell-skin-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;

    b {
      font-size: var(--text-sm);
      font-weight: var(--font-semibold);
    }

    small {
      font-size: var(--text-xs);
      color: var(--text-muted);
      white-space: normal;
    }
  }

  .shell-skin-note {
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: var(--border-width, 1px) solid var(--border-color);
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .shell-nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
  }

  .shell-nav-skin {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-lg);
    border-bottom: var(--border-width, 1px) solid var(--border-color);
  }

  .shell-main {
    padding: var(--spacing-2xl);
  }

  .shell-main-landing {
    max-width: var(--docs-landing);
    margin: 0 auto;
    padding: 0 var(--spacing-2xl);
  }

  .shell-github {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-field);
    color: var(--text-secondary);
  }

  .shell-aside {
    padding: var(--spacing-xl) var(--spacing-lg);
  }

  .docs-page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
  }

  .docs-title {
    margin: 0;
    font-size: var(--text-4xl);
    font-weight: var(--font-black);
    letter-spacing: -0.03em;
    line-height: var(--leading-tight);
  }

  .docs-lede {
    margin: 0;
    max-width: 62ch;
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
  }

  .docs-pager {
    padding-top: var(--spacing-xl);
    border-top: var(--border-width, 1px) solid var(--border-color);
  }

  @media (max-width: 1199px) {
    --docs-nav: 14.5rem;
  }

  @media (max-width: 767px) {
    .shell-header {
      gap: var(--spacing-xs);
      padding: 0 var(--spacing-md) 0 0;
    }

    .shell-links {
      display: none;
    }

    .shell-main {
      padding: var(--spacing-lg);
    }

    .shell-main-landing {
      padding: 0 var(--spacing-lg);
    }
  }
}



*,::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}
.grid{display:grid}
.table{display:table}
.list-item{display:list-item}
.hidden{display:none}
.visible{visibility:visible}
.collapse{visibility:collapse}
.static{position:static}
.fixed{position:fixed}
.absolute{position:absolute}
.relative{position:relative}
.box-border{box-sizing:border-box}
.flex-row{flex-direction:row}
.flex-col{flex-direction:column}
.flex-1{flex:1 1 0%}
.shrink-0{flex-shrink:0}
.flex-shrink-0{flex-shrink:0}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.items-center{align-items:center}
.items-stretch{align-items:stretch}
.overflow-auto{overflow:auto}
.overflow-hidden{overflow:hidden}
.overflow-y-auto{overflow-y:auto}
.overflow-x-hidden{overflow-x:hidden}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-center{text-align:center}
.uppercase{text-transform:uppercase}
.lowercase{text-transform:lowercase}
.capitalize{text-transform:capitalize}
.italic{font-style:italic}
.underline{text-decoration-line:underline}
.line-through{text-decoration-line:line-through}
.align-middle{vertical-align:middle}
.bg-cover{background-size:cover}
.bg-center{background-position:center}
.border-solid{border-style:solid}
.object-cover{object-fit:cover}
.resize{resize:both}
.inset-0{inset:0px}
.top-6{top:1.5rem}
.right-0{right:0px}
.right-3{right:0.75rem}
.bottom-3{bottom:0.75rem}
.left-0{left:0px}
.z-10{z-index:10}
.z-20{z-index:20}
.z-50{z-index:50}
.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.gap-0\.5{gap:0.125rem}
.gap-1{gap:0.25rem}
.gap-1\.5{gap:0.375rem}
.gap-10{gap:2.5rem}
.gap-12{gap:3rem}
.gap-2{gap:0.5rem}
.gap-2\.5{gap:0.625rem}
.gap-24{gap:6rem}
.gap-3{gap:0.75rem}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
.gap-6{gap:1.5rem}
.gap-7{gap:1.75rem}
.gap-px{gap:1px}
.p-1{padding:0.25rem}
.p-1\.5{padding:0.375rem}
.p-2{padding:0.5rem}
.p-3{padding:0.75rem}
.p-4{padding:1rem}
.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}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.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-28{padding-top:7rem;padding-bottom:7rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.pt-12{padding-top:3rem}
.pt-2{padding-top:0.5rem}
.pt-36{padding-top:9rem}
.pt-8{padding-top:2rem}
.pb-1{padding-bottom:0.25rem}
.pb-24{padding-bottom:6rem}
.pb-5{padding-bottom:1.25rem}
.pl-6{padding-left:1.5rem}
.-m-1{margin:-0.25rem}
.m-1{margin:0.25rem}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-16{margin-top:4rem}
.mt-2{margin-top:0.5rem}
.mt-20{margin-top:5rem}
.mt-4{margin-top:1rem}
.mr-2{margin-right:0.5rem}
.mr-6{margin-right:1.5rem}
.mb-1{margin-bottom:0.25rem}
.mb-12{margin-bottom:3rem}
.mb-16{margin-bottom:4rem}
.mb-2{margin-bottom:0.5rem}
.mb-20{margin-bottom:5rem}
.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.ml-1{margin-left:0.25rem}
.ml-6{margin-left:1.5rem}
.ml-auto{margin-left:auto}
.w-10{width:2.5rem}
.w-3{width:0.75rem}
.w-3\.5{width:0.875rem}
.w-4{width:1rem}
.w-5{width:1.25rem}
.w-6{width:1.5rem}
.w-9{width:2.25rem}
.w-\[260px\]{width:260px}
.w-\[360px\]{width:360px}
.w-full{width:100%}
.w-max{width:max-content}
.h-0\.5{height:0.125rem}
.h-10{height:2.5rem}
.h-3{height:0.75rem}
.h-3\.5{height:0.875rem}
.h-4{height:1rem}
.h-5{height:1.25rem}
.h-6{height:1.5rem}
.h-9{height:2.25rem}
.h-full{height:100%}
.min-w-0{min-width:0px}
.min-w-\[120px\]{min-width:120px}
.min-w-\[140px\]{min-width:140px}
.min-w-\[30px\]{min-width:30px}
.min-w-\[60px\]{min-width:60px}
.min-w-\[90px\]{min-width:90px}
.min-h-0{min-height:0px}
.min-h-\[100vh\]{min-height:100vh}
.min-h-screen{min-height:100vh}
.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}
.max-w-6xl{max-width:72rem}
.max-w-\[1040px\]{max-width:1040px}
.max-w-\[480px\]{max-width:480px}
.max-w-\[520px\]{max-width:520px}
.max-w-\[850px\]{max-width:850px}
.max-w-md{max-width:28rem}
.max-h-0{max-height:0px}
.max-h-96{max-height:24rem}
.text-\[10px\]{font-size:10px}
.text-base{font-size:var(--text-base)}
.text-sm{font-size:var(--text-sm)}
.text-xl{font-size:var(--text-xl)}
.text-xs{font-size:var(--text-xs)}
.text-default{color:var(--text-color)}
.text-muted{color:var(--text-muted)}
.text-primary{color:var(--color-primary)}
.text-secondary{color:var(--color-secondary)}
.text-white{color:#fff}
.text-white\/50{color:color-mix(in srgb, #fff 50%, transparent)}
.text-white\/70{color:color-mix(in srgb, #fff 70%, transparent)}
.font-bold{font-weight:var(--font-bold, 700)}
.font-medium{font-weight:var(--font-medium, 500)}
.font-semibold{font-weight:var(--font-semibold, 600)}
.font-heading{font-family:var(--font-heading)}
.bg-black{background-color:#000}
.bg-black\/60{background-color:color-mix(in srgb, #000 60%, transparent)}
.bg-canvas{background-color:var(--canvas-background)}
.bg-primary{background-color:var(--color-primary)}
.bg-surface-light{background-color:var(--color-surface-light)}
.bg-surface-lighter{background-color:var(--color-surface-lighter)}
.bg-white\/15{background-color:color-mix(in srgb, #fff 15%, transparent)}
.hover\:bg-hover:hover{background-color:var(--color-hover)}
.hover\:bg-surface-light:hover{background-color:var(--color-surface-light)}
.hover\:bg-white\/10:hover{background-color:color-mix(in srgb, #fff 10%, transparent)}
.border{border-width:1px}
.border-1{border-width:1px}
.border-dim{border-color:var(--border-color)}
.border-primary{border-color:var(--color-primary)}
.border-surface{border-color:var(--color-surface)}
.border-surface-dark{border-color:var(--color-surface-dark)}
.border-t{border-top-width:1px}
.border-b{border-bottom-width:1px}
.border-l{border-left-width:1px}
.border-l-2{border-left-width:2px}
.rounded{border-radius:0.25rem}
.rounded-2xl{border-radius:1rem}
.rounded-\[20px\]{border-radius:20px}
.rounded-\[24px\]{border-radius:24px}
.rounded-full{border-radius:var(--radius-full)}
.shadow{box-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)}
.shadow-{box-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)}
.shadow-\[0_24px_48px_-12px_rgba\(0\,0\,0\,0\.12\)\]{box-shadow:0 24px 48px -12px rgba(0,0,0,0.12)}
.shadow-\[0_8px_30px_rgba\(0\,0\,0\,0\.06\)\]{box-shadow:0 8px 30px rgba(0,0,0,0.06)}
.ring{box-shadow:0 0 0 3px var(--tw-ring-color, rgb(59 130 246 / 0.5))}
.disabled\:opacity-30:disabled{opacity:0.3}
.opacity-30{opacity:0.3}
.blur-md{filter:blur(12px)}
.backdrop-blur-md{backdrop-filter:blur(12px)}
.transition-transform{transition-property:transform, translate, rotate, scale;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
.ease{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}
.ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}
.group:hover .group-hover\:translate-x-0\.5{--tw-translate-x:0.125rem;translate:var(--tw-translate-x, 0) var(--tw-translate-y, 0)}
.rotate-180{rotate:180deg}
.cursor-pointer{cursor:pointer}
.cursor-text{cursor:text}
@media (min-width: 640px){.sm\:flex-row{flex-direction:row}.sm\:w-auto{width:auto}}
@media (min-width: 768px){.md\:flex{display:flex}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}}
@media (min-width: 1024px){.lg\:flex-row{flex-direction:row}.lg\:flex-row-reverse{flex-direction:row-reverse}.lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.lg\:gap-16{gap:4rem}}