/* Generated by @sig-ui/cli - do not edit */
@layer sigui.reset, sigui.tokens, sigui.base, sigui.variants, sigui.states, sigui.utilities, sigui.overrides;

@layer sigui.reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}

/**
 * SigUI Design System - Generated Tokens
 */

@layer sigui.tokens {

:root {
  /* Brand palette */
  --brand-50: #e7edff;
  --brand-100: #d8dfff;
  --brand-200: #c0cbff;
  --brand-300: #a9b6ff;
  --brand-400: #939fff;
  --brand-500: #7d86ff;
  --brand-600: #686df8;
  --brand-700: #5656df;
  --brand-800: #4036bf;
  --brand-900: #2d0da0;
  --brand-950: #1e007a;

  /* secondary palette */
  --secondary-50: #ffded3;
  --secondary-100: #ffcbbc;
  --secondary-200: #ffae97;
  --secondary-300: #ff8d6f;
  --secondary-400: #ff6c4b;
  --secondary-500: #f45433;
  --secondary-600: #d73813;
  --secondary-700: #bb1200;
  --secondary-800: #8d0000;
  --secondary-900: #580000;
  --secondary-950: #290000;

  /* tertiary palette */
  --tertiary-50: #8cfea2;
  --tertiary-100: #82f398;
  --tertiary-200: #6cde84;
  --tertiary-300: #57ca71;
  --tertiary-400: #40b55e;
  --tertiary-500: #26a14b;
  --tertiary-600: #008933;
  --tertiary-700: #007119;
  --tertiary-800: #005400;
  --tertiary-900: #002f00;
  --tertiary-950: #001c00;

  /* accent palette */
  --accent-50: #ffe299;
  --accent-100: #ffd47f;
  --accent-200: #edc26d;
  --accent-300: #d9ae59;
  --accent-400: #c49b45;
  --accent-500: #b0872f;
  --accent-600: #98700a;
  --accent-700: #805900;
  --accent-800: #614000;
  --accent-900: #382300;
  --accent-950: #1d0e00;

  /* neutral palette */
  --neutral-50: #e1e4f3;
  --neutral-100: #d7dae9;
  --neutral-200: #c3c6d4;
  --neutral-300: #afb2c0;
  --neutral-400: #9b9fac;
  --neutral-500: #888c99;
  --neutral-600: #717482;
  --neutral-700: #5b5e6b;
  --neutral-800: #424450;
  --neutral-900: #262833;
  --neutral-950: #11131c;

  /* success palette */
  --success-50: #9dffb1;
  --success-100: #80fa9b;
  --success-200: #6be588;
  --success-300: #57d277;
  --success-400: #40be64;
  --success-500: #1fa74e;
  --success-600: #008f36;
  --success-700: #00771d;
  --success-800: #005a00;
  --success-900: #003c00;
  --success-950: #002600;

  /* warning palette */
  --warning-50: #ffe9d5;
  --warning-100: #ffd4ad;
  --warning-200: #ffbe81;
  --warning-300: #ffa148;
  --warning-400: #f18d30;
  --warning-500: #db790d;
  --warning-600: #c16100;
  --warning-700: #a34c00;
  --warning-800: #7b3900;
  --warning-900: #582400;
  --warning-950: #401900;

  /* danger palette */
  --danger-50: #ffe6e6;
  --danger-100: #ffd2d3;
  --danger-200: #ffb9bc;
  --danger-300: #ff9aa1;
  --danger-400: #ff7484;
  --danger-500: #fc596d;
  --danger-600: #e34059;
  --danger-700: #c62043;
  --danger-800: #9e0025;
  --danger-900: #6a0015;
  --danger-950: #4a0007;

  /* info palette */
  --info-50: #deedff;
  --info-100: #cfe2ff;
  --info-200: #adceff;
  --info-300: #8dbbff;
  --info-400: #73a7ff;
  --info-500: #4f8dff;
  --info-600: #3574fe;
  --info-700: #1d5be2;
  --info-800: #0340c7;
  --info-900: #00189e;
  --info-950: #000180;

  /* Surface palette */
  --surface-bg-lowest: #fbfcff;
  --surface-bg: #f8f9ff;
  --surface-bg-low: #f4f5ff;
  --surface-bg-secondary: #f1f2ff;
  --surface-bg-tertiary: #e9eaf9;
  --surface-bg-highest: #e2e3f2;
  --surface-border-default: #d5d6e5;
  --surface-border-strong: #bbbccb;

  /* Semantic colors */
  --sg-color-primary: var(--brand-700);
  --sg-color-primary-hover: var(--brand-800);
  --sg-color-primary-active: var(--brand-900);
  --sg-color-primary-subtle: var(--brand-100);
  --sg-color-secondary: var(--secondary-500);
  --sg-color-secondary-hover: var(--secondary-600);
  --sg-color-secondary-active: var(--secondary-700);
  --sg-color-secondary-subtle: var(--secondary-100);
  --sg-color-tertiary: var(--tertiary-500);
  --sg-color-tertiary-hover: var(--tertiary-600);
  --sg-color-tertiary-active: var(--tertiary-700);
  --sg-color-tertiary-subtle: var(--tertiary-100);
  --sg-color-accent: var(--accent-500);
  --sg-color-accent-hover: var(--accent-600);
  --sg-color-accent-active: var(--accent-700);
  --sg-color-accent-subtle: var(--accent-100);
  --sg-color-highlight: var(--accent-200);
  --sg-color-highlight-hover: var(--accent-300);
  --sg-color-highlight-active: var(--accent-400);
  --sg-color-highlight-subtle: var(--accent-100);
  --sg-color-text: var(--neutral-800);
  --sg-color-text-secondary: var(--neutral-600);
  --sg-color-text-muted: var(--neutral-400);
  --sg-color-text-inverse: var(--brand-50);
  --sg-color-title: var(--neutral-900);
  --sg-color-subtitle: var(--neutral-700);
  --sg-color-link: var(--brand-600);
  --sg-color-link-hover: var(--brand-700);
  --sg-color-link-active: var(--brand-800);
  --sg-color-link-subtle: var(--brand-100);
  --sg-color-link-visited: var(--brand-800);
  --sg-color-emphasis: var(--brand-700);
  --sg-color-emphasis-hover: var(--brand-800);
  --sg-color-emphasis-active: var(--brand-900);
  --sg-color-emphasis-subtle: var(--brand-100);
  --sg-color-border: var(--neutral-300);
  --sg-color-border-light: var(--neutral-200);
  --sg-color-border-focus: var(--brand-500);
  --sg-color-shadow: var(--neutral-900);
  --sg-color-success: var(--success-500);
  --sg-color-success-hover: var(--success-600);
  --sg-color-success-active: var(--success-700);
  --sg-color-success-subtle: var(--success-100);
  --sg-color-warning: var(--warning-500);
  --sg-color-warning-hover: var(--warning-600);
  --sg-color-warning-active: var(--warning-700);
  --sg-color-warning-subtle: var(--warning-100);
  --sg-color-danger: var(--danger-700);
  --sg-color-danger-hover: var(--danger-800);
  --sg-color-danger-active: var(--danger-900);
  --sg-color-danger-subtle: var(--danger-100);
  --sg-color-info: var(--info-500);
  --sg-color-info-hover: var(--info-600);
  --sg-color-info-active: var(--info-700);
  --sg-color-info-subtle: var(--info-100);
  --sg-surface-container-lowest: var(--surface-bg-lowest);
  --sg-surface-container-low: var(--surface-bg-low);
  --sg-surface-container: var(--surface-bg-secondary);
  --sg-surface-container-high: var(--surface-bg-tertiary);
  --sg-surface-container-highest: var(--surface-bg-highest);
  --sg-color-code-bg: var(--surface-bg-tertiary);
  --sg-color-code-text: var(--neutral-800);
  --sg-color-surface: var(--surface-bg-secondary);
  --sg-color-surface-alt: var(--surface-bg-tertiary);
  --sg-bg: var(--surface-bg);
  --sg-color-data-1: #5e65c7;
  --sg-color-data-2: #8955b5;
  --sg-color-data-3: #a64991;
  --sg-color-data-4: #b64462;
  --sg-color-data-5: #b84a29;
  --sg-color-data-6: #a95b00;
  --sg-color-data-7: #8b6f00;
  --sg-color-data-8: #598000;
  --sg-color-data-9: #008a4c;
  --sg-color-data-10: #008b80;
  --sg-color-data-11: #0084aa;
  --sg-color-data-12: #0076c3;

  /* Data viz patterns */
  --sg-pattern-stripe: repeating-linear-gradient(45deg, currentColor 0 2px, transparent 2px 8px);
  --sg-pattern-dot: radial-gradient(circle 1.5px, currentColor 100%, transparent 100%) 0 0 / 8px 8px;
  --sg-pattern-cross: repeating-linear-gradient(45deg, currentColor 0 2px, transparent 2px 8px), repeating-linear-gradient(-45deg, currentColor 0 2px, transparent 2px 8px);
  --sg-pattern-diagonal: repeating-linear-gradient(135deg, currentColor 0 2px, transparent 2px 8px);
  --sg-pattern-dash-1: 4 2;
  --sg-pattern-dash-2: 8 4;
  --sg-pattern-dash-3: 12 6;
  --sg-pattern-dash-4: 16 8;
  --sg-pattern-dash-5: 20 10;
  --sg-pattern-dash-6: 24 12;
  --sg-shape-circle: "circle";
  --sg-shape-square: "square";
  --sg-shape-triangle: "triangle";
  --sg-shape-diamond: "diamond";
  --sg-shape-cross: "cross";
  --sg-shape-star: "star";
  --sg-data-stroke-width: 1.5px;
  --sg-data-marker-size: 8px;
  --sg-data-gridline-width: 1px;

  /* Typography */
  --sg-font-family: system-ui, -apple-system, sans-serif;
  --sg-font-mono: ui-monospace, 'Cascadia Code', monospace;
  --sg-text-2xs: 0.5625rem;
  --sg-leading-2xs: 1.82;
  --sg-text-xs: 0.6875rem;
  --sg-leading-xs: 1.71;
  --sg-text-sm: 0.8125rem;
  --sg-leading-sm: 1.63;
  --sg-text-base: 1rem;
  --sg-leading-base: 1.55;
  --sg-text-lg: 1.1875rem;
  --sg-leading-lg: 1.49;
  --sg-text-xl: 1.4375rem;
  --sg-leading-xl: 1.44;
  --sg-text-2xl: 1.75rem;
  --sg-leading-2xl: 1.40;
  --sg-text-3xl: 2.0625rem;
  --sg-leading-3xl: 1.37;
  --sg-text-4xl: 2.5rem;
  --sg-leading-4xl: 1.34;
  --sg-text-5xl: 3rem;
  --sg-leading-5xl: 1.32;
  --sg-text-6xl: 3.5625rem;
  --sg-leading-6xl: 1.30;
  --sg-text-7xl: 4.3125rem;
  --sg-leading-7xl: 1.28;
  --sg-text-8xl: 5.1875rem;
  --sg-leading-8xl: 1.27;
  --sg-text-9xl: 6.1875rem;
  --sg-leading-9xl: 1.26;

  --sg-tracking-2xs: 0.02em;
  --sg-tracking-xs: 0.02em;
  --sg-tracking-sm: 0.01em;
  --sg-tracking-base: 0em;
  --sg-tracking-lg: 0em;
  --sg-tracking-xl: 0em;
  --sg-tracking-2xl: -0.01em;
  --sg-tracking-3xl: -0.01em;
  --sg-tracking-4xl: -0.01em;
  --sg-tracking-5xl: -0.02em;
  --sg-tracking-6xl: -0.02em;
  --sg-tracking-7xl: -0.02em;
  --sg-tracking-8xl: -0.02em;
  --sg-tracking-9xl: -0.02em;

  /* Semantic letter-spacing (for uppercase/label text) */
  --sg-tracking-wide: 0.03em;
  --sg-tracking-caps: 0.06em;

  --sg-weight-thin: 100;
  --sg-weight-extralight: 200;
  --sg-weight-light: 300;
  --sg-weight-normal: 400;
  --sg-weight-medium: 500;
  --sg-weight-semibold: 600;
  --sg-weight-bold: 700;
  --sg-weight-extrabold: 800;
  --sg-weight-black: 900;

  --sg-measure-narrow: 45ch;
  --sg-measure-base: 66ch;
  --sg-measure-wide: 75ch;

  --sg-leading-measure-offset: 0.1;

  /* Semantic line-height (font-size independent) */
  --sg-leading-none: 1;
  --sg-leading-tight: 1.2;
  --sg-leading-snug: 1.3;
  --sg-leading-normal: 1.4;
  --sg-leading-relaxed: 1.5;
  --sg-leading-loose: 1.6;
  /* Spacing */
  --sg-base-unit: 0.25rem;
  --sg-space-0: 0;
  --sg-space-px: 0.0625rem;
  --sg-space-0-5: clamp(0.1125rem, min(0.0887rem + 0.12vw, 0.1016rem + 0.1vw), 0.1875rem);
  --sg-space-1: clamp(0.225rem, min(0.1774rem + 0.24vw, 0.2033rem + 0.19vw), 0.375rem);
  --sg-space-1-5: clamp(0.3375rem, min(0.2662rem + 0.36vw, 0.3049rem + 0.29vw), 0.5625rem);
  --sg-space-2: clamp(0.45rem, min(0.3549rem + 0.48vw, 0.4065rem + 0.38vw), 0.75rem);
  --sg-space-2-5: clamp(0.5625rem, min(0.4436rem + 0.59vw, 0.5082rem + 0.48vw), 0.9375rem);
  --sg-space-3: clamp(0.675rem, min(0.5323rem + 0.71vw, 0.6098rem + 0.57vw), 1.125rem);
  --sg-space-3-5: clamp(0.7875rem, min(0.6211rem + 0.83vw, 0.7115rem + 0.67vw), 1.3125rem);
  --sg-space-4: clamp(0.9rem, min(0.7098rem + 0.95vw, 0.8131rem + 0.76vw), 1.5rem);
  --sg-space-5: clamp(1.125rem, min(0.8872rem + 1.19vw, 1.0164rem + 0.95vw), 1.875rem);
  --sg-space-6: clamp(1.35rem, min(1.0647rem + 1.43vw, 1.2196rem + 1.14vw), 2.25rem);
  --sg-space-7: clamp(1.575rem, min(1.2421rem + 1.66vw, 1.4229rem + 1.34vw), 2.625rem);
  --sg-space-8: clamp(1.8rem, min(1.4196rem + 1.9vw, 1.6262rem + 1.53vw), 3rem);
  --sg-space-9: clamp(2.025rem, min(1.597rem + 2.14vw, 1.8295rem + 1.72vw), 3.375rem);
  --sg-space-10: clamp(2.25rem, min(1.7745rem + 2.38vw, 2.0327rem + 1.91vw), 3.75rem);
  --sg-space-11: clamp(2.75rem, min(2.3141rem + 2.18vw, 2.5508rem + 1.75vw), 4.125rem);
  --sg-space-12: clamp(2.75rem, min(2.1952rem + 2.77vw, 2.4965rem + 2.23vw), 4.5rem);
  --sg-space-14: clamp(3.15rem, min(2.4843rem + 3.33vw, 2.8458rem + 2.67vw), 5.25rem);
  --sg-space-16: clamp(3.6rem, min(2.8392rem + 3.8vw, 3.2524rem + 3.05vw), 6rem);
  --sg-space-20: clamp(4.5rem, min(3.5489rem + 4.76vw, 4.0655rem + 3.82vw), 7.5rem);
  --sg-space-24: clamp(5.4rem, min(4.2587rem + 5.71vw, 4.8786rem + 4.58vw), 9rem);
  --sg-space-28: clamp(6.3rem, min(4.9685rem + 6.66vw, 5.6917rem + 5.34vw), 10.5rem);
  --sg-space-32: clamp(7.2rem, min(5.6783rem + 7.61vw, 6.5048rem + 6.11vw), 12rem);
  --sg-space-36: clamp(8.1rem, min(6.3881rem + 8.56vw, 7.3179rem + 6.87vw), 13.5rem);
  --sg-space-40: clamp(9rem, min(7.0979rem + 9.51vw, 8.131rem + 7.63vw), 15rem);
  --sg-space-44: clamp(9.9rem, min(7.8077rem + 10.46vw, 8.9441rem + 8.4vw), 16.5rem);
  --sg-space-48: clamp(10.8rem, min(8.5175rem + 11.41vw, 9.7572rem + 9.16vw), 18rem);
  --sg-space-52: clamp(11.7rem, min(9.2272rem + 12.36vw, 10.5703rem + 9.92vw), 19.5rem);
  --sg-space-56: clamp(12.6rem, min(9.937rem + 13.31vw, 11.3834rem + 10.69vw), 21rem);
  --sg-space-60: clamp(13.5rem, min(10.6468rem + 14.27vw, 12.1964rem + 11.45vw), 22.5rem);
  --sg-space-64: clamp(14.4rem, min(11.3566rem + 15.22vw, 13.0095rem + 12.21vw), 24rem);
  --sg-space-72: clamp(16.2rem, min(12.7762rem + 17.12vw, 14.6357rem + 13.74vw), 27rem);
  --sg-space-80: clamp(18rem, min(14.1958rem + 19.02vw, 16.2619rem + 15.26vw), 30rem);
  --sg-space-96: clamp(21.6rem, min(17.0349rem + 22.83vw, 19.5143rem + 18.32vw), 36rem);

  --sg-gap-micro: var(--sg-space-0-5);
  --sg-gap-tight: var(--sg-space-1);
  --sg-gap-related: var(--sg-space-2);
  --sg-gap-grouped: var(--sg-space-4);
  --sg-gap-separated: var(--sg-space-8);
  --sg-gap-distinct: var(--sg-space-16);
  --sg-gap-inline: var(--sg-space-2);
  --sg-gap-stack: var(--sg-space-4);
  --sg-gap-section: var(--sg-space-12);
  --sg-gap-targets: var(--sg-space-2);
  --sg-pad-input: var(--sg-space-3);
  --sg-pad-button-x: var(--sg-space-4);
  --sg-pad-button-y: var(--sg-space-3);
  --sg-pad-card: var(--sg-space-6);
  --sg-pad-page: var(--sg-space-6);
  --sg-chrome-height: var(--sg-space-14);
  --sg-chrome-offset: var(--sg-chrome-height);

  /* Font spacing subsets (per type-scale step, grid-snapped) */
  --sg-font-gap-2xs: 4px;
  --sg-font-pad-x-2xs: 8px;
  --sg-font-pad-y-2xs: 8px;
  --sg-font-gap-stack-2xs: 12px;
  --sg-font-min-height-2xs: 44px;
  --sg-font-gap-xs: 4px;
  --sg-font-pad-x-xs: 12px;
  --sg-font-pad-y-xs: 8px;
  --sg-font-gap-stack-xs: 16px;
  --sg-font-min-height-xs: 44px;
  --sg-font-gap-sm: 8px;
  --sg-font-pad-x-sm: 12px;
  --sg-font-pad-y-sm: 8px;
  --sg-font-gap-stack-sm: 16px;
  --sg-font-min-height-sm: 44px;
  --sg-font-gap-base: 8px;
  --sg-font-pad-x-base: 16px;
  --sg-font-pad-y-base: 12px;
  --sg-font-gap-stack-base: 20px;
  --sg-font-min-height-base: 48px;
  --sg-font-gap-lg: 8px;
  --sg-font-pad-x-lg: 20px;
  --sg-font-pad-y-lg: 16px;
  --sg-font-gap-stack-lg: 20px;
  --sg-font-min-height-lg: 60px;
  --sg-font-gap-xl: 12px;
  --sg-font-pad-x-xl: 24px;
  --sg-font-pad-y-xl: 16px;
  --sg-font-gap-stack-xl: 24px;
  --sg-font-min-height-xl: 64px;
  --sg-font-gap-2xl: 16px;
  --sg-font-pad-x-2xl: 28px;
  --sg-font-pad-y-2xl: 20px;
  --sg-font-gap-stack-2xl: 28px;
  --sg-font-min-height-2xl: 80px;
  --sg-font-gap-3xl: 16px;
  --sg-font-pad-x-3xl: 32px;
  --sg-font-pad-y-3xl: 24px;
  --sg-font-gap-stack-3xl: 32px;
  --sg-font-min-height-3xl: 92px;
  --sg-font-gap-4xl: 20px;
  --sg-font-pad-x-4xl: 40px;
  --sg-font-pad-y-4xl: 32px;
  --sg-font-gap-stack-4xl: 40px;
  --sg-font-min-height-4xl: 116px;
  --sg-font-gap-5xl: 24px;
  --sg-font-pad-x-5xl: 48px;
  --sg-font-pad-y-5xl: 36px;
  --sg-font-gap-stack-5xl: 48px;
  --sg-font-min-height-5xl: 136px;
  --sg-font-gap-6xl: 28px;
  --sg-font-pad-x-6xl: 56px;
  --sg-font-pad-y-6xl: 44px;
  --sg-font-gap-stack-6xl: 56px;
  --sg-font-min-height-6xl: 164px;
  --sg-font-gap-7xl: 36px;
  --sg-font-pad-x-7xl: 68px;
  --sg-font-pad-y-7xl: 52px;
  --sg-font-gap-stack-7xl: 68px;
  --sg-font-min-height-7xl: 192px;
  --sg-font-gap-8xl: 40px;
  --sg-font-pad-x-8xl: 84px;
  --sg-font-pad-y-8xl: 64px;
  --sg-font-gap-stack-8xl: 80px;
  --sg-font-min-height-8xl: 232px;
  --sg-font-gap-9xl: 48px;
  --sg-font-pad-x-9xl: 100px;
  --sg-font-pad-y-9xl: 76px;
  --sg-font-gap-stack-9xl: 92px;
  --sg-font-min-height-9xl: 276px;

  /* Elevation (sRGB fallback) */
  --sg-shadow-none: none;
  --sg-shadow-xs: 0px 0.5px 1px -0.25px rgba(0, 0, 0, 0.08), 0px 0px 2px 0px rgba(0, 0, 0, 0.06);
  --sg-shadow-sm: 0px 1px 2px -0.5px rgba(0, 0, 0, 0.08), 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
  --sg-shadow-md: 0px 1.5px 3px -0.75px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.06);
  --sg-shadow-lg: 0px 2px 4px -1px rgba(0, 0, 0, 0.08), 0px 0px 8px 0px rgba(0, 0, 0, 0.06);
  --sg-shadow-xl: 0px 2.5px 5px -1.25px rgba(0, 0, 0, 0.08), 0px 0px 10px 0px rgba(0, 0, 0, 0.06);

  /* Border radius */
  --sg-radius-none: 0;
  --sg-radius-sm: 0.25rem;
  --sg-radius-md: 0.5rem;
  --sg-radius-lg: 0.75rem;
  --sg-radius-xl: 1rem;
  --sg-radius-2xl: 1.5rem;
  --sg-radius-full: 9999px;

  --sg-corner-shape: round;
  /* Border width */
  --sg-border-none: 0;
  --sg-border-thin: 1px;
  --sg-border-default: 1px;
  --sg-border-medium: 2px;
  --sg-border-thick: 4px;

  /* Z-index */
  --sg-z-base: 0;
  --sg-z-raised: 1;
  --sg-z-dropdown: 10;
  --sg-z-sticky: 20;
  --sg-z-overlay: 30;
  --sg-z-modal: 40;
  --sg-z-popover: 50;
  --sg-z-toast: 60;
  --sg-z-max: 70;

  /* Motion - durations */
  --sg-duration-instant: 0ms;
  --sg-duration-faster-base: 50ms;
  --sg-duration-fast-base: 100ms;
  --sg-duration-normal-base: 200ms;
  --sg-duration-moderate-base: 300ms;
  --sg-duration-slow-base: 400ms;
  --sg-duration-slower-base: 500ms;
  --sg-duration-faster: calc(var(--sg-duration-faster-base) * var(--sg-duration-scalar));
  --sg-duration-fast: calc(var(--sg-duration-fast-base) * var(--sg-duration-scalar));
  --sg-duration-normal: calc(var(--sg-duration-normal-base) * var(--sg-duration-scalar));
  --sg-duration-moderate: calc(var(--sg-duration-moderate-base) * var(--sg-duration-scalar));
  --sg-duration-slow: calc(var(--sg-duration-slow-base) * var(--sg-duration-scalar));
  --sg-duration-slower: calc(var(--sg-duration-slower-base) * var(--sg-duration-scalar));
  --sg-duration-spring-snappy: 246ms;
  --sg-duration-spring-default: 461ms;
  --sg-duration-spring-gentle: 658ms;
  --sg-duration-spring-bouncy: 921ms;

  /* Motion - easings */
  --sg-ease-default: cubic-bezier(0.2, 0, 0, 1);
  --sg-ease-in: cubic-bezier(0.4, 0, 1, 0.6);
  --sg-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --sg-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --sg-ease-linear: linear;
  --sg-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --sg-ease-snappy: cubic-bezier(0.4, 0, 0, 1);
  --sg-ease-spring-snappy: linear(0, 0.004, 0.015, 0.031, 0.052, 0.077, 0.105, 0.135, 0.167, 0.2, 0.233, 0.267, 0.302, 0.335, 0.369, 0.402, 0.434, 0.465, 0.495, 0.524, 0.552, 0.579, 0.605, 0.629, 0.653, 0.675, 0.696, 0.716, 0.735, 0.753, 0.77, 0.786, 0.8, 0.815, 0.828, 0.84, 0.852, 0.862, 0.873, 0.882, 0.891, 0.899, 0.907, 0.914, 0.92, 0.927, 0.932, 0.938, 0.943, 0.947, 0.951, 0.955, 0.959, 0.962, 0.965, 0.968, 0.971, 0.973, 0.976, 0.978, 0.979, 0.981, 0.983, 0.984);
  --sg-ease-spring-default: linear(0, 0.007, 0.027, 0.058, 0.097, 0.142, 0.193, 0.246, 0.302, 0.358, 0.415, 0.47, 0.525, 0.577, 0.626, 0.673, 0.717, 0.758, 0.796, 0.831, 0.862, 0.89, 0.916, 0.938, 0.958, 0.975, 0.989, 1.002, 1.012, 1.021, 1.028, 1.033, 1.037, 1.04, 1.042, 1.043, 1.043, 1.043, 1.042, 1.04, 1.039, 1.037, 1.034, 1.032, 1.03, 1.027, 1.025, 1.022, 1.02, 1.018, 1.016, 1.014, 1.012, 1.01, 1.008, 1.007, 1.006, 1.004, 1.003, 1.002, 1.002, 1.001, 1);
  --sg-ease-spring-gentle: linear(0, 0.009, 0.033, 0.071, 0.118, 0.173, 0.233, 0.297, 0.363, 0.429, 0.495, 0.558, 0.619, 0.677, 0.731, 0.781, 0.826, 0.868, 0.905, 0.937, 0.966, 0.99, 1.011, 1.028, 1.042, 1.053, 1.062, 1.067, 1.071, 1.073, 1.074, 1.073, 1.07, 1.068, 1.064, 1.06, 1.055, 1.05, 1.046, 1.041, 1.036, 1.031, 1.027, 1.023, 1.019, 1.015, 1.012, 1.009, 1.006, 1.004, 1.002, 1, 0.999, 0.998, 0.997, 0.996, 0.995, 0.995, 0.995, 0.995, 0.995, 0.995, 0.995, 0.995);
  --sg-ease-spring-bouncy: linear(0, 0.029, 0.108, 0.224, 0.365, 0.519, 0.675, 0.825, 0.96, 1.076, 1.168, 1.237, 1.281, 1.302, 1.303, 1.287, 1.257, 1.218, 1.172, 1.125, 1.078, 1.034, 0.995, 0.963, 0.938, 0.921, 0.91, 0.907, 0.909, 0.916, 0.927, 0.94, 0.954, 0.969, 0.983, 0.995, 1.006, 1.015, 1.022, 1.026, 1.028, 1.028, 1.027, 1.024, 1.021, 1.016, 1.012, 1.008, 1.003, 1, 0.997, 0.994, 0.993, 0.992, 0.991, 0.992, 0.992, 0.993, 0.994, 0.996, 0.997, 0.998, 0.999, 1.001);

  --sg-duration-scalar: 1;

  /* Interactive */
  --sg-focus-color: var(--sg-color-border-focus);
  --sg-focus-width: 2px;
  --sg-focus-offset: 2px;
  --sg-focus-inner: white;
  --sg-disabled-opacity: 0.38;
  --sg-disabled-container-opacity: 0.12;
  --sg-state-hover-opacity: 0.08;
  --sg-state-focus-opacity: 0.12;
  --sg-state-active-opacity: 0.12;

  /* State layer overlays (sRGB fallback) */
  --sg-state-hover-light: rgba(0, 0, 0, 0.08);
  --sg-state-hover-dark: rgba(255, 255, 255, 0.08);
  --sg-state-focus-light: rgba(0, 0, 0, 0.12);
  --sg-state-focus-dark: rgba(255, 255, 255, 0.12);
  --sg-state-active-light: rgba(0, 0, 0, 0.12);
  --sg-state-active-dark: rgba(255, 255, 255, 0.16);
  --sg-state-dragged-light: rgba(0, 0, 0, 0.16);
  --sg-state-dragged-dark: rgba(255, 255, 255, 0.16);
  --sg-state-hover: var(--sg-state-hover-light);
  --sg-state-focus: var(--sg-state-focus-light);
  --sg-state-active: var(--sg-state-active-light);
  --sg-state-dragged: var(--sg-state-dragged-light);
  --sg-overlay-backdrop: rgba(0, 0, 0, 0.4);

  /* Validation states */
  --sg-valid-border: var(--sg-color-success);
  --sg-invalid-border: var(--sg-color-danger);
  --sg-valid-bg: var(--sg-color-success-subtle);
  --sg-invalid-bg: var(--sg-color-danger-subtle);

  /* Scroll padding */
  --sg-scroll-padding-top: var(--sg-header-height, 64px);
  --sg-scroll-padding-bottom: var(--sg-footer-height, 0px);

  --sg-target-min-touch: 2.75rem;
  --sg-target-min-pointer: 1.5rem;
  --sg-target-min: var(--sg-target-min-pointer);

  --sg-grid-columns: 4;
  --sg-grid-gutter: 1rem;
  --sg-grid-margin: 1rem;
  --sg-grid-max-width: 100%;

  --sg-density: var(--sg-adaptive-density, 1);
  --sg-ctx-scale: 1;
  --sg-icon-compensation: 0.20;

  /* Aspect ratio tokens */
  --aspect-video: 16 / 9;
  --aspect-photo: 4 / 3;
  --aspect-square: 1 / 1;
  --aspect-portrait: 3 / 4;
  --aspect-wide: 21 / 9;
  --aspect-golden: 1.618 / 1;

  /* Content visibility (Spec 10 §4.4) */
  --contain-intrinsic-height-sm: 300px;
  --contain-intrinsic-height-md: 500px;
  --contain-intrinsic-height-lg: 800px;

  /* Animation budget (Spec 10 §3.4) */
  --max-concurrent-animations: 10;
  --raf-budget-ms: 10;

  /* Container query breakpoints */
  --sg-container-xs: 200px;
  --sg-container-sm: 300px;
  --sg-container-md: 450px;
  --sg-container-lg: 600px;
  --sg-container-xl: 800px;
  --sg-cq-space-xs: var(--sg-space-1);
  --sg-cq-space-sm: var(--sg-space-2);
  --sg-cq-space-md: var(--sg-space-4);
  --sg-cq-space-lg: var(--sg-space-8);
  --sg-cq-text-sm: var(--sg-text-sm);
  --sg-cq-text-md: var(--sg-text-base);

  /* Component tokens */
  --sg-button-bg: var(--sg-color-primary);
  --sg-button-text: var(--sg-color-text-inverse);
  --sg-button-radius: var(--sg-radius-md);
  --sg-button-padding-y: var(--sg-space-3);
  --sg-button-padding-x: var(--sg-space-4);
  --sg-input-bg: var(--sg-bg);
  --sg-input-border: var(--sg-color-border);
  --sg-input-border-focus: var(--sg-focus-color);
  --sg-input-border-invalid: var(--sg-color-danger);
  --sg-input-radius: var(--sg-radius-md);
  --sg-input-padding: var(--sg-space-3);
  --sg-card-bg: var(--sg-surface-container);
  --sg-card-border: 1px solid var(--sg-color-border);
  --sg-card-shadow: var(--sg-shadow-xs);
  --sg-card-shadow-hover: var(--sg-shadow-md);
  --sg-card-radius: var(--sg-radius-lg);
  --sg-card-padding: var(--sg-space-6);
  --sg-baseline-shift: 1px;

  /* Semantic elevation */
  --sg-shadow-card: var(--sg-shadow-xs);
  --sg-shadow-dropdown: var(--sg-shadow-md);

  /* Semantic motion */
  --sg-transition-default: var(--sg-duration-normal) var(--sg-ease-default);

  /* OKLCH progressive enhancement */
  @supports (color: oklch(0 0 0)) {
    --brand-50: oklch(0.9468 0.0279 274.09);
    --brand-100: oklch(0.9095 0.0483 276.71);
    --brand-200: oklch(0.8529 0.08 276.48);
    --brand-300: oklch(0.796 0.1132 276.71);
    --brand-400: oklch(0.7368 0.1491 277.1);
    --brand-500: oklch(0.6744 0.1882 277.17);
    --brand-600: oklch(0.6055 0.2041 277.12);
    --brand-700: oklch(0.5352 0.2041 277.12);
    --brand-800: oklch(0.4415 0.2041 277.12);
    --brand-900: oklch(0.3477 0.2041 277.12);
    --brand-950: oklch(0.2761 0.1735 276.25);
    --secondary-50: oklch(0.93 0.0468 34.74);
    --secondary-100: oklch(0.8924 0.0739 33.79);
    --secondary-200: oklch(0.8385 0.1163 34.63);
    --secondary-300: oklch(0.7833 0.1637 34.42);
    --secondary-400: oklch(0.7295 0.2012 33.47);
    --secondary-500: oklch(0.6592 0.2012 33.47);
    --secondary-600: oklch(0.581 0.2012 33.47);
    --secondary-700: oklch(0.5029 0.2012 33.47);
    --secondary-800: oklch(0.3943 0.1744 30.48);
    --secondary-900: oklch(0.2847 0.1247 30.83);
    --secondary-950: oklch(0.175 0.075 31.65);
    --tertiary-50: oklch(0.9063 0.1636 148.53);
    --tertiary-100: oklch(0.875 0.1636 148.53);
    --tertiary-200: oklch(0.8125 0.1636 148.53);
    --tertiary-300: oklch(0.75 0.1636 148.53);
    --tertiary-400: oklch(0.6875 0.1636 148.53);
    --tertiary-500: oklch(0.625 0.1636 148.53);
    --tertiary-600: oklch(0.5469 0.1636 148.53);
    --tertiary-700: oklch(0.4688 0.1636 148.53);
    --tertiary-800: oklch(0.3758 0.1519 148.1);
    --tertiary-900: oklch(0.2552 0.1108 145.64);
    --tertiary-950: oklch(0.189 0.0789 146.96);
    --accent-50: oklch(0.926 0.0987 85.31);
    --accent-100: oklch(0.8901 0.1146 82.86);
    --accent-200: oklch(0.8355 0.1146 82.86);
    --accent-300: oklch(0.773 0.1146 82.86);
    --accent-400: oklch(0.7105 0.1146 82.86);
    --accent-500: oklch(0.648 0.1146 82.86);
    --accent-600: oklch(0.5698 0.1146 82.86);
    --accent-700: oklch(0.4917 0.1146 82.86);
    --accent-800: oklch(0.3985 0.0948 80.92);
    --accent-900: oklch(0.2736 0.0653 79.57);
    --accent-950: oklch(0.1804 0.0443 72.19);
    --neutral-50: oklch(0.9219 0.0204 275.38);
    --neutral-100: oklch(0.8906 0.0204 275.38);
    --neutral-200: oklch(0.8281 0.0204 275.38);
    --neutral-300: oklch(0.7656 0.0204 275.38);
    --neutral-400: oklch(0.7031 0.0204 275.38);
    --neutral-500: oklch(0.6406 0.0204 275.38);
    --neutral-600: oklch(0.5625 0.0204 275.38);
    --neutral-700: oklch(0.4844 0.0204 275.38);
    --neutral-800: oklch(0.3906 0.0204 275.38);
    --neutral-900: oklch(0.2813 0.0204 275.38);
    --neutral-950: oklch(0.1875 0.0204 275.38);
    --success-50: oklch(0.9256 0.1451 149.27);
    --success-100: oklch(0.8906 0.1699 149.21);
    --success-200: oklch(0.8281 0.1699 149.21);
    --success-300: oklch(0.7734 0.1699 149.21);
    --success-400: oklch(0.7109 0.1699 149.21);
    --success-500: oklch(0.6406 0.1699 149.21);
    --success-600: oklch(0.5625 0.1699 149.21);
    --success-700: oklch(0.4844 0.1699 149.21);
    --success-800: oklch(0.392 0.1567 148.5);
    --success-900: oklch(0.2994 0.1227 147.59);
    --success-950: oklch(0.2233 0.097 145.64);
    --warning-50: oklch(0.95 0.0391 58.61);
    --warning-100: oklch(0.9056 0.077 59.47);
    --warning-200: oklch(0.8595 0.1173 58.66);
    --warning-300: oklch(0.7979 0.1574 58.32);
    --warning-400: oklch(0.7354 0.1574 58.32);
    --warning-500: oklch(0.6729 0.1574 58.32);
    --warning-600: oklch(0.5947 0.1574 58.32);
    --warning-700: oklch(0.5172 0.144 56.27);
    --warning-800: oklch(0.4231 0.1165 57.26);
    --warning-900: oklch(0.3298 0.0939 54.29);
    --warning-950: oklch(0.2671 0.0755 54.84);
    --danger-50: oklch(0.9489 0.0334 16.79);
    --danger-100: oklch(0.9107 0.0603 16.64);
    --danger-200: oklch(0.8636 0.0958 16.85);
    --danger-300: oklch(0.811 0.1393 16.58);
    --danger-400: oklch(0.7551 0.1902 16.86);
    --danger-500: oklch(0.6863 0.1978 16.93);
    --danger-600: oklch(0.616 0.1978 16.93);
    --danger-700: oklch(0.5379 0.1978 16.93);
    --danger-800: oklch(0.4292 0.1938 17.11);
    --danger-900: oklch(0.3215 0.1452 17.74);
    --danger-950: oklch(0.2491 0.1129 20.43);
    --info-50: oklch(0.9403 0.0317 256.28);
    --info-100: oklch(0.9097 0.0479 260.04);
    --info-200: oklch(0.8456 0.0837 260.23);
    --info-300: oklch(0.7879 0.1171 260.07);
    --info-400: oklch(0.7343 0.1489 261.47);
    --info-500: oklch(0.6642 0.1921 262.22);
    --info-600: oklch(0.5989 0.2152 262.88);
    --info-700: oklch(0.5207 0.2152 262.88);
    --info-800: oklch(0.4426 0.2152 262.88);
    --info-900: oklch(0.3335 0.2082 263.1);
    --info-950: oklch(0.272 0.1872 264);
    --sg-shadow-none: none;
    --sg-shadow-xs: 0px 0.5px 1px -0.25px oklch(0 0 0 / 0.08), 0px 0px 2px 0px oklch(0 0 0 / 0.06);
    --sg-shadow-sm: 0px 1px 2px -0.5px oklch(0 0 0 / 0.08), 0px 0px 4px 0px oklch(0 0 0 / 0.06);
    --sg-shadow-md: 0px 1.5px 3px -0.75px oklch(0 0 0 / 0.08), 0px 0px 6px 0px oklch(0 0 0 / 0.06);
    --sg-shadow-lg: 0px 2px 4px -1px oklch(0 0 0 / 0.08), 0px 0px 8px 0px oklch(0 0 0 / 0.06);
    --sg-shadow-xl: 0px 2.5px 5px -1.25px oklch(0 0 0 / 0.08), 0px 0px 10px 0px oklch(0 0 0 / 0.06);
    --sg-state-hover-light: oklch(0 0 0 / 0.08);
    --sg-state-hover-dark: oklch(1 0 0 / 0.08);
    --sg-state-focus-light: oklch(0 0 0 / 0.12);
    --sg-state-focus-dark: oklch(1 0 0 / 0.12);
    --sg-state-active-light: oklch(0 0 0 / 0.12);
    --sg-state-active-dark: oklch(1 0 0 / 0.16);
    --sg-state-dragged-light: oklch(0 0 0 / 0.16);
    --sg-state-dragged-dark: oklch(1 0 0 / 0.16);
    --sg-overlay-backdrop: oklch(0 0 0 / 0.4);
  }

  /* Query units progressive enhancement */
  @supports (width: 1cqi) {
    --sg-cq-space-xs: clamp(var(--sg-space-05), 1cqi, var(--sg-space-2));
    --sg-cq-space-sm: clamp(var(--sg-space-1), 2cqi, var(--sg-space-3));
    --sg-cq-space-md: clamp(var(--sg-space-2), 4cqi, var(--sg-space-6));
    --sg-cq-space-lg: clamp(var(--sg-space-4), 8cqi, var(--sg-space-8));
    --sg-cq-text-sm: clamp(0.6875rem, 0.6rem + 0.5cqi, 0.875rem);
    --sg-cq-text-md: clamp(0.875rem, 0.75rem + 0.75cqi, 1rem);
  }

  /* color-mix progressive enhancement */
  @supports (color: color-mix(in oklch, black 50%, transparent)) {
    --sg-overlay-backdrop: color-mix(in oklch, var(--sg-color-text) 45%, transparent);
  }

  /* Baseline shift fallback */
  @supports not (text-box-trim: both) {
    --sg-button-padding-block-start: calc(var(--sg-space-3) + var(--sg-baseline-shift));
    --sg-button-padding-block-end: var(--sg-space-3);
  }

  /* Dark mode - auto (OS preference, unless data-theme is set) */
  &:not([data-theme]) {
    @media (prefers-color-scheme: dark) {
      --surface-bg-lowest: #04040b;
      --surface-bg: #0a0a14;
      --surface-bg-low: #0e0e18;
      --surface-bg-secondary: #11121c;
      --surface-bg-tertiary: #191924;
      --surface-bg-highest: #21222d;
      --surface-border-default: #22232e;
      --surface-border-strong: #363742;
      --sg-color-primary: var(--brand-700);
      --sg-color-primary-hover: var(--brand-800);
      --sg-color-primary-active: var(--brand-900);
      --sg-color-primary-subtle: var(--brand-900);
      --sg-color-secondary: var(--secondary-700);
      --sg-color-secondary-hover: var(--secondary-800);
      --sg-color-secondary-active: var(--secondary-900);
      --sg-color-secondary-subtle: var(--secondary-900);
      --sg-color-tertiary: var(--tertiary-500);
      --sg-color-tertiary-hover: var(--tertiary-600);
      --sg-color-tertiary-active: var(--tertiary-700);
      --sg-color-tertiary-subtle: var(--tertiary-900);
      --sg-color-accent: var(--accent-500);
      --sg-color-accent-hover: var(--accent-600);
      --sg-color-accent-active: var(--accent-700);
      --sg-color-accent-subtle: var(--accent-900);
      --sg-color-highlight: var(--accent-700);
      --sg-color-highlight-hover: var(--accent-800);
      --sg-color-highlight-active: var(--accent-900);
      --sg-color-highlight-subtle: var(--accent-900);
      --sg-color-text: var(--neutral-200);
      --sg-color-text-secondary: var(--neutral-400);
      --sg-color-text-muted: var(--neutral-600);
      --sg-color-text-inverse: var(--brand-50);
      --sg-color-title: var(--neutral-100);
      --sg-color-subtitle: var(--neutral-300);
      --sg-color-link: var(--brand-400);
      --sg-color-link-hover: var(--brand-500);
      --sg-color-link-active: var(--brand-600);
      --sg-color-link-subtle: var(--brand-900);
      --sg-color-link-visited: var(--brand-200);
      --sg-color-emphasis: var(--brand-300);
      --sg-color-emphasis-hover: var(--brand-400);
      --sg-color-emphasis-active: var(--brand-500);
      --sg-color-emphasis-subtle: var(--brand-900);
      --sg-color-border: var(--neutral-700);
      --sg-color-border-light: var(--neutral-800);
      --sg-color-border-focus: var(--brand-500);
      --sg-color-shadow: var(--neutral-100);
      --sg-color-success: var(--success-700);
      --sg-color-success-hover: var(--success-800);
      --sg-color-success-active: var(--success-900);
      --sg-color-success-subtle: var(--success-900);
      --sg-color-warning: var(--warning-800);
      --sg-color-warning-hover: var(--warning-900);
      --sg-color-warning-active: var(--warning-950);
      --sg-color-warning-subtle: var(--warning-900);
      --sg-color-danger: var(--danger-700);
      --sg-color-danger-hover: var(--danger-800);
      --sg-color-danger-active: var(--danger-900);
      --sg-color-danger-subtle: var(--danger-900);
      --sg-color-info: var(--info-700);
      --sg-color-info-hover: var(--info-800);
      --sg-color-info-active: var(--info-900);
      --sg-color-info-subtle: var(--info-900);
      --sg-shadow-none: none;
      --sg-shadow-xs: 0px 0.5px 1px -0.25px rgba(0, 0, 0, 0.3), 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
      --sg-shadow-sm: 0px 1px 2px -0.5px rgba(0, 0, 0, 0.3), 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
      --sg-shadow-md: 0px 1.5px 3px -0.75px rgba(0, 0, 0, 0.3), 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
      --sg-shadow-lg: 0px 2px 4px -1px rgba(0, 0, 0, 0.3), 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
      --sg-shadow-xl: 0px 2.5px 5px -1.25px rgba(0, 0, 0, 0.3), 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
      --sg-state-hover: var(--sg-state-hover-dark);
      --sg-state-focus: var(--sg-state-focus-dark);
      --sg-state-active: var(--sg-state-active-dark);
      --sg-state-dragged: var(--sg-state-dragged-dark);
      @supports (color: oklch(0 0 0)) {
        --sg-shadow-none: none;
        --sg-shadow-xs: 0px 0.5px 1px -0.25px oklch(0 0 0 / 0.3), 0px 0px 2px 0px oklch(0 0 0 / 0.2);
        --sg-shadow-sm: 0px 1px 2px -0.5px oklch(0 0 0 / 0.3), 0px 0px 4px 0px oklch(0 0 0 / 0.2);
        --sg-shadow-md: 0px 1.5px 3px -0.75px oklch(0 0 0 / 0.3), 0px 0px 6px 0px oklch(0 0 0 / 0.2);
        --sg-shadow-lg: 0px 2px 4px -1px oklch(0 0 0 / 0.3), 0px 0px 8px 0px oklch(0 0 0 / 0.2);
        --sg-shadow-xl: 0px 2.5px 5px -1.25px oklch(0 0 0 / 0.3), 0px 0px 10px 0px oklch(0 0 0 / 0.2);
      }
      /* Typography irradiation compensation */
      --sg-weight-normal: 300;
      --sg-weight-medium: 400;
      --sg-weight-semibold: 500;
      --sg-weight-bold: 600;
      --sg-weight-extrabold: 700;
      letter-spacing: 0.01em;
    }
  }

  /* Dark mode - manual ([data-theme="dark"]) */
  &[data-theme="dark"] {
    color-scheme: dark;
    --surface-bg-lowest: #04040b;
    --surface-bg: #0a0a14;
    --surface-bg-low: #0e0e18;
    --surface-bg-secondary: #11121c;
    --surface-bg-tertiary: #191924;
    --surface-bg-highest: #21222d;
    --surface-border-default: #22232e;
    --surface-border-strong: #363742;
    --sg-color-primary: var(--brand-700);
    --sg-color-primary-hover: var(--brand-800);
    --sg-color-primary-active: var(--brand-900);
    --sg-color-primary-subtle: var(--brand-900);
    --sg-color-secondary: var(--secondary-700);
    --sg-color-secondary-hover: var(--secondary-800);
    --sg-color-secondary-active: var(--secondary-900);
    --sg-color-secondary-subtle: var(--secondary-900);
    --sg-color-tertiary: var(--tertiary-500);
    --sg-color-tertiary-hover: var(--tertiary-600);
    --sg-color-tertiary-active: var(--tertiary-700);
    --sg-color-tertiary-subtle: var(--tertiary-900);
    --sg-color-accent: var(--accent-500);
    --sg-color-accent-hover: var(--accent-600);
    --sg-color-accent-active: var(--accent-700);
    --sg-color-accent-subtle: var(--accent-900);
    --sg-color-highlight: var(--accent-700);
    --sg-color-highlight-hover: var(--accent-800);
    --sg-color-highlight-active: var(--accent-900);
    --sg-color-highlight-subtle: var(--accent-900);
    --sg-color-text: var(--neutral-200);
    --sg-color-text-secondary: var(--neutral-400);
    --sg-color-text-muted: var(--neutral-600);
    --sg-color-text-inverse: var(--brand-50);
    --sg-color-title: var(--neutral-100);
    --sg-color-subtitle: var(--neutral-300);
    --sg-color-link: var(--brand-400);
    --sg-color-link-hover: var(--brand-500);
    --sg-color-link-active: var(--brand-600);
    --sg-color-link-subtle: var(--brand-900);
    --sg-color-link-visited: var(--brand-200);
    --sg-color-emphasis: var(--brand-300);
    --sg-color-emphasis-hover: var(--brand-400);
    --sg-color-emphasis-active: var(--brand-500);
    --sg-color-emphasis-subtle: var(--brand-900);
    --sg-color-border: var(--neutral-700);
    --sg-color-border-light: var(--neutral-800);
    --sg-color-border-focus: var(--brand-500);
    --sg-color-shadow: var(--neutral-100);
    --sg-color-success: var(--success-700);
    --sg-color-success-hover: var(--success-800);
    --sg-color-success-active: var(--success-900);
    --sg-color-success-subtle: var(--success-900);
    --sg-color-warning: var(--warning-800);
    --sg-color-warning-hover: var(--warning-900);
    --sg-color-warning-active: var(--warning-950);
    --sg-color-warning-subtle: var(--warning-900);
    --sg-color-danger: var(--danger-700);
    --sg-color-danger-hover: var(--danger-800);
    --sg-color-danger-active: var(--danger-900);
    --sg-color-danger-subtle: var(--danger-900);
    --sg-color-info: var(--info-700);
    --sg-color-info-hover: var(--info-800);
    --sg-color-info-active: var(--info-900);
    --sg-color-info-subtle: var(--info-900);
    --sg-shadow-none: none;
    --sg-shadow-xs: 0px 0.5px 1px -0.25px rgba(0, 0, 0, 0.3), 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
    --sg-shadow-sm: 0px 1px 2px -0.5px rgba(0, 0, 0, 0.3), 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
    --sg-shadow-md: 0px 1.5px 3px -0.75px rgba(0, 0, 0, 0.3), 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    --sg-shadow-lg: 0px 2px 4px -1px rgba(0, 0, 0, 0.3), 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
    --sg-shadow-xl: 0px 2.5px 5px -1.25px rgba(0, 0, 0, 0.3), 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    --sg-state-hover: var(--sg-state-hover-dark);
    --sg-state-focus: var(--sg-state-focus-dark);
    --sg-state-active: var(--sg-state-active-dark);
    --sg-state-dragged: var(--sg-state-dragged-dark);
    @supports (color: oklch(0 0 0)) {
      --sg-shadow-none: none;
      --sg-shadow-xs: 0px 0.5px 1px -0.25px oklch(0 0 0 / 0.3), 0px 0px 2px 0px oklch(0 0 0 / 0.2);
      --sg-shadow-sm: 0px 1px 2px -0.5px oklch(0 0 0 / 0.3), 0px 0px 4px 0px oklch(0 0 0 / 0.2);
      --sg-shadow-md: 0px 1.5px 3px -0.75px oklch(0 0 0 / 0.3), 0px 0px 6px 0px oklch(0 0 0 / 0.2);
      --sg-shadow-lg: 0px 2px 4px -1px oklch(0 0 0 / 0.3), 0px 0px 8px 0px oklch(0 0 0 / 0.2);
      --sg-shadow-xl: 0px 2.5px 5px -1.25px oklch(0 0 0 / 0.3), 0px 0px 10px 0px oklch(0 0 0 / 0.2);
    }
    /* Typography irradiation compensation */
    --sg-weight-normal: 300;
    --sg-weight-medium: 400;
    --sg-weight-semibold: 500;
    --sg-weight-bold: 600;
    --sg-weight-extrabold: 700;
    letter-spacing: 0.01em;
  }

  /* High contrast overrides */
  @media (prefers-contrast: high) {
    --sg-color-border: var(--sg-color-primary);
    --sg-color-border-light: var(--sg-color-primary-hover);
    --sg-color-border-focus: var(--sg-color-primary-active);
    --sg-focus-width: 3px;
    --sg-focus-offset: 3px;
    --sg-disabled-opacity: 0.5;
    --sg-state-hover-opacity: 0.12;
    --sg-state-focus-opacity: 0.16;
    --sg-state-active-opacity: 0.16;
    --sg-border-width: 2px;
    --sg-border-width-heavy: 3px;
    --sg-glass-opacity: 1;
    --sg-glass-blur: 0px;
    --sg-divider-opacity: 0.5;
    /* Data viz high contrast overrides */
    --sg-data-stroke-width: 2px;
    --sg-data-marker-size: 10px;
    --sg-data-gridline-width: 2px;
    --sg-color-data-1: #5a5be2;
    --sg-color-data-2: #9145ca;
    --sg-color-data-3: #b4319b;
    --sg-color-data-4: #c9235d;
    --sg-color-data-5: #cb2f00;
    --sg-color-data-6: #ba4e00;
    --sg-color-data-7: #936c00;
    --sg-color-data-8: #518400;
    --sg-color-data-9: #00913c;
    --sg-color-data-10: #009285;
    --sg-color-data-11: #0087bc;
    --sg-color-data-12: #0073de;
  }
  @media (prefers-reduced-motion: reduce) {
    --sg-duration-scalar: 0.01;
  }
}

@media (min-width: 768px) {
  :root {
    --sg-grid-columns: 8;
    --sg-grid-gutter: 1.5rem;
    --sg-grid-margin: 1.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --sg-grid-columns: 12;
  }
}

@media (min-width: 1280px) {
  :root {
    --sg-grid-gutter: 2rem;
    --sg-grid-margin: 2rem;
    --sg-grid-max-width: 80rem;
  }
}

@media (min-width: 1536px) {
  :root {
    --sg-grid-margin: 4rem;
  }
}

@media (prefers-contrast: high) {
  input, select, textarea { border-width: var(--sg-border-width); }
  .card, .panel, .dialog { border-width: var(--sg-border-width); border-style: solid; border-color: var(--sg-color-border); }
  .material-glass { background: var(--sg-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  :focus-visible { outline-width: var(--sg-focus-width); outline-offset: var(--sg-focus-offset); }
}

[data-density="compact"] { --sg-density: 0.75; }
[data-density="comfortable"] { --sg-density: 1; }
[data-density="spacious"] { --sg-density: 1.5; }

[data-depth] { --sg-gap-by-depth: var(--sg-gap-related); }
[data-depth="0"] { --sg-gap-by-depth: var(--sg-gap-distinct); }
[data-depth="1"] { --sg-gap-by-depth: var(--sg-gap-separated); }
[data-depth="2"] { --sg-gap-by-depth: var(--sg-gap-grouped); }
[data-depth="3"] { --sg-gap-by-depth: var(--sg-gap-related); }
.sg-gap-auto { gap: var(--sg-gap-by-depth, var(--sg-gap-grouped)); }

[data-motion="instant"]  { --sg-duration-scalar: 0.05; }
[data-motion="snappy"]   { --sg-duration-scalar: 0.5; }
[data-motion="smooth"]   { --sg-duration-scalar: 1; }
[data-motion="playful"]  { --sg-duration-scalar: 1.3; }

} /* @layer sigui.tokens */

@layer sigui.base {
  .sg-alert {
    --_alert-gap: var(--sg-gap-related, 0.5rem);
    --_alert-pad-y: var(--sg-pad-button-y, 0.75rem);
    --_alert-pad-x: var(--sg-pad-button-x, 1rem);
    --_alert-content-gap: var(--sg-gap-tight, 0.25rem);
    display: flex;
    align-items: flex-start;
    gap: var(--_alert-gap);
    padding: var(--_alert-pad-y) var(--_alert-pad-x);
    border-radius: var(--sg-input-radius, 0.375rem);
    border-left: 3px solid var(--sg-alert-accent, var(--sg-color-info));
    background: var(--sg-alert-bg, var(--sg-surface-container));
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    line-height: var(--sg-leading-sm, 1.5);
    color: var(--sg-color-text);
    container-type: inline-size;
    container-name: sg-alert;
  }

  .sg-alert-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    --sg-icon-size: 1.25rem;
  }

  .sg-alert-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--_alert-content-gap);
  }

  .sg-alert-title {
    margin: 0;
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 600;
    line-height: var(--sg-leading-normal, 1.4);
    color: var(--sg-color-text);
  }

  .sg-alert-description {
    font-size: var(--sg-text-sm, 0.875rem);
    line-height: var(--sg-leading-sm, 1.5);
    color: var(--sg-color-text-secondary);
  }

  .sg-alert-description p {
    margin: 0;
  }

  .sg-alert-description ul {
    margin: var(--sg-gap-related, 0.5rem) 0 0;
    padding-left: var(--sg-gap-grouped, 1rem);
  }

  .sg-alert-description li {
    margin: var(--sg-gap-tight, 0.25rem) 0;
  }

  @supports (width: 1cqi) {
    .sg-alert {
      --_alert-gap: clamp(var(--sg-gap-tight, 0.25rem), 1.9cqi, var(--sg-gap-related, 0.5rem));
      --_alert-pad-y: clamp(var(--sg-gap-related, 0.5rem), 3.1cqi, var(--sg-pad-button-y, 0.75rem));
      --_alert-pad-x: clamp(var(--sg-gap-related, 0.5rem), 3.8cqi, var(--sg-pad-button-x, 1rem));
      --_alert-content-gap: clamp(var(--sg-gap-micro, 0.125rem), 0.9cqi, var(--sg-gap-tight, 0.25rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-alert) {
      .sg-alert-title {
        text-wrap: balance;
      }

      .sg-alert-description {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.variants {
  .sg-alert[data-color="primary"] {
    border-left-color: var(--sg-color-primary);
    background: var(--sg-color-primary-subtle, color-mix(in oklch, var(--sg-color-primary) 8%, var(--sg-surface-container)));
  }

  .sg-alert[data-color="secondary"] {
    border-left-color: var(--sg-color-border-light);
    background: var(--sg-surface-container-high);
  }

  .sg-alert[data-color="danger"] {
    border-left-color: var(--sg-color-danger);
    background: var(--sg-color-danger-subtle, color-mix(in oklch, var(--sg-color-danger) 8%, var(--sg-surface-container)));
  }

  .sg-alert[data-color="success"] {
    border-left-color: var(--sg-color-success);
    background: var(--sg-color-success-subtle, color-mix(in oklch, var(--sg-color-success) 8%, var(--sg-surface-container)));
  }

  .sg-alert[data-color="warning"] {
    border-left-color: var(--sg-color-warning);
    background: var(--sg-color-warning-subtle, color-mix(in oklch, var(--sg-color-warning) 8%, var(--sg-surface-container)));
  }

  .sg-alert[data-color="info"] {
    border-left-color: var(--sg-color-info);
    background: var(--sg-color-info-subtle, color-mix(in oklch, var(--sg-color-info) 8%, var(--sg-surface-container)));
  }

  .sg-alert[data-color="ghost"] {
    border-left-color: var(--sg-color-border);
    background: transparent;
  }

}

@layer sigui.base {
  .sg-button {
    --_button-gap: var(--sg-gap-related, 0.5rem);
    --_button-pad-y: var(--sg-button-padding-y, 0.75rem);
    --_button-pad-x: var(--sg-button-padding-x, 1rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--_button-gap);
    padding: var(--_button-pad-y) var(--_button-pad-x);
    border: none;
    border-radius: var(--sg-button-radius, var(--sg-input-radius, 0.375rem));
    background: var(--sg-button-bg);
    color: var(--sg-button-text);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 500;
    line-height: var(--sg-leading-tight, 1.2);
    letter-spacing: var(--sg-tracking-sm);
    min-height: var(--sg-touch-min, 44px);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    position: relative;
    overflow: hidden;
    transition:
      background var(--sg-transition-default, 200ms ease-out),
      opacity var(--sg-transition-default, 200ms ease-out),
      box-shadow var(--sg-transition-default, 200ms ease-out),
      transform 120ms cubic-bezier(0.4, 0, 0, 1);
  }

  @supports (width: 1cqi) {
    .sg-button {
      --_button-gap: clamp(var(--sg-gap-tight, 0.25rem), 4.7cqi, var(--sg-gap-related, 0.5rem));
      --_button-pad-y: clamp(var(--sg-gap-related, 0.5rem), 7.8cqi, var(--sg-button-padding-y, 0.75rem));
      --_button-pad-x: clamp(var(--sg-gap-related, 0.5rem), 9.4cqi, var(--sg-button-padding-x, 1rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-button) {
      :scope {
        --_button-gap: var(--sg-gap-related, 0.5rem);
      }
    }
  }

}

@layer sigui.variants {
  [data-size="sm"] .sg-button,
  .sg-button[data-size="sm"] {
    padding: var(--sg-gap-related, 0.375rem) var(--sg-pad-input, 0.75rem);
    font-size: var(--sg-text-xs, 0.6875rem);
    min-height: calc(var(--sg-touch-min, 44px) * 0.75);
  }

  [data-size="lg"] .sg-button,
  .sg-button[data-size="lg"] {
    padding: var(--sg-gap-grouped, 1rem) var(--sg-pad-card, 1.5rem);
    font-size: var(--sg-text-base, 1rem);
    min-height: calc(var(--sg-touch-min, 44px) * 1.15);
  }

  .sg-button[data-size="icon"] {
    padding: 0;
    width: var(--sg-touch-min, 44px);
    height: var(--sg-touch-min, 44px);
    min-height: var(--sg-touch-min, 44px);
    --sg-icon-size: 1.25rem;
  }

  .sg-button[data-size="icon"][data-size="sm"],
  [data-size="sm"] .sg-button[data-size="icon"] {
    width: calc(var(--sg-touch-min, 44px) * 0.75);
    height: calc(var(--sg-touch-min, 44px) * 0.75);
    min-height: calc(var(--sg-touch-min, 44px) * 0.75);
    --sg-icon-size: 1rem;
  }

  .sg-button[data-size="icon"][data-size="lg"],
  [data-size="lg"] .sg-button[data-size="icon"] {
    width: calc(var(--sg-touch-min, 44px) * 1.15);
    height: calc(var(--sg-touch-min, 44px) * 1.15);
    min-height: calc(var(--sg-touch-min, 44px) * 1.15);
    --sg-icon-size: 1.5rem;
  }

  .sg-button[data-color="primary"] {
    background: var(--sg-color-primary);
    color: var(--sg-color-text-inverse);
  }

  .sg-button[data-color="secondary"] {
    background: var(--sg-color-secondary);
    color: var(--sg-color-text);
  }

  .sg-button[data-color="danger"] {
    background: var(--sg-color-danger);
    color: var(--sg-color-text-inverse);
  }

  .sg-button[data-color="success"] {
    background: var(--sg-color-success);
    color: var(--sg-color-text-inverse);
  }

  .sg-button[data-color="warning"] {
    background: var(--sg-color-warning);
    color: var(--sg-color-text);
  }

  .sg-button[data-color="info"] {
    background: var(--sg-color-info);
    color: var(--sg-color-text-inverse);
  }

  .sg-button[data-color="ghost"] {
    background: transparent;
    color: var(--sg-color-text);
  }

  .sg-button[data-color="outline"] {
    background: transparent;
    color: var(--sg-color-primary);
    border: 1px solid var(--sg-color-primary);
  }

}

@layer sigui.states {
  .sg-button:disabled,
  .sg-button[disabled],
  .sg-button[data-disabled],
  .sg-button[aria-disabled="true"] {
    opacity: var(--sg-disabled-opacity, 0.38);
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
  }

  .sg-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sg-transition-default, 200ms ease-out);
  }

  .sg-button:hover:not(:disabled):not([disabled]):not([data-disabled]):not([aria-disabled="true"])::before {
    opacity: var(--sg-state-hover-opacity, 0.08);
  }

  .sg-button[data-color="ghost"]:hover:not(:disabled):not([disabled]):not([data-disabled]):not([aria-disabled="true"]) {
    background: var(--sg-surface-container);
  }

  .sg-button[data-color="ghost"]:hover:not(:disabled):not([disabled]):not([data-disabled]):not([aria-disabled="true"])::before {
    opacity: 0;
  }

  .sg-button:active:not(:disabled):not([disabled]):not([data-disabled]):not([aria-disabled="true"])::before {
    opacity: var(--sg-state-active-opacity, 0.12);
  }

  .sg-button:active:not(:disabled):not([disabled]):not([data-disabled]):not([aria-disabled="true"]) {
    transform: scale(0.97);
  }

  .sg-button[data-color="ghost"]:active:not(:disabled):not([disabled]):not([data-disabled]):not([aria-disabled="true"]) {
    background: var(--sg-surface-container-high);
  }

  .sg-button[data-color="ghost"]:active:not(:disabled):not([disabled]):not([data-disabled]):not([aria-disabled="true"])::before {
    opacity: 0;
  }

  .sg-button:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
  }
  [data-loading] {
    cursor: wait;
    position: relative;
  }

  .sg-button[data-loading] {
    color: transparent;
    pointer-events: none;
  }

  .sg-button[data-loading]::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-color: var(--sg-color-text-inverse) transparent var(--sg-color-text-inverse) transparent;
    border-radius: 9999px;
    animation: sg-spin calc(200ms * 3) linear infinite;
  }

  .sg-button:active::before {
    opacity: var(--sg-state-active-opacity, 0.12);
  }

  @media (forced-colors: active) {
    .sg-button {
      border: 1px solid ButtonText;
    }

    .sg-button[data-disabled] {
      color: GrayText;
      border-color: GrayText;
      opacity: 1;
    }

    .sg-button:disabled,
    .sg-button[disabled],
    .sg-button[aria-disabled="true"] {
      color: GrayText;
      border-color: GrayText;
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sg-button:active:not([data-disabled]) {
      transform: none;
    }
  }

  @keyframes sg-spin {
    to { transform: rotate(360deg); }
  }
}

@layer sigui.base {
  .sg-code {
    --_code-pad-y: var(--sg-gap-micro, 0.125rem);
    --_code-pad-x: var(--sg-gap-related, 0.375rem);
    display: inline;
    font-family: var(--sg-font-family-mono, ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace);
    font-size: 0.85em;
    background: var(--sg-surface-container-lowest);
    padding: var(--_code-pad-y) var(--_code-pad-x);
    border-radius: var(--sg-input-radius, 0.25rem);
  }

  @supports (width: 1cqi) {
    .sg-code {
      --_code-pad-x: clamp(var(--sg-gap-tight, 0.25rem), 3.9cqi, var(--sg-gap-related, 0.375rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-code) {
      :scope {
        --_code-pad-y: var(--sg-gap-micro, 0.125rem);
      }
    }
  }

}

@layer sigui.variants {
  .sg-code[data-color="default"] {
    color: var(--sg-color-text);
  }

  .sg-code[data-color="primary"] {
    color: var(--sg-color-primary);
  }

  .sg-code[data-color="muted"] {
    color: var(--sg-color-text-muted);
  }

  .sg-code .hljs-keyword,
  .sg-code .hljs-selector-tag,
  .sg-code .hljs-built_in,
  .sg-code .hljs-type { color: var(--sg-color-data-1); }

  .sg-code .hljs-string,
  .sg-code .hljs-regexp,
  .sg-code .hljs-addition { color: var(--sg-color-data-4); }

  .sg-code .hljs-comment,
  .sg-code .hljs-quote { color: var(--sg-color-text-muted); font-style: italic; }

  .sg-code .hljs-number,
  .sg-code .hljs-literal { color: var(--sg-color-data-7); }

  .sg-code .hljs-tag,
  .sg-code .hljs-deletion { color: var(--sg-color-data-10); }

  .sg-code .hljs-attr,
  .sg-code .hljs-attribute,
  .sg-code .hljs-variable,
  .sg-code .hljs-template-variable { color: var(--sg-color-data-3); }

  .sg-code .hljs-title,
  .sg-code .hljs-title\.class_,
  .sg-code .hljs-title\.function_ { color: var(--sg-color-data-6); }

  .sg-code .hljs-meta,
  .sg-code .hljs-meta .hljs-keyword { color: var(--sg-color-data-9); }

  .sg-code .hljs-symbol,
  .sg-code .hljs-bullet,
  .sg-code .hljs-link { color: var(--sg-color-data-12); }

  .sg-code .hljs-section,
  .sg-code .hljs-name { color: var(--sg-color-data-1); font-weight: 600; }

  .sg-code .hljs-selector-class,
  .sg-code .hljs-selector-id,
  .sg-code .hljs-selector-attr { color: var(--sg-color-data-3); }

}

@layer sigui.base {
  .sg-divider {
    --_divider-thickness: 1px;
    --_divider-spacing-block: 0;
    --_divider-spacing-inline: 0;
    display: block;
    width: 100%;
    height: var(--_divider-thickness);
    border: none;
    border-width: 0;
    margin: 0;
    padding: 0;
    background: var(--sg-color-border);
    margin-block: var(--_divider-spacing-block);
  }

  .sg-divider[data-orientation="vertical"] {
    width: var(--_divider-thickness);
    height: auto;
    align-self: stretch;
    background: var(--sg-color-border);
    margin-inline: var(--_divider-spacing-inline);
  }

  @supports (width: 1cqi) {
    .sg-divider {
      --_divider-thickness: clamp(0.5px, 0.5cqi, 1px);
    }
  }

}

@layer sigui.variants {
  .sg-divider[data-color="strong"] { background: var(--sg-color-text-muted); }
  .sg-divider[data-color="muted"]  { background: var(--sg-surface-container-high); }

  .sg-divider[data-spacing="related"]   { --_divider-spacing-block: var(--sg-gap-related, 0.5rem); }
  .sg-divider[data-spacing="grouped"]   { --_divider-spacing-block: var(--sg-gap-grouped, 1rem); }
  .sg-divider[data-spacing="separated"] { --_divider-spacing-block: var(--sg-gap-separated, 2rem); }
  .sg-divider[data-spacing="distinct"]  { --_divider-spacing-block: var(--sg-gap-distinct, 4rem); }

  .sg-divider[data-orientation="vertical"][data-spacing="related"]   { --_divider-spacing-inline: var(--sg-gap-related, 0.5rem); }
  .sg-divider[data-orientation="vertical"][data-spacing="grouped"]   { --_divider-spacing-inline: var(--sg-gap-grouped, 1rem); }
  .sg-divider[data-orientation="vertical"][data-spacing="separated"] { --_divider-spacing-inline: var(--sg-gap-separated, 2rem); }
  .sg-divider[data-orientation="vertical"][data-spacing="distinct"]  { --_divider-spacing-inline: var(--sg-gap-distinct, 4rem); }

}

@layer sigui.base {
  .sg-fieldset {
    --_fieldset-pad: var(--sg-gap-grouped, 1rem);
    --_fieldset-pad-top: var(--sg-pad-input, 0.75rem);
    border: 1px solid var(--sg-color-border-light);
    border-radius: var(--sg-input-radius, 0.375rem);
    padding: var(--_fieldset-pad);
    padding-top: var(--_fieldset-pad-top);
    margin: 0;
    font-family: var(--sg-font-family, system-ui);
    container-type: inline-size;
    container-name: sg-fieldset;
  }

  .sg-fieldset > .sg-legend {
    padding-inline: var(--sg-gap-related, 0.5rem);
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 600;
    color: var(--sg-color-text);
    line-height: var(--sg-leading-tight, 1.25);
  }

  .sg-fieldset > .sg-legend-description {
    font-size: var(--sg-text-xs, 0.6875rem);
    color: var(--sg-color-text-muted);
    margin-top: var(--sg-gap-tight, 0.25rem);
    margin-bottom: var(--sg-pad-input, 0.75rem);
  }

  @supports (width: 1cqi) {
    .sg-fieldset {
      --_fieldset-pad: clamp(var(--sg-gap-related, 0.5rem), 3.8cqi, var(--sg-gap-grouped, 1rem));
      --_fieldset-pad-top: clamp(var(--sg-gap-related, 0.5rem), 3.1cqi, var(--sg-pad-input, 0.75rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-fieldset) {
      .sg-legend,
      .sg-legend-description {
        text-wrap: pretty;
      }
    }
  }
}

@layer sigui.states {
  .sg-fieldset:disabled {
    opacity: var(--sg-disabled-opacity, 0.38);
    cursor: not-allowed;
  }

  .sg-fieldset:disabled * {
    pointer-events: none;
  }
}

@layer sigui.base {
  .sg-input-wrapper {
    --_input-wrapper-gap: var(--sg-gap-related, 0.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--_input-wrapper-gap);
  }

  .sg-input-label {
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 500;
    color: var(--sg-color-text);
  }

  .sg-input {
    padding: var(--sg-input-padding, 0.75rem);
    border: 1px solid var(--sg-input-border);
    border-radius: var(--sg-input-radius);
    background: var(--sg-input-bg);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-base, 1rem);
    line-height: var(--sg-leading-base);
    min-height: var(--sg-touch-min, 44px);
    color: var(--sg-color-text);
    outline: none;
    transition:
      border-color var(--sg-transition-default, 200ms ease-out),
      box-shadow var(--sg-transition-default, 200ms ease-out);
  }

  .sg-input-description {
    font-size: var(--sg-text-xs, 0.6875rem);
    color: var(--sg-color-text-muted);
  }

  .sg-input-error {
    font-size: var(--sg-text-xs, 0.6875rem);
    color: var(--sg-color-danger);
  }

  @supports (width: 1cqi) {
    .sg-input-wrapper {
      --_input-wrapper-gap: clamp(var(--sg-gap-tight, 0.25rem), 2.1cqi, var(--sg-gap-related, 0.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-input-wrapper) {
      .sg-input-description,
      .sg-input-error {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.variants {
  .sg-input-wrapper[data-density="compact"] {
    --sg-density: 0.75;
  }

  .sg-input-wrapper[data-density="comfortable"] {
    --sg-density: 1;
  }

  .sg-input-wrapper[data-density="spacious"] {
    --sg-density: 1.5;
  }

  .sg-input-wrapper .sg-input {
    padding: calc(var(--sg-input-padding, 0.75rem) * var(--sg-density, 1));
  }

  .sg-input-wrapper[data-density="compact"] .sg-input {
    font-size: var(--sg-text-sm, 0.875rem);
  }

  /* Date / time / datetime-local inputs */
  .sg-input[type="date"],
  .sg-input[type="time"],
  .sg-input[type="datetime-local"] {
    appearance: none;
    position: relative;
  }

  .sg-input[type="date"]::-webkit-calendar-picker-indicator,
  .sg-input[type="time"]::-webkit-calendar-picker-indicator,
  .sg-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
  }

  .sg-input[type="date"]::-webkit-calendar-picker-indicator:hover,
  .sg-input[type="time"]::-webkit-calendar-picker-indicator:hover,
  .sg-input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
  }

  /* File input */
  .sg-input-file {
    padding: var(--sg-input-padding, 0.75rem);
    border: 1px dashed var(--sg-color-border);
    border-radius: var(--sg-input-radius);
    background: var(--sg-input-bg);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--sg-color-text);
    cursor: pointer;
    min-height: var(--sg-touch-min, 44px);
    outline: none;
    transition:
      border-color var(--sg-transition-default, 200ms ease-out),
      box-shadow var(--sg-transition-default, 200ms ease-out);
  }

  .sg-input-file::file-selector-button {
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 500;
    padding: var(--sg-gap-related, 0.375rem) var(--sg-pad-input, 0.75rem);
    border: 1px solid var(--sg-color-border);
    border-radius: var(--sg-input-radius, 4px);
    background: var(--sg-surface-container);
    color: var(--sg-color-text);
    cursor: pointer;
    margin-right: var(--sg-pad-input, 0.75rem);
    transition: background var(--sg-transition-default, 200ms ease-out);
  }

  .sg-input-file::file-selector-button:hover {
    background: var(--sg-surface-container-high);
  }

  /* Color input */
  .sg-input-color {
    appearance: none;
    width: var(--sg-touch-min, 44px);
    height: var(--sg-touch-min, 44px);
    padding: var(--sg-gap-tight, 0.25rem);
    border: 1px solid var(--sg-color-border);
    border-radius: var(--sg-input-radius, 0.375rem);
    background: var(--sg-input-bg);
    cursor: pointer;
    outline: none;
    transition:
      border-color var(--sg-transition-default, 200ms ease-out),
      box-shadow var(--sg-transition-default, 200ms ease-out);
  }

  .sg-input-color::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  .sg-input-color::-webkit-color-swatch {
    border: none;
    border-radius: var(--sg-input-radius, 4px);
  }

  .sg-input-color::-moz-color-swatch {
    border: none;
    border-radius: var(--sg-input-radius, 4px);
  }
}

@layer sigui.states {

  .sg-input:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
    border-color: var(--sg-color-border-focus);
  }
  .sg-input[data-validation="invalid"] {
    border-color: var(--sg-color-danger);
  }

  .sg-input[data-validation="valid"] {
    border-color: var(--sg-color-success);
  }

  .sg-input-file:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
    border-color: var(--sg-color-border-focus);
  }

  .sg-input-color:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
    border-color: var(--sg-color-border-focus);
  }

  .sg-input-file:disabled,
  .sg-input-color:disabled {
    opacity: var(--sg-disabled-opacity, 0.38);
    cursor: not-allowed;
  }
}

@layer sigui.base {
  .sg-input-variants {
    --_input-variants-display: contents;
    display: var(--_input-variants-display);
  }

  @supports (selector(:scope)) {
    @scope (.sg-input-variants) {
      :scope {
        --_input-variants-display: contents;
      }
    }
  }
}

@layer sigui.base {
  .sg-kbd {
    --_kbd-pad-y: var(--sg-gap-micro, 0.125rem);
    --_kbd-pad-x: var(--sg-gap-related, 0.375rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    padding: var(--_kbd-pad-y) var(--_kbd-pad-x);
    border: 1px solid var(--sg-color-border);
    border-bottom-width: 2px;
    border-radius: var(--sg-input-radius, 0.25rem);
    background: var(--sg-surface-container);
    font-family: var(--sg-font-family-mono, ui-monospace, monospace);
    font-size: 0.85em;
    line-height: var(--sg-leading-normal, 1.4);
  }

  .sg-kbd-group {
    --_kbd-group-gap: var(--sg-gap-tight, 0.25rem);
    display: inline-flex;
    align-items: center;
    gap: var(--_kbd-group-gap);
  }

  @supports (width: 1cqi) {
    .sg-kbd {
      --_kbd-pad-x: clamp(var(--sg-gap-tight, 0.25rem), 5.2cqi, var(--sg-gap-related, 0.375rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-kbd-group) {
      :scope {
        --_kbd-group-gap: var(--sg-gap-tight, 0.25rem);
      }
    }
  }

}

@layer sigui.base {
  .sg-label {
    --_label-gap: var(--sg-gap-tight, 0.25rem);
    display: inline-flex;
    align-items: center;
    gap: var(--_label-gap);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 500;
    color: var(--sg-color-text);
    cursor: pointer;
  }

  .sg-label-required {
    color: var(--sg-color-danger);
  }

  .sg-label[data-required]::after {
    content: "*";
    color: var(--sg-color-danger);
  }

  @supports (width: 1cqi) {
    .sg-label {
      --_label-gap: clamp(var(--sg-gap-micro, 0.125rem), 1.6cqi, var(--sg-gap-tight, 0.25rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-label) {
      :scope {
        --_label-gap: var(--sg-gap-tight, 0.25rem);
      }
    }
  }

  @supports (text-box-trim: both) {
    .sg-label {
      text-box-trim: both;
      text-box-edge: cap alphabetic;
    }
  }

}

@layer sigui.variants {
  .sg-label[data-size="sm"] {
    font-size: var(--sg-text-xs, 0.6875rem);
  }

  .sg-label[data-size="lg"] {
    font-size: var(--sg-text-base, 1rem);
  }

}

@layer sigui.base {
  .sg-link {
    --_link-underline-thickness: 1px;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: var(--_link-underline-thickness);
    border-radius: var(--sg-input-radius, 0.25rem);
    transition:
      color var(--sg-transition-default, 200ms ease-out),
      text-decoration-thickness var(--sg-transition-default, 200ms ease-out);
  }

  @supports (selector(:scope)) {
    @scope (.sg-link) {
      :scope {
        --_link-underline-thickness: 1px;
      }
    }
  }

}

@layer sigui.variants {
  .sg-link[data-color="primary"] {
    color: var(--sg-color-primary);
  }

  .sg-link[data-color="muted"] {
    color: var(--sg-color-text-muted);
  }

  .sg-link[data-color="inherit"] {
    color: inherit;
  }

  .sg-link[data-underline="always"] {
    text-decoration: underline;
  }

  .sg-link[data-underline="hover"] {
    text-decoration: none;
  }

  .sg-link[data-underline="none"] {
    text-decoration: none;
  }

}

@layer sigui.states {
  .sg-link:hover {
    text-decoration-thickness: 2px;
  }

  .sg-link[data-underline="hover"]:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  .sg-link:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
  }

}

@layer sigui.base {
  .sg-meter-wrapper {
    --_meter-gap: var(--sg-gap-related, 0.5rem);
    --_meter-height: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--_meter-gap);
    font-family: var(--sg-font-family, system-ui);
  }

  .sg-meter-label {
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 500;
    color: var(--sg-color-text);
  }

  .sg-meter {
    appearance: none;
    width: 100%;
    height: var(--_meter-height);
    border: none;
    border-radius: 9999px;
    background: transparent;
  }

  /* Webkit (Chrome, Safari, Edge) */
  .sg-meter::-webkit-meter-bar {
    background: var(--sg-surface-container-high);
    border-radius: 9999px;
    border: none;
    height: var(--_meter-height);
  }

  .sg-meter::-webkit-meter-optimum-value {
    background: var(--sg-color-success);
    border-radius: 9999px;
  }

  .sg-meter::-webkit-meter-suboptimum-value {
    background: var(--sg-color-warning);
    border-radius: 9999px;
  }

  .sg-meter::-webkit-meter-even-less-good-value {
    background: var(--sg-color-danger);
    border-radius: 9999px;
  }

  /* Firefox */
  .sg-meter::-moz-meter-bar {
    border-radius: 9999px;
  }

  .sg-meter:-moz-meter-optimum::-moz-meter-bar {
    background: var(--sg-color-success);
  }

  .sg-meter:-moz-meter-sub-optimum::-moz-meter-bar {
    background: var(--sg-color-warning);
  }

  .sg-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
    background: var(--sg-color-danger);
  }

  .sg-meter-description {
    font-size: var(--sg-text-xs, 0.6875rem);
    color: var(--sg-color-text-muted);
  }

  @supports (width: 1cqi) {
    .sg-meter-wrapper {
      --_meter-gap: clamp(var(--sg-gap-tight, 0.25rem), 2.3cqi, var(--sg-gap-related, 0.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-meter-wrapper) {
      .sg-meter-description {
        text-wrap: pretty;
      }
    }
  }
}

@layer sigui.variants {
  .sg-meter[data-size="sm"] {
    --_meter-height: 0.25rem;
  }

  .sg-meter[data-size="sm"]::-webkit-meter-bar {
    height: var(--_meter-height);
  }

  .sg-meter[data-size="md"] {
    --_meter-height: 0.5rem;
  }

  .sg-meter[data-size="md"]::-webkit-meter-bar {
    height: var(--_meter-height);
  }

  .sg-meter[data-size="lg"] {
    --_meter-height: 0.75rem;
  }

  .sg-meter[data-size="lg"]::-webkit-meter-bar {
    height: var(--_meter-height);
  }
}

@layer sigui.states {
  @media (forced-colors: active) {
    .sg-meter::-webkit-meter-bar {
      border: 1px solid CanvasText;
    }

    .sg-meter::-webkit-meter-optimum-value,
    .sg-meter::-webkit-meter-suboptimum-value,
    .sg-meter::-webkit-meter-even-less-good-value {
      background: Highlight;
    }
  }
}

@layer sigui.base {
  .sg-native-accordion {
    --_native-accordion-summary-pad: var(--sg-gap-grouped, 1rem);
    --_native-accordion-content-pad: var(--sg-gap-grouped, 1rem);
    --_native-accordion-summary-gap: var(--sg-gap-related, 0.5rem);
    border: 1px solid var(--sg-color-border);
    border-radius: var(--sg-card-radius, 0.5rem);
    overflow: hidden;
    container-type: inline-size;
    container-name: sg-native-accordion;
  }

  .sg-native-accordion > details + details {
    border-top: 1px solid var(--sg-color-border);
  }

  .sg-native-accordion > details {
    background: var(--sg-bg);
  }

  .sg-native-accordion > details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--_native-accordion-summary-gap);
    padding: var(--_native-accordion-summary-pad);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 500;
    line-height: var(--sg-leading-tight, 1.2);
    letter-spacing: -0.01em;
    color: var(--sg-color-text);
    min-height: var(--sg-touch-min, 44px);
    cursor: pointer;
    list-style: none;
    user-select: none;
    position: relative;
    overflow: hidden;
  }

  .sg-native-accordion > details > summary::-webkit-details-marker,
  .sg-native-accordion > details > summary::marker {
    display: none;
    content: "";
  }

  /* Chevron indicator – SVG mask for crisp stroked arrow */
  .sg-native-accordion > details > summary::after {
    content: "";
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    background: currentColor;
    opacity: 0.5;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition:
      transform var(--sg-transition-default, 200ms ease-out),
      opacity var(--sg-transition-default, 200ms ease-out);
  }

  .sg-native-accordion > details[open] > summary::after {
    transform: rotate(180deg);
    opacity: 0.7;
  }

  /* Content panel */
  .sg-native-accordion > details > :not(summary) {
    padding: 0 var(--_native-accordion-content-pad) var(--_native-accordion-content-pad);
    font-size: var(--sg-text-sm, 0.875rem);
    line-height: var(--sg-leading-sm, 1.5);
    color: var(--sg-color-text-secondary);
  }

  /* Animated open/close via ::details-content */
  .sg-native-accordion > details {
    interpolate-size: allow-keywords;
  }

  .sg-native-accordion > details::details-content {
    overflow: clip;
    block-size: 0;
    transition:
      block-size var(--sg-transition-default, 200ms ease-out),
      content-visibility var(--sg-transition-default, 200ms ease-out) allow-discrete;
  }

  .sg-native-accordion > details[open]::details-content {
    block-size: auto;
  }

  @supports (width: 1cqi) {
    .sg-native-accordion {
      --_native-accordion-summary-pad: clamp(var(--sg-gap-related, 0.5rem), 3.8cqi, var(--sg-gap-grouped, 1rem));
      --_native-accordion-content-pad: clamp(var(--sg-gap-related, 0.5rem), 3.8cqi, var(--sg-gap-grouped, 1rem));
      --_native-accordion-summary-gap: clamp(var(--sg-gap-tight, 0.25rem), 1.9cqi, var(--sg-gap-related, 0.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-native-accordion) {
      .sg-native-accordion > details > summary {
        text-wrap: pretty;
      }
    }
  }
}

@layer sigui.states {
  /* Hover overlay – consistent with Button pattern */
  .sg-native-accordion > details > summary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sg-transition-default, 200ms ease-out);
  }

  .sg-native-accordion > details > summary:hover:not([data-disabled] > summary)::before {
    opacity: var(--sg-state-hover-opacity, 0.06);
  }

  .sg-native-accordion > details > summary:active:not([data-disabled] > summary)::before {
    opacity: var(--sg-state-active-opacity, 0.10);
  }

  .sg-native-accordion > details > summary:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, -2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
    z-index: 1;
  }

  .sg-native-accordion > details[data-disabled] > summary {
    opacity: var(--sg-disabled-opacity, 0.38);
    cursor: not-allowed;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .sg-native-accordion > details > summary::after {
      transition: none;
    }

    .sg-native-accordion > details::details-content {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .sg-native-accordion {
      border-color: ButtonText;
    }

    .sg-native-accordion > details + details {
      border-top-color: ButtonText;
    }

    .sg-native-accordion > details > summary {
      border: 1px solid ButtonText;
    }
  }
}

@layer sigui.base {
  .sg-native-dialog {
    --_native-dialog-pad: var(--sg-pad-card, 1.5rem);
    --_native-dialog-footer-gap: var(--sg-gap-related, 0.5rem);
    font-family: var(--sg-font-family, system-ui);
    color: var(--sg-color-text);
    background: var(--sg-bg);
    border: 1px solid var(--sg-color-border-light);
    border-radius: var(--sg-card-radius, 0.5rem);
    padding: var(--_native-dialog-pad);
    box-shadow: var(--sg-shadow-dropdown);
    max-width: min(90vw, 32rem);
    width: 100%;
    container-type: inline-size;
    container-name: sg-native-dialog;
  }

  .sg-native-dialog::backdrop {
    background: var(--sg-overlay-backdrop);
  }

  .sg-native-dialog-header {
    display: flex;
    flex-direction: column;
    gap: var(--sg-gap-micro, 0.25rem);
    margin-bottom: var(--sg-gap-grouped, 1rem);
  }

  .sg-native-dialog-title {
    font-size: var(--sg-text-lg, 1.125rem);
    font-weight: 600;
    line-height: var(--sg-leading-tight, 1.25);
    color: var(--sg-color-text);
    margin: 0;
  }

  .sg-native-dialog-description {
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--sg-color-text-muted);
    margin: 0;
  }

  .sg-native-dialog-body {
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--sg-color-text-secondary);
    line-height: var(--sg-leading-base, 1.5);
  }

  .sg-native-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--_native-dialog-footer-gap);
    margin-top: var(--sg-pad-card, 1.5rem);
  }

  @container sg-native-dialog (max-width: 20rem) {
    .sg-native-dialog-footer {
      flex-direction: column;
      align-items: stretch;
    }
  }

  @supports (width: 1cqi) {
    .sg-native-dialog {
      --_native-dialog-pad: clamp(var(--sg-gap-grouped, 1rem), 6.3cqi, var(--sg-pad-card, 1.5rem));
      --_native-dialog-footer-gap: clamp(var(--sg-gap-tight, 0.25rem), 1.9cqi, var(--sg-gap-related, 0.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-native-dialog) {
      .sg-native-dialog-title { text-wrap: balance; }
      .sg-native-dialog-description { text-wrap: pretty; }
    }
  }
}

@layer sigui.variants {
  .sg-native-dialog[data-size="sm"] {
    max-width: min(90vw, 24rem);
    padding: var(--sg-gap-grouped, 1rem);
  }

  .sg-native-dialog[data-size="lg"] {
    max-width: min(90vw, 42rem);
  }

  .sg-native-dialog[data-size="full"] {
    max-width: 90vw;
    max-height: 85vh;
  }
}

@layer sigui.states {
  .sg-native-dialog[open] {
    animation: sg-dialog-in var(--sg-transition-default, 200ms ease-out);
  }

  @keyframes sg-dialog-in {
    from {
      opacity: 0;
      transform: scale(0.95) translateY(0.5rem);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  @media (forced-colors: active) {
    .sg-native-dialog {
      border: 2px solid CanvasText;
    }
  }
}

@layer sigui.base {
  .sg-native-select-wrapper {
    --_select-gap: var(--sg-gap-related, 0.5rem);
    --_select-font: var(--sg-font-family, system-ui);
    --_select-font-size: var(--sg-text-sm, 0.875rem);
    --_select-font-size-sm: var(--sg-text-xs, 0.6875rem);
    --_select-color: var(--sg-color-text);
    --_select-color-muted: var(--sg-color-text-muted);
    --_select-danger: var(--sg-color-danger);
    --_select-border: var(--sg-color-border);
    --_select-radius: max(var(--sg-input-radius, 0.375rem), 0.5rem);
    --_select-bg: var(--sg-surface-container-lowest);
    --_select-transition: var(--sg-transition-default, 180ms ease);
    --_select-gap-micro: var(--sg-gap-micro, 0.125rem);
    display: flex;
    flex-direction: column;
    gap: var(--_select-gap);
    font-family: var(--_select-font);
    container-type: inline-size;
    container-name: sg-native-select;
  }

  .sg-native-select-label {
    font-size: var(--_select-font-size);
    font-weight: 500;
    color: var(--_select-color);
  }

  .sg-native-select-required {
    color: var(--_select-danger);
    margin-left: var(--_select-gap-micro);
  }

  .sg-native-select {
    --_select-pad-y: 0.625rem;
    --_select-pad-x: 0.875rem;
    --_select-arrow-pad: 2.1rem;
    appearance: none;
    width: 100%;
    min-height: var(--sg-touch-min, 44px);
    padding: var(--_select-pad-y) var(--_select-pad-x);
    padding-right: var(--_select-arrow-pad);
    border: 1px solid color-mix(in oklch, var(--_select-border) 88%, transparent);
    border-radius: var(--_select-radius);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--_select-bg) 86%, white) 0%,
        var(--_select-bg) 100%
      ),
      linear-gradient(45deg, transparent 50%, currentColor 50%),
      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-repeat: no-repeat;
    background-size: auto, 0.45rem 0.45rem, 0.45rem 0.45rem;
    background-position: center, calc(100% - 1.05rem) 52%, calc(100% - 0.75rem) 52%;
    font-family: var(--_select-font);
    font-size: var(--_select-font-size);
    color: var(--_select-color);
    cursor: pointer;
    transition:
      border-color var(--_select-transition),
      background var(--_select-transition),
      box-shadow var(--_select-transition);
  }

  .sg-native-select-description {
    font-size: var(--_select-font-size-sm);
    color: var(--_select-color-muted);
  }

  .sg-native-select-error {
    font-size: var(--_select-font-size-sm);
    color: var(--_select-danger);
  }

  @supports (text-box-trim: both) {
    .sg-native-select-label {
      text-box-trim: both;
      text-box-edge: cap alphabetic;
    }
  }

}

@layer sigui.variants {
  .sg-native-select-wrapper[data-density="compact"] {
    --sg-density: 0.75;
  }

  .sg-native-select-wrapper[data-density="comfortable"] {
    --sg-density: 1;
  }

  .sg-native-select-wrapper[data-density="spacious"] {
    --sg-density: 1.5;
  }

  .sg-native-select-wrapper .sg-native-select {
    --_select-pad-y: calc(0.625rem * var(--sg-density, 1));
    --_select-pad-x: calc(0.875rem * var(--sg-density, 1));
    --_select-arrow-pad: calc(2.1rem * var(--sg-density, 1));
  }

  .sg-native-select-wrapper[data-density="compact"] .sg-native-select {
    font-size: var(--_select-font-size);
  }

  @container sg-native-select (max-width: 260px) {
    .sg-native-select {
      --_select-pad-x: var(--sg-cq-space-sm, var(--sg-space-2));
      --_select-arrow-pad: calc(var(--_select-pad-x) + 1.5rem);
      font-size: var(--_select-font-size-sm);
    }
  }

}

@layer sigui.states {
  .sg-native-select:hover:not(:disabled) {
    border-color: color-mix(in oklch, var(--sg-color-primary) 28%, var(--_select-border));
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--_select-bg) 82%, white) 0%,
        color-mix(in oklch, var(--_select-bg) 92%, var(--sg-color-primary) 3%) 100%
      ),
      linear-gradient(45deg, transparent 50%, currentColor 50%),
      linear-gradient(135deg, currentColor 50%, transparent 50%);
  }

  .sg-native-select:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
    border-color: var(--sg-color-border-focus);
  }

  .sg-native-select[data-validation="invalid"] {
    border-color: var(--_select-danger);
  }

  .sg-native-select:disabled {
    opacity: var(--sg-disabled-opacity, 0.38);
    cursor: not-allowed;
  }

  /* Native option popups are OS-controlled; these rules apply where browsers allow it. */
  .sg-native-select option,
  .sg-native-select optgroup {
    background: var(--_select-bg);
    color: var(--_select-color);
    font-family: var(--_select-font);
  }

  .sg-native-select option:checked {
    background: color-mix(in oklch, var(--sg-color-primary) 20%, var(--_select-bg));
    color: color-mix(in oklch, var(--sg-color-primary) 78%, var(--_select-color));
  }

  .sg-native-select option:disabled {
    color: var(--_select-color-muted);
  }

  /* Progressive enhancement: full picker styling in browsers that support base-select. */
  @supports (appearance: base-select) {
    .sg-native-select {
      appearance: base-select;
      padding-right: var(--_select-pad-x);
      background-image: linear-gradient(
        180deg,
        color-mix(in oklch, var(--_select-bg) 86%, white) 0%,
        var(--_select-bg) 100%
      );
    }

    .sg-native-select::picker-icon {
      color: var(--_select-color-muted);
      transition: transform var(--_select-transition);
    }

    .sg-native-select:open::picker-icon {
      transform: rotate(180deg);
    }

    .sg-native-select::picker(select) {
      appearance: base-select;
      margin-top: var(--sg-gap-tight, 0.25rem);
      inset-area: bottom;
      position-area: bottom;
      position-try-order: normal;
      position-try-fallbacks: flip-block;
      border: 1px solid color-mix(in oklch, var(--_select-border) 92%, transparent);
      border-radius: var(--_select-radius);
      background: color-mix(in oklch, var(--_select-bg) 96%, white);
      color: var(--_select-color);
      box-shadow:
        0 12px 28px -10px rgb(0 0 0 / 0.24),
        0 4px 10px -6px rgb(0 0 0 / 0.22);
      padding: var(--sg-gap-tight, 0.25rem);
      transition:
        opacity var(--sg-duration-fast, 120ms) var(--sg-ease-default, ease-out),
        transform var(--sg-duration-fast, 120ms) var(--sg-ease-default, ease-out);
      transform-origin: top center;
      transform: translateY(0);
      opacity: 1;
    }

    @starting-style {
      .sg-native-select::picker(select) {
        opacity: 0;
        transform: translateY(-6px) scale(0.985);
      }
    }

    .sg-native-select::picker(select) option {
      min-height: calc(var(--sg-touch-min, 44px) - 4px);
      border-radius: max(calc(var(--sg-input-radius, 0.375rem) - 1px), 0.4rem);
      padding: var(--_select-gap) calc(var(--_select-gap) + var(--_select-gap-micro));
      color: var(--_select-color);
      background: transparent;
    }

    .sg-native-select::picker(select) option:hover {
      background: color-mix(in oklch, var(--sg-surface-container-high) 78%, transparent);
    }

    .sg-native-select::picker(select) option:checked {
      background: color-mix(in oklch, var(--sg-color-primary) 16%, var(--_select-bg));
      color: color-mix(in oklch, var(--sg-color-primary) 78%, var(--_select-color));
    }
  }

}

@layer sigui.base {
  .sg-output {
    --_output-pad-y: var(--sg-gap-related, 0.5rem);
    --_output-pad-x: var(--sg-pad-input, 0.75rem);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-base, 1rem);
    font-weight: 500;
    color: var(--sg-color-text);
    padding: var(--_output-pad-y) var(--_output-pad-x);
    background: var(--sg-surface-container-low);
    border-radius: var(--sg-input-radius, 0.375rem);
    display: inline-block;
    min-width: 2em;
  }

  @supports (width: 1cqi) {
    .sg-output {
      --_output-pad-y: clamp(var(--sg-gap-tight, 0.25rem), 4.7cqi, var(--sg-gap-related, 0.5rem));
      --_output-pad-x: clamp(var(--sg-gap-related, 0.5rem), 7.8cqi, var(--sg-pad-input, 0.75rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-output) {
      :scope {
        --_output-pad-y: var(--sg-gap-related, 0.5rem);
      }
    }
  }
}

@layer sigui.variants {
  .sg-output[data-size="sm"] {
    font-size: var(--sg-text-sm, 0.875rem);
    --_output-pad-y: var(--sg-gap-tight, 0.25rem);
    --_output-pad-x: var(--sg-gap-related, 0.5rem);
  }

  .sg-output[data-size="lg"] {
    font-size: var(--sg-text-lg, 1.125rem);
    --_output-pad-y: var(--sg-pad-input, 0.75rem);
    --_output-pad-x: var(--sg-gap-grouped, 1rem);
  }

  .sg-output[data-color="primary"] {
    color: var(--sg-color-primary);
    background: var(--sg-color-primary-subtle);
  }

  .sg-output[data-color="success"] {
    color: var(--sg-color-success);
    background: var(--sg-color-success-subtle);
  }

  .sg-output[data-color="danger"] {
    color: var(--sg-color-danger);
    background: var(--sg-color-danger-subtle);
  }

  .sg-output[data-color="warning"] {
    color: var(--sg-color-warning);
    background: var(--sg-color-warning-subtle);
  }
}

@layer sigui.base {
  .sg-progress {
    --_progress-height: 0.5rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    height: var(--_progress-height);
    width: 100%;
    overflow: hidden;
    border-radius: 9999px;
    background: var(--sg-surface-container-high);
    border: none;
  }

  /* WebKit track */
  .sg-progress::-webkit-progress-bar {
    background: var(--sg-surface-container-high);
    border-radius: 9999px;
  }

  /* WebKit fill */
  .sg-progress::-webkit-progress-value {
    background: var(--sg-color-primary);
    border-radius: 9999px;
    /* sg-lint-disable no-layout-animation – intentional width transition for progress fill */
    transition: width var(--sg-transition-default, 200ms ease-out);
  }

  /* Firefox fill */
  .sg-progress::-moz-progress-bar {
    background: var(--sg-color-primary);
    border-radius: 9999px;
  }

  /* Div-based fallback */
  .sg-progress-indicator {
    height: 100%;
    width: 100%;
    background: var(--sg-color-primary);
    border-radius: 9999px;
    transform-origin: left;
    transition: transform var(--sg-transition-default, 200ms ease-out);
  }

  @supports (width: 1cqi) {
    .sg-progress {
      --_progress-height: clamp(0.375rem, 3.6cqi, 0.5rem);
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-progress) {
      :scope {
        --_progress-height: 0.5rem;
      }
    }
  }

}

@layer sigui.variants {
  .sg-progress[data-size="sm"] {
    --_progress-height: 0.25rem;
  }

  .sg-progress[data-size="md"] {
    --_progress-height: 0.5rem;
  }

  .sg-progress[data-size="lg"] {
    --_progress-height: 0.75rem;
  }

  .sg-progress[data-color="primary"]::-webkit-progress-value,
  .sg-progress[data-color="primary"] .sg-progress-indicator {
    background: var(--sg-color-primary);
  }

  .sg-progress[data-color="success"]::-webkit-progress-value,
  .sg-progress[data-color="success"] .sg-progress-indicator {
    background: var(--sg-color-success);
  }

  .sg-progress[data-color="danger"]::-webkit-progress-value,
  .sg-progress[data-color="danger"] .sg-progress-indicator {
    background: var(--sg-color-danger);
  }

  .sg-progress[data-color="warning"]::-webkit-progress-value,
  .sg-progress[data-color="warning"] .sg-progress-indicator {
    background: var(--sg-color-warning);
  }

  .sg-progress[data-color="info"]::-webkit-progress-value,
  .sg-progress[data-color="info"] .sg-progress-indicator {
    background: var(--sg-color-info);
  }

  .sg-progress[data-color="primary"]::-moz-progress-bar { background: var(--sg-color-primary); }
  .sg-progress[data-color="success"]::-moz-progress-bar { background: var(--sg-color-success); }
  .sg-progress[data-color="danger"]::-moz-progress-bar { background: var(--sg-color-danger); }
  .sg-progress[data-color="warning"]::-moz-progress-bar { background: var(--sg-color-warning); }
  .sg-progress[data-color="info"]::-moz-progress-bar { background: var(--sg-color-info); }

}

@layer sigui.states {
  .sg-progress:indeterminate::-webkit-progress-bar {
    background: var(--sg-surface-container-high);
  }

  .sg-progress:indeterminate::-webkit-progress-value {
    background: var(--sg-color-primary);
    animation: sg-progress-indeterminate calc(200ms * 7.5) ease-in-out infinite;
  }

  .sg-progress:indeterminate::-moz-progress-bar {
    background: var(--sg-color-primary);
    animation: sg-progress-indeterminate calc(200ms * 7.5) ease-in-out infinite;
  }

  .sg-progress:indeterminate .sg-progress-indicator {
    transform: scaleX(0.5);
    animation: sg-progress-indeterminate calc(200ms * 7.5) ease-in-out infinite;
  }

  @keyframes sg-progress-indeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
  }

  @media (forced-colors: active) {

    .sg-progress {
      border: 1px solid CanvasText;
    }

    .sg-progress::-webkit-progress-value,
    .sg-progress-indicator {
      background: Highlight;
    }

    .sg-progress::-moz-progress-bar {
      background: Highlight;
    }
  }

}

@layer sigui.base {
  .sg-prose {
    --_prose-measure: 65ch;
    max-inline-size: var(--_prose-measure);
    container-type: inline-size;
    container-name: sg-prose;
  }

  @supports (selector(:scope)) {
    @scope (.sg-prose) {
      :scope {
        --_prose-measure: 65ch;
      }
    }
  }
}

@layer sigui.base {
  .sg-radio-group {
    --_radio-group-gap: var(--sg-gap-related, 0.5rem);
    --_radio-item-gap: var(--sg-gap-related, 0.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--_radio-group-gap);
  }

  .sg-radio-group[data-orientation="horizontal"] {
    flex-direction: row;
    flex-wrap: wrap;
    --_radio-group-gap: var(--sg-gap-grouped, 1rem);
  }

  .sg-radio-group-item {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--_radio-item-gap);
    cursor: pointer;
  }

  .sg-radio-group-item--with-description {
    align-items: flex-start;
  }

  .sg-radio {
    appearance: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--sg-color-border-light);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    margin-top: var(--sg-gap-micro, 0.125rem);
    cursor: pointer;
    transition: border-color var(--sg-transition-default, 200ms ease-out);
  }

  .sg-radio::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: transparent;
    transform: scale(0);
    transition:
      background var(--sg-transition-default, 200ms ease-out),
      transform 200ms cubic-bezier(0.2, 1.2, 0.4, 1);
  }

  .sg-radio-content {
    display: flex;
    flex-direction: column;
    gap: var(--sg-gap-micro, 0.125rem);
  }

  .sg-radio-label {
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--sg-color-text);
    user-select: none;
  }

  .sg-radio-description {
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-xs, 0.6875rem);
    color: var(--sg-color-text-muted);
  }

  @supports (width: 1cqi) {
    .sg-radio-group {
      --_radio-group-gap: clamp(var(--sg-gap-tight, 0.25rem), 1.9cqi, var(--sg-gap-related, 0.5rem));
      --_radio-item-gap: clamp(var(--sg-gap-tight, 0.25rem), 1.9cqi, var(--sg-gap-related, 0.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-radio-group) {
      .sg-radio-label,
      .sg-radio-description {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.variants {
  .sg-radio-group[data-size="sm"] .sg-radio {
    width: 0.875rem;
    height: 0.875rem;
  }

  .sg-radio-group[data-size="sm"] .sg-radio::after {
    width: 0.375rem;
    height: 0.375rem;
  }

  .sg-radio-group[data-size="sm"] .sg-radio-label {
    font-size: var(--sg-text-xs, 0.6875rem);
  }

  .sg-radio-group[data-size="lg"] .sg-radio {
    width: 1.25rem;
    height: 1.25rem;
  }

  .sg-radio-group[data-size="lg"] .sg-radio::after {
    width: 0.625rem;
    height: 0.625rem;
  }

  .sg-radio-group[data-size="lg"] .sg-radio-label {
    font-size: var(--sg-text-base, 1rem);
  }

  .sg-radio-group-item[data-size="sm"] .sg-radio {
    width: 0.875rem;
    height: 0.875rem;
  }

  .sg-radio-group-item[data-size="sm"] .sg-radio::after {
    width: 0.375rem;
    height: 0.375rem;
  }

  .sg-radio-group-item[data-size="sm"] .sg-radio-label {
    font-size: var(--sg-text-xs, 0.6875rem);
  }

  .sg-radio-group-item[data-size="lg"] .sg-radio {
    width: 1.25rem;
    height: 1.25rem;
  }

  .sg-radio-group-item[data-size="lg"] .sg-radio::after {
    width: 0.625rem;
    height: 0.625rem;
  }

  .sg-radio-group-item[data-size="lg"] .sg-radio-label {
    font-size: var(--sg-text-base, 1rem);
  }

}

@layer sigui.states {

  .sg-radio:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
  }
  .sg-radio:checked {
    border-color: var(--sg-color-primary);
  }

  .sg-radio:checked::after {
    background: var(--sg-color-primary);
    transform: scale(1);
  }

  .sg-radio:not(:checked)::after {
    transform: scale(0);
  }

  @media (forced-colors: active) {

    .sg-radio {
      border: 2px solid ButtonText;
    }

    .sg-radio:checked {
      border-color: Highlight;
    }
  }

  @media (prefers-reduced-motion: reduce) {

    .sg-radio:not(:checked)::after {
      transform: scale(0);
    }
  }

}

@layer sigui.base {
  .sg-search-input {
    --_search-input-pad-inline: var(--sg-pad-input, 0.75rem);
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    padding: 0 var(--_search-input-pad-inline);
    border: 1px solid var(--sg-input-border);
    border-radius: var(--sg-input-radius);
    background: var(--sg-input-bg);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-base, 1rem);
    line-height: var(--sg-leading-base);
    min-height: var(--sg-target-min-touch, var(--sg-touch-min, 44px));
    color: var(--sg-color-text);
    outline: none;
    transition:
      border-color var(--sg-transition-default, 200ms ease-out),
      box-shadow var(--sg-transition-default, 200ms ease-out);
  }

  .sg-search-input::placeholder {
    color: var(--sg-color-text-muted);
  }

  .sg-search-input::-webkit-search-decoration,
  .sg-search-input::-webkit-search-results-button,
  .sg-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
  }

  .sg-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }

  @supports (width: 1cqi) {
    .sg-search-input {
      --_search-input-pad-inline: clamp(var(--sg-gap-related, 0.5rem), 3.9cqi, var(--sg-pad-input, 0.75rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-search-input) {
      :scope {
        --_search-input-pad-inline: var(--sg-pad-input, 0.75rem);
      }
    }
  }
}

@layer sigui.variants {
  .sg-search-input[data-size="sm"] {
    min-height: calc(var(--sg-target-min-touch, var(--sg-touch-min, 44px)) * 0.75);
    --_search-input-pad-inline: var(--sg-gap-related, 0.5rem);
    font-size: var(--sg-text-xs, 0.6875rem);
  }

  .sg-search-input[data-size="lg"] {
    min-height: calc(var(--sg-target-min-touch, var(--sg-touch-min, 44px)) * 1.15);
    --_search-input-pad-inline: var(--sg-gap-grouped, 1rem);
    font-size: var(--sg-text-base, 1rem);
  }
}

@layer sigui.states {
  .sg-search-input:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
    border-color: var(--sg-input-border-focus, var(--sg-color-border-focus));
  }

  .sg-search-input:disabled {
    opacity: var(--sg-disabled-opacity, 0.38);
    cursor: not-allowed;
  }
}

@layer sigui.base {
  .sg-separator {
    --_separator-thickness: 1px;
    border: none;
    margin: 0;
    flex-shrink: 0;
  }

  .sg-separator[data-orientation="horizontal"] {
    width: 100%;
    height: var(--_separator-thickness);
    background: var(--sg-color-border);
  }

  .sg-separator[data-orientation="vertical"] {
    width: var(--_separator-thickness);
    align-self: stretch;
    background: var(--sg-color-border);
  }

  @supports (width: 1cqi) {
    .sg-separator {
      --_separator-thickness: clamp(0.5px, 0.5cqi, 1px);
    }
  }

}

@layer sigui.states {
  @media (forced-colors: active) {

    .sg-separator {
      background: CanvasText;
    }
  }

}

@layer sigui.base {
  .sg-slider-wrapper {
    --_slider-gap: var(--sg-gap-tight, 0.25rem);
    display: flex;
    flex-direction: column;
    gap: var(--_slider-gap);
  }

  .sg-slider-label {
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 500;
    color: var(--sg-color-text, currentColor);
  }

  .sg-slider {
    --_slider-thumb-size: 1.25rem;
    --_slider-track-size: 0.375rem;
    width: 100%;
    height: 1.25rem;
    border-radius: 9999px;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
  }

  .sg-slider::-webkit-slider-runnable-track {
    height: var(--_slider-track-size);
    border-radius: 9999px;
    background: var(--sg-surface-container-high);
  }

  .sg-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: var(--_slider-thumb-size);
    height: var(--_slider-thumb-size);
    border-radius: 9999px;
    background: var(--sg-color-primary);
    border: 2px solid var(--sg-color-text-inverse);
    box-shadow: var(--sg-card-shadow);
    cursor: pointer;
    margin-top: -0.4375rem;
    transition: box-shadow var(--sg-transition-default, 200ms ease-out);
  }

  .sg-slider::-moz-range-track {
    height: var(--_slider-track-size);
    border-radius: 9999px;
    background: var(--sg-surface-container-high);
    border: none;
  }

  .sg-slider::-moz-range-thumb {
    width: var(--_slider-thumb-size);
    height: var(--_slider-thumb-size);
    border-radius: 9999px;
    background: var(--sg-color-primary);
    border: 2px solid var(--sg-color-text-inverse);
    box-shadow: var(--sg-card-shadow);
    cursor: pointer;
  }

  @supports (selector(:scope)) {
    @scope (.sg-slider-wrapper) {
      .sg-slider-label {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.states {

  .sg-slider::-webkit-slider-thumb:hover {
    box-shadow: var(--sg-shadow-dropdown), 0 0 0 3px color-mix(in oklch, var(--sg-color-primary) 15%, transparent);
  }

  .sg-slider:focus-visible {
    outline: none;
  }

  .sg-slider:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--sg-card-shadow), 0 0 0 var(--sg-focus-width) var(--sg-focus-inner), 0 0 0 calc(var(--sg-focus-width) + var(--sg-focus-offset)) var(--sg-focus-color);
  }

  .sg-slider:disabled {
    opacity: var(--sg-disabled-opacity);
    cursor: not-allowed;
  }

  .sg-slider:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
  }

  .sg-slider:disabled::-moz-range-thumb {
    cursor: not-allowed;
  }

  @media (forced-colors: active) {
    .sg-slider {
      border: 1px solid ButtonText;
    }
  }

}

@layer sigui.base {
  .sg-switch-wrapper {
    --_switch-gap: var(--sg-gap-related, 0.5rem);
    display: inline-flex;
    align-items: center;
    gap: var(--_switch-gap);
    cursor: pointer;
  }

  .sg-switch {
    --_switch-width: 2.75rem;
    --_switch-height: 1.5rem;
    --_switch-thumb-size: 1.125rem;
    appearance: none;
    -webkit-appearance: none;
    width: var(--_switch-width);
    height: var(--_switch-height);
    border-radius: 9999px;
    background: var(--sg-surface-container-high);
    border: 1.5px solid var(--sg-color-border);
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    transition:
      background 150ms ease-out,
      border-color 150ms ease-out;
  }

  .sg-switch::before {
    content: "";
    position: absolute;
    width: var(--_switch-thumb-size);
    height: var(--_switch-thumb-size);
    border-radius: 9999px;
    background: var(--sg-color-text-inverse);
    box-shadow: var(--sg-card-shadow);
    top: 50%;
    left: 0.125rem;
    transform: translateY(-50%);
    transition: transform 246ms cubic-bezier(0.2, 1.2, 0.4, 1);
  }

  .sg-switch-thumb {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: var(--sg-color-text-inverse);
    box-shadow: var(--sg-card-shadow);
    position: absolute;
    top: 0.0625rem;
    left: 0.0625rem;
    transition: transform 246ms cubic-bezier(0.2, 1.2, 0.4, 1);
  }

  .sg-switch-label {
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--sg-color-text);
    user-select: none;
  }

  @supports (width: 1cqi) {
    .sg-switch-wrapper {
      --_switch-gap: clamp(var(--sg-gap-tight, 0.25rem), 3.8cqi, var(--sg-gap-related, 0.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-switch-wrapper) {
      .sg-switch-label {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.states {

  .sg-switch-wrapper:focus-within .sg-switch {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset) var(--sg-focus-inner);
  }

  .sg-switch:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
  }

  .sg-switch:checked {
    background: var(--sg-color-primary);
    border-color: var(--sg-color-primary);
  }

  .sg-switch:checked::before {
    transform: translateY(-50%) translateX(1.25rem);
  }

  .sg-switch:checked .sg-switch-thumb {
    transform: translateX(1.25rem);
  }

  .sg-switch:hover:not(:disabled) {
    border-color: var(--sg-color-text-muted);
  }

  .sg-switch:checked:hover:not(:disabled) {
    opacity: 0.9;
    border-color: var(--sg-color-primary);
  }

  .sg-switch:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  @media (forced-colors: active) {

    .sg-switch {
      border: 2px solid ButtonText;
    }

    .sg-switch:checked {
      background: Highlight;
    }
  }

}

@layer sigui.base {
  .sg-table-wrapper {
    --_table-cell-pad-y: var(--sg-pad-button-y, 0.75rem);
    --_table-cell-pad-x: var(--sg-pad-button-x, 1rem);
    width: 100%;
    overflow-x: auto;
    container-type: inline-size;
    container-name: sg-table;
  }

  .sg-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    text-align: left;
  }

  .sg-table-header {
    border-bottom: 1px solid var(--sg-color-border);
  }

  .sg-table-head {
    padding: var(--_table-cell-pad-y) var(--_table-cell-pad-x);
    font-weight: 500;
    color: var(--sg-color-text-muted);
    white-space: nowrap;
  }

  .sg-table-cell {
    padding: var(--_table-cell-pad-y) var(--_table-cell-pad-x);
    color: var(--sg-color-text);
  }

  .sg-table-row {
    border-bottom: 1px solid var(--sg-color-border);
  }

  .sg-table-footer {
    border-top: 2px solid var(--sg-color-border);
    background: var(--sg-surface-container-high);
    font-weight: 500;
  }

  .sg-table-footer .sg-table-cell {
    font-weight: 500;
  }

  .sg-table-caption {
    caption-side: bottom;
    padding: var(--sg-gap-related, 0.5rem) 0;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-xs, 0.6875rem);
    color: var(--sg-color-text-muted);
    text-align: left;
  }

  @supports (width: 1cqi) {
    .sg-table-wrapper {
      --_table-cell-pad-y: clamp(var(--sg-gap-related, 0.5rem), 2.2cqi, var(--sg-pad-button-y, 0.75rem));
      --_table-cell-pad-x: clamp(var(--sg-gap-related, 0.5rem), 2.7cqi, var(--sg-pad-button-x, 1rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-table-wrapper) {
      .sg-table-caption {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.variants {
  .sg-table[data-striped] .sg-table-body .sg-table-row:nth-child(even) {
    background: var(--sg-surface-container-high);
  }

  .sg-table[data-striped] .sg-table-body .sg-table-row:nth-child(odd) {
    background: transparent;
  }
}

@layer sigui.states {
  .sg-table-row:hover {
    background: var(--sg-surface-container-high);
  }

  @media (forced-colors: active) {
    .sg-table {
      border: 1px solid CanvasText;
    }
  }
}

@layer sigui.base {
  .sg-textarea-wrapper {
    --_textarea-wrapper-gap: var(--sg-gap-related, 0.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--_textarea-wrapper-gap);
  }

  .sg-textarea-label {
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 500;
    color: var(--sg-color-text);
  }

  .sg-textarea {
    padding: var(--sg-input-padding, 0.75rem);
    border: 1px solid var(--sg-input-border);
    border-radius: var(--sg-input-radius);
    background: var(--sg-input-bg);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-base, 1rem);
    line-height: var(--sg-leading-base);
    color: var(--sg-color-text);
    outline: none;
    transition:
      border-color var(--sg-transition-default, 200ms ease-out),
      box-shadow var(--sg-transition-default, 200ms ease-out);
  }

  .sg-textarea[data-resize="none"]     { resize: none; }
  .sg-textarea[data-resize="vertical"] { resize: vertical; }
  .sg-textarea[data-resize="both"]     { resize: both; }

  .sg-textarea[data-autogrow] {
    resize: none;
    overflow: hidden;
    min-height: calc(var(--sg-input-padding, 0.75rem) * 2 + var(--sg-leading-base, 1.5) * 1rem);
  }

  .sg-textarea-description {
    font-size: var(--sg-text-xs, 0.6875rem);
    color: var(--sg-color-text-muted);
  }

  .sg-textarea-error {
    font-size: var(--sg-text-xs, 0.6875rem);
    color: var(--sg-color-danger);
  }

  @supports (width: 1cqi) {
    .sg-textarea-wrapper {
      --_textarea-wrapper-gap: clamp(var(--sg-gap-tight, 0.25rem), 2.1cqi, var(--sg-gap-related, 0.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-textarea-wrapper) {
      .sg-textarea-description,
      .sg-textarea-error {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.variants {
  .sg-textarea-wrapper[data-density="compact"] {
    --sg-density: 0.75;
  }

  .sg-textarea-wrapper[data-density="comfortable"] {
    --sg-density: 1;
  }

  .sg-textarea-wrapper[data-density="spacious"] {
    --sg-density: 1.5;
  }

  .sg-textarea-wrapper .sg-textarea {
    padding: calc(var(--sg-input-padding, 0.75rem) * var(--sg-density, 1));
  }

  .sg-textarea-wrapper[data-density="compact"] .sg-textarea {
    font-size: var(--sg-text-sm, 0.875rem);
  }

}

@layer sigui.states {
  .sg-textarea:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
    border-color: var(--sg-color-border-focus);
  }

  .sg-textarea[data-validation="invalid"] {
    border-color: var(--sg-color-danger);
  }

}

@layer sigui.base {
  .sg-toggle {
    --_toggle-gap: var(--sg-gap-related, 0.5rem);
    --_toggle-pad-y: var(--sg-gap-related, 0.5rem);
    --_toggle-pad-x: var(--sg-pad-input, 0.75rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--_toggle-gap);
    padding: var(--_toggle-pad-y) var(--_toggle-pad-x);
    border: 1px solid var(--sg-color-border);
    border-radius: var(--sg-input-radius, 0.375rem);
    background: transparent;
    color: var(--sg-color-text);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 500;
    min-height: var(--sg-touch-min, 44px);
    cursor: pointer;
    user-select: none;
    transition:
      background var(--sg-transition-default, 200ms ease-out),
      border-color var(--sg-transition-default, 200ms ease-out),
      color var(--sg-transition-default, 200ms ease-out);
  }

  .sg-toggle-outline {
    border-color: var(--sg-color-border);
    background: transparent;
  }

  .sg-toggle-outline[aria-pressed="true"] {
    border-color: var(--sg-color-primary);
    background: var(--sg-color-primary-subtle);
    color: var(--sg-color-primary);
  }

  .sg-toggle-group {
    display: inline-flex;
    gap: 0;
  }

  .sg-toggle-group-outline > .sg-toggle {
    border-color: var(--sg-color-border);
  }

  .sg-toggle-group > .sg-toggle {
    border-radius: 0;
  }

  .sg-toggle-group > .sg-toggle + .sg-toggle {
    border-left: 0;
  }

  .sg-toggle-group > .sg-toggle:first-child {
    border-radius: var(--sg-input-radius, 0.375rem) 0 0 var(--sg-input-radius, 0.375rem);
  }

  .sg-toggle-group > .sg-toggle:last-child {
    border-radius: 0 var(--sg-input-radius, 0.375rem) var(--sg-input-radius, 0.375rem) 0;
  }

  @supports (width: 1cqi) {
    .sg-toggle {
      --_toggle-gap: clamp(var(--sg-gap-tight, 0.25rem), 4.2cqi, var(--sg-gap-related, 0.5rem));
      --_toggle-pad-y: clamp(var(--sg-gap-tight, 0.25rem), 4.2cqi, var(--sg-gap-related, 0.5rem));
      --_toggle-pad-x: clamp(var(--sg-gap-related, 0.5rem), 6.9cqi, var(--sg-pad-input, 0.75rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-toggle) {
      :scope {
        --_toggle-gap: var(--sg-gap-related, 0.5rem);
      }
    }
  }

}

@layer sigui.variants {
  .sg-toggle[data-size="sm"] {
    padding: var(--sg-gap-tight, 0.25rem) var(--sg-gap-related, 0.5rem);
    font-size: var(--sg-text-xs, 0.6875rem);
    min-height: calc(var(--sg-touch-min, 44px) * 0.75);
  }

  .sg-toggle[data-size="lg"] {
    padding: var(--sg-pad-button-y, 0.75rem) var(--sg-pad-button-x, 1rem);
    font-size: var(--sg-text-base, 1rem);
    min-height: calc(var(--sg-touch-min, 44px) * 1.15);
  }

}

@layer sigui.states {
  @media (forced-colors: active) {
    .sg-toggle {
      border: 1px solid ButtonText;
    }

    .sg-toggle[aria-pressed="true"] {
      border-color: Highlight;
      outline: 2px solid Highlight;
      outline-offset: -2px;
    }
  }

  .sg-toggle:hover:not(:disabled) {
    background: var(--sg-surface-container);
  }

  .sg-toggle:active:not(:disabled) {
    background: var(--sg-surface-container-high);
  }

  .sg-toggle:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
  }

  .sg-toggle[aria-pressed="true"] {
    background: var(--sg-color-primary-subtle);
    border-color: var(--sg-color-primary);
    color: var(--sg-color-primary);
  }

  .sg-toggle[aria-pressed="true"]:hover:not(:disabled) {
    background: var(--sg-color-primary-subtle);
    opacity: 0.9;
  }

}

@layer sigui.base {
  .sg-accordion,
  .sg-accordion-root {
    --_accordion-trigger-pad: var(--sg-gap-grouped, 1rem);
    --_accordion-trigger-gap: var(--sg-pad-input, 0.75rem);
    --_accordion-content-pad: var(--sg-gap-grouped, 1rem);
    border: 1px solid var(--sg-color-border);
    border-radius: var(--sg-card-radius, var(--sg-card-radius, 0.5rem));
    overflow: hidden;
    container-type: inline-size;
    container-name: sg-accordion;
  }

  .sg-accordion-item + .sg-accordion-item {
    border-top: 1px solid var(--sg-color-border);
  }

  .sg-accordion-trigger {
    border: none;
    background: none;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 500;
    color: var(--sg-color-text);
    min-height: var(--sg-touch-min, 44px);
    text-align: left;
    cursor: pointer;
  }

  .sg-accordion-trigger::after {
    content: "";
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    margin-left: var(--sg-pad-input, 0.75rem);
    background: currentColor;
    opacity: 0.5;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: transform var(--sg-transition-default, 200ms ease-out);
  }

  .sg-accordion-content {
    padding: 0 var(--_accordion-content-pad) var(--_accordion-content-pad);
    font-size: var(--sg-text-sm, 0.875rem);
    line-height: var(--sg-leading-sm, 1.5);
    color: var(--sg-color-text-secondary);
  }

  @supports (width: 1cqi) {
    .sg-accordion,
    .sg-accordion-root {
      --_accordion-trigger-pad: clamp(var(--sg-gap-related, 0.5rem), 3.8cqi, var(--sg-gap-grouped, 1rem));
      --_accordion-trigger-gap: clamp(var(--sg-gap-related, 0.5rem), 3.1cqi, var(--sg-pad-input, 0.75rem));
      --_accordion-content-pad: clamp(var(--sg-gap-related, 0.5rem), 3.8cqi, var(--sg-gap-grouped, 1rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-accordion, .sg-accordion-root) {
      .sg-accordion-trigger {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.states {
  .sg-accordion-trigger {
    transition: background var(--sg-transition-default, 200ms ease-out);
  }

  .sg-accordion-trigger:hover {
    background: var(--sg-surface-container);
  }

  .sg-accordion-trigger:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset) var(--sg-focus-inner);
  }

  .sg-accordion-trigger[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  .sg-accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--sg-transition-default, 200ms ease-out);
  }

  .sg-accordion-content[data-state="open"] {
    grid-template-rows: 1fr;
  }

  @media (forced-colors: active) {
    .sg-accordion-trigger {
      border: 1px solid ButtonText;
    }
  }

}

@layer sigui.base {
  .sg-alert-dialog {
    --_alert-dialog-pad: var(--sg-card-padding, 1.5rem);
    --_alert-dialog-width: calc(100% - 2rem);
    background: var(--sg-card-bg);
    border-radius: var(--sg-card-radius, var(--sg-card-radius, 0.5rem));
    box-shadow: var(--sg-shadow-dropdown);
    padding: var(--_alert-dialog-pad);
    max-width: 32rem;
    width: var(--_alert-dialog-width);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    margin: auto;
    border: none;
    container-type: inline-size;
    container-name: sg-alert-dialog;
  }

  .sg-alert-dialog::backdrop {
    background: var(--sg-overlay-backdrop, color-mix(in oklch, var(--sg-color-text) 50%, transparent));
    backdrop-filter: blur(var(--sg-backdrop-blur, 4px));
  }

  @supports (width: 1cqi) {
    .sg-alert-dialog {
      --_alert-dialog-pad: clamp(var(--sg-gap-related, 0.5rem), 5.3cqi, var(--sg-card-padding, 1.5rem));
    }
  }

  .sg-alert-dialog-header {
    display: flex;
    flex-direction: column;
    gap: var(--sg-gap-tight, 0.25rem);
    margin-bottom: var(--sg-gap-grouped, 1rem);
  }

  .sg-alert-dialog-title {
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-lg, 1.125rem);
    font-weight: 600;
    color: var(--sg-color-text);
    margin: 0;
    line-height: var(--sg-leading-normal, 1.4);
  }

  .sg-alert-dialog-description {
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--sg-color-text-secondary);
    margin: 0;
    line-height: var(--sg-leading-relaxed, 1.5);
  }

  .sg-alert-dialog-footer {
    display: flex;
    flex-direction: row-reverse;
    gap: var(--sg-gap-related, 0.5rem);
    margin-top: var(--sg-gap-grouped, 1rem);
  }

  @supports (text-box-trim: both) {
    .sg-alert-dialog-title,
    .sg-alert-dialog-description {
      text-box-trim: both;
      text-box-edge: cap alphabetic;
    }
  }

  @supports (width: 1cqi) {
    .sg-alert-dialog {
      --_alert-dialog-pad: clamp(var(--sg-gap-related, 0.5rem), 5.3cqi, var(--sg-card-padding, 1.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-alert-dialog) {
      :scope {
        --_alert-dialog-width: calc(100% - 2rem);
      }
      .sg-alert-dialog-title { text-wrap: balance; }
      .sg-alert-dialog-description { text-wrap: pretty; }
    }
  }

}

@layer sigui.states {
  @media (prefers-reduced-motion: reduce) {
    .sg-alert-dialog[data-state="opening"] {
      animation-name: sg-fade-in-overlay;
      animation-duration: 200ms;
    }
    .sg-alert-dialog[data-state="closing"] {
      animation-name: sg-fade-out;
      animation-duration: 200ms;
    }
  }

}

@layer sigui.base {
  .sg-animated-image {
    --_animated-image-display: inline-block;
    display: inline-block;
    display: var(--_animated-image-display);
  }

  .sg-animated-image > img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  @supports (selector(:scope)) {
    @scope (.sg-animated-image) {
      :scope {
        --_animated-image-display: inline-block;
      }
    }
  }
}

@layer sigui.base {
  .sg-aspect-ratio {
    --_aspect-ratio-width: 100%;
    position: relative;
    width: var(--_aspect-ratio-width);
  }

  .sg-aspect-ratio > :first-child {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @supports (selector(:scope)) {
    @scope (.sg-aspect-ratio) {
      :scope {
        --_aspect-ratio-width: 100%;
      }
    }
  }

}

@layer sigui.base {
  .sg-avatar {
    --_avatar-size: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--_avatar-size);
    height: var(--_avatar-size);
    border-radius: 9999px;
    overflow: hidden;
    background: var(--sg-color-primary-subtle);
    color: var(--sg-color-primary);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    flex-shrink: 0;
    user-select: none;
  }

  .sg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @supports (width: 1cqi) {
    .sg-avatar {
      --_avatar-size: clamp(2rem, 112.5cqi, 2.5rem);
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-avatar) {
      :scope {
        --_avatar-size: 2.5rem;
      }
    }
  }

}

@layer sigui.variants {
  .sg-avatar[data-size="sm"] {
    --_avatar-size: 2rem;
    font-size: var(--sg-text-xs, 0.75rem);
  }

  .sg-avatar[data-size="md"] {
    --_avatar-size: 2.5rem;
    font-size: var(--sg-text-sm, 0.875rem);
  }

  .sg-avatar[data-size="lg"] {
    --_avatar-size: 3rem;
    font-size: var(--sg-text-base, 1rem);
  }

  .sg-avatar[data-size="xl"] {
    --_avatar-size: 4rem;
    font-size: var(--sg-text-lg, 1.125rem);
  }
}

@layer sigui.base {
  .sg-badge {
    --_badge-gap: var(--sg-gap-tight, 0.25rem);
    --_badge-pad-y: var(--sg-gap-micro, 0.125rem);
    --_badge-pad-x: var(--sg-gap-related, 0.5rem);
    display: inline-flex;
    align-items: center;
    gap: var(--_badge-gap);
    padding: var(--_badge-pad-y) var(--_badge-pad-x);
    border-radius: 9999px;
    border: 1px solid color-mix(in oklch, currentColor 16%, transparent);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-xs, 0.6875rem);
    font-weight: 500;
    line-height: var(--sg-leading-normal, 1.4);
    white-space: nowrap;
    --sg-icon-size: 1em;
    --sg-icon-stroke: 1.5;
  }

  .sg-badge > .sg-icon {
    --sg-icon-size: 1em;
  }

  a.sg-badge {
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  /* Self-sizing using cqi units - clamp between micro and tight gap based on container width */
  @supports (width: 1cqi) {
    .sg-badge {
      --_badge-gap: clamp(var(--sg-gap-micro, 0.125rem), 2.5cqi, var(--sg-gap-tight, 0.25rem));
    }
  }

}

@layer sigui.variants {
  .sg-badge[data-color="primary"] {
    background: var(--sg-color-primary-subtle);
    color: var(--sg-color-primary);
  }

  .sg-badge[data-color="secondary"] {
    background: var(--sg-surface-container-high);
    color: var(--sg-color-text-secondary);
  }

  .sg-badge[data-color="danger"] {
    background: var(--sg-color-danger-subtle);
    color: var(--sg-color-danger-active);
  }

  .sg-badge[data-color="success"] {
    background: var(--sg-color-success-subtle);
    color: var(--sg-color-success-active);
  }

  .sg-badge[data-color="warning"] {
    background: var(--sg-color-warning-subtle);
    color: var(--sg-color-warning-active);
  }

  .sg-badge[data-color="info"] {
    background: var(--sg-color-info-subtle);
    color: var(--sg-color-info-active);
  }

  .sg-badge[data-color="ghost"] {
    background: transparent;
    color: var(--sg-color-text-secondary);
    border: 1px solid var(--sg-color-border);
  }

  .sg-badge[data-color="outline"] {
    background: transparent;
    color: var(--sg-color-primary);
    border: 1px solid currentColor;
  }

  .sg-badge[data-low-contrast] {
    outline: 1.5px dashed currentColor;
    outline-offset: -1px;
  }

  .sg-badge[data-size="sm"] {
    font-size: 0.625rem;
    padding: 0 var(--sg-gap-related, 0.375rem);
  }

  .sg-badge[data-size="lg"] {
    font-size: var(--sg-text-sm, 0.875rem);
    padding: var(--sg-gap-tight, 0.25rem) var(--sg-pad-input, 0.75rem);
  }

}

@layer sigui.states {
  a.sg-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sg-transition-default, 200ms ease-out);
  }

  a.sg-badge:hover::before {
    opacity: var(--sg-state-hover-opacity, 0.08);
  }

  a.sg-badge:active::before {
    opacity: var(--sg-state-active-opacity, 0.12);
  }

  a.sg-badge:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
  }
  @media (forced-colors: active) {
    a.sg-badge {
      color: LinkText;
      text-decoration: underline;
    }
  }

}

@layer sigui.base {
  .sg-button-group {
    --_button-group-direction: row;
    --_button-group-seam: -1px;
    display: inline-flex;
    flex-direction: var(--_button-group-direction);
    font-family: var(--sg-font-family, system-ui);
    container-type: inline-size;
    container-name: sg-button-group;
  }

  .sg-button-group[data-orientation="horizontal"] {
    --_button-group-direction: row;
  }

  .sg-button-group[data-orientation="vertical"] {
    --_button-group-direction: column;
  }

  .sg-button-group[data-orientation="horizontal"] > :not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: var(--_button-group-seam);
  }

  .sg-button-group[data-orientation="horizontal"] > :not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .sg-button-group[data-orientation="vertical"] > :not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: var(--_button-group-seam);
  }

  .sg-button-group[data-orientation="vertical"] > :not(:last-child) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

}

@layer sigui.base {
  .sg-calendar {
    --_calendar-gap: var(--sg-gap-related, 0.5rem);
    --_calendar-pad: var(--sg-pad-input, 0.75rem);
    --_calendar-day-size: 2.25rem;
    --_calendar-title-gap: var(--sg-gap-tight, 0.25rem);
    display: inline-flex;
    flex-direction: column;
    gap: var(--_calendar-gap);
    padding: var(--_calendar-pad);
    font-family: var(--sg-font-family, system-ui);
    container-type: inline-size;
    container-name: sg-calendar;
  }

  .sg-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sg-gap-related, 0.5rem);
  }

  .sg-calendar-title {
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 600;
    text-align: center;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--_calendar-title-gap);
  }

  .sg-calendar-token-wrap {
    position: relative;
    display: inline-flex;
  }

  .sg-calendar-token {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 600;
    color: var(--sg-color-text);
    cursor: default;
  }

  .sg-calendar-popover {
    position: absolute;
    top: calc(100% + var(--sg-gap-tight, 0.25rem));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    min-width: 8.5rem;
    padding: var(--sg-gap-tight, 0.25rem);
    border: 1px solid var(--sg-color-border-muted);
    border-radius: var(--sg-input-radius, 0.25rem);
    background: var(--sg-surface);
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.14);
  }

  .sg-calendar-picker {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sg-gap-related, 0.5rem);
    border: 1px solid var(--sg-color-border-muted, var(--sg-card-border, #d0d7de));
    border-radius: var(--sg-input-radius, 0.5rem);
    background: var(--sg-card-bg, #fff);
    padding: var(--sg-gap-tight, 0.25rem);
  }

  .sg-calendar-picker-label {
    display: flex;
    flex-direction: column;
    gap: var(--sg-gap-tight, 0.25rem);
    font-size: var(--sg-text-xs, 0.6875rem);
    color: var(--sg-color-text-muted);
  }

  .sg-calendar-picker-select {
    width: 100%;
    min-height: 2rem;
    border: 1px solid var(--sg-color-border-muted);
    border-radius: var(--sg-input-radius, 0.25rem);
    background: var(--sg-card-bg, #fff);
    color: var(--sg-color-text);
    font: inherit;
    padding: var(--sg-gap-tight, 0.25rem) var(--sg-gap-related, 0.5rem);
    position: relative;
    z-index: 6;
  }

  .sg-calendar-picker-select option {
    background: var(--sg-card-bg, #fff);
    color: var(--sg-color-text, #111);
  }

  .sg-calendar-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: var(--sg-input-radius, 0.25rem);
    background: none;
    cursor: pointer;
    color: var(--sg-color-text);
    font-size: var(--sg-text-sm, 0.875rem);
  }

  .sg-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, var(--_calendar-day-size));
    gap: 0;
  }

  .sg-calendar-weekday {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--_calendar-day-size);
    height: var(--_calendar-day-size);
    font-size: var(--sg-text-xs, 0.6875rem);
    font-weight: 500;
    color: var(--sg-color-text-muted);
    text-align: center;
  }

  .sg-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, var(--_calendar-day-size));
    gap: 0;
  }

  .sg-calendar-day-empty {
    width: var(--_calendar-day-size);
    height: var(--_calendar-day-size);
  }

  .sg-calendar-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--_calendar-day-size);
    height: var(--_calendar-day-size);
    border: none;
    border-radius: var(--sg-input-radius, 0.25rem);
    background: none;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    cursor: pointer;
    color: var(--sg-color-text);
  }

  .sg-calendar-day[data-outside] {
    color: var(--sg-color-text-muted);
    opacity: 0.5;
  }

  @supports (width: 1cqi) {
    .sg-calendar {
      --_calendar-pad: clamp(var(--sg-gap-related, 0.5rem), 3.5cqi, var(--sg-pad-input, 0.75rem));
      --_calendar-day-size: clamp(2rem, 11.8cqi, 2.25rem);
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-calendar) {
      .sg-calendar-title {
        text-wrap: balance;
      }

      .sg-calendar-picker-label {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.states {
  .sg-calendar-day:hover:not(:disabled):not([data-outside]) {
    background: var(--sg-surface-container);
  }

  .sg-calendar-day[data-state="selected"] {
    background: var(--sg-color-primary);
    color: var(--sg-color-text-inverse);
    border-radius: var(--sg-input-radius, 0.25rem);
  }

  .sg-calendar-day[data-state="range"] {
    background: color-mix(in oklch, var(--sg-color-primary) 15%, transparent);
    border-radius: 0;
  }

  .sg-calendar-day[data-range-start] {
    background: var(--sg-color-primary);
    color: var(--sg-color-text-inverse);
    border-top-left-radius: var(--sg-input-radius, 0.25rem);
    border-bottom-left-radius: var(--sg-input-radius, 0.25rem);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .sg-calendar-day[data-range-end] {
    background: var(--sg-color-primary);
    color: var(--sg-color-text-inverse);
    border-top-right-radius: var(--sg-input-radius, 0.25rem);
    border-bottom-right-radius: var(--sg-input-radius, 0.25rem);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .sg-calendar-day[data-today]:not([data-state="selected"]):not([data-range-start]):not([data-range-end]) {
    font-weight: 700;
    border: 1px solid var(--sg-color-primary);
  }

  .sg-calendar-day[data-focused]:not([data-state="selected"]):not([data-range-start]):not([data-range-end]) {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: -2px;
  }

  .sg-calendar-day:disabled {
    opacity: var(--sg-disabled-opacity, 0.38);
    cursor: not-allowed;
  }

  .sg-calendar-day:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: -2px;
    z-index: 1;
  }

  .sg-calendar-nav:hover {
    background: var(--sg-surface-container);
  }

  .sg-calendar-nav:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: -2px;
  }

  .sg-calendar-token:focus-visible,
  .sg-calendar-picker-select:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: -2px;
  }

}

@layer sigui.base {
  .sg-callout {
    --_callout-pad: var(--sg-pad-card, 1rem);
    display: block;
    padding: var(--_callout-pad);
    border-radius: var(--sg-radius-md, 0.5rem);
    border: 1px solid var(--sg-color-border, currentColor);
    background: var(--sg-color-surface-subtle, transparent);
    container-type: inline-size;
    container-name: sg-callout;
  }

  @supports (selector(:scope)) {
    @scope (.sg-callout) {
      :scope {
        --_callout-pad: var(--sg-pad-card, 1rem);
      }
    }
  }
}

@layer sigui.variants {
  .sg-callout[data-variant="success"] {
    border-color: var(--sg-color-success, #1f8f4a);
  }

  .sg-callout[data-variant="warning"] {
    border-color: var(--sg-color-warning, #c78700);
  }

  .sg-callout[data-variant="danger"] {
    border-color: var(--sg-color-danger, #b42318);
  }
}

@layer sigui.base {
  .sg-card {
    --_card-section-pad: var(--sg-card-padding, 1.5rem);
    display: block;
    background: var(--sg-card-bg);
    border: var(--sg-card-border);
    border-radius: var(--sg-card-radius);
    box-shadow: var(--sg-card-shadow);
    container-type: inline-size;
    container-name: sg-card;
    overflow: hidden;
  }

  .sg-card[data-padding="sm"] {
    --_card-padding: var(--sg-pad-input, 0.75rem);
  }

  .sg-card[data-padding="md"],
  .sg-card[data-padding="true"] {
    --_card-padding: var(--sg-card-padding, 1.5rem);
  }

  .sg-card[data-padding="lg"] {
    --_card-padding: var(--sg-gap-separated, 2rem);
  }

  .sg-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--sg-gap-tight, 0.25rem);
  }

  .sg-card-header:has(.sg-card-action) {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sg-gap-grouped, 1rem);
  }

  .sg-card-header:has(.sg-card-action) .sg-card-header-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sg-gap-tight, 0.25rem);
  }

  .sg-card-title {
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-lg, 1.25rem);
    font-weight: 600;
    line-height: var(--sg-leading-snug, 1.3);
    margin: 0;
    color: var(--sg-color-text);
    letter-spacing: -0.025em;
  }

  @supports (text-box-trim: both) {
    .sg-card-title {
      text-box-trim: both;
      text-box-edge: cap alphabetic;
    }
  }

  .sg-card-description {
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    line-height: var(--sg-leading-sm, 1.5);
    margin: 0;
    color: var(--sg-color-text-secondary);
  }

  .sg-card-action {
    flex-shrink: 0;
    margin-top: calc(var(--sg-gap-tight, 0.25rem) * -1);
    margin-right: calc(var(--sg-gap-tight, 0.25rem) * -1);
    margin-bottom: calc(var(--sg-gap-tight, 0.25rem) * -1);
  }

  .sg-card-body {
    display: block;
  }

  .sg-card-footer {
    display: flex;
    align-items: center;
    gap: var(--sg-gap-related, 0.5rem);
  }

}

@layer sigui.variants {
  .sg-card[data-size="sm"] {
    --_card-section-pad: var(--sg-pad-input, 0.75rem);
    border-radius: var(--sg-input-radius, 0.375rem);
  }

  .sg-card[data-size="lg"] {
    --_card-section-pad: var(--sg-gap-separated, 2rem);
    border-radius: var(--sg-card-radius, 0.75rem);
  }

  .sg-card[data-elevation="0"] { --sg-card-shadow: var(none); }
  .sg-card[data-elevation="1"] { --sg-card-shadow: var(--sg-card-shadow); }
  .sg-card[data-elevation="2"] { --sg-card-shadow: var(--sg-card-shadow); }
  .sg-card[data-elevation="3"] { --sg-card-shadow: var(--sg-shadow-dropdown); }
  .sg-card[data-elevation="4"] { --sg-card-shadow: var(--sg-shadow-dropdown); }
  .sg-card[data-elevation="5"] { --sg-card-shadow: var(--sg-shadow-dropdown); }

  [data-elevation="0"]:not(.sg-card) { box-shadow: var(none); }
  [data-elevation="1"]:not(.sg-card) { box-shadow: var(--sg-card-shadow); }
  [data-elevation="2"]:not(.sg-card) { box-shadow: var(--sg-card-shadow); }
  [data-elevation="3"]:not(.sg-card) { box-shadow: var(--sg-shadow-dropdown); }
  [data-elevation="4"]:not(.sg-card) { box-shadow: var(--sg-shadow-dropdown); }
  [data-elevation="5"]:not(.sg-card) { box-shadow: var(--sg-shadow-dropdown); }

  .sg-card[data-density="compact"] {
    --_card-section-pad: var(--sg-pad-input, 0.75rem);
  }

  .sg-card[data-density="spacious"] {
    --_card-section-pad: var(--sg-gap-separated, 2rem);
  }

  @container sg-card (max-width: 300px) {
    .sg-card-header:has(.sg-card-action) {
      flex-direction: column;
      align-items: stretch;
    }
  }
  @container sg-card (min-width: 450px) {
    .sg-card-header {
      flex-direction: row;
      align-items: center;
    }
  }

  @supports (width: 1cqi) {
    .sg-card:not([data-size]):not([data-density]) {
      --_card-section-pad: clamp(var(--sg-space-3, 0.75rem), 6cqi, var(--sg-space-8, 2rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-card) {
      :scope {
        --_card-title-wrap: balance;
        --_card-description-wrap: pretty;
      }

      .sg-card-title {
        text-wrap: var(--_card-title-wrap);
      }

      .sg-card-description {
        text-wrap: var(--_card-description-wrap);
      }
    }
  }
}

@layer sigui.states {
  @media (forced-colors: active) {
    .sg-card {
      border: 1px solid CanvasText;
    }
  }

}

@layer sigui.base {
  .sg-carousel {
    --_carousel-button-size: 2.5rem;
    --_carousel-button-offset: var(--sg-gap-related, 0.5rem);
    position: relative;
    font-family: var(--sg-font-family, system-ui);
    container-type: inline-size;
    container-name: sg-carousel;
  }

  .sg-carousel-content {
    display: flex;
    overflow: hidden;
    scroll-snap-type: x mandatory;
  }

  .sg-carousel[data-orientation="vertical"] .sg-carousel-content {
    flex-direction: column;
    scroll-snap-type: y mandatory;
  }

  .sg-carousel-item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 0;
  }

  .sg-carousel-button {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--_carousel-button-size);
    height: var(--_carousel-button-size);
    border: 1px solid var(--sg-color-border);
    border-radius: 50%;
    background: var(--sg-card-bg);
    box-shadow: var(--sg-card-shadow);
    cursor: pointer;
    color: var(--sg-color-text);
    z-index: 1;
  }

  .sg-carousel-button[data-direction="previous"] {
    left: var(--_carousel-button-offset);
    top: 50%;
    transform: translateY(-50%);
  }

  .sg-carousel-button[data-direction="next"] {
    right: var(--_carousel-button-offset);
    top: 50%;
    transform: translateY(-50%);
  }

  @supports (width: 1cqi) {
    .sg-carousel {
      --_carousel-button-size: clamp(2rem, 9.4cqi, 2.5rem);
      --_carousel-button-offset: clamp(var(--sg-gap-tight, 0.25rem), 1.6cqi, var(--sg-gap-related, 0.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-carousel) {
      .sg-carousel-button {
        text-wrap: balance;
      }
    }
  }

}

@layer sigui.variants {
  .sg-carousel[data-orientation="vertical"] .sg-carousel-button[data-direction="previous"] {
    left: 50%;
    top: var(--_carousel-button-offset);
    transform: translateX(-50%);
  }

  .sg-carousel[data-orientation="vertical"] .sg-carousel-button[data-direction="next"] {
    left: 50%;
    top: auto;
    right: auto;
    bottom: var(--_carousel-button-offset);
    transform: translateX(-50%);
  }

}

@layer sigui.states {
  .sg-carousel-button:hover:not(:disabled) {
    background: var(--sg-surface-container);
  }

  .sg-carousel-button:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
  }

  .sg-carousel-button:disabled {
    opacity: var(--sg-disabled-opacity, 0.38);
    cursor: not-allowed;
  }

}

@layer sigui.base {
  .sg-chart {
    --_chart-height: 100%;
    position: relative;
    font-family: var(--sg-font-family, system-ui);
  }

  .sg-chart-svg {
    width: 100%;
    height: var(--_chart-height);
  }

  .sg-chart-table {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  @supports (selector(:scope)) {
    @scope (.sg-chart) {
      .sg-chart-svg {
        display: block;
      }
    }
  }

}

@layer sigui.base {
  .sg-checkbox-wrapper {
    --_checkbox-gap: var(--sg-gap-related, 0.5rem);
    display: inline-flex;
    align-items: center;
    gap: var(--_checkbox-gap);
    cursor: pointer;
  }

  .sg-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    border: 1.5px solid var(--sg-color-border-light);
    border-radius: var(--sg-radius-sm, 0.25rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
    position: relative;
    background: transparent;
    transition:
      background 150ms ease-out,
      border-color 150ms ease-out,
      box-shadow 150ms ease-out;
  }

  .sg-checkbox::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(0.5);
    transition:
      opacity 150ms ease-out,
      transform 200ms cubic-bezier(0.2, 1.2, 0.4, 1);
    background-color: var(--sg-color-text-inverse);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5 6.5 11.5 12.5 5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5 6.5 11.5 12.5 5'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

  .sg-checkbox-label {
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--sg-color-text);
    user-select: none;
  }

  @supports (width: 1cqi) {
    .sg-checkbox-wrapper {
      --_checkbox-gap: clamp(var(--sg-gap-tight, 0.25rem), 3.1cqi, var(--sg-gap-related, 0.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-checkbox-wrapper) {
      .sg-checkbox-label {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.states {

  .sg-checkbox-wrapper:has(.sg-checkbox:focus-visible) .sg-checkbox {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
  }

  .sg-checkbox:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
  }

  .sg-checkbox:hover:not(:disabled) {
    border-color: var(--sg-color-text-muted);
    background: var(--sg-surface-container);
  }

  .sg-checkbox:checked {
    background: var(--sg-color-primary);
    border-color: var(--sg-color-primary);
  }

  .sg-checkbox:checked::after {
    opacity: 1;
    transform: scale(1);
  }

  .sg-checkbox:checked:hover:not(:disabled) {
    background: var(--sg-color-primary);
    border-color: var(--sg-color-primary);
    filter: brightness(1.1);
  }

  .sg-checkbox:indeterminate,
  .sg-checkbox[indeterminate]:not(:checked) {
    background: var(--sg-color-primary);
    border-color: var(--sg-color-primary);
  }

  .sg-checkbox:indeterminate::after,
  .sg-checkbox[indeterminate]:not(:checked)::after {
    opacity: 1;
    transform: scale(1);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' d='M4 8h8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' d='M4 8h8'/%3E%3C/svg%3E");
  }

  .sg-checkbox:indeterminate:hover:not(:disabled),
  .sg-checkbox[indeterminate]:not(:checked):hover:not(:disabled) {
    filter: brightness(1.1);
  }

  .sg-checkbox:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .sg-checkbox:disabled + .sg-checkbox-label {
    opacity: 0.5;
    cursor: not-allowed;
  }

  @media (forced-colors: active) {
    .sg-checkbox {
      border: 2px solid ButtonText;
    }

    .sg-checkbox:checked,
    .sg-checkbox:indeterminate {
      background: Highlight;
      border-color: Highlight;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sg-checkbox,
    .sg-checkbox::after {
      transition-duration: 0s;
    }
  }
}

@layer sigui.base {
  .sg-cluster {
    --_cluster-gap: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--_cluster-gap);
    container-type: inline-size;
    container-name: sg-cluster;
  }

  @supports (selector(:scope)) {
    @scope (.sg-cluster) {
      :scope {
        --_cluster-gap: 0;
      }
    }
  }
}

@layer sigui.variants {
  .sg-cluster[data-density="compact"]      { --sg-density: 0.75; }
  .sg-cluster[data-density="comfortable"]  { --sg-density: 1; }
  .sg-cluster[data-density="spacious"]     { --sg-density: 1.5; }

  .sg-cluster[data-gap="tight"]     { --sg-gap-current: calc(var(--sg-gap-tight, 0.25rem) * var(--sg-density, 1)); --_cluster-gap: var(--sg-gap-current); }
  .sg-cluster[data-gap="related"]   { --sg-gap-current: calc(var(--sg-gap-related, 0.5rem) * var(--sg-density, 1)); --_cluster-gap: var(--sg-gap-current); }
  .sg-cluster[data-gap="grouped"]   { --sg-gap-current: calc(var(--sg-gap-grouped, 1rem) * var(--sg-density, 1)); --_cluster-gap: var(--sg-gap-current); }
  .sg-cluster[data-gap="separated"] { --sg-gap-current: calc(var(--sg-gap-separated, 2rem) * var(--sg-density, 1)); --_cluster-gap: var(--sg-gap-current); }
  .sg-cluster[data-gap="distinct"]  { --sg-gap-current: calc(var(--sg-gap-distinct, 4rem) * var(--sg-density, 1)); --_cluster-gap: var(--sg-gap-current); }

  .sg-cluster[data-align="start"]   { align-items: flex-start; }
  .sg-cluster[data-align="center"]  { align-items: center; }
  .sg-cluster[data-align="end"]     { align-items: flex-end; }
  .sg-cluster[data-align="stretch"] { align-items: stretch; }
  .sg-cluster[data-align="baseline"] { align-items: baseline; }

  .sg-cluster[data-justify="start"]         { justify-content: flex-start; }
  .sg-cluster[data-justify="center"]        { justify-content: center; }
  .sg-cluster[data-justify="end"]           { justify-content: flex-end; }
  .sg-cluster[data-justify="space-between"] { justify-content: space-between; }
  .sg-cluster[data-justify="space-around"]  { justify-content: space-around; }
  .sg-cluster[data-justify="space-evenly"]  { justify-content: space-evenly; }
}

@layer sigui.base {
  .sg-code-block {
    --_code-block-header-pad-y: var(--sg-gap-related, 0.5rem);
    --_code-block-header-pad-x: var(--sg-gap-grouped, 1rem);
    --_code-block-content-pad: var(--sg-gap-grouped, 1rem);
    --_code-block-copy-offset: var(--sg-gap-related, 0.5rem);
    display: block;
    position: relative;
    background: transparent;
    color: var(--sg-color-text);
    border: 1px solid var(--sg-color-border);
    border-radius: var(--sg-input-radius, 0.375rem);
    font-family: var(--sg-font-family-mono, ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace);
    font-size: var(--sg-text-sm, 0.875rem);
    line-height: var(--sg-leading-loose, 1.6);
    overflow: hidden;
    container-type: inline-size;
    container-name: sg-code-block;
  }

  .sg-code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--_code-block-header-pad-y) var(--_code-block-header-pad-x);
    background: color-mix(in oklch, currentColor 3%, transparent);
    border-bottom: 1px solid var(--sg-color-border);
    font-size: var(--sg-text-xs, 0.6875rem);
  }

  .sg-code-block-title {
    color: var(--sg-color-text-muted, inherit);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .sg-code-block-copy {
    display: inline-flex;
    align-items: center;
    padding: var(--sg-gap-tight, 0.25rem) var(--sg-gap-related, 0.5rem);
    border: 1px solid color-mix(in oklch, currentColor 20%, transparent);
    border-radius: var(--sg-input-radius, 0.25rem);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: var(--sg-text-xs, 0.6875rem);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--sg-transition-default, 200ms ease-out);
  }

  .sg-code-block-copy-floating {
    position: absolute;
    top: var(--_code-block-copy-offset);
    right: var(--_code-block-copy-offset);
    z-index: 1;
    opacity: 0;
    transition: opacity var(--sg-transition-default, 200ms ease-out);
  }

  .sg-code-block-pre {
    margin: 0;
    padding: var(--_code-block-content-pad);
    overflow-x: auto;
    background: var(--sg-color-code-bg, color-mix(in oklch, currentColor 4%, transparent));
  }

  .sg-code-block-code {
    display: block;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  .sg-code-block-line {
    display: block;
  }

  .sg-code-block-line[data-highlighted] {
    background: color-mix(in oklch, currentColor 10%, transparent);
    margin: 0 calc(-1 * var(--_code-block-content-pad));
    padding: 0 var(--_code-block-content-pad);
  }

  .sg-code-block-line-number {
    display: inline-block;
    width: 3ch;
    margin-right: var(--sg-pad-input, 0.75rem);
    text-align: right;
    opacity: 0.4;
    user-select: none;
  }

  .sg-code-block-line-content {
    white-space: pre;
  }

  .sg-code-block .hljs-keyword,
  .sg-code-block .hljs-selector-tag,
  .sg-code-block .hljs-built_in,
  .sg-code-block .hljs-type { color: var(--sg-color-data-1); }

  .sg-code-block .hljs-string,
  .sg-code-block .hljs-regexp,
  .sg-code-block .hljs-addition { color: var(--sg-color-data-4); }

  .sg-code-block .hljs-comment,
  .sg-code-block .hljs-quote { color: var(--sg-color-text-muted); font-style: italic; }

  .sg-code-block .hljs-number,
  .sg-code-block .hljs-literal { color: var(--sg-color-data-7); }

  .sg-code-block .hljs-tag,
  .sg-code-block .hljs-deletion { color: var(--sg-color-data-10); }

  .sg-code-block .hljs-attr,
  .sg-code-block .hljs-attribute,
  .sg-code-block .hljs-variable,
  .sg-code-block .hljs-template-variable { color: var(--sg-color-data-3); }

  .sg-code-block .hljs-title,
  .sg-code-block .hljs-title\.class_,
  .sg-code-block .hljs-title\.function_ { color: var(--sg-color-data-6); }

  .sg-code-block .hljs-meta,
  .sg-code-block .hljs-meta .hljs-keyword { color: var(--sg-color-data-9); }

  .sg-code-block .hljs-symbol,
  .sg-code-block .hljs-bullet,
  .sg-code-block .hljs-link { color: var(--sg-color-data-12); }

  .sg-code-block .hljs-section,
  .sg-code-block .hljs-name { color: var(--sg-color-data-1); font-weight: 600; }

  .sg-code-block .hljs-selector-class,
  .sg-code-block .hljs-selector-id,
  .sg-code-block .hljs-selector-attr { color: var(--sg-color-data-3); }

  .sg-code-block[data-diff] .sg-code-block-line[data-diff="added"] {
    background: color-mix(in oklch, var(--sg-color-success-subtle) 70%, transparent);
  }

  .sg-code-block[data-diff] .sg-code-block-line[data-diff="removed"] {
    background: color-mix(in oklch, var(--sg-color-danger-subtle) 70%, transparent);
  }

  .sg-code-block[data-diff] .sg-code-block-line[data-diff="header"] {
    color: var(--sg-color-text-secondary);
  }

  .sg-code-block[data-diff] .sg-code-block-line[data-diff="added"],
  .sg-code-block[data-diff] .sg-code-block-line[data-diff="removed"],
  .sg-code-block[data-diff] .sg-code-block-line[data-diff="header"] {
    margin: 0 calc(-1 * var(--_code-block-content-pad));
    padding: 0 var(--_code-block-content-pad);
  }

  @supports (width: 1cqi) {
    .sg-code-block {
      --_code-block-header-pad-y: clamp(var(--sg-gap-tight, 0.25rem), 1.4cqi, var(--sg-gap-related, 0.5rem));
      --_code-block-header-pad-x: clamp(var(--sg-gap-related, 0.5rem), 2.9cqi, var(--sg-gap-grouped, 1rem));
      --_code-block-content-pad: clamp(var(--sg-gap-related, 0.5rem), 2.9cqi, var(--sg-gap-grouped, 1rem));
      --_code-block-copy-offset: clamp(var(--sg-gap-tight, 0.25rem), 1.4cqi, var(--sg-gap-related, 0.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-code-block) {
      .sg-code-block-title {
        text-wrap: balance;
      }
    }
  }

}

@layer sigui.states {
  .sg-code-block:hover .sg-code-block-copy-floating {
    opacity: 1;
  }

  .sg-code-block-copy:hover {
    opacity: 1;
  }

  .sg-code-block-copy:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    opacity: 1;
  }

}

@layer sigui.base {
  .sg-collapsible,
  .sg-collapsible-root {
    --_collapsible-pad-inline: var(--sg-pad-input, 0.75rem);
    --_collapsible-pad-block: var(--sg-gap-related, 0.5rem);
    width: 100%;
    container-type: inline-size;
    container-name: sg-collapsible;
  }

  .sg-collapsible-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--_collapsible-pad-block) var(--_collapsible-pad-inline);
    border: none;
    background: none;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 500;
    color: var(--sg-color-text);
    min-height: var(--sg-touch-min, 44px);
    cursor: pointer;
    text-align: left;
  }

  .sg-collapsible-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--sg-transition-default, 200ms ease-out);
  }

  .sg-collapsible-content[data-state="open"] {
    grid-template-rows: 1fr;
  }

  .sg-collapsible-content-inner {
    overflow: hidden;
  }

  @supports (width: 1cqi) {
    .sg-collapsible,
    .sg-collapsible-root {
      --_collapsible-pad-inline: clamp(var(--sg-gap-related, 0.5rem), 3.1cqi, var(--sg-pad-input, 0.75rem));
      --_collapsible-pad-block: clamp(var(--sg-gap-tight, 0.25rem), 1.9cqi, var(--sg-gap-related, 0.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-collapsible, .sg-collapsible-root) {
      .sg-collapsible-trigger {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.states {
  .sg-collapsible-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--sg-transition-default, 200ms ease-out);
  }

  .sg-collapsible-content[data-state="open"],
  .sg-collapsible-content[data-state="opening"] {
    grid-template-rows: 1fr;
  }

  .sg-collapsible-content > .sg-collapsible-content-inner {
    overflow: hidden;
  }

  .sg-accordion-content > .sg-accordion-content-inner {
    overflow: hidden;
  }

  .sg-collapsible-trigger {
    transition: background var(--sg-transition-default, 200ms ease-out);
  }

  .sg-collapsible-trigger:hover:not(:disabled) {
    background: var(--sg-surface-container);
  }

  .sg-collapsible-trigger:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
  }

  .sg-collapsible-content[data-state="opening"] {
    grid-template-rows: 1fr;
  }

  .sg-collapsible-content[data-state="closing"] {
    grid-template-rows: 0fr;
  }

}

@layer sigui.base {
  .sg-color-picker {
    --_color-picker-gap: var(--sg-gap-related, 0.5rem);
    display: inline-flex;
    align-items: center;
    gap: var(--_color-picker-gap);
    position: relative;
    container-type: inline-size;
    container-name: sg-color-picker;
  }

  .sg-color-picker-blur {
    position: absolute;
    border-radius: 50%;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    pointer-events: none;
    z-index: 0;
  }

  .sg-color-picker-canvas {
    position: relative;
    z-index: 1;
    cursor: pointer;
    touch-action: none;
    border-radius: 50%;
  }

  .sg-color-picker-swatch {
    border: var(--sg-border-medium, 2px) solid var(--sg-color-picker-swatch-border, var(--sg-color-border));
    box-shadow: 0 0 0 1px var(--sg-color-picker-swatch-ring, transparent);
    flex-shrink: 0;
  }

  .sg-color-picker-lc-slider {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .sg-color-picker-value {
    font-family: var(--sg-font-mono, monospace);
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--sg-color-text-muted);
    user-select: all;
  }

  .sg-color-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--sg-gap-tight, 0.25rem);
    position: relative;
  }

  .sg-color-picker-trigger[data-disabled] {
    opacity: 0.5;
    pointer-events: none;
  }

  .sg-color-picker-trigger-swatch {
    border-radius: var(--sg-input-radius, 0.375rem);
    border: var(--sg-border-medium, 2px) solid var(--sg-color-picker-trigger-border, var(--sg-color-border));
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: box-shadow 200ms;
  }

  .sg-color-picker-trigger-swatch:hover {
    box-shadow: 0 0 0 var(--sg-border-medium, 2px) color-mix(in oklch, var(--sg-color-primary) 40%, transparent);
  }

  .sg-color-picker-trigger-swatch:disabled {
    cursor: not-allowed;
  }

  .sg-color-picker-trigger-input {
    font-family: var(--sg-font-mono, monospace);
    font-size: var(--sg-text-sm, 0.875rem);
    padding: var(--sg-gap-tight, 0.25rem) var(--sg-gap-related, 0.5rem);
    border: 1px solid var(--sg-input-border);
    border-radius: var(--sg-input-radius, var(--sg-input-radius, 0.25rem));
    background: var(--sg-input-bg);
    color: var(--sg-color-text);
    width: 5.75rem;
  }

  .sg-color-picker-trigger-input:disabled {
    cursor: not-allowed;
  }

  .sg-color-picker-trigger-input[data-invalid] {
    border-color: var(--sg-color-danger);
    outline: 1px solid var(--sg-color-danger);
  }

  .sg-color-picker-trigger-popup {
    padding: var(--_color-picker-gap);
    background: transparent;
    border: none;
    box-shadow: none;
    flex-direction: column;
    align-items: center;
    gap: var(--_color-picker-gap);
    margin: 0;
  }

  .sg-color-picker-trigger-popup:popover-open {
    display: flex;
  }

  .sg-color-picker-trigger-popup-hex {
    font-family: var(--sg-font-mono, monospace);
    font-size: var(--sg-text-xs, 0.6875rem);
    color: var(--sg-color-text-muted);
  }

  @supports (width: 1cqi) {
    .sg-color-picker {
      --_color-picker-gap: clamp(var(--sg-gap-tight, 0.25rem), 1.9cqi, var(--sg-gap-related, 0.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-color-picker) {
      .sg-color-picker-value,
      .sg-color-picker-trigger-popup-hex {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.states {
  .sg-color-picker-canvas:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
  }

  .sg-color-picker[data-disabled] {
    opacity: var(--sg-disabled-opacity, 0.38);
    pointer-events: none;
  }

}

@layer sigui.base {
  .sg-combobox {
    --_combobox-content-min: 12rem;
    --_combobox-content-pad: var(--sg-gap-tight, 0.25rem);
    --_combobox-item-pad-y: var(--sg-gap-related, 0.5rem);
    --_combobox-item-pad-x: var(--sg-pad-input, 0.75rem);
    container-type: inline-size;
    container-name: sg-combobox;
  }

  .sg-combobox-input {
    display: inline-flex;
    align-items: center;
    padding: var(--sg-input-padding, 0.75rem);
    border: 1px solid var(--sg-input-border);
    border-radius: var(--sg-input-radius);
    background: var(--sg-input-bg);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-base, 1rem);
    color: var(--sg-color-text);
    min-height: var(--sg-touch-min, 44px);
    width: 100%;
    outline: none;
    transition:
      border-color var(--sg-transition-default, 200ms ease-out),
      box-shadow var(--sg-transition-default, 200ms ease-out);
  }

  .sg-combobox-content {
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-card-border);
    border-radius: var(--sg-card-radius, var(--sg-card-radius, 0.5rem));
    box-shadow: var(--sg-shadow-dropdown);
    padding: var(--_combobox-content-pad);
    min-width: var(--_combobox-content-min);
  }

  .sg-combobox-item {
    padding: var(--_combobox-item-pad-y) var(--_combobox-item-pad-x);
    border-radius: var(--sg-input-radius, 0.25rem);
    cursor: pointer;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
  }

  .sg-combobox-empty {
    padding: var(--_combobox-item-pad-y) var(--_combobox-item-pad-x);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--sg-color-text-muted);
    text-align: center;
  }

  @supports (width: 1cqi) {
    .sg-combobox {
      --_combobox-item-pad-y: clamp(var(--sg-gap-tight, 0.25rem), 2.3cqi, var(--sg-gap-related, 0.5rem));
      --_combobox-item-pad-x: clamp(var(--sg-gap-related, 0.5rem), 3.9cqi, var(--sg-pad-input, 0.75rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-combobox) {
      .sg-combobox-item,
      .sg-combobox-empty {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.states {
  @media (forced-colors: active) {
    .sg-combobox-input {
      border: 1px solid ButtonText;
    }
  }

  .sg-combobox-input:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
    border-color: var(--sg-color-border-focus);
  }

  .sg-combobox-item {
    transition: background var(--sg-transition-default, 200ms ease-out);
  }

  .sg-combobox-item:hover {
    background: var(--sg-surface-container);
  }

  .sg-combobox-item[data-state="selected"] {
    background: var(--sg-surface-container);
    font-weight: 500;
  }

}

@layer sigui.base {
  .sg-container {
    --_container-max-width: 100%;
    --_container-padding-inline: 0;
    display: block;
    width: 100%;
    max-width: var(--_container-max-width);
    padding-inline: var(--_container-padding-inline);
    margin-inline: auto;
    container-type: inline-size;
    container-name: sg-container;
  }

  .sg-container[data-padding] {
    --_container-padding-inline: var(--sg-gap-grouped, 1rem);
  }

  .sg-container[data-size="sm"]  { --_container-max-width: 640px; }
  .sg-container[data-size="md"]  { --_container-max-width: 768px; }
  .sg-container[data-size="lg"]  { --_container-max-width: 1024px; }
  .sg-container[data-size="xl"]  { --_container-max-width: 1280px; }
  .sg-container[data-size="full"] { --_container-max-width: 100%; }

}

@layer sigui.base {
  .sg-copy-button {
    --_copy-button-opacity-copied: 0.85;
    cursor: pointer;
    user-select: none;
  }

  @supports (selector(:scope)) {
    @scope (.sg-copy-button) {
      :scope {
        --_copy-button-opacity-copied: 0.85;
      }
    }
  }
}

@layer sigui.states {
  .sg-copy-button[data-copied="true"] {
    opacity: var(--_copy-button-opacity-copied);
  }
}

@layer sigui.base {
  .sg-cover {
    --_cover-gap: 0;
    --_cover-padding: 0;
    --_cover-min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: var(--_cover-min-height);
    width: 100%;
    gap: var(--_cover-gap);
    padding: var(--_cover-padding);
    container-type: inline-size;
    container-name: sg-cover;
  }

  @supports (selector(:scope)) {
    @scope (.sg-cover) {
      :scope {
        --_cover-gap: 0;
        --_cover-padding: 0;
      }
    }
  }
}

@layer sigui.variants {
  .sg-cover[data-gap="tight"]     { --_cover-gap: var(--sg-gap-tight, 0.25rem); }
  .sg-cover[data-gap="related"]   { --_cover-gap: var(--sg-gap-related, 0.5rem); }
  .sg-cover[data-gap="grouped"]   { --_cover-gap: var(--sg-gap-grouped, 1rem); }
  .sg-cover[data-gap="separated"] { --_cover-gap: var(--sg-gap-separated, 2rem); }
  .sg-cover[data-gap="distinct"]  { --_cover-gap: var(--sg-gap-distinct, 4rem); }

  .sg-cover[data-padding="tight"]     { --_cover-padding: var(--sg-gap-tight, 0.25rem); }
  .sg-cover[data-padding="related"]   { --_cover-padding: var(--sg-gap-related, 0.5rem); }
  .sg-cover[data-padding="grouped"]   { --_cover-padding: var(--sg-gap-grouped, 1rem); }
  .sg-cover[data-padding="separated"] { --_cover-padding: var(--sg-gap-separated, 2rem); }
  .sg-cover[data-padding="distinct"]  { --_cover-padding: var(--sg-gap-distinct, 4rem); }
}

@layer sigui.base {
  .sg-details {
    --_details-open-gap: var(--sg-gap-related, 0.5rem);
    display: block;
    container-type: inline-size;
    container-name: sg-details;
  }

  .sg-details[open] > summary {
    margin-bottom: var(--_details-open-gap);
  }

  @supports (width: 1cqi) {
    .sg-details {
      --_details-open-gap: clamp(var(--sg-gap-tight, 0.25rem), 2.1cqi, var(--sg-gap-related, 0.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-details) {
      summary {
        text-wrap: pretty;
      }
    }
  }
}

@layer sigui.base {
  .sg-dialog {
    --_dialog-pad: var(--sg-card-padding, 1.5rem);
    background: var(--sg-card-bg);
    border-radius: var(--sg-card-radius, var(--sg-card-radius, 0.5rem));
    box-shadow: var(--sg-shadow-dropdown);
    padding: var(--_dialog-pad);
    max-width: 32rem;
    width: calc(100% - 2rem);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    margin: auto;
    border: none;
    container-type: inline-size;
    container-name: sg-dialog;
  }

  .sg-dialog::backdrop {
    background: var(--sg-overlay-backdrop, color-mix(in oklch, var(--sg-color-text) 50%, transparent));
    backdrop-filter: blur(var(--sg-backdrop-blur, 4px));
  }

  .sg-dialog-header {
    display: flex;
    flex-direction: column;
    gap: var(--sg-gap-tight, 0.25rem);
    margin-bottom: var(--sg-gap-grouped, 1rem);
  }

  .sg-dialog-title {
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-lg, 1.125rem);
    font-weight: 600;
    color: var(--sg-color-text);
    margin: 0;
    line-height: var(--sg-leading-normal, 1.4);
  }

  .sg-dialog-description {
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--sg-color-text-secondary);
    margin: 0;
    line-height: var(--sg-leading-relaxed, 1.5);
  }

  @supports (text-box-trim: both) {
    .sg-dialog-title,
    .sg-dialog-description {
      text-box-trim: both;
      text-box-edge: cap alphabetic;
    }
  }

  .sg-dialog-footer {
    display: flex;
    flex-direction: row-reverse;
    gap: var(--sg-gap-related, 0.5rem);
    margin-top: var(--sg-gap-grouped, 1rem);
    padding-top: var(--sg-gap-grouped, 1rem);
    border-top: 1px solid var(--sg-border-light);
  }

  .sg-dialog-close {
    position: absolute;
    top: var(--sg-pad-input, 0.75rem);
    right: var(--sg-pad-input, 0.75rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sg-touch-min, 44px);
    height: var(--sg-touch-min, 44px);
    border: none;
    background: transparent;
    color: var(--sg-color-text-secondary);
    cursor: pointer;
    border-radius: var(--sg-input-radius, 0.25rem);
    font-size: 1.25rem;
    line-height: 1;
    transition:
      background calc(200ms * 0.75) ease-out;
  }

  .sg-dialog-close:hover {
    background: var(--sg-color-bg-secondary);
    color: var(--sg-color-text);
  }

  .sg-dialog-close:focus-visible {
    outline: 2px solid var(--sg-focus-ring);
    outline-offset: 2px;
  }

  @container sg-dialog (max-width: 300px) {
    .sg-dialog-footer {
      flex-direction: column;
    }

    .sg-dialog-footer > * {
      width: 100%;
    }
  }

  @supports (width: 1cqi) {
    .sg-dialog {
      --_dialog-pad: clamp(var(--sg-space-4, 1rem), 6cqi, var(--sg-space-8, 2rem));
      width: min(92cqi, 42rem);
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-dialog) {
      .sg-dialog-title { text-wrap: balance; }
      .sg-dialog-description { text-wrap: pretty; }
    }
  }

}

@layer sigui.states {

  .sg-dialog[data-state="opening"],
  .sg-alert-dialog[data-state="opening"] {
    animation: sg-dialog-in var(--sg-transition-default, 200ms ease-out);
  }

  .sg-dialog[data-state="closing"],
  .sg-alert-dialog[data-state="closing"] {
    animation: sg-dialog-out 160ms ease-in;
  }

  .sg-dialog[open],
  .sg-alert-dialog[open] {
    opacity: 1;
    transform: scale(1);
    transition:
      opacity var(--sg-transition-default, 200ms ease-out),
      transform var(--sg-transition-default, 200ms ease-out),
      overlay var(--sg-transition-default, 200ms ease-out) allow-discrete,
      display var(--sg-transition-default, 200ms ease-out) allow-discrete;
  }

  @starting-style {
    .sg-dialog[open],
    .sg-alert-dialog[open] {
      opacity: 0;
      transform: scale(0.95);
    }
  }

  .sg-dialog::backdrop,
  .sg-alert-dialog::backdrop {
    opacity: 1;
    background: var(--sg-overlay-backdrop, color-mix(in oklch, var(--sg-color-text) 50%, transparent));
    transition:
      opacity var(--sg-transition-default, 200ms ease-out),
      overlay var(--sg-transition-default, 200ms ease-out) allow-discrete,
      display var(--sg-transition-default, 200ms ease-out) allow-discrete;
  }

  @starting-style {
    .sg-dialog::backdrop,
    .sg-alert-dialog::backdrop {
      opacity: 0;
    }
  }

  @media (forced-colors: active) {
    .sg-dialog,
    .sg-sheet,
    .sg-alert-dialog {
      border: 2px solid CanvasText;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    @starting-style {
      .sg-dialog[open],
      .sg-alert-dialog[open] {
        opacity: 0;
        transform: none;
      }
    }
  }

  @keyframes sg-dialog-in {
    from { opacity: 0; transform: scale(0.95); }
  }
  @keyframes sg-dialog-out {
    to { opacity: 0; transform: scale(0.95); }
  }
}

@layer sigui.base {
  .sg-dock {
    --_dock-pad: var(--sg-pad-input, 0.75rem);
    --_dock-separator-gap: var(--sg-gap-tight, 0.25rem);
    interpolate-size: allow-keywords;
    display: flex;
    align-items: flex-end;
    padding: var(--_dock-pad);
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-color-border);
    border-radius: var(--sg-card-radius, 0.75rem);
    width: fit-content;
    container-type: inline-size;
    container-name: sg-dock;
  }

  .sg-dock-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sg-dock-icon-size, 48px);
    height: var(--sg-dock-icon-size, 48px);
    border-radius: var(--sg-input-radius, 0.375rem);
    border: none;
    background: transparent;
    color: var(--sg-color-text);
    font-family: var(--sg-font-family, system-ui);
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    transition:
      width var(--sg-transition-default, 200ms ease-out),
      height var(--sg-transition-default, 200ms ease-out);
  }

  .sg-dock-item-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: calc(var(--sg-dock-icon-size, 48px) * 0.5);
  }

  .sg-dock-separator {
    width: 1px;
    align-self: stretch;
    background: var(--sg-color-border);
    margin: 0 var(--_dock-separator-gap);
    flex-shrink: 0;
  }

  @supports (width: 1cqi) {
    .sg-dock {
      --_dock-pad: clamp(var(--sg-gap-related, 0.5rem), 3.1cqi, var(--sg-pad-input, 0.75rem));
      --_dock-separator-gap: clamp(var(--sg-gap-micro, 0.125rem), 0.9cqi, var(--sg-gap-tight, 0.25rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-dock) {
      :scope {
        --_dock-pad: var(--sg-pad-input, 0.75rem);
      }
    }
  }

}

@layer sigui.states {
  .sg-dock-item:hover:not([data-disabled]) {
    width: calc(var(--sg-dock-icon-size, 48px) * var(--sg-dock-magnification, 1.5));
    height: calc(var(--sg-dock-icon-size, 48px) * var(--sg-dock-magnification, 1.5));
  }

  .sg-dock-item:has(+ .sg-dock-item:hover),
  .sg-dock-item:hover + .sg-dock-item {
    width: calc(var(--sg-dock-icon-size, 48px) * (1 + (var(--sg-dock-magnification, 1.5) - 1) * 0.5));
    height: calc(var(--sg-dock-icon-size, 48px) * (1 + (var(--sg-dock-magnification, 1.5) - 1) * 0.5));
  }

  .sg-dock-item:has(+ .sg-dock-item + .sg-dock-item:hover),
  .sg-dock-item:hover + .sg-dock-item + .sg-dock-item {
    width: calc(var(--sg-dock-icon-size, 48px) * (1 + (var(--sg-dock-magnification, 1.5) - 1) * 0.25));
    height: calc(var(--sg-dock-icon-size, 48px) * (1 + (var(--sg-dock-magnification, 1.5) - 1) * 0.25));
  }

  .sg-dock-item:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
  }

}

@layer sigui.base {
  .sg-drawer {
    --_drawer-body-pad: var(--sg-gap-grouped, 1rem);
    --_drawer-handle-pad: var(--sg-pad-input, 0.75rem);
    --_drawer-handle-width: 2.5rem;
    --_drawer-handle-height: var(--sg-gap-tight, 0.25rem);
    position: fixed;
    inset: auto 0 0 0;
    margin: 0;
    padding: 0;
    border: none;
    border-top-left-radius: var(--sg-card-radius, 0.75rem);
    border-top-right-radius: var(--sg-card-radius, 0.75rem);
    max-height: 96dvh;
    width: 100%;
    max-width: 100%;
    background: var(--sg-card-bg);
    box-shadow: var(--sg-shadow-dropdown);
    font-family: var(--sg-font-family, system-ui);
    container-type: inline-size;
    container-name: sg-drawer;
  }

  .sg-drawer::backdrop {
    background: var(--sg-overlay-backdrop, color-mix(in oklch, var(--sg-color-text) 50%, transparent));
  }

  .sg-drawer-handle {
    display: flex;
    justify-content: center;
    padding: var(--_drawer-handle-pad);
  }

  .sg-drawer-handle-bar {
    width: var(--_drawer-handle-width);
    height: var(--_drawer-handle-height);
    border-radius: 9999px;
    background: var(--sg-color-border);
  }

  .sg-drawer-body {
    padding: 0 var(--_drawer-body-pad) var(--_drawer-body-pad);
    overflow-y: auto;
  }

  @supports (width: 1cqi) {
    .sg-drawer {
      --_drawer-body-pad: clamp(var(--sg-gap-related, 0.5rem), 3.8cqi, var(--sg-gap-grouped, 1rem));
      --_drawer-handle-pad: clamp(var(--sg-gap-related, 0.5rem), 3.1cqi, var(--sg-pad-input, 0.75rem));
      --_drawer-handle-width: clamp(2rem, 11.3cqi, 2.5rem);
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-drawer) {
      :scope {
        --_drawer-body-pad: var(--sg-gap-grouped, 1rem);
      }
    }
  }

}

@layer sigui.states {

  .sg-drawer[data-state="opening"] {
    animation: sg-drawer-in var(--sg-transition-default, 200ms ease-out);
  }

  .sg-drawer[data-state="closing"] {
    animation: sg-drawer-out 160ms ease-in;
  }

  .sg-drawer[open] {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--sg-transition-default, 200ms ease-out),
      transform var(--sg-transition-default, 200ms ease-out),
      overlay var(--sg-transition-default, 200ms ease-out) allow-discrete,
      display var(--sg-transition-default, 200ms ease-out) allow-discrete;
  }

  @starting-style {
    .sg-drawer[open] {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .sg-drawer::backdrop {
    opacity: 1;
    transition:
      opacity var(--sg-transition-default, 200ms ease-out),
      overlay var(--sg-transition-default, 200ms ease-out) allow-discrete,
      display var(--sg-transition-default, 200ms ease-out) allow-discrete;
  }

  @starting-style {
    .sg-drawer::backdrop {
      opacity: 0;
    }
  }

  @media (forced-colors: active) {
    .sg-drawer {
      border: 2px solid CanvasText;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    @starting-style {
      .sg-drawer[open] {
        opacity: 0;
        transform: none;
      }
    }
  }

  @keyframes sg-drawer-in {
    from { opacity: 0; transform: translateY(100%); }
  }
  @keyframes sg-drawer-out {
    to { opacity: 0; transform: translateY(100%); }
  }
}

@layer sigui.base {
  .sg-dropdown {
    --_dropdown-display: inline-block;
    display: inline-block;
    display: var(--_dropdown-display);
    position: relative;
    container-type: inline-size;
    container-name: sg-dropdown;
  }

  @supports (selector(:scope)) {
    @scope (.sg-dropdown) {
      :scope {
        --_dropdown-display: inline-block;
      }
    }
  }
}

@layer sigui.base {
  .sg-empty {
    --_empty-gap: var(--sg-gap-related, 0.5rem);
    --_empty-pad-block: var(--sg-gap-separated, 2rem);
    --_empty-pad-inline: var(--sg-gap-grouped, 1rem);
    --_empty-description-max: 28rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--_empty-gap);
    padding: var(--_empty-pad-block) var(--_empty-pad-inline);
    text-align: center;
    color: var(--sg-color-text-muted);
    font-family: var(--sg-font-family, system-ui);
    container-type: inline-size;
    container-name: sg-empty;
  }

  .sg-empty-icon {
    font-size: 2.5rem;
    opacity: 0.5;
  }

  .sg-empty-title {
    font-size: var(--sg-text-lg, 1.125rem);
    font-weight: 600;
    color: var(--sg-color-text);
  }

  .sg-empty-description {
    font-size: var(--sg-text-sm, 0.875rem);
    max-width: var(--_empty-description-max);
  }

  .sg-empty-actions {
    margin-top: var(--sg-gap-related, 0.5rem);
  }

  @supports (width: 1cqi) {
    .sg-empty {
      --_empty-pad-block: clamp(var(--sg-gap-grouped, 1rem), 6.3cqi, var(--sg-gap-separated, 2rem));
      --_empty-pad-inline: clamp(var(--sg-gap-related, 0.5rem), 3.1cqi, var(--sg-gap-grouped, 1rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-empty) {
      .sg-empty-title { text-wrap: balance; }
      .sg-empty-description { text-wrap: pretty; }
    }
  }

}

@layer sigui.base {
  .sg-field {
    --_field-gap: var(--sg-gap-tight, 0.25rem);
    display: flex;
    flex-direction: column;
    gap: var(--_field-gap);
    font-family: var(--sg-font-family, system-ui);
    container-type: inline-size;
    container-name: sg-field;
  }

  .sg-field-label {
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 500;
    color: var(--sg-color-text);
  }

  .sg-field-required {
    color: var(--sg-color-danger);
    margin-left: var(--sg-gap-micro, 0.125rem);
  }

  .sg-field-description {
    font-size: var(--sg-text-xs, 0.6875rem);
    color: var(--sg-color-text-muted);
  }

  .sg-field-error {
    font-size: var(--sg-text-xs, 0.6875rem);
    color: var(--sg-color-danger);
  }

  @supports (width: 1cqi) {
    .sg-field {
      --_field-gap: clamp(var(--sg-gap-micro, 0.125rem), 1.2cqi, var(--sg-gap-tight, 0.25rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-field) {
      .sg-field-description,
      .sg-field-error {
        text-wrap: pretty;
      }
    }
  }

  @supports (text-box-trim: both) {
    .sg-field-label,
    .sg-field-description,
    .sg-field-error {
      text-box-trim: both;
      text-box-edge: cap alphabetic;
    }
  }

}

@layer sigui.states {
  .sg-field[data-disabled] {
    opacity: var(--sg-disabled-opacity, 0.38);
    pointer-events: none;
  }

  /* Error state: red border on nested inputs */
  .sg-field[data-error] input,
  .sg-field[data-error] textarea,
  .sg-field[data-error] select,
  .sg-field[data-error] [data-invalid] {
    border-color: var(--sg-color-danger);
    outline-color: var(--sg-color-danger);
  }

  .sg-field[data-error] input:focus,
  .sg-field[data-error] textarea:focus,
  .sg-field[data-error] select:focus {
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--sg-color-danger) 20%, transparent);
  }

  @media (forced-colors: active) {
    .sg-field[data-error] input,
    .sg-field[data-error] textarea,
    .sg-field[data-error] select {
      border-color: Mark;
    }
  }
}

@layer sigui.base {
  .sg-format-bytes {
    --_format-bytes-wrap: nowrap;
    white-space: nowrap;
    white-space: var(--_format-bytes-wrap);
    font-variant-numeric: tabular-nums;
  }

  @supports (selector(:scope)) {
    @scope (.sg-format-bytes) {
      :scope {
        --_format-bytes-wrap: nowrap;
      }
    }
  }
}

@layer sigui.base {
  .sg-format-date {
    --_format-date-wrap: nowrap;
    white-space: nowrap;
    white-space: var(--_format-date-wrap);
  }

  @supports (selector(:scope)) {
    @scope (.sg-format-date) {
      :scope {
        --_format-date-wrap: nowrap;
      }
    }
  }
}

@layer sigui.base {
  .sg-format-number {
    --_format-number-wrap: nowrap;
    white-space: nowrap;
    white-space: var(--_format-number-wrap);
    font-variant-numeric: tabular-nums;
  }

  @supports (selector(:scope)) {
    @scope (.sg-format-number) {
      :scope {
        --_format-number-wrap: nowrap;
      }
    }
  }
}

/* ---------------------------------------------------------------------------
 * GradientPattern – structural CSS only
 *
 * All gradient rendering (backgrounds, filters, animations) is now
 * computed by JS preset factories and applied as inline styles.
 * This stylesheet handles layout, overlay positioning, and accessibility.
 * ------------------------------------------------------------------------- */

@layer sigui.base {
  .sg-gradient-pattern {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
  }

  .sg-gradient-pattern[data-overlay] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .sg-gradient-pattern-content {
    position: relative;
    z-index: 1;
  }

  /* Progress-driven background layer: oversized to allow parallax shift */
  .sg-gradient-pattern-bg {
    --_gradient-pattern-inset: -15% 0;

    position: absolute;
    inset: var(--_gradient-pattern-inset);
    will-change: transform;
  }

  @supports (selector(:scope)) {
    @scope (.sg-gradient-pattern) {
      .sg-gradient-pattern-content {
        text-wrap: pretty;
      }
    }
  }
}

@layer sigui.states {
  @media (forced-colors: active) {
    .sg-gradient-pattern {
      background: Canvas !important;
    }
  }
}

@layer sigui.base {
  .sg-grid {
    --_grid-min-track: min(200px, 100%);
    display: grid;
    grid-template-columns: var(--sg-grid-template, repeat(var(--sg-grid-columns, 1), 1fr));
    grid-template-rows: var(--sg-grid-rows);
    container-type: inline-size;
    container-name: sg-grid;
  }
  .sg-grid[data-inline="true"] { display: inline-grid; }

  .sg-grid-item {
    grid-column-start: var(--sg-grid-start, auto);
    grid-column-end: span var(--sg-grid-span, 1);
    grid-row-start: var(--sg-grid-row-start, auto);
    grid-row-end: span var(--sg-grid-row-span, 1);
    min-width: 0;
  }

}

@layer sigui.variants {
  .sg-grid[data-columns="1"]  { --sg-grid-columns: 1; }
  .sg-grid[data-columns="2"]  { --sg-grid-columns: 2; }
  .sg-grid[data-columns="3"]  { --sg-grid-columns: 3; }
  .sg-grid[data-columns="4"]  { --sg-grid-columns: 4; }
  .sg-grid[data-columns="5"]  { --sg-grid-columns: 5; }
  .sg-grid[data-columns="6"]  { --sg-grid-columns: 6; }
  .sg-grid[data-columns="7"]  { --sg-grid-columns: 7; }
  .sg-grid[data-columns="8"]  { --sg-grid-columns: 8; }
  .sg-grid[data-columns="9"]  { --sg-grid-columns: 9; }
  .sg-grid[data-columns="10"] { --sg-grid-columns: 10; }
  .sg-grid[data-columns="11"] { --sg-grid-columns: 11; }
  .sg-grid[data-columns="12"] { --sg-grid-columns: 12; }

  .sg-grid[data-columns="auto-fill"] { --sg-grid-template: repeat(auto-fill, minmax(var(--_grid-min-track), 1fr)); }
  .sg-grid[data-columns="auto-fit"]  { --sg-grid-template: repeat(auto-fit, minmax(var(--_grid-min-track), 1fr)); }

  .sg-grid[data-gap="tight"]     { gap: var(--sg-gap-tight, 0.25rem); }
  .sg-grid[data-gap="related"]   { gap: var(--sg-gap-related, 0.5rem); }
  .sg-grid[data-gap="grouped"]   { gap: var(--sg-gap-grouped, 1rem); }
  .sg-grid[data-gap="separated"] { gap: var(--sg-gap-separated, 2rem); }
  .sg-grid[data-gap="distinct"]  { gap: var(--sg-gap-distinct, 4rem); }

  .sg-grid[data-align="start"]   { align-items: start; }
  .sg-grid[data-align="center"]  { align-items: center; }
  .sg-grid[data-align="end"]     { align-items: end; }
  .sg-grid[data-align="stretch"] { align-items: stretch; }

  .sg-grid[data-justify="start"]   { justify-items: start; }
  .sg-grid[data-justify="center"]  { justify-items: center; }
  .sg-grid[data-justify="end"]     { justify-items: end; }
  .sg-grid[data-justify="stretch"] { justify-items: stretch; }

  .sg-grid[data-place-content="start"]         { place-content: start; }
  .sg-grid[data-place-content="center"]        { place-content: center; }
  .sg-grid[data-place-content="end"]           { place-content: end; }
  .sg-grid[data-place-content="stretch"]       { place-content: stretch; }
  .sg-grid[data-place-content="space-between"] { place-content: space-between; }
  .sg-grid[data-place-content="space-around"]  { place-content: space-around; }
  .sg-grid[data-place-content="space-evenly"]  { place-content: space-evenly; }

  .sg-grid[data-flow="row"]          { grid-auto-flow: row; }
  .sg-grid[data-flow="column"]       { grid-auto-flow: column; }
  .sg-grid[data-flow="dense"]        { grid-auto-flow: dense; }
  .sg-grid[data-flow="row-dense"]    { grid-auto-flow: row dense; }
  .sg-grid[data-flow="column-dense"] { grid-auto-flow: column dense; }

  .sg-grid-item[data-align-self="start"]   { align-self: start; }
  .sg-grid-item[data-align-self="center"]  { align-self: center; }
  .sg-grid-item[data-align-self="end"]     { align-self: end; }
  .sg-grid-item[data-align-self="stretch"] { align-self: stretch; }

  .sg-grid-item[data-justify-self="start"]   { justify-self: start; }
  .sg-grid-item[data-justify-self="center"]  { justify-self: center; }
  .sg-grid-item[data-justify-self="end"]     { justify-self: end; }
  .sg-grid-item[data-justify-self="stretch"] { justify-self: stretch; }

  /* Responsive collapse: data-collapse="768px" collapses to 1 column below that container width */
  @container sg-grid (max-width: 30rem) {
    .sg-grid[data-collapse="sm"] {
      grid-template-columns: 1fr;
    }
  }
  @container sg-grid (max-width: 48rem) {
    .sg-grid[data-collapse="md"] {
      grid-template-columns: 1fr;
    }
  }
  @container sg-grid (max-width: 64rem) {
    .sg-grid[data-collapse="lg"] {
      grid-template-columns: 1fr;
    }
  }

  @supports (width: 1cqi) {
    .sg-grid {
      --_grid-min-track: clamp(10rem, 48cqi, 16rem);
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-grid) {
      .sg-grid-item {
        min-width: 0;
      }
    }
  }

}

@layer sigui.base {
  .sg-heading {
    --_heading-wrap: balance;
    display: block;
    font-family: var(--sg-font-family, system-ui);
    font-weight: 700;
    color: var(--sg-color-text);
    margin: 0;
    line-height: var(--sg-leading-tight, 1.2);
    text-wrap: var(--_heading-wrap);
  }

  @supports (selector(:scope)) {
    @scope (.sg-heading) {
      :scope {
        --_heading-wrap: balance;
      }
    }
  }

}

@layer sigui.variants {
  .sg-heading[data-size="lg"]  { font-size: var(--sg-text-lg, 1.25rem); line-height: var(--sg-leading-lg); }
  .sg-heading[data-size="xl"]  { font-size: var(--sg-text-xl, 1.5625rem); line-height: var(--sg-leading-xl); }
  .sg-heading[data-size="2xl"] { font-size: var(--sg-text-2xl, 1.953rem); line-height: var(--sg-leading-2xl); }
  .sg-heading[data-size="3xl"] { font-size: var(--sg-text-3xl, 2.441rem); line-height: var(--sg-leading-3xl); }
  .sg-heading[data-size="4xl"] { font-size: var(--sg-text-4xl, 3.052rem); line-height: var(--sg-leading-4xl); }
  .sg-heading[data-size="5xl"] { font-size: var(--sg-text-5xl, 3.815rem); line-height: var(--sg-leading-5xl); }
  .sg-heading[data-size="6xl"] { font-size: var(--sg-text-6xl, 4.768rem); line-height: var(--sg-leading-6xl); }

  .sg-heading[data-color="primary"]   { color: var(--sg-color-text); }
  .sg-heading[data-color="secondary"] { color: var(--sg-color-text-secondary); }
  .sg-heading[data-color="muted"]     { color: var(--sg-color-text-muted); }

  .sg-heading[data-align="left"]   { text-align: left; }
  .sg-heading[data-align="center"] { text-align: center; }
  .sg-heading[data-align="right"]  { text-align: right; }

}

@layer sigui.base {
  .sg-icon {
    --_icon-size: var(--sg-icon-size, 1.5rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--_icon-size);
    height: var(--_icon-size);
    color: currentColor;
    vertical-align: -0.125em;
    line-height: 1;
  }

  .sg-icon > svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: var(--sg-icon-stroke, 1.5);
    stroke-linecap: var(--sg-icon-linecap, round);
    stroke-linejoin: var(--sg-icon-linejoin, round);
    fill: none;
  }

  .sg-icon--filled > svg {
    fill: currentColor;
    stroke: none;
  }

  .sg-icon[data-delivery="font"] {
    width: auto;
    height: auto;
    min-width: var(--_icon-size);
    min-height: var(--_icon-size);
    font-size: var(--_icon-size);
    font-style: normal;
    user-select: none;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: normal;
    direction: ltr;
    word-wrap: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  @supports (width: 1cqi) {
    .sg-icon {
      --_icon-size: clamp(var(--sg-icon-size, 1rem), 62.5cqi, var(--sg-icon-size, 1.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-icon) {
      :scope {
        --_icon-size: var(--sg-icon-size, 1.5rem);
      }
    }
  }

}

@layer sigui.variants {
  .sg-icon[data-size="xs"]      { --sg-icon-size: 0.75rem; --sg-icon-stroke: 1; }
  .sg-icon[data-size="sm"]      { --sg-icon-size: 1rem; --sg-icon-stroke: 1.25; }
  .sg-icon[data-size="md"]      { --sg-icon-size: 1.25rem; --sg-icon-stroke: 1.5; }
  .sg-icon[data-size="default"] { --sg-icon-size: 1.5rem; --sg-icon-stroke: 1.5; }
  .sg-icon[data-size="lg"]      { --sg-icon-size: 2rem; --sg-icon-stroke: 2; }
  .sg-icon[data-size="xl"]      { --sg-icon-size: 3rem; --sg-icon-stroke: 2.5; }

  .sg-icon[data-color="success"] { color: var(--sg-color-success); }
  .sg-icon[data-color="warning"] { color: var(--sg-color-warning); }
  .sg-icon[data-color="danger"]  { color: var(--sg-color-danger); }
  .sg-icon[data-color="info"]    { color: var(--sg-color-info); }

  :dir(rtl) .sg-icon[data-icon-dir="directional"] {
    transform: scaleX(-1);
  }

}

@layer sigui.states {
}

@layer sigui.base {
  .sg-icon-button {
    --_icon-button-size: calc(var(--sg-touch-min, 44px) * 0.75);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--_icon-button-size);
    block-size: var(--_icon-button-size);
    border-radius: var(--sg-radius-full, 999px);
  }

  @supports (selector(:scope)) {
    @scope (.sg-icon-button) {
      :scope {
        --_icon-button-size: calc(var(--sg-touch-min, 44px) * 0.75);
      }
    }
  }
}

@layer sigui.base {
  .sg-include {
    --_include-display: contents;
    display: contents;
    display: var(--_include-display);
  }

  @supports (selector(:scope)) {
    @scope (.sg-include) {
      :scope {
        --_include-display: contents;
      }
    }
  }
}

@layer sigui.base {
  .sg-input-group {
    --_input-group-inline-pad: var(--sg-pad-input, 0.75rem);
    --_input-group-direction: row;
    display: flex;
    flex-direction: var(--_input-group-direction);
    align-items: stretch;
    font-family: var(--sg-font-family, system-ui);
    container-type: inline-size;
    container-name: sg-input-group;
  }

  .sg-input-group-prefix,
  .sg-input-group-suffix {
    display: flex;
    align-items: center;
    padding: 0 var(--_input-group-inline-pad);
    background: var(--sg-surface-container);
    border: 1px solid var(--sg-color-border);
    color: var(--sg-color-text-muted);
    font-size: var(--sg-text-sm, 0.875rem);
    white-space: nowrap;
  }

  .sg-input-group-prefix {
    border-right: none;
    border-radius: var(--sg-input-radius, 0.375rem) 0 0 var(--sg-input-radius, 0.375rem);
  }

  .sg-input-group-suffix {
    border-left: none;
    border-radius: 0 var(--sg-input-radius, 0.375rem) var(--sg-input-radius, 0.375rem) 0;
  }

  .sg-input-group-content {
    flex: 1;
    min-width: 0;
  }

  @container sg-input-group (max-width: 18rem) {
    .sg-input-group-prefix {
      border-right: 1px solid var(--sg-color-border);
      border-bottom: none;
      border-radius: var(--sg-input-radius, 0.375rem) var(--sg-input-radius, 0.375rem) 0 0;
    }

    .sg-input-group-suffix {
      border-left: 1px solid var(--sg-color-border);
      border-top: none;
      border-radius: 0 0 var(--sg-input-radius, 0.375rem) var(--sg-input-radius, 0.375rem);
    }
  }

  @supports (width: 1cqi) {
    .sg-input-group {
      --_input-group-inline-pad: clamp(var(--sg-gap-related, 0.5rem), 3.5cqi, var(--sg-pad-input, 0.75rem));
    }
  }

}

@layer sigui.variants {
  .sg-input-group[data-size="sm"] .sg-input-group-prefix,
  .sg-input-group[data-size="sm"] .sg-input-group-suffix {
    --_input-group-inline-pad: var(--sg-gap-related, 0.5rem);
    font-size: var(--sg-text-xs, 0.6875rem);
  }

  .sg-input-group[data-size="lg"] .sg-input-group-prefix,
  .sg-input-group[data-size="lg"] .sg-input-group-suffix {
    --_input-group-inline-pad: var(--sg-gap-grouped, 1rem);
    font-size: var(--sg-text-base, 1rem);
  }

}

@layer sigui.base {
  .sg-input-number {
    --_input-number-inline-size: auto;
    display: inline-block;
    inline-size: var(--_input-number-inline-size);
  }

  .sg-input-number > input[type="number"] {
    inline-size: 100%;
  }

  @supports (selector(:scope)) {
    @scope (.sg-input-number) {
      :scope {
        --_input-number-inline-size: auto;
      }
    }
  }
}

@layer sigui.base {
  .sg-menu-root {
    --_menu-content-min: 10rem;
    --_menu-content-pad: var(--sg-gap-tight, 0.25rem);
    --_menu-offset: var(--sg-gap-tight, 0.25rem);
    position: relative;
    display: inline-block;
    container-type: inline-size;
    container-name: sg-menu;
  }

  .sg-menu-content {
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-card-border);
    border-radius: var(--sg-card-radius, var(--sg-card-radius, 0.5rem));
    box-shadow: var(--sg-shadow-dropdown);
    padding: var(--_menu-content-pad);
    min-width: var(--_menu-content-min);
    z-index: var(--sg-z-popover, 50);
    position: absolute;
    top: calc(100% + var(--_menu-offset));
    left: 0;
    margin-top: var(--_menu-offset);
  }

  @supports (anchor-name: --sg-anchor) and (position-anchor: --sg-anchor) {
    .sg-menu-trigger {
      anchor-name: --sg-menu-anchor;
    }

    .sg-menu-content {
      top: auto;
      left: auto;
      position-anchor: --sg-menu-anchor;
      position-area: bottom;
      position-try-fallbacks: flip-block, flip-inline;
      margin-top: 0;
      margin-block-start: var(--_menu-offset);
    }
  }

  .sg-menu-item {
    display: flex;
    align-items: center;
    padding: var(--sg-gap-related, 0.5rem) var(--sg-pad-input, 0.75rem);
    border-radius: var(--sg-input-radius, 0.25rem);
    cursor: pointer;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
  }

  @supports (selector(:scope)) {
    @scope (.sg-menu-root) {
      .sg-menu-item {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.states {
  .sg-menu-item {
    transition: background var(--sg-transition-default, 200ms ease-out);
  }

  .sg-menu-item:hover:not([data-disabled]) {
    background: var(--sg-surface-container);
  }

  .sg-menu-item:active:not([data-disabled]) {
    background: var(--sg-surface-container-high);
  }

  .sg-menu-item:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: -2px;
  }
}

@layer sigui.base {
  .sg-menubar {
    --_menubar-gap: var(--sg-gap-tight, 0.25rem);
    --_menubar-pad: var(--sg-gap-tight, 0.25rem);
    --_menubar-content-min: 10rem;
    --_menubar-item-pad-inline: var(--sg-pad-input, 0.75rem);
    --_menubar-item-pad-block: var(--sg-gap-related, 0.5rem);
    --_menubar-sub-offset: var(--sg-gap-tight, 0.25rem);
    display: flex;
    align-items: center;
    gap: var(--_menubar-gap);
    padding: var(--_menubar-pad);
    border: 1px solid var(--sg-color-border);
    border-radius: var(--sg-input-radius, 0.375rem);
    background: var(--sg-card-bg);
    font-family: var(--sg-font-family, system-ui);
    container-type: inline-size;
    container-name: sg-menubar;
  }

  .sg-menubar-trigger {
    display: inline-flex;
    align-items: center;
    padding: var(--sg-gap-tight, 0.25rem) var(--_menubar-item-pad-inline);
    border: none;
    border-radius: var(--sg-input-radius, 0.25rem);
    background: none;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    color: var(--sg-color-text);
  }

  .sg-menubar-content {
    min-width: var(--_menubar-content-min);
    padding: var(--sg-gap-tight, 0.25rem);
    border: 1px solid var(--sg-color-border);
    border-radius: var(--sg-input-radius, 0.375rem);
    background: var(--sg-card-bg);
    box-shadow: var(--sg-shadow-dropdown);
  }

  .sg-menubar-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--_menubar-item-pad-block) var(--_menubar-item-pad-inline);
    border: none;
    border-radius: var(--sg-input-radius, 0.25rem);
    background: none;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--sg-color-text);
    cursor: pointer;
    text-align: start;
  }

  .sg-menubar-separator {
    height: 1px;
    margin: var(--sg-gap-tight, 0.25rem) 0;
    background: var(--sg-color-border);
  }

  .sg-menubar-shortcut {
    margin-left: auto;
    padding-left: var(--sg-gap-grouped, 1rem);
    color: var(--sg-color-text-muted);
    font-size: var(--sg-text-xs, 0.6875rem);
    font-family: var(--sg-font-family-mono, ui-monospace, monospace);
  }

  .sg-menubar-checkbox-indicator,
  .sg-menubar-radio-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-right: var(--sg-gap-related, 0.5rem);
    border: 1px solid var(--sg-color-border);
    flex-shrink: 0;
  }

  .sg-menubar-checkbox-indicator {
    border-radius: var(--sg-input-radius, 0.25rem);
    background: var(--sg-surface-container);
  }

  .sg-menubar-radio-indicator {
    border-radius: 50%;
    background: var(--sg-surface-container);
  }

  .sg-menubar-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .sg-menubar-sub {
    position: relative;
  }

  .sg-menubar-sub-trigger {
    justify-content: space-between;
  }

  .sg-menubar-sub-indicator {
    display: inline-flex;
    align-items: center;
    margin-left: var(--sg-gap-related, 0.5rem);
    color: var(--sg-color-text-muted);
  }

  .sg-menubar-sub-content {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: var(--_menubar-sub-offset);
  }

  @supports (width: 1cqi) {
    .sg-menubar {
      --_menubar-gap: clamp(var(--sg-gap-micro, 0.125rem), 0.9cqi, var(--sg-gap-tight, 0.25rem));
      --_menubar-pad: clamp(var(--sg-gap-micro, 0.125rem), 0.9cqi, var(--sg-gap-tight, 0.25rem));
      --_menubar-item-pad-inline: clamp(var(--sg-gap-related, 0.5rem), 2.8cqi, var(--sg-pad-input, 0.75rem));
      --_menubar-item-pad-block: clamp(var(--sg-gap-tight, 0.25rem), 1.7cqi, var(--sg-gap-related, 0.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-menubar) {
      .sg-menubar-item,
      .sg-menubar-trigger {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.states {
  @media (forced-colors: active) {
    .sg-menubar {
      border: 1px solid ButtonText;
    }

    .sg-menubar-content {
      border: 1px solid CanvasText;
    }
  }

  .sg-menubar-trigger:hover {
    background: var(--sg-surface-container);
  }

  .sg-menubar-trigger[data-state="open"] {
    background: var(--sg-surface-container);
  }

  .sg-menubar-trigger:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: -2px;
  }

  .sg-menubar-item:hover:not([data-disabled]) {
    background: var(--sg-surface-container);
  }

  .sg-menubar-item:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: -2px;
  }

  .sg-menubar-item[data-disabled] {
    opacity: var(--sg-disabled-opacity, 0.38);
    pointer-events: none;
  }

}

@layer sigui.base {
  .sg-mutation-observer {
    --_mutation-observer-display: none;
    display: none;
    display: var(--_mutation-observer-display);
  }

  @supports (selector(:scope)) {
    @scope (.sg-mutation-observer) {
      :scope {
        --_mutation-observer-display: none;
      }
    }
  }
}

@layer sigui.base {
  .sg-pagination {
    --_pagination-gap: var(--sg-gap-tight, 0.25rem);
    --_pagination-item-size: 2.25rem;
    display: flex;
    align-items: center;
    gap: var(--_pagination-gap);
    font-family: var(--sg-font-family, system-ui);
    container-type: inline-size;
    container-name: sg-pagination;
  }

  .sg-pagination-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--_pagination-item-size);
    min-height: var(--_pagination-item-size);
    padding: var(--sg-gap-tight, 0.25rem) var(--sg-gap-related, 0.5rem);
    border: 1px solid var(--sg-color-border);
    border-radius: var(--sg-input-radius, 0.25rem);
    background: none;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--sg-color-text);
    cursor: pointer;
  }

  .sg-pagination-button[aria-current="page"] {
    background: var(--sg-color-primary);
    color: var(--sg-color-text-inverse);
    border-color: var(--sg-color-primary);
  }

  .sg-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--_pagination-item-size);
    min-height: var(--_pagination-item-size);
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--sg-color-text-muted);
  }

  @supports (width: 1cqi) {
    .sg-pagination {
      --_pagination-gap: clamp(var(--sg-gap-micro, 0.125rem), 0.9cqi, var(--sg-gap-tight, 0.25rem));
      --_pagination-item-size: clamp(2rem, 10.6cqi, 2.25rem);
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-pagination) {
      .sg-pagination-button {
        text-wrap: balance;
      }
    }
  }

}

@layer sigui.states {
  .sg-pagination-button:hover:not(:disabled):not([aria-current="page"]) {
    background: var(--sg-surface-container);
  }

  .sg-pagination-button:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
  }

  .sg-pagination-button:disabled {
    opacity: var(--sg-disabled-opacity, 0.38);
    cursor: not-allowed;
  }

}

@layer sigui.base {
  .sg-popover-root {
    --_popover-pad: var(--sg-card-padding, 1.5rem);
    --_popover-offset: var(--sg-gap-tight, 0.25rem);
    position: relative;
    display: inline-block;
    container-type: inline-size;
    container-name: sg-popover;
  }

  .sg-popover-trigger {
    all: unset;
    display: inline-flex;
    cursor: pointer;
  }

  .sg-popover-content {
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-card-border);
    border-radius: var(--sg-card-radius, var(--sg-card-radius, 0.5rem));
    box-shadow: var(--sg-shadow-dropdown);
    padding: var(--_popover-pad);
    z-index: var(--sg-z-popover, 50);
    margin: 0;
    position: absolute;
    top: calc(100% + var(--_popover-offset));
    left: 0;
  }

  @container sg-popover (max-width: 260px) {
    .sg-popover-content {
      --_popover-pad: var(--sg-cq-space-sm, var(--sg-space-2));
      min-width: min(94cqi, 18rem);
    }
  }

  @supports (anchor-name: --sg-anchor) and (position-anchor: --sg-anchor) {
    .sg-popover-trigger {
      anchor-name: --sg-popover-anchor;
    }

    .sg-popover-content {
      top: auto;
      left: auto;
      position-anchor: --sg-popover-anchor;
      position-area: bottom;
      position-try-fallbacks: flip-block, flip-inline;
      margin-block-start: var(--_popover-offset);
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-popover-root) {
      .sg-popover-content {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.states {
}

@layer sigui.base {
  .sg-popup {
    --_popup-offset: var(--sg-gap-tight, 0.25rem);
    position: absolute;
    top: calc(100% + var(--_popup-offset));
    left: 0;
    z-index: var(--sg-z-popover, 50);
  }

  @supports (anchor-name: --sg-anchor) and (position-anchor: --sg-anchor) {
    .sg-popup[data-anchor="trigger"] {
      position-anchor: --sg-popup-anchor;
      position-area: bottom;
      position-try-fallbacks: flip-block, flip-inline;
      top: auto;
      left: auto;
      margin-block-start: var(--_popup-offset);
    }

    .sg-popup-anchor {
      anchor-name: --sg-popup-anchor;
    }
  }

  @supports (width: 1cqi) {
    .sg-popup {
      --_popup-offset: clamp(var(--sg-gap-micro, 0.125rem), 1.6cqi, var(--sg-gap-tight, 0.25rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-popup) {
      :scope {
        --_popup-offset: var(--sg-gap-tight, 0.25rem);
      }
    }
  }
}

@layer sigui.base {
  .sg-progress-ring {
    --sg-progress-ring-size: 2.5rem;
    --_progress-ring-thickness: var(--sg-gap-tight, 0.25rem);
    --sg-progress-ring-track: color-mix(in oklab, currentColor 20%, transparent);
    --sg-progress-ring-fill: currentColor;
    display: inline-grid;
    place-items: center;
    inline-size: var(--sg-progress-ring-size);
    block-size: var(--sg-progress-ring-size);
    border-radius: 50%;
    background:
      radial-gradient(
        closest-side,
        transparent calc(100% - var(--_progress-ring-thickness)),
        white calc(100% - var(--_progress-ring-thickness)) 99.9%,
        transparent
      ),
      conic-gradient(var(--sg-progress-ring-fill) var(--sg-progress-ring-value, 0%), var(--sg-progress-ring-track) 0);
  }

  @supports (width: 1cqi) {
    .sg-progress-ring {
      --_progress-ring-thickness: clamp(var(--sg-gap-micro, 0.125rem), 4.7cqi, var(--sg-gap-tight, 0.25rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-progress-ring) {
      :scope {
        --_progress-ring-thickness: var(--sg-gap-tight, 0.25rem);
      }
    }
  }
}

@layer sigui.base {
  .sg-qr-code {
    --_qr-display: inline-block;
    display: inline-block;
    display: var(--_qr-display);
  }

  .sg-qr-code > svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  @supports (selector(:scope)) {
    @scope (.sg-qr-code) {
      :scope {
        --_qr-display: inline-block;
      }
    }
  }
}

@layer sigui.base {
  .sg-rating {
    --_rating-star-gap: var(--sg-gap-micro, 0.125rem);
    display: inline-flex;
  }

  .sg-rating .sg-rating-stars {
    display: inline-flex;
    gap: var(--_rating-star-gap);
  }

  .sg-rating .sg-rating-star {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    color: var(--sg-color-text-muted);
    transition: transform 150ms ease-out;
  }

  .sg-rating[readonly] .sg-rating-star {
    cursor: default;
  }

  @supports (width: 1cqi) {
    .sg-rating {
      --_rating-star-gap: clamp(0, 0.6cqi, var(--sg-gap-micro, 0.125rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-rating) {
      :scope {
        --_rating-star-gap: var(--sg-gap-micro, 0.125rem);
      }
    }
  }
}

@layer sigui.states {
  .sg-rating:not([data-style]) .sg-rating-star[data-filled],
  .sg-rating[data-style="star"] .sg-rating-star[data-filled] {
    color: var(--sg-color-warning);
  }

  .sg-rating[data-style="heart"] .sg-rating-star[data-filled] {
    color: var(--sg-color-danger);
  }

  .sg-rating .sg-rating-star:not([disabled]):hover {
    transform: scale(1.2);
  }

  @media (prefers-reduced-motion: reduce) {
    .sg-rating .sg-rating-star {
      transition-duration: 0s;
    }
  }
}

@layer sigui.base {
  .sg-resize-observer {
    --_resize-observer-display: none;
    display: none;
    display: var(--_resize-observer-display);
  }

  @supports (selector(:scope)) {
    @scope (.sg-resize-observer) {
      :scope {
        --_resize-observer-display: none;
      }
    }
  }
}

@layer sigui.base {
  .sg-scroll-area {
    --_scrollbar-thickness: 6px;
    --_scrollbar-inset: 2px;
    --_scrollbar-thumb-min: 30px;
    position: relative;
    overflow: hidden;
    container-type: inline-size;
    container-name: sg-scroll-area;
  }

  .sg-scroll-area-viewport {
    width: 100%;
    height: 100%;
    overflow: auto;
    scrollbar-width: none;
  }

  .sg-scroll-area-viewport::-webkit-scrollbar {
    display: none;
  }

  .sg-scroll-area-scrollbar {
    position: absolute;
    user-select: none;
    touch-action: none;
    transition: opacity var(--sg-transition-default, 200ms ease-out);
  }

  .sg-scroll-area-scrollbar[data-orientation="vertical"] {
    right: var(--_scrollbar-inset);
    top: 0;
    bottom: 0;
    width: var(--_scrollbar-thickness);
  }

  .sg-scroll-area-scrollbar[data-orientation="horizontal"] {
    bottom: var(--_scrollbar-inset);
    left: 0;
    right: 0;
    height: var(--_scrollbar-thickness);
  }

  .sg-scroll-area-thumb {
    background: var(--sg-scrollbar-thumb, color-mix(in oklch, var(--sg-color-text) 30%, transparent));
    border-radius: 9999px;
    min-height: var(--_scrollbar-thumb-min);
    min-width: var(--_scrollbar-thumb-min);
  }

  @supports (width: 1cqi) {
    .sg-scroll-area {
      --_scrollbar-thickness: clamp(4px, 2cqi, 6px);
      --_scrollbar-inset: clamp(1px, 0.6cqi, 2px);
      --_scrollbar-thumb-min: clamp(24px, 10.5cqi, 30px);
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-scroll-area) {
      .sg-scroll-area-thumb {
        border-radius: 9999px;
      }
    }
  }

}

@layer sigui.states {
  .sg-scroll-area[data-type="hover"] .sg-scroll-area-scrollbar {
    opacity: 0;
  }

  .sg-scroll-area[data-type="hover"]:hover .sg-scroll-area-scrollbar {
    opacity: 1;
  }

  .sg-scroll-area[data-type="auto"] .sg-scroll-area-scrollbar {
    opacity: 0;
  }

  .sg-scroll-area[data-type="auto"]:hover .sg-scroll-area-scrollbar {
    opacity: 1;
  }

}

@layer sigui.base {
  .sg-scroller {
    --_scroller-overflow-x: auto;
    --_scroller-overflow-y: auto;
    display: block;
    overflow-x: var(--_scroller-overflow-x);
    overflow-y: var(--_scroller-overflow-y);
  }

  @supports (selector(:scope)) {
    @scope (.sg-scroller) {
      :scope {
        --_scroller-overflow-x: auto;
        --_scroller-overflow-y: auto;
      }
    }
  }
}

@layer sigui.variants {
  .sg-scroller[data-axis="x"] {
    --_scroller-overflow-x: auto;
    --_scroller-overflow-y: hidden;
  }

  .sg-scroller[data-axis="y"] {
    --_scroller-overflow-y: auto;
    --_scroller-overflow-x: hidden;
  }
}

@layer sigui.base {
  .sg-section {
    --_section-gap: 0;
    --_section-header-gap: var(--sg-gap-related, 0.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--_section-gap);
    container-type: inline-size;
    container-name: sg-section;
  }

  .sg-section-header {
    display: flex;
    flex-direction: column;
    gap: var(--_section-header-gap);
  }

  .sg-section-title {
    font-family: var(--sg-font-family, system-ui);
    font-weight: 600;
    color: var(--sg-color-text);
    margin: 0;
  }

  .sg-section-description {
    font-family: var(--sg-font-family, system-ui);
    color: var(--sg-color-text-muted);
    font-size: var(--sg-text-sm, 0.875rem);
    margin: 0;
    line-height: var(--sg-leading-relaxed, 1.5);
  }

  .sg-section-content {
    display: flex;
    flex-direction: column;
  }

  @supports (width: 1cqi) {
    .sg-section {
      --_section-header-gap: clamp(var(--sg-gap-tight, 0.25rem), 1.6cqi, var(--sg-gap-related, 0.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-section) {
      .sg-section-title {
        text-wrap: balance;
      }

      .sg-section-description {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.variants {
  .sg-section[data-gap="tight"] {
    --_section-gap: var(--sg-gap-tight, 0.25rem);
  }

  .sg-section[data-gap="related"] {
    --_section-gap: var(--sg-gap-related, 0.5rem);
  }

  .sg-section[data-gap="grouped"] {
    --_section-gap: var(--sg-gap-grouped, 1rem);
  }

  .sg-section[data-gap="separated"] {
    --_section-gap: var(--sg-gap-separated, 2rem);
  }

  .sg-section[data-gap="distinct"] {
    --_section-gap: var(--sg-gap-distinct, 4rem);
  }

}

@layer sigui.base {
  .sg-select-root {
    --_select-trigger-min: 12rem;
    --_select-content-min: 12rem;
    --_select-content-pad: 0.35rem;
    --_select-label-case: uppercase;
    --_select-trigger-pad-y: var(--sg-gap-related, 0.5rem);
    --_select-trigger-pad-x: var(--sg-pad-input, 0.75rem);
    --_select-trigger-pad-right: calc(
      var(--sg-pad-input, 0.75rem) + var(--sg-gap-grouped, 1rem) + var(--sg-gap-tight, 0.25rem)
    );
    --_select-item-pad-y: var(--sg-gap-related, 0.5rem);
    --_select-item-pad-x: calc(var(--sg-gap-related, 0.5rem) + var(--sg-gap-micro, 0.125rem));
    --_select-item-pad-left: calc(
      var(--sg-pad-input, 0.75rem) + var(--sg-gap-grouped, 1rem) + var(--sg-gap-tight, 0.25rem)
    );
    --_select-item-gap: var(--sg-gap-tight, 0.25rem);
    display: inline-block;
    --sg-select-control-height: var(--sg-touch-min, 44px);
    --sg-select-item-height: calc(var(--sg-select-control-height) - 4px);
    container-type: inline-size;
    container-name: sg-select;
  }

  .sg-select-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sg-gap-related, 0.5rem);
    padding: var(--_select-trigger-pad-y) var(--_select-trigger-pad-x);
    padding-right: var(--_select-trigger-pad-right);
    border: 1px solid color-mix(in oklch, var(--sg-color-border) 88%, transparent);
    border-radius: max(var(--sg-input-radius, 0.25rem), 0.5rem);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--sg-surface-container-lowest) 86%, white) 0%,
        var(--sg-surface-container-lowest) 100%
      );
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 500;
    line-height: 1.25;
    color: var(--sg-color-text);
    min-height: var(--sg-select-control-height);
    cursor: pointer;
    min-width: var(--_select-trigger-min);
    position: relative;
    transition:
      border-color var(--sg-transition-default, 180ms ease),
      background var(--sg-transition-default, 180ms ease),
      box-shadow var(--sg-transition-default, 180ms ease);
  }

  .sg-select-trigger::after {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    opacity: 0.72;
    position: absolute;
    right: 0.9rem;
    top: 50%;
    margin-top: -0.28rem;
    pointer-events: none;
  }

  .sg-select-content {
    background: color-mix(in oklch, var(--sg-surface-container-lowest) 94%, white);
    border: 1px solid color-mix(in oklch, var(--sg-color-border) 92%, transparent);
    border-radius: 0.75rem;
    box-shadow:
      0 12px 28px -10px rgb(0 0 0 / 0.24),
      0 4px 10px -6px rgb(0 0 0 / 0.22);
    padding: var(--_select-content-pad);
    min-width: var(--_select-content-min);
    max-height: min(80vh, 24rem);
    overflow-y: auto;
    position: absolute;
    top: calc(100% + var(--sg-gap-tight, 0.25rem));
    left: 0;
    margin-top: var(--sg-gap-tight, 0.25rem);
    color: var(--sg-color-text);
    transform-origin: top center;
  }

  .sg-select-item {
    padding:
      var(--_select-item-pad-y)
      var(--_select-item-pad-x)
      var(--_select-item-pad-y)
      var(--_select-item-pad-left);
    border-radius: 0.5rem;
    cursor: pointer;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: var(--_select-item-gap);
    position: relative;
    min-height: var(--sg-select-item-height);
    color: var(--sg-color-text);
    background: transparent;
  }

  .sg-select-group {
    padding: var(--sg-gap-tight, 0.25rem) 0;
  }

  .sg-select-group:first-child {
    padding-top: 0;
  }

  .sg-select-group:last-child {
    padding-bottom: 0;
  }

  .sg-select-label {
    padding: var(--_select-item-pad-y) var(--_select-item-pad-x);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-xs, 0.6875rem);
    font-weight: 600;
    color: var(--sg-color-text-muted);
    text-transform: var(--_select-label-case);
    letter-spacing: 0.08em;
  }

  .sg-select-separator {
    height: 1px;
    background: color-mix(in oklch, var(--sg-color-border) 84%, transparent);
    margin: var(--sg-gap-tight, 0.25rem) 0;
  }

  .sg-select-item-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    position: absolute;
    left: 0.6rem;
    color: var(--sg-color-primary);
  }

  @container sg-select (max-width: 260px) {
    .sg-select-trigger {
      padding-inline: var(--sg-cq-space-sm, var(--sg-space-2));
    }
  }

  @supports (width: 1cqi) {
    .sg-select-root {
      --_select-trigger-min: clamp(9.5rem, 66.2cqi, 12rem);
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-select-root) {
      :scope {
        --_select-label-case: uppercase;
      }

      .sg-select-item {
        text-wrap: pretty;
      }
    }
  }

  @supports (anchor-name: --sg-anchor) and (position-anchor: --sg-anchor) {
    .sg-select-trigger {
      anchor-name: --sg-select-anchor;
    }

    .sg-select-content {
      top: auto;
      left: auto;
      position-anchor: --sg-select-anchor;
      position-area: bottom;
      position-try-fallbacks: flip-block, flip-inline;
      margin-top: 0;
      margin-block-start: var(--sg-gap-tight, 0.25rem);
    }
  }

}

@layer sigui.states {
  .sg-select-item {
    transition:
      background var(--sg-transition-default, 160ms ease-out),
      color var(--sg-transition-default, 160ms ease-out);
  }

  .sg-select-item:hover {
    background: color-mix(in oklch, var(--sg-surface-container-high) 78%, transparent);
    color: var(--sg-color-text);
  }

  .sg-select-item:active {
    background: color-mix(in oklch, var(--sg-color-primary) 10%, var(--sg-surface-container-high));
  }

  .sg-select-trigger:hover {
    border-color: color-mix(in oklch, var(--sg-color-primary) 28%, var(--sg-color-border));
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--sg-surface-container-lowest) 82%, white) 0%,
        color-mix(in oklch, var(--sg-surface-container-lowest) 92%, var(--sg-color-primary) 3%) 100%
      );
  }

  .sg-select-trigger:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow:
      0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white),
      0 10px 20px -14px color-mix(in oklch, var(--sg-color-primary) 60%, transparent);
  }

  .sg-select-item[data-state="selected"] {
    background: color-mix(in oklch, var(--sg-color-primary) 16%, var(--sg-surface-container-lowest));
    color: color-mix(in oklch, var(--sg-color-primary) 78%, var(--sg-color-text));
    font-weight: 500;
  }

  .sg-select-item[data-state="selected"]::before {
    content: "";
    position: absolute;
    left: 0.75rem;
    width: 0.4rem;
    height: 0.7rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }

  .sg-select-item[data-disabled],
  .sg-select-item[disabled] {
    color: var(--sg-color-text-muted);
    opacity: var(--sg-disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .sg-select-content[data-state="open"] {
    display: block;
  }

  .sg-select-root .sg-select-content {
    transition:
      opacity var(--sg-duration-fast, 120ms) var(--sg-ease-default, ease-out),
      transform var(--sg-duration-fast, 120ms) var(--sg-ease-default, ease-out),
      overlay var(--sg-duration-fast, 120ms) var(--sg-ease-default, ease-out) allow-discrete,
      display var(--sg-duration-fast, 120ms) var(--sg-ease-default, ease-out) allow-discrete;
  }

  @starting-style {
    .sg-select-root .sg-select-content {
      opacity: 0;
      transform: translateY(-6px) scale(0.985);
    }
  }

  .sg-select-root .sg-select-content:not(:popover-open) {
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
  }

  @media (forced-colors: active) {
    .sg-select-trigger {
      border: 1px solid ButtonText;
    }

    .sg-select-item[data-state="selected"] {
      outline: 2px solid Highlight;
      outline-offset: -2px;
    }
  }

}

@layer sigui.base {
  .sg-sheet {
    --_sheet-pad: var(--sg-card-padding, 1.5rem);
    --_sheet-header-gap: var(--sg-gap-tight, 0.25rem);
    --_sheet-footer-gap: var(--sg-gap-related, 0.5rem);
    --_sheet-title-color: var(--sg-color-text);
    --_sheet-description-color: var(--sg-color-text-muted);
    position: fixed;
    background: var(--sg-card-bg);
    box-shadow: var(--sg-shadow-dropdown);
    padding: var(--_sheet-pad);
    overflow-y: auto;
    container-type: inline-size;
    container-name: sg-sheet;
    z-index: var(--sg-z-modal, 50);
    margin: 0;
    border: none;
  }

  .sg-sheet::backdrop {
    background: var(--sg-overlay-backdrop, color-mix(in oklch, var(--sg-color-text) 50%, transparent));
    backdrop-filter: blur(var(--sg-backdrop-blur, 4px));
  }

  .sg-sheet[data-side="right"] {
    top: 0;
    right: 0;
    bottom: 0;
    width: min(24rem, 100%);
    border-left: 1px solid var(--sg-color-border);
  }

  .sg-sheet[data-side="left"] {
    top: 0;
    left: 0;
    bottom: 0;
    width: min(24rem, 100%);
    border-right: 1px solid var(--sg-color-border);
  }

  .sg-sheet[data-side="top"] {
    top: 0;
    left: 0;
    right: 0;
    height: min(24rem, 100%);
    border-bottom: 1px solid var(--sg-color-border);
  }

  .sg-sheet[data-side="bottom"] {
    bottom: 0;
    left: 0;
    right: 0;
    height: min(24rem, 100%);
    border-top: 1px solid var(--sg-color-border);
  }

  .sg-sheet-header {
    display: flex;
    flex-direction: column;
    gap: var(--_sheet-header-gap);
    padding-bottom: var(--sg-gap-grouped, 1rem);
  }

  .sg-sheet-title {
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-lg, 1.125rem);
    font-weight: 600;
    color: var(--_sheet-title-color);
    margin: 0;
  }

  .sg-sheet-description {
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--_sheet-description-color);
    margin: 0;
  }

  @supports (text-box-trim: both) {
    .sg-sheet-title,
    .sg-sheet-description {
      text-box-trim: both;
      text-box-edge: cap alphabetic;
    }
  }

  .sg-sheet-footer {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--_sheet-footer-gap);
    padding-top: var(--sg-gap-grouped, 1rem);
  }

  @container sg-sheet (min-width: 640px) {
    .sg-sheet-footer {
      flex-direction: row;
      justify-content: flex-end;
    }
  }

  @supports (width: 1cqi) {
    .sg-sheet {
      --_sheet-pad: clamp(var(--sg-space-4, 1rem), 7cqi, var(--sg-space-8, 2rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-sheet) {
      .sg-sheet-title { text-wrap: balance; }
      .sg-sheet-description { text-wrap: pretty; }
    }
  }

  .sg-sheet-close {
    position: absolute;
    top: var(--sg-pad-input, 0.75rem);
    right: var(--sg-pad-input, 0.75rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: var(--sg-input-radius, 0.25rem);
    background: transparent;
    color: var(--sg-color-text-muted);
    cursor: pointer;
    transition: background var(--sg-transition-default, 200ms ease-out);
  }

  .sg-sheet-close:hover {
    background: var(--sg-surface-container);
    color: var(--sg-color-text);
  }

  .sg-sheet-close:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
  }

}

@layer sigui.states {
  .sg-sheet[open] {
    opacity: 1;
    transform: translateX(0) translateY(0);
    transition:
      opacity var(--sg-transition-default, 200ms ease-out),
      transform var(--sg-transition-default, 200ms ease-out),
      overlay var(--sg-transition-default, 200ms ease-out) allow-discrete,
      display var(--sg-transition-default, 200ms ease-out) allow-discrete;
  }

  @starting-style {
    .sg-sheet[open][data-side="right"] { opacity: 0; transform: translateX(100%); }
    .sg-sheet[open][data-side="left"]  { opacity: 0; transform: translateX(-100%); }
    .sg-sheet[open][data-side="top"]   { opacity: 0; transform: translateY(-100%); }
    .sg-sheet[open][data-side="bottom"]{ opacity: 0; transform: translateY(100%); }
  }

  .sg-sheet::backdrop {
    opacity: 1;
    transition:
      opacity var(--sg-transition-default, 200ms ease-out),
      overlay var(--sg-transition-default, 200ms ease-out) allow-discrete,
      display var(--sg-transition-default, 200ms ease-out) allow-discrete;
  }

  @starting-style {
    .sg-sheet::backdrop {
      opacity: 0;
    }
  }

  .sg-sheet[data-state="opening"] {
    animation: sg-fade-in-overlay var(--sg-transition-default, 200ms ease-out);
  }

  .sg-sheet[data-state="closing"] {
    animation: sg-fade-out var(--sg-transition-default, 200ms ease-out);
  }

  .sg-sheet[data-side="right"] {
    animation: sg-sheet-slide-in-right var(--sg-transition-default, 200ms ease-out);
  }

  .sg-sheet[data-side="left"] {
    animation: sg-sheet-slide-in-left var(--sg-transition-default, 200ms ease-out);
  }

  .sg-sheet[data-side="top"] {
    animation: sg-sheet-slide-in-top var(--sg-transition-default, 200ms ease-out);
  }

  .sg-sheet[data-side="bottom"] {
    animation: sg-sheet-slide-in-bottom var(--sg-transition-default, 200ms ease-out);
  }

  @keyframes sg-sheet-slide-in-right {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }
  @keyframes sg-sheet-slide-in-left {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }
  @keyframes sg-sheet-slide-in-top {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
  }
  @keyframes sg-sheet-slide-in-bottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

}

@layer sigui.base {
  .sg-sidebar {
    --_sidebar-pad: var(--sg-gap-grouped, 1rem);
    --_sidebar-content-pad: var(--sg-gap-related, 0.5rem);
    --_sidebar-item-pad-inline: var(--sg-pad-input, 0.75rem);
    --_sidebar-trigger-case: uppercase;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--sg-card-bg);
    border-right: 1px solid var(--sg-color-border);
    container-type: inline-size;
    container-name: sg-sidebar;
    font-family: var(--sg-font-family, system-ui);
    /* sg-lint-disable no-layout-animation – intentional width transition for sidebar collapse */
    transition: width var(--sg-transition-default, 200ms ease-out);
    overflow: hidden;
  }

  .sg-sidebar[data-side="right"] {
    border-right: none;
    border-left: 1px solid var(--sg-color-border);
  }

  .sg-sidebar-header {
    padding: var(--_sidebar-pad);
    border-bottom: 1px solid var(--sg-color-border);
  }

  .sg-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--_sidebar-content-pad);
  }

  .sg-sidebar-footer {
    padding: var(--_sidebar-pad);
    border-top: 1px solid var(--sg-color-border);
  }

  .sg-sidebar-section {
    display: flex;
    flex-direction: column;
  }

  .sg-sidebar-section-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--sg-gap-related, 0.5rem) var(--_sidebar-item-pad-inline);
    border: none;
    background: none;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-xs, 0.6875rem);
    font-weight: 600;
    text-transform: var(--_sidebar-trigger-case);
    letter-spacing: 0.05em;
    color: var(--sg-color-text-muted);
    cursor: pointer;
  }

  .sg-sidebar-section-content {
    display: flex;
    flex-direction: column;
    gap: var(--sg-gap-micro, 0.125rem);
    padding: var(--sg-gap-tight, 0.25rem) 0;
  }

  .sg-sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--sg-gap-related, 0.5rem);
    width: 100%;
    padding: var(--sg-gap-related, 0.5rem) var(--_sidebar-item-pad-inline);
    border: none;
    border-radius: var(--sg-input-radius, 0.25rem);
    background: none;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--sg-color-text);
    text-decoration: none;
    cursor: pointer;
  }

  .sg-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--sg-color-border);
    border-radius: var(--sg-input-radius, 0.25rem);
    background: var(--sg-card-bg);
    cursor: pointer;
    color: var(--sg-color-text);
  }

  .sg-sidebar-separator {
    height: 1px;
    background: var(--sg-color-border);
    margin: var(--sg-gap-related, 0.5rem) var(--_sidebar-item-pad-inline);
  }

}

@layer sigui.variants {
  @supports (width: 1cqi) {
    .sg-sidebar {
      --_sidebar-pad: clamp(var(--sg-space-2, 0.5rem), 6cqi, var(--sg-space-5, 1.25rem));
      --_sidebar-content-pad: clamp(var(--sg-space-1, 0.25rem), 4cqi, var(--sg-space-3, 0.75rem));
      --_sidebar-item-pad-inline: clamp(var(--sg-space-2, 0.5rem), 5cqi, var(--sg-space-4, 1rem));
    }
  }

  @container sg-sidebar (max-width: 200px) {
    .sg-sidebar-item {
      padding-inline: var(--sg-gap-related, 0.5rem);
      font-size: var(--sg-text-xs, 0.6875rem);
    }

    .sg-sidebar-section [data-title] {
      display: none;
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-sidebar) {
      :scope {
        --_sidebar-trigger-case: uppercase;
      }

      .sg-sidebar-section-trigger {
        text-transform: var(--_sidebar-trigger-case);
      }

      .sg-sidebar-item {
        text-wrap: pretty;
      }
    }
  }
}

@layer sigui.states {
  .sg-sidebar-item:hover:not([data-disabled]) {
    background: var(--sg-surface-container);
  }

  .sg-sidebar-item[data-state="active"] {
    background: var(--sg-surface-container);
    font-weight: 500;
  }

  .sg-sidebar-item[data-disabled] {
    opacity: var(--sg-disabled-opacity, 0.38);
    pointer-events: none;
  }

  .sg-sidebar-item:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: -2px;
  }

  .sg-sidebar-toggle:hover {
    background: var(--sg-surface-container);
  }

  .sg-sidebar-toggle:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
  }

  .sg-sidebar-section-trigger:hover {
    color: var(--sg-color-text);
  }

}

@layer sigui.base {
  .sg-sidebar-layout {
    --_sidebar-layout-template: auto 1fr;
    --_sidebar-layout-gap: 0;
    display: grid;
    grid-template-columns: var(--_sidebar-layout-template);
    gap: var(--_sidebar-layout-gap);
    min-height: 100%;
    width: 100%;
    container-type: inline-size;
    container-name: sg-sidebar-layout;
  }

  .sg-sidebar-layout[data-side="right"] {
    --_sidebar-layout-template: 1fr auto;
  }

  .sg-sidebar-layout__sidebar {
    width: var(--sg-sidebar-intrinsic-width, var(--sg-sidebar-width, auto));
    min-width: 0;
  }

  .sg-sidebar-layout__content {
    min-width: 0;
    flex: 1;
  }

  @container sg-sidebar-layout (max-width: 48rem) {
    .sg-sidebar-layout {
      grid-template-columns: 1fr;
    }
    .sg-sidebar-layout__sidebar {
      width: 100%;
    }
  }

  /* Custom collapse breakpoints via collapse-at attribute */
  @container sg-sidebar-layout (max-width: 30rem) {
    .sg-sidebar-layout[data-collapse-at="sm"] {
      grid-template-columns: 1fr;
    }
    .sg-sidebar-layout[data-collapse-at="sm"] .sg-sidebar-layout__sidebar {
      width: 100%;
    }
  }
  @container sg-sidebar-layout (max-width: 64rem) {
    .sg-sidebar-layout[data-collapse-at="lg"] {
      grid-template-columns: 1fr;
    }
    .sg-sidebar-layout[data-collapse-at="lg"] .sg-sidebar-layout__sidebar {
      width: 100%;
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-sidebar-layout) {
      .sg-sidebar-layout__content {
        min-width: 0;
      }
    }
  }
}

@layer sigui.variants {
  .sg-sidebar-layout[data-gap="tight"]     { --_sidebar-layout-gap: var(--sg-gap-tight, 0.25rem); }
  .sg-sidebar-layout[data-gap="related"]   { --_sidebar-layout-gap: var(--sg-gap-related, 0.5rem); }
  .sg-sidebar-layout[data-gap="grouped"]   { --_sidebar-layout-gap: var(--sg-gap-grouped, 1rem); }
  .sg-sidebar-layout[data-gap="separated"] { --_sidebar-layout-gap: var(--sg-gap-separated, 2rem); }
  .sg-sidebar-layout[data-gap="distinct"]  { --_sidebar-layout-gap: var(--sg-gap-distinct, 4rem); }
}

@layer sigui.base {
  .sg-skeleton {
    --_skeleton-min-height: 1rem;
    display: block;
    min-height: var(--_skeleton-min-height);
    background: var(--sg-surface-container-highest);
    border-radius: var(--sg-input-radius);
    animation: sg-skeleton-pulse calc(200ms * 10) ease-in-out infinite;
  }

  @supports (width: 1cqi) {
    .sg-skeleton {
      --_skeleton-min-height: clamp(0.75rem, 10.9cqi, 1rem);
    }
  }

}

@layer sigui.states {
  @keyframes sg-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  @media (forced-colors: active) {

    .sg-skeleton {
      border: 1px solid CanvasText;
    }
  }

}

@layer sigui.base {
  .sg-spacer {
    --_spacer-size: 0;
    display: block;
    flex-shrink: 0;
    width: var(--_spacer-size);
    height: var(--_spacer-size);
  }

  @supports (selector(:scope)) {
    @scope (.sg-spacer) {
      :scope {
        --_spacer-size: 0;
      }
    }
  }

}

@layer sigui.variants {
  .sg-spacer[data-size="related"]   { --_spacer-size: var(--sg-gap-related, 0.5rem); }
  .sg-spacer[data-size="grouped"]   { --_spacer-size: var(--sg-gap-grouped, 1rem); }
  .sg-spacer[data-size="separated"] { --_spacer-size: var(--sg-gap-separated, 2rem); }
  .sg-spacer[data-size="distinct"]  { --_spacer-size: var(--sg-gap-distinct, 4rem); }

  .sg-stack > .sg-spacer:not([data-size]) {
    flex: 1;
  }

}

@layer sigui.base {
  .sg-spinner {
    --_spinner-size: 1.5rem;
    --_spinner-border-width: 2px;
    display: inline-block;
    width: var(--_spinner-size);
    height: var(--_spinner-size);
    border: var(--_spinner-border-width) solid var(--sg-color-border);
    border-top-color: var(--sg-color-primary);
    border-radius: 9999px;
    animation: sg-spin calc(200ms * 3) linear infinite;
  }

  @supports (width: 1cqi) {
    .sg-spinner {
      --_spinner-size: clamp(1rem, 31.3cqi, 1.5rem);
      --_spinner-border-width: clamp(1.5px, 2.7cqi, 2px);
    }
  }

}

@layer sigui.variants {
  .sg-spinner[data-size="sm"] {
    --_spinner-size: 1rem;
    --_spinner-border-width: 1.5px;
  }

  .sg-spinner[data-size="lg"] {
    --_spinner-size: 2rem;
    --_spinner-border-width: 3px;
  }

}

@layer sigui.states {
  @media (prefers-reduced-motion: reduce) {

    .sg-spinner {
      animation-duration: calc(200ms * 7.5);
    }
  }

}

@layer sigui.base {
  .sg-split-panel {
    --_split-panel-columns: 1fr 1fr;
    --_split-panel-rows: auto;
    --_split-panel-gap: var(--sg-gap-grouped, 1rem);
    display: grid;
    grid-template-columns: var(--_split-panel-columns);
    grid-template-rows: var(--_split-panel-rows);
    gap: var(--_split-panel-gap);
    container-type: inline-size;
    container-name: sg-split-panel;
  }

  @supports (width: 1cqi) {
    .sg-split-panel {
      --_split-panel-gap: clamp(var(--sg-gap-related, 0.5rem), 3.8cqi, var(--sg-gap-grouped, 1rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-split-panel) {
      :scope {
        --_split-panel-columns: 1fr 1fr;
      }
    }
  }
}

@layer sigui.variants {
  .sg-split-panel[data-direction="vertical"] {
    --_split-panel-columns: 1fr;
    --_split-panel-rows: 1fr 1fr;
  }
}

@layer sigui.base {
  .sg-stack {
    --_stack-direction: column;
    --_stack-gap: 0;
    display: flex;
    flex-direction: var(--_stack-direction);
    gap: var(--_stack-gap);
    container-type: inline-size;
    container-name: sg-stack;
  }

  .sg-stack[data-direction="horizontal"] {
    --_stack-direction: row;
  }

  .sg-stack[data-wrap="true"] {
    flex-wrap: wrap;
  }

}

@layer sigui.variants {
  .sg-stack[data-density="compact"] {
    --sg-density: 0.75;
  }

  .sg-stack[data-density="comfortable"] {
    --sg-density: 1;
  }

  .sg-stack[data-density="spacious"] {
    --sg-density: 1.5;
  }

  .sg-stack[data-gap="tight"]     { --sg-gap-current: calc(var(--sg-gap-tight, 0.25rem) * var(--sg-density, 1)); --_stack-gap: var(--sg-gap-current); }
  .sg-stack[data-gap="related"]   { --sg-gap-current: calc(var(--sg-gap-related, 0.5rem) * var(--sg-density, 1)); --_stack-gap: var(--sg-gap-current); }
  .sg-stack[data-gap="grouped"]   { --sg-gap-current: calc(var(--sg-gap-grouped, 1rem) * var(--sg-density, 1)); --_stack-gap: var(--sg-gap-current); }
  .sg-stack[data-gap="separated"] { --sg-gap-current: calc(var(--sg-gap-separated, 2rem) * var(--sg-density, 1)); --_stack-gap: var(--sg-gap-current); }
  .sg-stack[data-gap="distinct"]  { --sg-gap-current: calc(var(--sg-gap-distinct, 4rem) * var(--sg-density, 1)); --_stack-gap: var(--sg-gap-current); }
  .sg-stack[data-gap="auto"]      { --sg-gap-current: calc(var(--sg-gap-by-depth, var(--sg-gap-grouped, 1rem)) * var(--sg-density, 1)); --_stack-gap: var(--sg-gap-current); }

  .sg-stack[data-align="start"]   { align-items: flex-start; }
  .sg-stack[data-align="center"]  { align-items: center; }
  .sg-stack[data-align="end"]     { align-items: flex-end; }
  .sg-stack[data-align="stretch"] { align-items: stretch; }

  .sg-stack[data-justify="start"]         { justify-content: flex-start; }
  .sg-stack[data-justify="center"]        { justify-content: center; }
  .sg-stack[data-justify="end"]           { justify-content: flex-end; }
  .sg-stack[data-justify="space-between"] { justify-content: space-between; }
  .sg-stack[data-justify="space-around"]  { justify-content: space-around; }
  .sg-stack[data-justify="space-evenly"]  { justify-content: space-evenly; }

}

@layer sigui.base {
  .sg-switcher {
    --_switcher-threshold: var(--sg-switcher-threshold, 30rem);
    display: flex;
    flex-direction: column;
    container-type: inline-size;
    container-name: sg-switcher;
  }

}

@layer sigui.variants {
  .sg-switcher[data-gap="tight"]     { gap: var(--sg-gap-tight, 0.25rem); }
  .sg-switcher[data-gap="related"]   { gap: var(--sg-gap-related, 0.5rem); }
  .sg-switcher[data-gap="grouped"]   { gap: var(--sg-gap-grouped, 1rem); }
  .sg-switcher[data-gap="separated"] { gap: var(--sg-gap-separated, 2rem); }
  .sg-switcher[data-gap="distinct"]  { gap: var(--sg-gap-distinct, 4rem); }

  .sg-switcher[data-align="start"]   { align-items: flex-start; }
  .sg-switcher[data-align="center"]  { align-items: center; }
  .sg-switcher[data-align="end"]     { align-items: flex-end; }
  .sg-switcher[data-align="stretch"] { align-items: stretch; }

  /* Limit children in horizontal mode - items beyond limit wrap to new row */
  @container sg-switcher (min-width: var(--_switcher-threshold)) {
    .sg-switcher[data-limit="2"] > :nth-child(n+3) { flex-basis: 100%; }
    .sg-switcher[data-limit="3"] > :nth-child(n+4) { flex-basis: 100%; }
    .sg-switcher[data-limit="4"] > :nth-child(n+5) { flex-basis: 100%; }
    .sg-switcher[data-limit="5"] > :nth-child(n+6) { flex-basis: 100%; }
    .sg-switcher[data-limit="6"] > :nth-child(n+7) { flex-basis: 100%; }
  }

  @supports (selector(:scope)) {
    @scope (.sg-switcher) {
      :scope {
        --_switcher-threshold: var(--sg-switcher-threshold, 30rem);
      }
    }
  }
}

@layer sigui.base {
  .sg-tab-group {
    --_tab-group-display: block;
    display: block;
    display: var(--_tab-group-display);
    container-type: inline-size;
    container-name: sg-tab-group;
  }

  @supports (selector(:scope)) {
    @scope (.sg-tab-group) {
      :scope {
        --_tab-group-display: block;
      }
    }
  }
}

@layer sigui.base {
  .sg-tabs-list {
    --_tabs-gap: 0;
    --_tabs-trigger-py: var(--sg-gap-related, 0.5rem);
    --_tabs-trigger-px: var(--sg-gap-grouped, 1rem);
    --_tabs-border-bottom: 1px solid var(--sg-color-border);
    container-type: inline-size;
    container-name: sg-tabs;
  }

  .sg-tabs-trigger {
    border: none;
    background: none;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--sg-color-text-muted);
    min-height: var(--sg-touch-min, 44px);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition:
      color var(--sg-transition-default, 200ms ease-out),
      border-bottom-color var(--sg-transition-default, 200ms ease-out);
  }

  .sg-tabs-content {
    padding: var(--sg-gap-grouped, 1rem) 0;
  }

  /* Pill variant */
  .sg-tabs-list[data-variant="pills"] {
    --_tabs-border-bottom: none;
    --_tabs-gap: var(--sg-gap-tight, 0.25rem);
  }

  .sg-tabs-list[data-variant="pills"] .sg-tabs-trigger {
    border-bottom: none;
    margin-bottom: 0;
    border-radius: var(--sg-input-radius, 0.375rem);
  }

  @container sg-tabs (max-width: 360px) {
    .sg-tabs-trigger {
      font-size: var(--sg-text-xs, 0.6875rem);
    }
  }
  @supports (width: 1cqi) {
    .sg-tabs-list {
      --_tabs-trigger-px: clamp(var(--sg-space-2, 0.5rem), 8cqi, var(--sg-space-4, 1rem));
      --_tabs-trigger-py: clamp(var(--sg-gap-tight, 0.25rem), 1.7cqi, var(--sg-gap-related, 0.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-tabs-list) {
      .sg-tabs-trigger { text-wrap: balance; }
      .sg-tabs-content { text-wrap: pretty; }
    }
  }

}

@layer sigui.variants {
  .sg-tabs-list[data-justify="start"]         { justify-content: flex-start; }
  .sg-tabs-list[data-justify="center"]        { justify-content: center; }
  .sg-tabs-list[data-justify="end"]           { justify-content: flex-end; }
  .sg-tabs-list[data-justify="space-between"] { justify-content: space-between; }
  .sg-tabs-list[data-justify="space-around"]  { justify-content: space-around; }
  .sg-tabs-list[data-justify="space-evenly"]  { justify-content: space-evenly; }
}

@layer sigui.states {

  .sg-tabs-trigger:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
  }
  .sg-tabs-trigger:hover:not([data-state="active"]) {
    color: var(--sg-color-text-secondary);
  }

  .sg-tabs-trigger[data-state="active"] {
    color: var(--sg-color-primary);
    border-bottom-color: var(--sg-color-primary);
    font-weight: var(--sg-weight-medium, 500);
  }

  .sg-tabs-list[data-variant="pills"] .sg-tabs-trigger[data-state="active"] {
    background: var(--sg-color-primary);
    color: var(--sg-color-text-inverse);
    border-bottom-color: transparent;
  }

  @media (forced-colors: active) {
    .sg-tabs-trigger[data-state="active"] {
      border-bottom: 2px solid Highlight;
    }
  }

}

@layer sigui.base {
  .sg-tag {
    --_tag-gap: var(--sg-gap-tight, 0.25rem);
    --_tag-pad-y: var(--sg-gap-micro, 0.125rem);
    --_tag-pad-x: var(--sg-gap-related, 0.5rem);
    display: inline-flex;
    align-items: center;
    gap: var(--_tag-gap);
    padding: var(--_tag-pad-y) var(--_tag-pad-x);
    border-radius: var(--sg-radius-full, 999px);
    background: var(--sg-color-surface-subtle, rgba(0,0,0,0.06));
  }

  .sg-tag > button[data-sg-tag-remove] {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
  }

  @supports (width: 1cqi) {
    .sg-tag {
      --_tag-gap: clamp(var(--sg-gap-micro, 0.125rem), 1.9cqi, var(--sg-gap-tight, 0.25rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-tag) {
      :scope {
        --_tag-gap: var(--sg-gap-tight, 0.25rem);
      }
    }
  }
}

@layer sigui.base {
  .sg-text {
    --_text-wrap: pretty;
    display: block;
    font-family: var(--sg-font-family, system-ui);
    color: var(--sg-color-text);
    margin: 0;
    text-wrap: var(--_text-wrap);
  }

  @supports (selector(:scope)) {
    @scope (.sg-text) {
      :scope {
        --_text-wrap: pretty;
      }
    }
  }

}

@layer sigui.variants {
  .sg-text[data-size="xs"]   { font-size: var(--sg-text-xs, 0.6875rem); line-height: var(--sg-leading-xs, 1.6); }
  .sg-text[data-size="sm"]   { font-size: var(--sg-text-sm, 0.875rem); line-height: var(--sg-leading-sm, 1.5); }
  .sg-text[data-size="base"] { font-size: var(--sg-text-base, 1rem); line-height: var(--sg-leading-base, 1.5); }
  .sg-text[data-size="lg"]   { font-size: var(--sg-text-lg, 1.25rem); line-height: var(--sg-leading-lg, 1.4); }

  .sg-text[data-color="primary"]   { color: var(--sg-color-text); }
  .sg-text[data-color="secondary"] { color: var(--sg-color-text-secondary); }
  .sg-text[data-color="muted"]     { color: var(--sg-color-text-muted); }
  .sg-text[data-color="danger"]    { color: var(--sg-color-danger); }
  .sg-text[data-color="success"]   { color: var(--sg-color-success); }

  .sg-text[data-weight="normal"]    { font-weight: 400; }
  .sg-text[data-weight="medium"]    { font-weight: 500; }
  .sg-text[data-weight="semibold"]  { font-weight: 600; }
  .sg-text[data-weight="bold"]      { font-weight: 700; }

  .sg-text[data-align="left"]   { text-align: left; }
  .sg-text[data-align="center"] { text-align: center; }
  .sg-text[data-align="right"]  { text-align: right; }

}

@layer sigui.base {
  .sg-toast-container {
    --_toast-edge-offset: var(--sg-gap-grouped, 1rem);
    --_toast-gap: var(--sg-gap-related, 0.5rem);
    position: fixed;
    z-index: var(--sg-z-toast, 60);
    display: flex;
    flex-direction: column;
    gap: var(--_toast-gap);
    container-type: inline-size;
    container-name: sg-toast-container;
  }

  .sg-toast-top-right {
    top: var(--_toast-edge-offset);
    right: var(--_toast-edge-offset);
  }

  .sg-toast-top-left {
    top: var(--_toast-edge-offset);
    left: var(--_toast-edge-offset);
  }

  .sg-toast-bottom-right {
    bottom: var(--_toast-edge-offset);
    right: var(--_toast-edge-offset);
  }

  .sg-toast-bottom-left {
    bottom: var(--_toast-edge-offset);
    left: var(--_toast-edge-offset);
  }

  .sg-toast-top-center {
    top: var(--_toast-edge-offset);
    left: 50%;
    transform: translateX(-50%);
  }

  .sg-toast-bottom-center {
    bottom: var(--_toast-edge-offset);
    left: 50%;
    transform: translateX(-50%);
  }

  .sg-toast {
    --_toast-min-width: 16rem;
    --_toast-max-width: 28rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-card-border);
    border-radius: var(--sg-card-radius, var(--sg-card-radius, 0.5rem));
    box-shadow: var(--sg-shadow-dropdown);
    padding: var(--sg-pad-button-y, 0.75rem) var(--sg-pad-button-x, 1rem);
    min-width: var(--_toast-min-width);
    max-width: var(--_toast-max-width);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    container-type: inline-size;
    container-name: sg-toast;
  }

  .sg-toast-content {
    display: flex;
    flex-direction: column;
    gap: var(--sg-gap-tight, 0.25rem);
    flex: 1;
    min-width: 0;
  }

  .sg-toast-title {
    font-weight: 600;
    color: var(--sg-color-text);
  }

  .sg-toast-message {
    color: var(--sg-color-text-secondary);
  }

  .sg-toast-actions {
    display: flex;
    align-items: center;
    gap: var(--sg-gap-related, 0.5rem);
    margin-left: var(--sg-pad-input, 0.75rem);
    flex-shrink: 0;
  }

  .sg-toast-action {
    padding: var(--sg-gap-tight, 0.25rem) var(--sg-gap-related, 0.5rem);
    border: none;
    border-radius: var(--sg-input-radius, 0.25rem);
    background: var(--sg-color-primary);
    color: var(--sg-color-text-inverse);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-xs, 0.6875rem);
    font-weight: 500;
    cursor: pointer;
    transition: opacity var(--sg-transition-default, 200ms ease-out);
  }

  .sg-toast-action:hover {
    opacity: 0.9;
  }

  .sg-toast-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sg-gap-tight, 0.25rem);
    border: none;
    border-radius: var(--sg-input-radius, 0.25rem);
    background: transparent;
    color: var(--sg-color-text-muted);
    cursor: pointer;
    transition: color var(--sg-transition-default, 200ms ease-out);
  }

  .sg-toast-dismiss:hover {
    color: var(--sg-color-text);
  }

  @container sg-toast (max-width: 320px) {
    .sg-toast-actions {
      margin-left: var(--sg-gap-related, 0.5rem);
      gap: var(--sg-gap-tight, 0.25rem);
    }
  }
  @container sg-toast (max-width: 260px) {
    .sg-toast-actions {
      margin-left: 0;
      justify-content: flex-end;
    }
  }
  @supports (selector(:scope)) {
    @scope (.sg-toast) {
      .sg-toast-title { text-wrap: balance; }
      .sg-toast-message { text-wrap: pretty; }
    }
  }

}

@layer sigui.variants {
  .sg-toast[data-color="primary"] {
    border-left: 3px solid var(--sg-color-primary);
    background: color-mix(in oklch, var(--sg-color-primary) 6%, var(--sg-card-bg));
  }

  .sg-toast[data-color="danger"] {
    border-left: 3px solid var(--sg-color-danger);
    background: color-mix(in oklch, var(--sg-color-danger) 6%, var(--sg-card-bg));
  }

  .sg-toast[data-color="success"] {
    border-left: 3px solid var(--sg-color-success);
    background: color-mix(in oklch, var(--sg-color-success) 6%, var(--sg-card-bg));
  }

  .sg-toast[data-color="warning"] {
    border-left: 3px solid var(--sg-color-warning);
    background: color-mix(in oklch, var(--sg-color-warning) 6%, var(--sg-card-bg));
  }

  .sg-toast[data-color="info"] {
    border-left: 3px solid var(--sg-color-info);
    background: color-mix(in oklch, var(--sg-color-info) 6%, var(--sg-card-bg));
  }

}

@layer sigui.states {
  .sg-toast {
    animation: sg-slide-in-right var(--sg-transition-default, 200ms ease-out);
  }

  .sg-toast[data-state="closing"] {
    animation: sg-toast-out 160ms ease-in forwards;
  }

  @media (forced-colors: active) {
    .sg-toast {
      border: 2px solid CanvasText;
    }
  }

  @keyframes sg-slide-in-right {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes sg-toast-out {
    to { opacity: 0; transform: translateX(100%); }
  }
}

@layer sigui.base {
  .sg-tooltip-root {
    --_tooltip-offset: var(--sg-gap-tight, 0.25rem);
    --_tooltip-pad-y: var(--sg-gap-tight, 0.25rem);
    --_tooltip-pad-x: var(--sg-gap-related, 0.5rem);
    --_tooltip-max-width: 20rem;
    position: relative;
    display: inline-block;
  }

  .sg-tooltip-trigger {
    display: inline-flex;
    align-items: center;
  }

  .sg-tooltip {
    position: absolute;
    top: calc(100% + var(--_tooltip-offset));
    left: 50%;
    transform: translateX(-50%);
    background: var(--sg-color-text);
    color: var(--sg-color-text-inverse);
    padding: var(--_tooltip-pad-y) var(--_tooltip-pad-x);
    border-radius: var(--sg-input-radius, 0.25rem);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-xs, 0.6875rem);
    line-height: var(--sg-leading-normal, 1.4);
    max-width: var(--_tooltip-max-width);
    z-index: var(--sg-z-popover, 50);
    pointer-events: none;
    white-space: nowrap;
  }

  @supports (anchor-name: --sg-anchor) and (position-anchor: --sg-anchor) {
    .sg-tooltip-trigger {
      anchor-name: --sg-tooltip-anchor;
    }

    .sg-tooltip {
      top: auto;
      left: auto;
      transform: none;
      position-anchor: --sg-tooltip-anchor;
      position-area: bottom;
      position-try-fallbacks: flip-block, flip-inline;
      margin-block-start: var(--_tooltip-offset);
    }
  }

  @supports (width: 1cqi) {
    .sg-tooltip-root {
      --_tooltip-pad-x: clamp(var(--sg-gap-tight, 0.25rem), 2.7cqi, var(--sg-gap-related, 0.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-tooltip-root) {
      .sg-tooltip {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.states {
}

@layer sigui.base {
  .sg-tree {
    --_tree-item-pad-y: var(--sg-gap-tight, 0.25rem);
    --_tree-item-pad-x: var(--sg-gap-related, 0.5rem);
    display: block;
    container-type: inline-size;
    container-name: sg-tree;
  }

  .sg-tree [role="treeitem"] {
    display: block;
    padding: var(--_tree-item-pad-y) var(--_tree-item-pad-x);
    border-radius: var(--sg-radius-sm, 0.25rem);
  }

  @supports (width: 1cqi) {
    .sg-tree {
      --_tree-item-pad-y: clamp(var(--sg-gap-micro, 0.125rem), 1.2cqi, var(--sg-gap-tight, 0.25rem));
      --_tree-item-pad-x: clamp(var(--sg-gap-tight, 0.25rem), 2.3cqi, var(--sg-gap-related, 0.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-tree) {
      :scope {
        --_tree-item-pad-y: var(--sg-gap-tight, 0.25rem);
      }
    }
  }
}

@layer sigui.states {
  .sg-tree [role="treeitem"]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
  }
}

@layer sigui.base {
  .sg-typewriter {
    --_typewriter-cursor-width: 0.1em;
    display: inline;
    white-space: pre-wrap;
  }

  .sg-typewriter[data-cursor]::after {
    content: "\200B"; /* zero-width space keeps line height stable */
    border-right: var(--_typewriter-cursor-width) solid currentColor;
    margin-inline-start: var(--sg-gap-micro, 1px);
    animation: sg-typewriter-blink calc(200ms * 3.5) steps(2, start) infinite;
  }

  @supports (selector(:scope)) {
    @scope (.sg-typewriter) {
      :scope {
        --_typewriter-cursor-width: 0.1em;
      }
    }
  }

}

@layer sigui.states {
  .sg-typewriter[data-state="complete"]:not([data-cursor])::after {
    display: none;
  }
}

@layer sigui.base {
  .sg-breadcrumb {
    --_breadcrumb-gap: var(--sg-gap-tight, 0.25rem);
    display: flex;
    align-items: center;
    gap: var(--_breadcrumb-gap);
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    container-type: inline-size;
    container-name: sg-breadcrumb;
  }

  .sg-breadcrumb-item {
    display: inline-flex;
    align-items: center;
  }

  .sg-breadcrumb-link {
    color: var(--sg-color-primary);
    text-decoration: none;
  }

  .sg-breadcrumb-text {
    color: var(--sg-color-text-muted);
  }

  .sg-breadcrumb-item[aria-current="page"] .sg-breadcrumb-text {
    color: var(--sg-color-text);
    font-weight: 500;
  }

  .sg-breadcrumb-separator {
    color: var(--sg-color-text-muted);
    user-select: none;
  }

  .sg-breadcrumb-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--sg-color-text-muted);
  }

  .sg-breadcrumb-ellipsis-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .sg-breadcrumb-page {
    color: var(--sg-color-text);
    font-weight: 500;
  }

  @container sg-breadcrumb (max-width: 20rem) {
    .sg-breadcrumb-separator {
      opacity: 0.7;
    }
  }

  @supports (width: 1cqi) {
    .sg-breadcrumb {
      --_breadcrumb-gap: clamp(var(--sg-gap-micro, 0.125rem), 0.9cqi, var(--sg-gap-tight, 0.25rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-breadcrumb) {
      .sg-breadcrumb-link,
      .sg-breadcrumb-text,
      .sg-breadcrumb-page {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.states {
  .sg-breadcrumb-link:hover {
    text-decoration: underline;
  }
}

@layer sigui.base {
  .sg-command {
    --_command-list-pad: var(--sg-gap-tight, 0.25rem);
    --_command-item-px: var(--sg-pad-input, 0.75rem);
    --_command-item-py: var(--sg-gap-related, 0.5rem);
    --_command-heading-case: uppercase;
    display: flex;
    flex-direction: column;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-card-border);
    border-radius: var(--sg-card-radius, var(--sg-card-radius, 0.5rem));
    overflow: hidden;
    container-type: inline-size;
    container-name: sg-command;
  }

  .sg-command-input {
    padding: var(--sg-pad-button-y, 0.75rem) var(--sg-pad-button-x, 1rem);
    border: none;
    border-bottom: 1px solid var(--sg-color-border);
    background: transparent;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-base, 1rem);
    color: var(--sg-color-text);
    outline: none;
    width: 100%;
  }

  .sg-command-list {
    max-height: 18rem;
    overflow-y: auto;
    padding: var(--_command-list-pad);
  }

  .sg-command-item {
    display: flex;
    align-items: center;
    padding: var(--_command-item-py) var(--_command-item-px);
    border-radius: var(--sg-input-radius, 0.25rem);
    cursor: pointer;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
  }

  .sg-command-empty {
    padding: var(--sg-gap-grouped, 1rem);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--sg-color-text-muted);
    text-align: center;
  }

  .sg-command-group {
    padding: var(--sg-gap-tight, 0.25rem) 0;
  }

  .sg-command-group-heading {
    padding: var(--sg-gap-tight, 0.25rem) var(--_command-item-px);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-xs, 0.6875rem);
    font-weight: 500;
    color: var(--sg-color-text-muted);
    text-transform: var(--_command-heading-case);
    letter-spacing: 0.05em;
  }

  .sg-command-separator {
    height: 1px;
    background: var(--sg-color-border);
    margin: var(--sg-gap-tight, 0.25rem) 0;
  }

  @supports (width: 1cqi) {
    .sg-command {
      --_command-item-px: clamp(var(--sg-gap-related, 0.5rem), 3.1cqi, var(--sg-pad-input, 0.75rem));
      --_command-item-py: clamp(var(--sg-gap-tight, 0.25rem), 1.9cqi, var(--sg-gap-related, 0.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-command) {
      :scope {
        --_command-heading-case: uppercase;
      }

      .sg-command-item,
      .sg-command-empty {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.states {
  .sg-command-item {
    transition: background var(--sg-transition-default, 200ms ease-out);
  }

  .sg-command-item:hover:not([data-disabled]) {
    background: var(--sg-surface-container);
  }

  .sg-command-item[data-state="selected"] {
    background: var(--sg-surface-container);
  }

}

@layer sigui.base {
  .sg-context-menu-root {
    --_context-content-min: 10rem;
    --_context-content-pad: var(--sg-gap-tight, 0.25rem);
    --_context-offset: var(--sg-gap-tight, 0.25rem);
    --_context-label-case: uppercase;
    position: relative;
    display: inline-block;
    container-type: inline-size;
    container-name: sg-context-menu;
  }

  .sg-context-menu-trigger {
    display: inline-flex;
    align-items: center;
  }

  .sg-context-menu-content {
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-card-border);
    border-radius: var(--sg-card-radius, var(--sg-card-radius, 0.5rem));
    box-shadow: var(--sg-shadow-dropdown);
    padding: var(--_context-content-pad);
    min-width: var(--_context-content-min);
    z-index: var(--sg-z-popover, 50);
    position: absolute;
    top: calc(100% + var(--_context-offset));
    left: 0;
  }

  .sg-context-menu-item {
    display: flex;
    align-items: center;
    padding: var(--sg-gap-related, 0.5rem) var(--sg-pad-input, 0.75rem);
    border-radius: var(--sg-input-radius, 0.25rem);
    cursor: pointer;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
  }

  .sg-context-menu-separator {
    height: 1px;
    background: var(--sg-color-border);
    margin: var(--sg-gap-tight, 0.25rem) 0;
  }

  .sg-context-menu-label {
    padding: var(--sg-gap-related, 0.5rem) var(--sg-pad-input, 0.75rem);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-xs, 0.6875rem);
    font-weight: 500;
    color: var(--sg-color-text-muted);
    text-transform: var(--_context-label-case);
    letter-spacing: 0.05em;
  }

  .sg-context-menu-label[data-inset] {
    padding-left: calc(var(--sg-pad-card, 1.5rem) + var(--sg-pad-input, 0.75rem));
  }

  .sg-context-menu-sub-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sg-gap-related, 0.5rem) var(--sg-pad-input, 0.75rem);
    border-radius: var(--sg-input-radius, 0.25rem);
    cursor: pointer;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
  }

  .sg-context-menu-sub-trigger-content {
    flex: 1;
  }

  .sg-context-menu-sub-trigger-arrow {
    margin-left: var(--sg-gap-related, 0.5rem);
    color: var(--sg-color-text-muted);
  }

  .sg-context-menu-sub-content {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: var(--_context-offset);
  }

  @supports (anchor-name: --sg-anchor) and (position-anchor: --sg-anchor) {
    .sg-context-menu-trigger {
      anchor-name: --sg-context-anchor;
    }

    .sg-context-menu-content {
      top: auto;
      left: auto;
      position-anchor: --sg-context-anchor;
      position-area: bottom;
      position-try-fallbacks: flip-block, flip-inline;
      margin-block-start: var(--_context-offset);
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-context-menu-root) {
      :scope {
        --_context-label-case: uppercase;
      }

      .sg-context-menu-item,
      .sg-context-menu-sub-trigger {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.states {
  @media (forced-colors: active) {
    .sg-context-menu-content {
      border: 1px solid CanvasText;
    }
  }

  .sg-context-menu-item {
    transition: background var(--sg-transition-default, 200ms ease-out);
  }

  .sg-context-menu-item:hover:not([data-disabled]) {
    background: var(--sg-surface-container);
  }

  .sg-context-menu-item:active:not([data-disabled]) {
    background: var(--sg-surface-container-high);
  }

  .sg-context-menu-item:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: -2px;
  }

}

@layer sigui.base {
  .sg-data-table {
    --_data-table-pagination-gap: var(--sg-gap-related, 0.5rem);
    --_data-table-pagination-px: var(--sg-pad-button-x, 1rem);
    --_data-table-pagination-py: var(--sg-pad-button-y, 0.75rem);
    width: 100%;
    container-type: inline-size;
    container-name: sg-data-table;
  }

  .sg-data-table-head {
    cursor: pointer;
  }

  .sg-data-table-sort-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--sg-gap-tight, 0.25rem);
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0;
  }

  .sg-data-table-sort-icon {
    font-size: var(--sg-text-xs, 0.6875rem);
  }

  .sg-data-table-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--_data-table-pagination-gap);
    padding: var(--_data-table-pagination-py) var(--_data-table-pagination-px);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
  }

  .sg-data-table-pagination button {
    padding: var(--sg-gap-tight, 0.25rem) var(--sg-pad-input, 0.75rem);
    border: 1px solid var(--sg-color-border);
    border-radius: var(--sg-input-radius, 0.25rem);
    background: none;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    cursor: pointer;
  }

  .sg-data-table-pagination button:disabled {
    opacity: var(--sg-disabled-opacity, 0.38);
    cursor: not-allowed;
  }

  @container sg-data-table (max-width: 34rem) {
    .sg-data-table-pagination {
      flex-wrap: wrap;
      justify-content: space-between;
    }
  }
  @container sg-data-table (max-width: 24rem) {
    .sg-data-table-pagination {
      flex-direction: column;
      align-items: stretch;
    }
  }

  @supports (width: 1cqi) {
    .sg-data-table {
      --_data-table-pagination-gap: clamp(var(--sg-gap-tight, 0.25rem), 1.1cqi, var(--sg-gap-related, 0.5rem));
      --_data-table-pagination-px: clamp(var(--sg-gap-related, 0.5rem), 2.2cqi, var(--sg-pad-button-x, 1rem));
      --_data-table-pagination-py: clamp(var(--sg-gap-related, 0.5rem), 1.8cqi, var(--sg-pad-button-y, 0.75rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-data-table) {
      .sg-data-table-pagination {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.states {
  .sg-data-table-sort-trigger:hover {
    color: var(--sg-color-text);
  }

  .sg-data-table-sort-trigger:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
  }

}

@layer sigui.base {
  .sg-date-picker-root {
    --_date-picker-trigger-min: 12rem;
    --_date-picker-content-pad: var(--sg-pad-input, 0.75rem);
    --_date-picker-day-size: 2.25rem;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sg-gap-tight, 0.25rem);
    container-type: inline-size;
    container-name: sg-date-picker;
  }

  .sg-date-picker-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sg-input-padding, 0.75rem);
    border: 1px solid var(--sg-input-border);
    border-radius: var(--sg-input-radius);
    background: var(--sg-input-bg);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-base, 1rem);
    color: var(--sg-color-text);
    min-height: var(--sg-touch-min, 44px);
    cursor: pointer;
    min-width: var(--_date-picker-trigger-min);
    position: relative;
    z-index: 1;
  }

  .sg-date-picker-trigger[hidden] {
    display: none;
  }

  .sg-date-picker-content {
    position: absolute;
    top: calc(100% + var(--sg-gap-tight, 0.25rem));
    left: 0;
    z-index: 20;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-card-border);
    border-radius: var(--sg-card-radius, var(--sg-card-radius, 0.5rem));
    box-shadow: var(--sg-shadow-dropdown);
    padding: var(--_date-picker-content-pad);
    overflow: visible;
  }

  .sg-date-picker-content .sg-calendar {
    border: 1px solid var(--sg-card-border);
    border-radius: var(--sg-input-radius, 0.5rem);
    background: var(--sg-card-bg);
  }

  .sg-date-picker-trigger-value {
    display: inline-flex;
    align-items: center;
    min-height: var(--sg-touch-min, 44px);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-base, 1rem);
    color: var(--sg-color-text);
  }

  .sg-date-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--sg-gap-related, 0.5rem);
  }

  .sg-date-picker-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--sg-input-radius, 0.25rem);
    font-family: var(--sg-font-family, system-ui);
    color: var(--sg-color-text);
  }

  .sg-date-picker-title {
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 500;
  }

  .sg-date-picker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
  }

  .sg-date-picker-weekday {
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-xs, 0.6875rem);
    color: var(--sg-color-text-muted);
    padding: var(--sg-gap-tight, 0.25rem);
  }

  .sg-date-picker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }

  .sg-date-picker-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--_date-picker-day-size);
    height: var(--_date-picker-day-size);
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--sg-input-radius, 0.25rem);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--sg-color-text);
  }

  .sg-date-picker-day-empty {
    width: var(--_date-picker-day-size);
    height: var(--_date-picker-day-size);
  }

  @supports (width: 1cqi) {
    .sg-date-picker-root {
      --_date-picker-content-pad: clamp(var(--sg-gap-related, 0.5rem), 3.5cqi, var(--sg-pad-input, 0.75rem));
      --_date-picker-day-size: clamp(2rem, 11.8cqi, 2.25rem);
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-date-picker-root) {
      .sg-date-picker-title {
        text-wrap: balance;
      }
    }
  }

}

@layer sigui.states {
  @media (forced-colors: active) {
    .sg-date-picker-content {
      border: 1px solid CanvasText;
    }
  }

  .sg-date-picker-day:hover {
    background: var(--sg-surface-container);
  }

  .sg-date-picker-day[data-state="selected"] {
    background: var(--sg-color-primary);
    color: var(--sg-color-text-inverse);
  }

  .sg-date-picker-day[data-today] {
    font-weight: 700;
    border: 1px solid var(--sg-color-primary);
  }

  .sg-date-picker-trigger:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
  }

  .sg-date-picker-nav:hover {
    background: var(--sg-surface-container);
  }

}

@layer sigui.base {
  .sg-hover-card-root {
    --_hover-card-pad: var(--sg-card-padding, 1.5rem);
    --_hover-card-offset: var(--sg-gap-tight, 0.25rem);
    position: relative;
    display: inline-block;
    container-type: inline-size;
    container-name: sg-hover-card;
  }

  .sg-hover-card-trigger {
    display: inline-flex;
    align-items: center;
  }

  .sg-hover-card {
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-card-border);
    border-radius: var(--sg-card-radius, var(--sg-card-radius, 0.5rem));
    box-shadow: var(--sg-shadow-dropdown);
    padding: var(--_hover-card-pad);
    z-index: var(--sg-z-popover, 50);
    position: absolute;
    top: calc(100% + var(--_hover-card-offset));
    left: 0;
  }

  @supports (anchor-name: --sg-anchor) and (position-anchor: --sg-anchor) {
    .sg-hover-card-trigger {
      anchor-name: --sg-hover-card-anchor;
    }

    .sg-hover-card {
      top: auto;
      left: auto;
      position-anchor: --sg-hover-card-anchor;
      position-area: bottom;
      position-try-fallbacks: flip-block, flip-inline;
      margin-block-start: var(--_hover-card-offset);
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-hover-card-root) {
      .sg-hover-card {
        text-wrap: pretty;
      }
    }
  }

}

@layer sigui.states {
}

@layer sigui.base {
  .sg-input-otp {
    --_otp-gap: var(--sg-gap-tight, 0.25rem);
    --_otp-slot-width: 2.5rem;
    --_otp-slot-height: 3rem;
    display: inline-flex;
    align-items: center;
    gap: var(--_otp-gap);
    position: relative;
    container-type: inline-size;
    container-name: sg-input-otp;
  }

  .sg-input-otp-group {
    display: inline-flex;
    align-items: center;
    gap: var(--_otp-gap);
  }

  .sg-input-otp-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--_otp-slot-width);
    min-width: var(--_otp-slot-width);
    height: var(--_otp-slot-height);
    min-height: var(--_otp-slot-height);
    flex-shrink: 0;
    border: 1px solid var(--sg-input-border, var(--sg-color-border));
    border-radius: var(--sg-input-radius, var(--sg-input-radius, 0.375rem));
    background: var(--sg-input-bg);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-lg, 1.25rem);
    font-weight: 500;
    color: var(--sg-color-text);
  }

  .sg-input-otp-caret {
    display: inline-block;
    width: 1px;
    height: 1.5rem;
    background: var(--sg-color-primary);
    animation: sg-input-otp-blink calc(200ms * 5) step-end infinite;
  }

  .sg-input-otp-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--sg-gap-tight, 0.25rem);
    color: var(--sg-color-text-muted);
    font-size: var(--sg-text-lg, 1.25rem);
  }

  @supports (width: 1cqi) {
    .sg-input-otp {
      --_otp-gap: clamp(var(--sg-gap-micro, 0.125rem), 0.9cqi, var(--sg-gap-tight, 0.25rem));
      --_otp-slot-width: clamp(2rem, 11.3cqi, 2.5rem);
      --_otp-slot-height: clamp(2.5rem, 13.8cqi, 3rem);
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-input-otp) {
      :scope {
        --_otp-gap: var(--sg-gap-tight, 0.25rem);
      }
    }
  }

}

@layer sigui.states {
  .sg-input-otp-slot[data-state="active"] {
    border-color: var(--sg-color-primary);
    box-shadow: 0 0 0 1px var(--sg-color-primary);
  }

  .sg-input-otp-slot[data-state="filled"] {
    border-color: var(--sg-color-border-light);
  }

  @keyframes sg-input-otp-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }
}

@layer sigui.base {
  .sg-nav-menu {
    --_nav-menu-item-gap: var(--sg-gap-tight, 0.25rem);
    --_nav-menu-trigger-px: var(--sg-pad-input, 0.75rem);
    --_nav-menu-trigger-py: var(--sg-gap-related, 0.5rem);
    position: relative;
    container-type: inline-size;
    container-name: sg-nav-menu;
  }

  .sg-nav-menu-list {
    display: flex;
    align-items: center;
    gap: var(--_nav-menu-item-gap);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .sg-nav-menu-item {
    position: relative;
  }

  .sg-nav-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--sg-gap-tight, 0.25rem);
    padding: var(--_nav-menu-trigger-py) var(--_nav-menu-trigger-px);
    border: none;
    background: none;
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 500;
    color: var(--sg-color-text);
    cursor: pointer;
    border-radius: var(--sg-input-radius, 0.375rem);
  }

  .sg-nav-menu-content {
    position: absolute;
    top: calc(100% + var(--sg-gap-tight, 0.25rem));
    left: 0;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-card-border);
    border-radius: var(--sg-card-radius, var(--sg-card-radius, 0.5rem));
    box-shadow: var(--sg-shadow-dropdown);
    padding: var(--sg-pad-input, 0.75rem);
    min-width: 12rem;
    z-index: var(--sg-z-popover, 50);
  }

  .sg-nav-menu-link {
    display: block;
    padding: var(--_nav-menu-trigger-py) var(--_nav-menu-trigger-px);
    border-radius: var(--sg-input-radius, 0.25rem);
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--sg-color-text);
    text-decoration: none;
  }

  @container sg-nav-menu (max-width: 420px) {
    .sg-nav-menu-list {
      flex-wrap: wrap;
      align-items: stretch;
    }

    .sg-nav-menu-item {
      flex: 1 1 calc(50% - var(--_nav-menu-item-gap));
      min-width: 10rem;
    }

    .sg-nav-menu-trigger {
      width: 100%;
      justify-content: space-between;
    }
  }

  @supports (width: 1cqi) {
    .sg-nav-menu {
      --_nav-menu-item-gap: clamp(var(--sg-gap-micro, 0.125rem), 0.7cqi, var(--sg-gap-tight, 0.25rem));
      --_nav-menu-trigger-px: clamp(var(--sg-gap-related, 0.5rem), 2.4cqi, var(--sg-pad-input, 0.75rem));
      --_nav-menu-trigger-py: clamp(var(--sg-gap-tight, 0.25rem), 1.4cqi, var(--sg-gap-related, 0.5rem));
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-nav-menu) {
      .sg-nav-menu-trigger,
      .sg-nav-menu-link {
        text-wrap: balance;
      }
    }
  }

  @supports (anchor-name: --sg-anchor) and (position-anchor: --sg-anchor) {
    .sg-nav-menu-trigger {
      anchor-name: --sg-nav-anchor;
    }

    .sg-nav-menu-content {
      top: auto;
      left: auto;
      position-anchor: --sg-nav-anchor;
      position-area: bottom;
      position-try-fallbacks: flip-block, flip-inline;
      margin-block-start: var(--sg-gap-tight, 0.25rem);
    }
  }

}

@layer sigui.states {
  @media (forced-colors: active) {
    .sg-nav-menu-content {
      border: 1px solid CanvasText;
    }
  }

  .sg-nav-menu-trigger:hover {
    background: var(--sg-surface-container);
  }

  .sg-nav-menu-trigger:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset, 2px);
    box-shadow: 0 0 0 var(--sg-focus-offset, 2px) var(--sg-focus-inner, white);
  }

  .sg-nav-menu-link:hover {
    background: var(--sg-surface-container);
  }

  @media (prefers-reduced-motion: reduce) {
    .sg-nav-menu-content {
      animation-name: sg-fade-in;
      animation-duration: 200ms;
    }
  }

}

@layer sigui.base {
  .sg-resizable-root {
    --_resizable-grip-size-long: 2.5rem;
    --_resizable-grip-size-short: 0.75rem;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    container-type: inline-size;
    container-name: sg-resizable;
  }

  .sg-resizable-root[data-direction="vertical"] {
    flex-direction: column;
  }

  .sg-resizable-panel {
    flex: 1 1 0%;
    overflow: auto;
    min-width: 0;
  }

  .sg-resizable-handle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
  }

  .sg-resizable-handle[data-direction="horizontal"] {
    width: 0;
    border-left: var(--sg-border-thin, 1px) solid var(--sg-color-border);
    cursor: col-resize;
  }

  .sg-resizable-handle[data-direction="vertical"] {
    height: 0;
    border-top: var(--sg-border-thin, 1px) solid var(--sg-color-border);
    cursor: row-resize;
  }

  .sg-resizable-handle-indicator {
    width: 2px;
    height: 1.5rem;
    border-radius: 9999px;
    background: var(--sg-color-text-muted);
  }

  .sg-resizable-handle[data-direction="vertical"] .sg-resizable-handle-indicator {
    width: 1.5rem;
    height: 2px;
  }

  .sg-resizable-handle-grip {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sg-input-radius, 0.25rem);
    background: var(--sg-surface-container-high);
    border: 1px solid var(--sg-color-border);
    color: var(--sg-color-text-muted);
    transition: background var(--sg-transition-default, 200ms ease-out);
  }

  .sg-resizable-handle[data-direction="horizontal"] .sg-resizable-handle-grip {
    width: var(--_resizable-grip-size-short);
    height: var(--_resizable-grip-size-long);
  }

  .sg-resizable-handle[data-direction="vertical"] .sg-resizable-handle-grip {
    width: var(--_resizable-grip-size-long);
    height: var(--_resizable-grip-size-short);
  }

  @supports (width: 1cqi) {
    .sg-resizable-root {
      --_resizable-grip-size-long: clamp(2rem, 9.4cqi, 2.5rem);
      --_resizable-grip-size-short: clamp(0.5rem, 2.6cqi, 0.75rem);
    }
  }

  @supports (selector(:scope)) {
    @scope (.sg-resizable-root) {
      :scope {
        --_resizable-grip-size-long: 2.5rem;
      }
    }
  }

}

@layer sigui.variants {
  .sg-resizable-root[data-direction="horizontal"] > .sg-resizable-handle {
    width: 0;
    border-left: var(--sg-border-thin, 1px) solid var(--sg-color-border);
    cursor: col-resize;
  }

  .sg-resizable-root[data-direction="vertical"] > .sg-resizable-handle {
    height: 0;
    border-top: var(--sg-border-thin, 1px) solid var(--sg-color-border);
    cursor: row-resize;
  }

}

@layer sigui.states {
  .sg-resizable-handle:hover {
    border-color: var(--sg-color-primary);
  }

  .sg-resizable-handle[data-state="dragging"] {
    border-color: var(--sg-color-primary);
  }

  .sg-resizable-handle:focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color);
    outline-offset: -2px;
  }

}

@layer sigui.states {
  @keyframes sg-fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes sg-fade-in-overlay {
    from { opacity: 0; }
    to { opacity: 1; }
  }

}

@layer sigui.states {
  /* Disabled */
  [data-disabled] {
    opacity: var(--sg-disabled-opacity, 0.38);
    pointer-events: none;
    cursor: not-allowed;
  }

  /* Popover-attribute layer entrance/exit (Menu, Popover, Select) */
  .sg-popover,
  .sg-menu-content,
  .sg-select-content {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
      opacity var(--sg-duration-fast, 100ms) var(--sg-ease-default, ease-out),
      transform var(--sg-duration-fast, 100ms) var(--sg-ease-default, ease-out),
      overlay var(--sg-duration-fast, 100ms) var(--sg-ease-default, ease-out) allow-discrete,
      display var(--sg-duration-fast, 100ms) var(--sg-ease-default, ease-out) allow-discrete;
  }

  @starting-style {
    .sg-popover,
    .sg-menu-content,
    .sg-select-content {
      opacity: 0;
      transform: translateY(4px) scale(0.98);
    }
  }

  .sg-popover:not(:popover-open),
  .sg-menu-content:not(:popover-open),
  .sg-select-content:not(:popover-open) {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }

  /* Conditional-render layer entrance (Tooltip, HoverCard, etc.) */
  @keyframes sg-layer-in {
    from {
      opacity: 0;
      transform: translateY(4px) scale(0.98);
    }
  }

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

  .sg-tooltip,
  .sg-hover-card,
  .sg-combobox-content,
  .sg-context-menu-content,
  .sg-date-picker-content,
  .sg-nav-menu-content {
    animation: sg-layer-in var(--sg-duration-fast, 100ms) var(--sg-ease-default, ease-out);
  }

  @media (forced-colors: active) {

    :focus-visible {
      outline: 2px solid Highlight;
      outline-offset: 2px;
      box-shadow: none;
    }

    input, select, textarea, button {
      border: 1px solid ButtonText;
    }

    [disabled], [aria-disabled="true"] {
      color: GrayText;
      border-color: GrayText;
      opacity: 1;
    }

    [data-disabled] {
      color: GrayText;
      border-color: GrayText;
      opacity: 1;
    }

    a { color: LinkText; text-decoration: underline; }

    [aria-selected="true"],
    [aria-checked="true"],
    [aria-pressed="true"] {
      outline: 2px solid Highlight;
      outline-offset: -2px;
    }

    /* Button */

    /* Checkbox / Switch / Radio */

    /* Select */

    /* Tabs */

    /* Accordion */

    /* NativeAccordion */

    /* Dialog / Sheet / AlertDialog */

    /* Card */

    /* Toggle */

    /* Badge link */

    /* Slider */

    /* Toast */

    /* Tooltip / Popover / HoverCard / Menu */

    /* Combobox */

    /* Menubar */

    /* NavigationMenu */

    /* DatePicker */
  }

  @media (prefers-reduced-motion: reduce) {
    @starting-style {
      .sg-popover,
      .sg-menu-content,
      .sg-select-content {
        opacity: 0;
        transform: none;
      }
    }

    /* Button: remove spatial press feedback */

    /* Dock: disable magnification wave */

    /* Layers: fade-only, no translate/scale */

    /* Dialog: fade-only, no scale */

    /* Dialog @starting-style: fade only, no scale */

    /* Checkbox/Radio: remove pop/scale animations */

    /* Popover layers: fade only */
  }

}

@layer sigui.base {

  ::selection {
    background: var(--sg-color-primary, oklch(0.55 0.15 250));
    color: var(--sg-color-text-inverse, #fff);
  }

  ::placeholder {
    color: var(--sg-color-text-muted, oklch(0.6 0 0));
    opacity: 1;
  }

  :focus-visible {
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color, var(--sg-color-border-focus, oklch(0.55 0.15 250)));
    outline-offset: var(--sg-focus-offset, 2px);
  }

  hr {
    border: none;
    height: 1px;
    background: var(--sg-color-border-light, oklch(0 0 0 / 0.1));
    border-radius: var(--sg-radius-full, 9999px);
  }

  mark {
    background: var(--sg-color-primary-subtle, oklch(0.92 0.05 250));
    color: inherit;
    padding-inline: 0.125em;
    border-radius: var(--sg-radius-sm, 4px);
  }

  code:not(pre code) {
    font-family: var(--sg-font-mono, ui-monospace, monospace);
    font-size: 0.875em;
    padding: 0.125em 0.375em;
    background: var(--sg-surface-container-low, oklch(0 0 0 / 0.04));
    border-radius: var(--sg-radius-sm, 4px);
  }

  pre {
    font-family: var(--sg-font-mono, ui-monospace, monospace);
    font-size: 0.875em;
    padding: var(--sg-space-4, 1rem);
    background: var(--sg-surface-container-low, oklch(0 0 0 / 0.04));
    border-radius: var(--sg-radius-md, 8px);
    overflow-x: auto;
  }

  img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sg-radius-sm, 4px);
  }

  blockquote {
    margin: 0;
    padding: var(--sg-pad-button-y, 0.75rem) var(--sg-pad-button-x, 1rem);
    border-left: 3px solid var(--sg-color-primary, oklch(0.55 0.15 250));
    background: var(--sg-surface-container-low, oklch(0 0 0 / 0.04));
    border-radius: 0 var(--sg-radius-sm, 4px) var(--sg-radius-sm, 4px) 0;
    color: var(--sg-color-text-secondary, oklch(0.4 0 0));
    font-style: italic;
  }

  blockquote > p {
    margin: 0;
  }

  blockquote > cite,
  blockquote > footer {
    display: block;
    font-style: normal;
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--sg-color-text-muted, oklch(0.6 0 0));
    margin-top: var(--sg-space-2, 0.5rem);
  }

  figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sg-gap-related, 0.5rem);
  }

  figcaption {
    font-size: var(--sg-text-sm, 0.875rem);
    color: var(--sg-color-text-muted, oklch(0.6 0 0));
    text-align: center;
  }

  abbr[title] {
    text-decoration: underline dotted var(--sg-color-text-muted, oklch(0.6 0 0));
    text-underline-offset: 0.15em;
    cursor: help;
  }

  q {
    quotes: "\u201C" "\u201D" "\u2018" "\u2019";
    color: var(--sg-color-text-secondary, oklch(0.4 0 0));
  }

  q::before {
    content: open-quote;
    font-weight: 600;
  }

  q::after {
    content: close-quote;
    font-weight: 600;
  }

  details {
    border: 1px solid var(--sg-color-border-light, oklch(0 0 0 / 0.1));
    border-radius: var(--sg-radius-md, 8px);
    padding: var(--sg-pad-button-y, 0.75rem) var(--sg-pad-button-x, 1rem);
  }

  summary {
    cursor: pointer;
    font-weight: 500;
    user-select: none;
  }

  details[open] > summary {
    margin-bottom: var(--sg-space-2, 0.5rem);
  }

  fieldset {
    border: 1px solid var(--sg-color-border-light, oklch(0 0 0 / 0.1));
    border-radius: var(--sg-radius-md, 8px);
    padding: var(--sg-space-4, 1rem);
    margin: 0;
  }

  legend {
    padding-inline: var(--sg-space-2, 0.5rem);
    font-size: var(--sg-text-sm, 0.875rem);
    font-weight: 600;
    color: var(--sg-color-text, oklch(0.25 0 0));
  }

  meter {
    width: 100%;
    height: 0.5rem;
    border: none;
    border-radius: var(--sg-radius-full, 9999px);
    background: transparent;
  }

  meter::-webkit-meter-bar {
    background: var(--sg-surface-container-high, oklch(0 0 0 / 0.08));
    border-radius: var(--sg-radius-full, 9999px);
    border: none;
  }

  meter::-webkit-meter-optimum-value {
    background: var(--sg-color-success, oklch(0.55 0.15 145));
    border-radius: var(--sg-radius-full, 9999px);
  }

  meter::-webkit-meter-suboptimum-value {
    background: var(--sg-color-warning, oklch(0.7 0.15 85));
    border-radius: var(--sg-radius-full, 9999px);
  }

  meter::-webkit-meter-even-less-good-value {
    background: var(--sg-color-danger, oklch(0.55 0.2 25));
    border-radius: var(--sg-radius-full, 9999px);
  }

  output {
    font-family: var(--sg-font-family, system-ui);
    font-size: var(--sg-text-base, 1rem);
    font-weight: 500;
    color: var(--sg-color-text, oklch(0.25 0 0));
    padding: var(--sg-space-2, 0.5rem) var(--sg-space-3, 0.75rem);
    background: var(--sg-surface-container-low, oklch(0 0 0 / 0.04));
    border-radius: var(--sg-radius-md, 8px);
    display: inline-block;
    min-width: 2em;
  }

  datalist {
    color: var(--sg-color-text, oklch(0.25 0 0));
  }

  optgroup {
    color: var(--sg-color-text-secondary, oklch(0.4 0 0));
    font-weight: 600;
  }

  option {
    color: var(--sg-color-text, oklch(0.25 0 0));
  }

  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="file"],
  input[type="color"] {
    font: inherit;
    color: var(--sg-color-text, oklch(0.25 0 0));
  }

  input[type="color"] {
    inline-size: 2.5rem;
    block-size: 2rem;
    padding: 0;
    border: 1px solid var(--sg-color-border-light, oklch(0 0 0 / 0.1));
    border-radius: var(--sg-radius-sm, 4px);
    background: transparent;
  }

  dialog {
    border: 1px solid var(--sg-color-border-light, oklch(0 0 0 / 0.1));
    border-radius: var(--sg-radius-lg, 12px);
    background: var(--sg-surface-container, oklch(1 0 0));
    color: var(--sg-color-text, oklch(0.25 0 0));
    padding: var(--sg-space-4, 1rem);
  }

  dialog::backdrop {
    background: oklch(0 0 0 / 0.4);
  }

  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--sg-text-sm, 0.875rem);
  }

  th, td {
    padding: var(--sg-space-2, 0.5rem) var(--sg-space-3, 0.75rem);
    text-align: left;
    border-bottom: 1px solid var(--sg-color-border-light, oklch(0 0 0 / 0.1));
  }

  th {
    font-weight: 600;
    color: var(--sg-color-text-secondary, oklch(0.4 0 0));
  }

  tr:last-child td {
    border-bottom: none;
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: oklch(0 0 0 / 0.18) oklch(0 0 0 / 0.04);
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: oklch(0 0 0 / 0.04);
    border-radius: var(--sg-radius-sm, 4px);
  }

  ::-webkit-scrollbar-thumb {
    background: oklch(0 0 0 / 0.18);
    border-radius: var(--sg-radius-sm, 4px);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: oklch(0 0 0 / 0.28);
  }

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


}

@layer sigui.variants {
  [data-density="compact"] {
    --sg-density: 0.75;
  }

  [data-density="comfortable"] {
    --sg-density: 1;
  }

  [data-density="spacious"] {
    --sg-density: 1.5;
  }

}


@layer sigui.utilities {

  /* -----------------------------------------------------------------------
   * Spacing - padding
   * ----------------------------------------------------------------------- */
  .sg-p-0        { padding: 0; }
  .sg-p-related  { padding: var(--sg-gap-related); }
  .sg-p-grouped  { padding: var(--sg-gap-grouped); }
  .sg-p-separated { padding: var(--sg-gap-separated); }
  .sg-p-distinct { padding: var(--sg-gap-distinct); }

  .sg-px-related  { padding-inline: var(--sg-gap-related); }
  .sg-px-grouped  { padding-inline: var(--sg-gap-grouped); }
  .sg-px-separated { padding-inline: var(--sg-gap-separated); }
  .sg-px-distinct { padding-inline: var(--sg-gap-distinct); }

  .sg-py-related  { padding-block: var(--sg-gap-related); }
  .sg-py-grouped  { padding-block: var(--sg-gap-grouped); }
  .sg-py-separated { padding-block: var(--sg-gap-separated); }
  .sg-py-distinct { padding-block: var(--sg-gap-distinct); }

  /* -----------------------------------------------------------------------
   * Spacing - margin
   * ----------------------------------------------------------------------- */
  .sg-m-0        { margin: 0; }
  .sg-m-auto     { margin: auto; }
  .sg-mx-auto    { margin-inline: auto; }
  .sg-my-auto    { margin-block: auto; }

  .sg-m-related  { margin: var(--sg-gap-related); }
  .sg-m-grouped  { margin: var(--sg-gap-grouped); }
  .sg-m-separated { margin: var(--sg-gap-separated); }
  .sg-m-distinct { margin: var(--sg-gap-distinct); }

  /* -----------------------------------------------------------------------
   * Relationship-aware gap by nesting depth
   * depth 0 -> distinct, 1 -> separated, 2 -> grouped, 3+ -> related
   * ----------------------------------------------------------------------- */
  [data-depth] { --sg-gap-by-depth: var(--sg-gap-related); }
  [data-depth="0"] { --sg-gap-by-depth: var(--sg-gap-distinct); }
  [data-depth="1"] { --sg-gap-by-depth: var(--sg-gap-separated); }
  [data-depth="2"] { --sg-gap-by-depth: var(--sg-gap-grouped); }
  [data-depth="3"] { --sg-gap-by-depth: var(--sg-gap-related); }

  .sg-gap-auto { gap: var(--sg-gap-by-depth, var(--sg-gap-grouped)); }

  /* -----------------------------------------------------------------------
   * Typography - size
   * ----------------------------------------------------------------------- */
  .sg-text-xs  { font-size: var(--sg-text-xs);  line-height: var(--sg-leading-xs); }
  .sg-text-sm  { font-size: var(--sg-text-sm);  line-height: var(--sg-leading-sm); }
  .sg-text-base { font-size: var(--sg-text-base); line-height: var(--sg-leading-base); }
  .sg-text-lg  { font-size: var(--sg-text-lg);  line-height: var(--sg-leading-lg); }
  .sg-text-xl  { font-size: var(--sg-text-xl);  line-height: var(--sg-leading-xl); }
  .sg-text-2xl { font-size: var(--sg-text-2xl); line-height: var(--sg-leading-2xl); }
  .sg-text-3xl { font-size: var(--sg-text-3xl); line-height: var(--sg-leading-3xl); }

  /* -----------------------------------------------------------------------
   * Typography - weight
   * ----------------------------------------------------------------------- */
  .sg-font-normal   { font-weight: 400; }
  .sg-font-medium   { font-weight: 500; }
  .sg-font-semibold { font-weight: 600; }
  .sg-font-bold     { font-weight: 700; }

  /* -----------------------------------------------------------------------
   * Typography - family
   * ----------------------------------------------------------------------- */
  .sg-font-sans { font-family: var(--sg-font-family); }
  .sg-font-mono { font-family: var(--sg-font-mono); }

  /* -----------------------------------------------------------------------
   * Typography - overflow
   * ----------------------------------------------------------------------- */
  .sg-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sg-line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .sg-line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  /* -----------------------------------------------------------------------
   * Typography - prose (readable measure + spacing)
   * ----------------------------------------------------------------------- */
  .sg-prose {
    max-width: 65ch;
    line-height: 1.7;
    font-family: var(--sg-font-family);
  }

  .sg-prose > * + * {
    margin-top: var(--sg-gap-grouped);
  }

  /* Headings */
  .sg-prose h1 { font-size: var(--sg-text-3xl); font-weight: var(--sg-weight-bold); line-height: var(--sg-leading-3xl); margin-top: var(--sg-gap-distinct); margin-bottom: var(--sg-gap-grouped); }
  .sg-prose h2 { font-size: var(--sg-text-2xl); font-weight: var(--sg-weight-bold); line-height: var(--sg-leading-2xl); margin-top: var(--sg-gap-separated); margin-bottom: var(--sg-gap-related); }
  .sg-prose h3 { font-size: var(--sg-text-xl); font-weight: var(--sg-weight-semibold); line-height: var(--sg-leading-xl); margin-top: var(--sg-gap-separated); margin-bottom: var(--sg-gap-related); }
  .sg-prose h4 { font-size: var(--sg-text-lg); font-weight: var(--sg-weight-semibold); line-height: var(--sg-leading-lg); margin-top: var(--sg-gap-grouped); margin-bottom: var(--sg-gap-related); }

  /* Paragraphs */
  .sg-prose p { line-height: 1.7; }

  /* Lists */
  .sg-prose ul, .sg-prose ol { padding-left: var(--sg-space-6); }
  .sg-prose ul { list-style-type: disc; }
  .sg-prose ol { list-style-type: decimal; }
  .sg-prose li + li { margin-top: var(--sg-gap-related); }
  .sg-prose li > ul, .sg-prose li > ol { margin-top: var(--sg-gap-related); }

  /* Code */
  .sg-prose code { font-family: var(--sg-font-mono); font-size: 0.875em; padding: var(--sg-space-0-5) var(--sg-space-1-5); border-radius: var(--sg-radius-sm); background: var(--sg-surface-container-low, oklch(0 0 0 / 0.04)); }
  .sg-prose pre { padding: var(--sg-space-4); border-radius: var(--sg-radius-md); overflow-x: auto; }
  .sg-prose pre code { padding: 0; border-radius: 0; background: none; font-size: var(--sg-text-sm); }

  /* Blockquote */
  .sg-prose blockquote { padding-left: var(--sg-space-4); border-left: 3px solid var(--sg-color-border, oklch(0 0 0 / 0.12)); color: var(--sg-color-text-secondary); font-style: italic; }

  /* Horizontal rule */
  .sg-prose hr { border: none; border-top: var(--sg-border-thin) solid var(--sg-color-border, oklch(0 0 0 / 0.12)); margin-top: var(--sg-gap-separated); margin-bottom: var(--sg-gap-separated); }

  /* Media */
  .sg-prose img, .sg-prose video { max-width: 100%; height: auto; border-radius: var(--sg-radius-md); }

  /* Links */
  .sg-prose a { color: var(--sg-color-primary); text-decoration: underline; text-underline-offset: 2px; }
  .sg-prose a:hover { text-decoration-thickness: 2px; }

  /* Tables */
  .sg-prose table { width: 100%; border-collapse: collapse; }
  .sg-prose th, .sg-prose td { padding: var(--sg-space-2) var(--sg-space-3); border-bottom: var(--sg-border-thin) solid var(--sg-color-border, oklch(0 0 0 / 0.08)); text-align: left; }
  .sg-prose th { font-weight: var(--sg-weight-semibold); font-size: var(--sg-text-sm); }

  /* -----------------------------------------------------------------------
   * Display / visibility
   * ----------------------------------------------------------------------- */
  .sg-hidden { display: none; }

  .sg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }

  .sg-block   { display: block; }
  .sg-inline   { display: inline; }
  .sg-flex     { display: flex; }
  .sg-grid     { display: grid; }
  .sg-contents { display: contents; }

  @supports (grid-template-columns: subgrid) {
    .sg-subgrid-cols {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
    }

    .sg-subgrid-rows {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .sg-scope-theme { isolation: isolate; }

  @supports (selector(:scope)) {
    @scope (.sg-scope-theme) {
      :scope {
        color: var(--sg-color-text);
        background: var(--sg-bg);
      }

      a {
        color: var(--sg-color-link, var(--sg-color-primary));
      }

      [data-tone="muted"] {
        color: var(--sg-color-text-muted);
      }
    }
  }

  /* -----------------------------------------------------------------------
   * Text alignment
   * ----------------------------------------------------------------------- */
  .sg-text-left   { text-align: left; }
  .sg-text-center { text-align: center; }
  .sg-text-right  { text-align: right; }

  @supports (text-box-trim: both) {
    .sg-text-trim {
      text-box-trim: both;
      text-box-edge: cap alphabetic;
    }
  }

  /* -----------------------------------------------------------------------
   * Semantic color (text)
   * ----------------------------------------------------------------------- */
  .sg-text-primary   { color: var(--sg-color-text); }
  .sg-text-secondary { color: var(--sg-color-text-secondary); }
  .sg-text-muted     { color: var(--sg-color-text-muted); }

  /* -----------------------------------------------------------------------
   * Width
   * ----------------------------------------------------------------------- */
  .sg-w-full { width: 100%; }

  /* -----------------------------------------------------------------------
   * Aspect ratios (Spec 10 §11.2)
   * ----------------------------------------------------------------------- */
  .sg-aspect-video    { aspect-ratio: var(--aspect-video); }
  .sg-aspect-photo    { aspect-ratio: var(--aspect-photo); }
  .sg-aspect-square   { aspect-ratio: var(--aspect-square); }
  .sg-aspect-portrait { aspect-ratio: var(--aspect-portrait); }
  .sg-aspect-wide     { aspect-ratio: var(--aspect-wide); }
  .sg-aspect-golden   { aspect-ratio: var(--aspect-golden); }

  /* -----------------------------------------------------------------------
   * Content visibility (Spec 10 §11.3)
   * ----------------------------------------------------------------------- */
  .sg-content-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto var(--contain-intrinsic-height-md);
  }

  .sg-content-auto-sm {
    content-visibility: auto;
    contain-intrinsic-size: auto var(--contain-intrinsic-height-sm);
  }

  .sg-content-auto-lg {
    content-visibility: auto;
    contain-intrinsic-size: auto var(--contain-intrinsic-height-lg);
  }

  /* -----------------------------------------------------------------------
   * CSS containment (Spec 10 §11.4)
   * ----------------------------------------------------------------------- */
  .sg-contain-layout  { contain: layout; }
  .sg-contain-style   { contain: style; }
  .sg-contain-paint   { contain: paint; }
  .sg-contain-strict  { contain: strict; }
  .sg-contain-content { contain: content; }
  .sg-contain-component { contain: layout style; }

  /* -----------------------------------------------------------------------
   * Image loading patterns (Spec 10 §11.5)
   * ----------------------------------------------------------------------- */
  .sg-image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .sg-image-container > img,
  .sg-image-container > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sg-image-lcp > img {
    content-visibility: visible;
  }

  /* -----------------------------------------------------------------------
   * Cognitive accessibility - skip link (Spec 09 §10.3)
   * ----------------------------------------------------------------------- */
  .sg-skip-link {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: var(--sg-z-overlay, 9999);
    padding: var(--sg-pad-button-y, 0.75rem) var(--sg-pad-button-x, 1rem);
    background: var(--sg-bg);
    color: var(--sg-color-text);
    font-size: var(--sg-text-sm);
    font-weight: var(--sg-weight-semibold, 600);
    text-decoration: none;
    border: var(--sg-border-width, 1px) solid var(--sg-color-border-focus);
    border-radius: var(--sg-radius-md, 6px);
  }

  .sg-skip-link:focus {
    position: fixed;
    left: var(--sg-space-4);
    top: var(--sg-space-4);
    width: auto;
    height: auto;
    overflow: visible;
    outline: var(--sg-focus-width, 2px) solid var(--sg-focus-color, currentColor);
    outline-offset: var(--sg-focus-offset, 2px);
  }

  /* -----------------------------------------------------------------------
   * Cognitive accessibility - step indicator (Spec 09 §10.3)
   * ----------------------------------------------------------------------- */
  .sg-step-indicator {
    display: flex;
    align-items: center;
    gap: var(--sg-gap-related);
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: sg-step;
  }

  .sg-step-indicator-item {
    display: flex;
    align-items: center;
    gap: var(--sg-gap-related);
    font-size: var(--sg-text-sm);
    color: var(--sg-color-text-muted);
    counter-increment: sg-step;
  }

  .sg-step-indicator-item::before {
    content: counter(sg-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75em;
    height: 1.75em;
    border-radius: 50%;
    border: var(--sg-border-width, 1px) solid var(--sg-color-border);
    font-size: var(--sg-text-xs);
    font-weight: var(--sg-weight-semibold, 600);
    flex-shrink: 0;
  }

  .sg-step-indicator-item[aria-current="step"] {
    color: var(--sg-color-text);
    font-weight: var(--sg-weight-semibold, 600);
  }

  .sg-step-indicator-item[aria-current="step"]::before {
    background: var(--sg-color-primary);
    color: var(--sg-color-text-inverse);
    border-color: var(--sg-color-primary);
  }

  .sg-step-indicator-item[data-completed]::before {
    background: var(--sg-color-success, #22c55e);
    color: var(--sg-color-text-inverse);
    border-color: var(--sg-color-success, #22c55e);
    content: "\2713";
  }

  /* -----------------------------------------------------------------------
   * Cognitive accessibility - undo toast (Spec 09 §10.3)
   * ----------------------------------------------------------------------- */
  @keyframes sg-undo-countdown {
    from { width: 100%; }
    to { width: 0%; }
  }

  .sg-undo-toast {
    position: fixed;
    bottom: var(--sg-space-6);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--sg-space-3);
    padding: var(--sg-pad-button-y, 0.75rem) var(--sg-pad-button-x, 1rem);
    background: var(--sg-bg);
    color: var(--sg-color-text);
    border: var(--sg-border-width, 1px) solid var(--sg-color-border);
    border-radius: var(--sg-radius-lg, 8px);
    box-shadow: var(--sg-shadow-lg, 0 4px 12px rgba(0,0,0,0.15));
    z-index: var(--sg-z-toast, 9000);
    font-size: var(--sg-text-sm);
  }

  .sg-undo-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    overflow: hidden;
    border-radius: 0 0 var(--sg-radius-lg, 8px) var(--sg-radius-lg, 8px);
  }

  .sg-undo-toast-progress-bar {
    height: 100%;
    background: var(--sg-color-primary);
    animation: sg-undo-countdown var(--sg-undo-duration, 8s) linear forwards;
  }

  /* -----------------------------------------------------------------------
   * Cognitive accessibility - session warning (Spec 09 §10.3)
   * ----------------------------------------------------------------------- */
  .sg-session-warning {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sg-space-3);
    padding: var(--sg-pad-button-y, 0.75rem) var(--sg-pad-button-x, 1rem);
    background: var(--sg-color-warning, #eab308);
    color: var(--sg-color-text);
    font-size: var(--sg-text-sm);
    font-weight: var(--sg-weight-semibold, 600);
    z-index: var(--sg-z-overlay, 9999);
  }

} /* @layer sigui.utilities */

/* ---------------------------------------------------------------------------
 * Print accessibility - Spec 13 §11.5
 * Outside @layer so it overrides everything in print context.
 * --------------------------------------------------------------------------- */
@media print {
  /* Expand collapsed content */
  [aria-expanded="false"] + [role="region"],
  details:not([open]) > *:not(summary),
  [role="tabpanel"][hidden] {
    display: block !important;
    visibility: visible !important;
  }

  /* Show link URLs */
  a[href]::after { content: " (" attr(href) ")"; font-size: var(--sg-text-sm, 0.875rem); }
  a[href^="#"]::after, a[href^="javascript:"]::after { content: none; }

  /* Hide interactive-only elements */
  .sg-skip-link, [role="tooltip"], .sg-toast-region { display: none !important; }
}

/* ---------------------------------------------------------------------------
 * Development warning for missing lang attribute - Spec 13 §11.6
 * Outside @layer so it always applies during development.
 * --------------------------------------------------------------------------- */
html:not([lang]) { outline: 4px dashed red; }


/* -------------------------------------------------------------------------
 * Scroll-driven animations & View Transitions
 *
 * All animations respect prefers-reduced-motion.
 * Scroll-driven features are behind @supports (animation-timeline: view()).
 * ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * Keyframes
 * ------------------------------------------------------------------------- */
@keyframes sg-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes sg-reveal-up {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sg-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes sg-sticky-elevate {
  from {
    box-shadow: none;
    border-color: oklch(from var(--sg-color-border) l c h / 0);
  }
  to {
    box-shadow: var(--sg-shadow-card, var(--sg-shadow-xs));
    border-color: var(--sg-color-border);
  }
}

@keyframes sg-scroll-state-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sg-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes sg-typewriter-blink {
  50% { border-color: transparent; }
}

/* -------------------------------------------------------------------------
 * Scroll-driven reveal animations (progressive enhancement)
 * ------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {

  .sg-scroll-reveal-fade {
    animation: sg-fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }

  .sg-scroll-reveal-up {
    animation: sg-reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }

  .sg-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--sg-color-primary);
    transform-origin: left;
    animation: sg-progress linear both;
    animation-timeline: scroll();
    z-index: 999;
  }

}

@supports (animation-timeline: scroll()) {
  .sg-sticky-scroll-elevate {
    animation: sg-sticky-elevate linear both;
    animation-timeline: scroll();
    animation-range: 0 6rem;
  }

  .sg-scroll-state-layer {
    animation: sg-scroll-state-fade linear both;
    animation-timeline: scroll();
    animation-range: 0 8rem;
  }
}

/* -------------------------------------------------------------------------
 * View Transitions
 *
 * Apply a view-transition-name via the custom property:
 *   style="--sg-vt-name: my-element"
 * Or use the attribute:
 *   data-vt-name="my-element"
 * ------------------------------------------------------------------------- */
[data-vt-name] {
  view-transition-name: var(--sg-vt-name);
}

::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: var(--sg-duration-normal, 200ms);
  animation-timing-function: var(--sg-ease-default, ease-out);
}

/* -------------------------------------------------------------------------
 * Reduced motion - disable all scroll and view transition animations
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  .sg-scroll-reveal-fade,
  .sg-scroll-reveal-up,
  .sg-scroll-progress,
  .sg-sticky-scroll-elevate,
  .sg-scroll-state-layer,
  .sg-skeleton,
  .sg-typewriter[data-cursor]::after {
    animation: none;
  }

  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01ms !important;
  }

}


/* Structural shield - unlayered to survive external CSS resets.
 * These rules re-assert critical layout properties for all sigui components.
 * Because class selectors (specificity 0,1,0+) outweigh universal selectors
 * (0,0,0) in the unlayered cascade, components survive `* { padding: 0; }`.
 *
 * Value properties use internal custom properties (--_ prefix) so that
 * layered variant/state rules can override values without fighting the
 * unlayered cascade. Shield hardcodes property *names*, not values. */

.sg-stack { display: flex; flex-direction: column; }
.sg-stack[data-direction="horizontal"] { flex-direction: row; }

.sg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sg-gap-related, 0.5rem);
  padding: var(--sg-button-padding-y, 0.75rem) var(--sg-button-padding-x, 1rem);
}

.sg-card[data-padding] { padding: var(--_card-padding); }
.sg-card-header { padding: var(--_card-section-pad); padding-bottom: 0; }
.sg-card-body { padding: var(--_card-section-pad); }
.sg-card-footer { padding: var(--_card-section-pad); padding-top: 0; }

.sg-container { width: 100%; margin-inline: auto; }
.sg-container[data-padding] { padding-inline: var(--sg-space-4, 1rem); }

.sg-input {
  display: block;
  width: 100%;
  padding: var(--sg-input-padding, 0.75rem);
}

.sg-dialog { padding: var(--sg-pad-card, 1.5rem); margin: auto; border: none; }
.sg-alert-dialog { padding: var(--sg-pad-card, 1.5rem); margin: auto; border: none; }
.sg-sheet { border: none; margin: 0; }

.sg-select-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--sg-gap-related, 0.5rem);
  padding: var(--sg-space-2, 0.5rem) var(--sg-space-3, 0.75rem);
}

.sg-tabs-list {
  display: flex;
  gap: var(--_tabs-gap);
  border-bottom: var(--_tabs-border-bottom);
}

.sg-tabs-trigger {
  padding: var(--_tabs-trigger-py) var(--_tabs-trigger-px);
}

.sg-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--_accordion-trigger-pad);
  gap: var(--_accordion-trigger-gap);
}

.sg-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sg-gap-related, 0.5rem);
  padding: var(--sg-space-2, 0.5rem) var(--sg-space-3, 0.75rem);
}

.sg-grid { display: grid; }
.sg-grid[data-inline="true"] { display: inline-grid; }
.sg-grid-item { min-width: 0; }

.sg-progress {
  width: 100%;
  overflow: hidden;
}