/* Sea Glass CSS - tokens + material + components. Optional reset is a separate entry. */
@layer sg.tokens, sg.material, sg.components, sg.utilities, sg.a11y;

@layer sg.tokens {
  /* Sea Glass tokens - generated from W3C DTCG JSON. Do not edit. */
  :root {
    color-scheme: light dark;
    --sg-color-seafoam: #b9e3d6;
    --sg-color-seafoam-rgb: 185 227 214;
    --sg-color-kelly: #4fa877;
    --sg-color-kelly-rgb: 79 168 119;
    --sg-color-citron: #d8db9c;
    --sg-color-citron-rgb: 216 219 156;
    --sg-color-aqua: #5cc4ec;
    --sg-color-aqua-rgb: 92 196 236;
    --sg-color-cornflower: #c3d3f0;
    --sg-color-cornflower-rgb: 195 211 240;
    --sg-color-cobalt: #6b8ce3;
    --sg-color-cobalt-rgb: 107 140 227;
    --sg-color-lavender: #e4dae8;
    --sg-color-lavender-rgb: 228 218 232;
    --sg-color-ruby: #e07662;
    --sg-color-ruby-rgb: 224 118 98;
    --sg-color-amber: #f7c96b;
    --sg-color-amber-rgb: 247 201 107;
    --sg-color-rootbeer: #b5866a;
    --sg-color-rootbeer-rgb: 181 134 106;
    --sg-color-clear: #f7f9f7;
    --sg-color-clear-rgb: 247 249 247;
    --sg-color-mist: #cdd5d4;
    --sg-color-mist-rgb: 205 213 212;
    --sg-color-seafoam-ink: #1d4d41;
    --sg-color-seafoam-ink-rgb: 29 77 65;
    --sg-color-kelly-ink: #0e2a1d;
    --sg-color-kelly-ink-rgb: 14 42 29;
    --sg-color-citron-ink: #4a4e0f;
    --sg-color-citron-ink-rgb: 74 78 15;
    --sg-color-aqua-ink: #05455e;
    --sg-color-aqua-ink-rgb: 5 69 94;
    --sg-color-cornflower-ink: #243c73;
    --sg-color-cornflower-ink-rgb: 36 60 115;
    --sg-color-cobalt-ink: #14295f;
    --sg-color-cobalt-ink-rgb: 20 41 95;
    --sg-color-lavender-ink: #4b3a59;
    --sg-color-lavender-ink-rgb: 75 58 89;
    --sg-color-ruby-ink: #5e1e12;
    --sg-color-ruby-ink-rgb: 94 30 18;
    --sg-color-amber-ink: #5a3d03;
    --sg-color-amber-ink-rgb: 90 61 3;
    --sg-color-rootbeer-ink: #4a2e1c;
    --sg-color-rootbeer-ink-rgb: 74 46 28;
    --sg-color-clear-ink: #2b3735;
    --sg-color-clear-ink-rgb: 43 55 53;
    --sg-color-mist-ink: #36413f;
    --sg-color-mist-ink-rgb: 54 65 63;
    --sg-color-ground: #f6f5ee;
    --sg-color-ground-rgb: 246 245 238;
    --sg-color-ground-2: #ecebe3;
    --sg-color-ground-2-rgb: 236 235 227;
    --sg-color-ink: #17262a;
    --sg-color-ink-rgb: 23 38 42;
    --sg-color-ink-2: #3e4f52;
    --sg-color-ink-2-rgb: 62 79 82;
    --sg-color-ink-3: #566568;
    --sg-color-ink-3-rgb: 86 101 104;
    --sg-color-line: rgba(23, 38, 42, 0.12156862745098039);
    --sg-color-focus: #2f55c4;
    --sg-color-focus-rgb: 47 85 196;
    --sg-color-drop: #18403a;
    --sg-color-drop-rgb: 24 64 58;
    --sg-color-shade: #225c4e;
    --sg-color-shade-rgb: 34 92 78;
    --sg-color-on-tint: #14463a;
    --sg-color-on-tint-rgb: 20 70 58;
    --sg-color-teal: #4f9482;
    --sg-color-teal-rgb: 79 148 130;
    --sg-color-teal-hi: #7bbfac;
    --sg-color-teal-hi-rgb: 123 191 172;
    --sg-color-teal-deep: #256b5a;
    --sg-color-teal-deep-rgb: 37 107 90;
    --sg-color-teal-deep-hi: #308069;
    --sg-color-teal-deep-hi-rgb: 48 128 105;
    --sg-color-knob-hi: #d3d9d8;
    --sg-color-knob-hi-rgb: 211 217 216;
    --sg-color-knob-lo: #afb8b6;
    --sg-color-knob-lo-rgb: 175 184 182;
    --sg-color-fill-hi: #b6e5d6;
    --sg-color-fill-hi-rgb: 182 229 214;
    --sg-color-fill-lo: #8ccdb7;
    --sg-color-fill-lo-rgb: 140 205 183;
    --sg-color-danger-strong: #a4402f;
    --sg-color-danger-strong-rgb: 164 64 47;
    --sg-color-ok-bg: #d3ebdd;
    --sg-color-ok-bg-rgb: 211 235 221;
    --sg-color-ok-fg: #12482a;
    --sg-color-ok-fg-rgb: 18 72 42;
    --sg-color-ko-bg: #f9dad4;
    --sg-color-ko-bg-rgb: 249 218 212;
    --sg-color-on-glass: #17262a;
    --sg-color-on-glass-rgb: 23 38 42;
    --sg-color-primary: #4fa877;
    --sg-color-primary-rgb: 79 168 119;
    --sg-color-on-primary: #0e2a1d;
    --sg-color-on-primary-rgb: 14 42 29;
    --sg-color-success: #4fa877;
    --sg-color-success-rgb: 79 168 119;
    --sg-color-warning: #f7c96b;
    --sg-color-warning-rgb: 247 201 107;
    --sg-color-danger: #e07662;
    --sg-color-danger-rgb: 224 118 98;
    --sg-color-info: #5cc4ec;
    --sg-color-info-rgb: 92 196 236;
    --sg-color-surface: #f6f5ee;
    --sg-color-surface-rgb: 246 245 238;
    --sg-color-on-surface: #17262a;
    --sg-color-on-surface-rgb: 23 38 42;
    --sg-color-on-surface-variant: #3e4f52;
    --sg-color-on-surface-variant-rgb: 62 79 82;
    --sg-color-on-surface-muted: #566568;
    --sg-color-on-surface-muted-rgb: 86 101 104;
    --sg-color-outline: rgba(23, 38, 42, 0.12156862745098039);
    --sg-color-accent: #b9e3d6;
    --sg-color-accent-rgb: 185 227 214;
    --sg-button-height-sm: 40px;
    --sg-button-height-md: 48px;
    --sg-button-height-lg: 56px;
    --sg-button-pad-sm: 18px;
    --sg-button-pad-md: 24px;
    --sg-button-pad-lg: 32px;
    --sg-chip-height: 36px;
    --sg-switch-width: 68px;
    --sg-switch-height: 40px;
    --sg-switch-knob: 28px;
    --sg-control-size-sm: 24px;
    --sg-elevation-0: none;
    --sg-elevation-1: 0 1px 2px rgb(var(--sg-color-drop-rgb) / 0.1);
    --sg-elevation-2: 0 4px 10px -4px rgb(var(--sg-color-drop-rgb) / 0.22);
    --sg-elevation-3: 0 2px 3px rgb(0 0 0 / 0.12), 0 10px 18px -6px rgb(0 0 0 / 0.28);
    --sg-elevation-4: 0 0 22px rgb(var(--sg-glass-glow-rgb) / 0.28), 0 8px 20px -2px rgb(var(--sg-glass-glow-rgb) / 0.32);
    --sg-elevation-5: 0 16px 40px -16px rgb(var(--sg-color-drop-rgb) / 0.45);
    --sg-z-dropdown: 40;
    --sg-z-sticky: 60;
    --sg-z-overlay: 70;
    --sg-z-modal: 80;
    --sg-z-toast: 90;
    --sg-z-tooltip: 100;
    --sg-breakpoint-sm: 600px;
    --sg-breakpoint-md: 905px;
    --sg-breakpoint-lg: 1240px;
    --sg-breakpoint-xl: 1440px;
    --sg-blur-sm: 6px;
    --sg-blur-md: 12px;
    --sg-blur-lg: 24px;
    --sg-blur-xl: 32px;
    --sg-glass-alpha-ground: 0.42;
    --sg-glass-alpha-scene: 0.08;
    --sg-glass-alpha-text: 0.82;
    --sg-glass-spec: rgba(255, 255, 255, 0.5);
    --sg-glass-sheen: rgba(255, 255, 255, 0.22);
    --sg-glass-lit: 0.95;
    --sg-glass-caustic-edge: 0.7;
    --sg-glass-caustic: 0.55;
    --sg-glass-carved-lo: rgba(34, 92, 78, 0.36);
    --sg-glass-carved-hi: rgba(255, 255, 255, 0.95);
    --sg-glass-well-a: 0.5;
    --sg-glass-well-b: 0.85;
    --sg-glass-sparkle: 0.22;
    --sg-duration-fast: 120ms;
    --sg-duration-base: 200ms;
    --sg-duration-slow: 380ms;
    --sg-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --sg-ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
    --sg-motion-hover-scale: 1.05;
    --sg-motion-press-scale: 0.97;
    --sg-motion-surface-hover-scale: 1.02;
    --sg-motion-surface-press-scale: 0.99;
    --sg-radius-sm: 8px;
    --sg-radius-md: 12px;
    --sg-radius-lg: 16px;
    --sg-radius-xl: 28px;
    --sg-radius-pill: 999px;
    --sg-radius-circle: 50%;
    --sg-radius-squircle: 28px;
    --sg-space-1: 4px;
    --sg-space-2: 8px;
    --sg-space-3: 12px;
    --sg-space-4: 16px;
    --sg-space-5: 20px;
    --sg-space-6: 24px;
    --sg-space-7: 32px;
    --sg-space-8: 40px;
    --sg-space-9: 48px;
    --sg-space-10: 56px;
    --sg-space-11: 64px;
    --sg-space-12: 72px;
    --sg-font-display: Poppins, Outfit, ui-rounded, system-ui, sans-serif;
    --sg-font-body: Roboto, system-ui, -apple-system, sans-serif;
    --sg-font-mono: ui-monospace, 'Roboto Mono', Menlo, monospace;
    --sg-text-display-lg-size: 32px;
    --sg-text-display-lg-line: 40px;
    --sg-text-display-md-size: 28px;
    --sg-text-display-md-line: 36px;
    --sg-text-headline-lg-size: 24px;
    --sg-text-headline-lg-line: 32px;
    --sg-text-headline-sm-size: 20px;
    --sg-text-headline-sm-line: 28px;
    --sg-text-title-lg-size: 22px;
    --sg-text-title-lg-line: 28px;
    --sg-text-title-md-size: 16px;
    --sg-text-title-md-line: 24px;
    --sg-text-body-lg-size: 16px;
    --sg-text-body-lg-line: 24px;
    --sg-text-body-md-size: 14px;
    --sg-text-body-md-line: 20px;
    --sg-text-label-md-size: 12px;
    --sg-text-label-md-line: 16px;
    --sg-text-weight-regular: 400;
    --sg-text-weight-medium: 500;
    --sg-text-weight-semibold: 600;
    --sg-text-weight-bold: 700;
    --sg-text-tracking-display: -0.012em;
    --sg-text-tracking-label: 0.04em;
  }

  [data-sg-theme="light"],
  [data-theme="light"] {
    color-scheme: light;
    --sg-color-seafoam: #b9e3d6;
    --sg-color-seafoam-rgb: 185 227 214;
    --sg-color-kelly: #4fa877;
    --sg-color-kelly-rgb: 79 168 119;
    --sg-color-citron: #d8db9c;
    --sg-color-citron-rgb: 216 219 156;
    --sg-color-aqua: #5cc4ec;
    --sg-color-aqua-rgb: 92 196 236;
    --sg-color-cornflower: #c3d3f0;
    --sg-color-cornflower-rgb: 195 211 240;
    --sg-color-cobalt: #6b8ce3;
    --sg-color-cobalt-rgb: 107 140 227;
    --sg-color-lavender: #e4dae8;
    --sg-color-lavender-rgb: 228 218 232;
    --sg-color-ruby: #e07662;
    --sg-color-ruby-rgb: 224 118 98;
    --sg-color-amber: #f7c96b;
    --sg-color-amber-rgb: 247 201 107;
    --sg-color-rootbeer: #b5866a;
    --sg-color-rootbeer-rgb: 181 134 106;
    --sg-color-clear: #f7f9f7;
    --sg-color-clear-rgb: 247 249 247;
    --sg-color-mist: #cdd5d4;
    --sg-color-mist-rgb: 205 213 212;
    --sg-color-seafoam-ink: #1d4d41;
    --sg-color-seafoam-ink-rgb: 29 77 65;
    --sg-color-kelly-ink: #0e2a1d;
    --sg-color-kelly-ink-rgb: 14 42 29;
    --sg-color-citron-ink: #4a4e0f;
    --sg-color-citron-ink-rgb: 74 78 15;
    --sg-color-aqua-ink: #05455e;
    --sg-color-aqua-ink-rgb: 5 69 94;
    --sg-color-cornflower-ink: #243c73;
    --sg-color-cornflower-ink-rgb: 36 60 115;
    --sg-color-cobalt-ink: #14295f;
    --sg-color-cobalt-ink-rgb: 20 41 95;
    --sg-color-lavender-ink: #4b3a59;
    --sg-color-lavender-ink-rgb: 75 58 89;
    --sg-color-ruby-ink: #5e1e12;
    --sg-color-ruby-ink-rgb: 94 30 18;
    --sg-color-amber-ink: #5a3d03;
    --sg-color-amber-ink-rgb: 90 61 3;
    --sg-color-rootbeer-ink: #4a2e1c;
    --sg-color-rootbeer-ink-rgb: 74 46 28;
    --sg-color-clear-ink: #2b3735;
    --sg-color-clear-ink-rgb: 43 55 53;
    --sg-color-mist-ink: #36413f;
    --sg-color-mist-ink-rgb: 54 65 63;
    --sg-color-ground: #f6f5ee;
    --sg-color-ground-rgb: 246 245 238;
    --sg-color-ground-2: #ecebe3;
    --sg-color-ground-2-rgb: 236 235 227;
    --sg-color-ink: #17262a;
    --sg-color-ink-rgb: 23 38 42;
    --sg-color-ink-2: #3e4f52;
    --sg-color-ink-2-rgb: 62 79 82;
    --sg-color-ink-3: #566568;
    --sg-color-ink-3-rgb: 86 101 104;
    --sg-color-line: rgba(23, 38, 42, 0.12156862745098039);
    --sg-color-focus: #2f55c4;
    --sg-color-focus-rgb: 47 85 196;
    --sg-color-drop: #18403a;
    --sg-color-drop-rgb: 24 64 58;
    --sg-color-shade: #225c4e;
    --sg-color-shade-rgb: 34 92 78;
    --sg-color-on-tint: #14463a;
    --sg-color-on-tint-rgb: 20 70 58;
    --sg-color-teal: #4f9482;
    --sg-color-teal-rgb: 79 148 130;
    --sg-color-teal-hi: #7bbfac;
    --sg-color-teal-hi-rgb: 123 191 172;
    --sg-color-teal-deep: #256b5a;
    --sg-color-teal-deep-rgb: 37 107 90;
    --sg-color-teal-deep-hi: #308069;
    --sg-color-teal-deep-hi-rgb: 48 128 105;
    --sg-color-knob-hi: #d3d9d8;
    --sg-color-knob-hi-rgb: 211 217 216;
    --sg-color-knob-lo: #afb8b6;
    --sg-color-knob-lo-rgb: 175 184 182;
    --sg-color-fill-hi: #b6e5d6;
    --sg-color-fill-hi-rgb: 182 229 214;
    --sg-color-fill-lo: #8ccdb7;
    --sg-color-fill-lo-rgb: 140 205 183;
    --sg-color-danger-strong: #a4402f;
    --sg-color-danger-strong-rgb: 164 64 47;
    --sg-color-ok-bg: #d3ebdd;
    --sg-color-ok-bg-rgb: 211 235 221;
    --sg-color-ok-fg: #12482a;
    --sg-color-ok-fg-rgb: 18 72 42;
    --sg-color-ko-bg: #f9dad4;
    --sg-color-ko-bg-rgb: 249 218 212;
    --sg-color-on-glass: #17262a;
    --sg-color-on-glass-rgb: 23 38 42;
    --sg-color-primary: #4fa877;
    --sg-color-primary-rgb: 79 168 119;
    --sg-color-on-primary: #0e2a1d;
    --sg-color-on-primary-rgb: 14 42 29;
    --sg-color-success: #4fa877;
    --sg-color-success-rgb: 79 168 119;
    --sg-color-warning: #f7c96b;
    --sg-color-warning-rgb: 247 201 107;
    --sg-color-danger: #e07662;
    --sg-color-danger-rgb: 224 118 98;
    --sg-color-info: #5cc4ec;
    --sg-color-info-rgb: 92 196 236;
    --sg-color-surface: #f6f5ee;
    --sg-color-surface-rgb: 246 245 238;
    --sg-color-on-surface: #17262a;
    --sg-color-on-surface-rgb: 23 38 42;
    --sg-color-on-surface-variant: #3e4f52;
    --sg-color-on-surface-variant-rgb: 62 79 82;
    --sg-color-on-surface-muted: #566568;
    --sg-color-on-surface-muted-rgb: 86 101 104;
    --sg-color-outline: rgba(23, 38, 42, 0.12156862745098039);
    --sg-color-accent: #b9e3d6;
    --sg-color-accent-rgb: 185 227 214;
    --sg-button-height-sm: 40px;
    --sg-button-height-md: 48px;
    --sg-button-height-lg: 56px;
    --sg-button-pad-sm: 18px;
    --sg-button-pad-md: 24px;
    --sg-button-pad-lg: 32px;
    --sg-chip-height: 36px;
    --sg-switch-width: 68px;
    --sg-switch-height: 40px;
    --sg-switch-knob: 28px;
    --sg-control-size-sm: 24px;
    --sg-elevation-0: none;
    --sg-elevation-1: 0 1px 2px rgb(var(--sg-color-drop-rgb) / 0.1);
    --sg-elevation-2: 0 4px 10px -4px rgb(var(--sg-color-drop-rgb) / 0.22);
    --sg-elevation-3: 0 2px 3px rgb(0 0 0 / 0.12), 0 10px 18px -6px rgb(0 0 0 / 0.28);
    --sg-elevation-4: 0 0 22px rgb(var(--sg-glass-glow-rgb) / 0.28), 0 8px 20px -2px rgb(var(--sg-glass-glow-rgb) / 0.32);
    --sg-elevation-5: 0 16px 40px -16px rgb(var(--sg-color-drop-rgb) / 0.45);
    --sg-z-dropdown: 40;
    --sg-z-sticky: 60;
    --sg-z-overlay: 70;
    --sg-z-modal: 80;
    --sg-z-toast: 90;
    --sg-z-tooltip: 100;
    --sg-breakpoint-sm: 600px;
    --sg-breakpoint-md: 905px;
    --sg-breakpoint-lg: 1240px;
    --sg-breakpoint-xl: 1440px;
    --sg-blur-sm: 6px;
    --sg-blur-md: 12px;
    --sg-blur-lg: 24px;
    --sg-blur-xl: 32px;
    --sg-glass-alpha-ground: 0.42;
    --sg-glass-alpha-scene: 0.08;
    --sg-glass-alpha-text: 0.82;
    --sg-glass-spec: rgba(255, 255, 255, 0.5);
    --sg-glass-sheen: rgba(255, 255, 255, 0.22);
    --sg-glass-lit: 0.95;
    --sg-glass-caustic-edge: 0.7;
    --sg-glass-caustic: 0.55;
    --sg-glass-carved-lo: rgba(34, 92, 78, 0.36);
    --sg-glass-carved-hi: rgba(255, 255, 255, 0.95);
    --sg-glass-well-a: 0.5;
    --sg-glass-well-b: 0.85;
    --sg-glass-sparkle: 0.22;
    --sg-duration-fast: 120ms;
    --sg-duration-base: 200ms;
    --sg-duration-slow: 380ms;
    --sg-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --sg-ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
    --sg-motion-hover-scale: 1.05;
    --sg-motion-press-scale: 0.97;
    --sg-motion-surface-hover-scale: 1.02;
    --sg-motion-surface-press-scale: 0.99;
    --sg-radius-sm: 8px;
    --sg-radius-md: 12px;
    --sg-radius-lg: 16px;
    --sg-radius-xl: 28px;
    --sg-radius-pill: 999px;
    --sg-radius-circle: 50%;
    --sg-radius-squircle: 28px;
    --sg-space-1: 4px;
    --sg-space-2: 8px;
    --sg-space-3: 12px;
    --sg-space-4: 16px;
    --sg-space-5: 20px;
    --sg-space-6: 24px;
    --sg-space-7: 32px;
    --sg-space-8: 40px;
    --sg-space-9: 48px;
    --sg-space-10: 56px;
    --sg-space-11: 64px;
    --sg-space-12: 72px;
    --sg-font-display: Poppins, Outfit, ui-rounded, system-ui, sans-serif;
    --sg-font-body: Roboto, system-ui, -apple-system, sans-serif;
    --sg-font-mono: ui-monospace, 'Roboto Mono', Menlo, monospace;
    --sg-text-display-lg-size: 32px;
    --sg-text-display-lg-line: 40px;
    --sg-text-display-md-size: 28px;
    --sg-text-display-md-line: 36px;
    --sg-text-headline-lg-size: 24px;
    --sg-text-headline-lg-line: 32px;
    --sg-text-headline-sm-size: 20px;
    --sg-text-headline-sm-line: 28px;
    --sg-text-title-lg-size: 22px;
    --sg-text-title-lg-line: 28px;
    --sg-text-title-md-size: 16px;
    --sg-text-title-md-line: 24px;
    --sg-text-body-lg-size: 16px;
    --sg-text-body-lg-line: 24px;
    --sg-text-body-md-size: 14px;
    --sg-text-body-md-line: 20px;
    --sg-text-label-md-size: 12px;
    --sg-text-label-md-line: 16px;
    --sg-text-weight-regular: 400;
    --sg-text-weight-medium: 500;
    --sg-text-weight-semibold: 600;
    --sg-text-weight-bold: 700;
    --sg-text-tracking-display: -0.012em;
    --sg-text-tracking-label: 0.04em;
  }

  [data-sg-theme="dark"],
  [data-theme="dark"] {
    color-scheme: dark;
    --sg-color-seafoam-ink: #CFF0E5;
    --sg-color-seafoam-ink-rgb: 207 240 229;
    --sg-color-kelly-ink: #BDEBD0;
    --sg-color-kelly-ink-rgb: 189 235 208;
    --sg-color-citron-ink: #EEF2B8;
    --sg-color-citron-ink-rgb: 238 242 184;
    --sg-color-aqua-ink: #C6EDFB;
    --sg-color-aqua-ink-rgb: 198 237 251;
    --sg-color-cornflower-ink: #D4E0F7;
    --sg-color-cornflower-ink-rgb: 212 224 247;
    --sg-color-cobalt-ink: #D5E0FA;
    --sg-color-cobalt-ink-rgb: 213 224 250;
    --sg-color-lavender-ink: #EDE4F4;
    --sg-color-lavender-ink-rgb: 237 228 244;
    --sg-color-ruby-ink: #FBD3CB;
    --sg-color-ruby-ink-rgb: 251 211 203;
    --sg-color-amber-ink: #FBE3A8;
    --sg-color-amber-ink-rgb: 251 227 168;
    --sg-color-rootbeer-ink: #EDD4C4;
    --sg-color-rootbeer-ink-rgb: 237 212 196;
    --sg-color-clear-ink: #E4EEEC;
    --sg-color-clear-ink-rgb: 228 238 236;
    --sg-color-mist-ink: #E2EBEA;
    --sg-color-mist-ink-rgb: 226 235 234;
    --sg-color-ground: #14130F;
    --sg-color-ground-rgb: 20 19 15;
    --sg-color-ground-2: #1C1B17;
    --sg-color-ground-2-rgb: 28 27 23;
    --sg-color-ink: #E8F1EE;
    --sg-color-ink-rgb: 232 241 238;
    --sg-color-ink-2: #B5C5C1;
    --sg-color-ink-2-rgb: 181 197 193;
    --sg-color-ink-3: #93A5A1;
    --sg-color-ink-3-rgb: 147 165 161;
    --sg-color-line: rgb(232 241 238 / 0.141);
    --sg-color-line-rgb: 232 241 238;
    --sg-color-focus: #9DB8FF;
    --sg-color-focus-rgb: 157 184 255;
    --sg-color-drop: #000000;
    --sg-color-drop-rgb: 0 0 0;
    --sg-color-shade: #001410;
    --sg-color-shade-rgb: 0 20 16;
    --sg-color-on-tint: #E8F7F1;
    --sg-color-on-tint-rgb: 232 247 241;
    --sg-color-teal: #7BBFAC;
    --sg-color-teal-rgb: 123 191 172;
    --sg-color-teal-hi: #A8DCCB;
    --sg-color-teal-hi-rgb: 168 220 203;
    --sg-color-fill-hi: #7DCEB4;
    --sg-color-fill-hi-rgb: 125 206 180;
    --sg-color-fill-lo: #4DAE94;
    --sg-color-fill-lo-rgb: 77 174 148;
    --sg-color-on-glass: #E8F1EE;
    --sg-color-on-glass-rgb: 232 241 238;
    --sg-glass-alpha-ground: 0.1;
    --sg-glass-alpha-scene: 0.1;
    --sg-glass-alpha-text: 0.18;
    --sg-glass-spec: rgba(255, 255, 255, 0.24);
    --sg-glass-sheen: rgba(255, 255, 255, 0.08);
    --sg-glass-lit: 0.6;
    --sg-glass-caustic-edge: 0.4;
    --sg-glass-caustic: 0.3;
    --sg-glass-carved-lo: rgba(0, 0, 0, 0.55);
    --sg-glass-carved-hi: rgba(255, 255, 255, 0.14);
    --sg-glass-well-a: 0.05;
    --sg-glass-well-b: 0.1;
    --sg-glass-sparkle: 0.16;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-sg-theme="light"], [data-theme="light"]) {
      color-scheme: dark;
      --sg-color-seafoam-ink: #CFF0E5;
      --sg-color-seafoam-ink-rgb: 207 240 229;
      --sg-color-kelly-ink: #BDEBD0;
      --sg-color-kelly-ink-rgb: 189 235 208;
      --sg-color-citron-ink: #EEF2B8;
      --sg-color-citron-ink-rgb: 238 242 184;
      --sg-color-aqua-ink: #C6EDFB;
      --sg-color-aqua-ink-rgb: 198 237 251;
      --sg-color-cornflower-ink: #D4E0F7;
      --sg-color-cornflower-ink-rgb: 212 224 247;
      --sg-color-cobalt-ink: #D5E0FA;
      --sg-color-cobalt-ink-rgb: 213 224 250;
      --sg-color-lavender-ink: #EDE4F4;
      --sg-color-lavender-ink-rgb: 237 228 244;
      --sg-color-ruby-ink: #FBD3CB;
      --sg-color-ruby-ink-rgb: 251 211 203;
      --sg-color-amber-ink: #FBE3A8;
      --sg-color-amber-ink-rgb: 251 227 168;
      --sg-color-rootbeer-ink: #EDD4C4;
      --sg-color-rootbeer-ink-rgb: 237 212 196;
      --sg-color-clear-ink: #E4EEEC;
      --sg-color-clear-ink-rgb: 228 238 236;
      --sg-color-mist-ink: #E2EBEA;
      --sg-color-mist-ink-rgb: 226 235 234;
      --sg-color-ground: #14130F;
      --sg-color-ground-rgb: 20 19 15;
      --sg-color-ground-2: #1C1B17;
      --sg-color-ground-2-rgb: 28 27 23;
      --sg-color-ink: #E8F1EE;
      --sg-color-ink-rgb: 232 241 238;
      --sg-color-ink-2: #B5C5C1;
      --sg-color-ink-2-rgb: 181 197 193;
      --sg-color-ink-3: #93A5A1;
      --sg-color-ink-3-rgb: 147 165 161;
      --sg-color-line: rgb(232 241 238 / 0.141);
      --sg-color-line-rgb: 232 241 238;
      --sg-color-focus: #9DB8FF;
      --sg-color-focus-rgb: 157 184 255;
      --sg-color-drop: #000000;
      --sg-color-drop-rgb: 0 0 0;
      --sg-color-shade: #001410;
      --sg-color-shade-rgb: 0 20 16;
      --sg-color-on-tint: #E8F7F1;
      --sg-color-on-tint-rgb: 232 247 241;
      --sg-color-teal: #7BBFAC;
      --sg-color-teal-rgb: 123 191 172;
      --sg-color-teal-hi: #A8DCCB;
      --sg-color-teal-hi-rgb: 168 220 203;
      --sg-color-fill-hi: #7DCEB4;
      --sg-color-fill-hi-rgb: 125 206 180;
      --sg-color-fill-lo: #4DAE94;
      --sg-color-fill-lo-rgb: 77 174 148;
      --sg-color-on-glass: #E8F1EE;
      --sg-color-on-glass-rgb: 232 241 238;
      --sg-glass-alpha-ground: 0.1;
      --sg-glass-alpha-scene: 0.1;
      --sg-glass-alpha-text: 0.18;
      --sg-glass-spec: rgba(255, 255, 255, 0.24);
      --sg-glass-sheen: rgba(255, 255, 255, 0.08);
      --sg-glass-lit: 0.6;
      --sg-glass-caustic-edge: 0.4;
      --sg-glass-caustic: 0.3;
      --sg-glass-carved-lo: rgba(0, 0, 0, 0.55);
      --sg-glass-carved-hi: rgba(255, 255, 255, 0.14);
      --sg-glass-well-a: 0.05;
      --sg-glass-well-b: 0.1;
      --sg-glass-sparkle: 0.16;
    }
  }

}

/* Sea Glass material - glassmorphism formula.
   Light wash + frost blur (décor visible), grain, rim.
   Drop = 2 layers: cast (ombre neutre) + glow (lueur teinte).
   Scene alpha ~0.08–0.12 ; tint 0.28 ; sparkle 0.22 overlay ; blur 24. */
@layer sg.material {
  @property --sg-mx {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 28%;
  }

  @property --sg-my {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
  }

  @property --sg-ang {
    syntax: '<angle>';
    inherits: false;
    initial-value: 140deg;
  }

  .sg-glass {
    --sg-glass-radius: var(--sg-radius-xl);
    --sg-glass-blur: var(--sg-blur-lg);
    --sg-glass-tint-rgb: 255 255 255;
    --sg-glass-tint-a: 0.28;
    --sg-glass-glow-rgb: var(--sg-glass-tint-rgb);
    --sg-glass-a: var(--sg-glass-alpha-ground);
    --sg-glass-cs: color-mix(in srgb, rgb(var(--sg-glass-tint-rgb)) 40%, #fff);
    --sg-shadow-in: inset 0 1px 1px rgb(255 255 255 / 0.45), inset 0 -2px 4px rgb(0 0 0 / 0.05);

    /* Ombre = plate vers le bas · Lueur = teinte pure, subtile (maquette) */
    --sg-shadow-cast: var(--sg-elevation-3);
    --sg-shadow-glow:
      0 0 18px rgb(var(--sg-glass-glow-rgb) / 0.18),
      0 6px 16px -2px rgb(var(--sg-glass-glow-rgb) / 0.22);
    --sg-shadow-out: var(--sg-shadow-glow), var(--sg-shadow-cast);
    --sg-glass-press: transparent;
    position: relative;

    /* isolate bloque le backdrop-filter - auto pour un vrai glassmorphisme */
    isolation: auto;
    border-radius: var(--sg-glass-radius);
    color: var(--sg-color-ink);
    background:
      linear-gradient(var(--sg-glass-press), var(--sg-glass-press)),
      linear-gradient(
        135deg,
        rgb(255 255 255 / calc(var(--sg-glass-a) + 0.12)),
        rgb(255 255 255 / var(--sg-glass-a)) 55%,
        rgb(255 255 255 / calc(var(--sg-glass-a) + 0.06))
      );
    box-shadow:
      var(--sg-shadow-in),
      var(--sg-shadow-out),
      inset 0 0 0 1px rgb(255 255 255 / 0.35);
    transition:
      transform var(--sg-duration-base) var(--sg-ease-spring),
      box-shadow var(--sg-duration-base) var(--sg-ease-standard),
      background var(--sg-duration-base) var(--sg-ease-standard),
      --sg-mx 140ms ease-out,
      --sg-my 140ms ease-out,
      --sg-ang 180ms ease-out;
  }

  .sg-scene .sg-glass {
    --sg-glass-a: var(--sg-glass-alpha-scene);
  }

  .sg-scene .sg-glass[data-text] {
    --sg-glass-a: var(--sg-glass-alpha-text);
  }

  /*
   * Frost / glassmorphisme :
   * - toujours sur .sg-scene (contrat DS)
   * - opt-in hors scène via data-frosted ou .sg-glass--over
   */
  .sg-scene .sg-glass,
  .sg-glass[data-frosted],
  .sg-glass.sg-glass--over[data-frosted],
  .sg-glass.sg-glass--over {
    -webkit-backdrop-filter: blur(var(--sg-glass-blur)) saturate(2.05);
    backdrop-filter: blur(var(--sg-glass-blur)) saturate(2.05);
  }

  /* Refraction is Chromium-only and opt-in (html.sg-refract + data-refractive). */
  .sg-refract .sg-scene .sg-glass[data-refractive],
  .sg-refract .sg-glass.sg-glass--over[data-refractive] {
    -webkit-backdrop-filter: blur(calc(var(--sg-glass-blur) * 0.4)) url('#sg-refract')
      saturate(2.05);
    backdrop-filter: blur(calc(var(--sg-glass-blur) * 0.4)) url('#sg-refract') saturate(2.05);
  }

  .sg-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    background: linear-gradient(
      var(--sg-ang),
      rgb(255 255 255 / var(--sg-glass-lit)),
      rgb(255 255 255 / 0) 30%,
      rgb(255 255 255 / 0) 62%,
      color-mix(in srgb, var(--sg-glass-cs) 85%, transparent)
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
  }

  .sg-glass[data-rim]::before {
    opacity: 1;
  }

  /* Tint: gelée diagonale translucide - laisse passer frost + décor */
  .sg-glass[data-tint] {
    --sg-glass-glow-rgb: var(--sg-glass-tint-rgb);
    background:
      linear-gradient(var(--sg-glass-press), var(--sg-glass-press)),
      linear-gradient(
        135deg,
        color-mix(in srgb, rgb(var(--sg-glass-tint-rgb)) 36%, transparent),
        rgb(var(--sg-glass-tint-rgb) / var(--sg-glass-tint-a)) 52%,
        color-mix(in srgb, rgb(var(--sg-glass-tint-rgb)) 48%, transparent)
      );
  }

  /* Pebble tint → matching ink (icons inherit via currentColor) */
  .sg-glass[data-tint='seafoam'] {
    color: var(--sg-color-seafoam-ink);
  }

  .sg-glass[data-tint='kelly'] {
    color: var(--sg-color-kelly-ink);
  }

  .sg-glass[data-tint='citron'] {
    color: var(--sg-color-citron-ink);
  }

  .sg-glass[data-tint='aqua'] {
    color: var(--sg-color-aqua-ink);
  }

  .sg-glass[data-tint='cornflower'] {
    color: var(--sg-color-cornflower-ink);
  }

  .sg-glass[data-tint='cobalt'] {
    color: var(--sg-color-cobalt-ink);
  }

  .sg-glass[data-tint='lavender'] {
    color: var(--sg-color-lavender-ink);
  }

  .sg-glass[data-tint='ruby'] {
    color: var(--sg-color-ruby-ink);
  }

  .sg-glass[data-tint='amber'] {
    color: var(--sg-color-amber-ink);
  }

  .sg-glass[data-tint='rootbeer'] {
    color: var(--sg-color-rootbeer-ink);
  }

  .sg-glass[data-tint='clear'] {
    color: var(--sg-color-clear-ink);
  }

  .sg-glass[data-tint='mist'] {
    color: var(--sg-color-mist-ink);
  }

  /* data-glow : renforce la lueur (layer 2), garde l’ombre cast */
  .sg-glass[data-glow] {
    --sg-shadow-glow: var(--sg-elevation-4);
  }

  /* Glass imbriqué : pas de 2e drop (ombre table sur le parent seul) */
  .sg-glass .sg-glass {
    --sg-shadow-cast: none;
    --sg-shadow-glow: none;
    --sg-shadow-out: none;
  }

  /* Grain : bruit fin monochrome sur la teinte — overlay ~22 % */
  .sg-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    background: url('noise.svg') center / 128px 128px repeat;
    mix-blend-mode: overlay;
    opacity: var(--sg-glass-sparkle, 0.22);
  }

  /* Creux : ombre inset + grain un peu plus léger — pas de drop cast/glow */
  .sg-glass.sg-glass--carved {
    --sg-shadow-in:
      inset 1.5px 2px 3px -1px var(--sg-glass-carved-lo),
      inset -1px -1.5px 1px -1px var(--sg-glass-carved-hi);
    --sg-shadow-cast: 0 1px 0 var(--sg-glass-carved-hi);
    --sg-shadow-glow: none;
    --sg-shadow-out: var(--sg-shadow-cast);
    --sg-glass-sparkle: 0.16;
  }

  .sg-glass.sg-glass--carved:not([data-tint]) {
    background: linear-gradient(
      180deg,
      rgb(255 255 255 / var(--sg-glass-well-a)),
      rgb(255 255 255 / var(--sg-glass-well-b))
    );
  }

  .sg-glass[data-alive]:hover {
    transform: scale(var(--sg-motion-hover-scale));
  }

  .sg-glass[data-alive]:active {
    transform: scale(var(--sg-motion-press-scale));
  }

  /* Pressed: white wash ~40% + light inset */
  .sg-glass:active,
  .sg-glass[data-pressed],
  .sg-glass[aria-pressed='true'] {
    --sg-glass-press: rgb(255 255 255 / 0.4);
    --sg-shadow-in: inset 0 2px 1px rgb(255 255 255 / 0.55), inset 0 -2px 4px rgb(0 0 0 / 0.05);
  }

  .sg-glass > :where(*) {
    position: relative;
    z-index: 4;
  }

  .sg-scene {
    position: relative;
    padding: var(--sg-space-7);
    border-radius: var(--sg-radius-lg);
    overflow: hidden;
    background: color-mix(in srgb, var(--sg-color-seafoam) 18%, var(--sg-color-ground));
  }

  [data-sg-theme='dark'] .sg-scene,
  [data-theme='dark'] .sg-scene {
    background: color-mix(in srgb, var(--sg-color-seafoam) 10%, var(--sg-color-ground));
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-sg-theme='light'], [data-theme='light']) .sg-scene {
      background: color-mix(in srgb, var(--sg-color-seafoam) 10%, var(--sg-color-ground));
    }
  }
}


/* Prefixed components. Sizes: sm | md | lg. Shapes: pill | circle | squircle. */
@layer sg.components {
  .sg-icon {
    width: 20px;
    height: 20px;
    fill: currentcolor;
    flex: none;
  }

  .sg-button {
    --sg-glass-radius: var(--sg-radius-pill);
    --sg-glass-blur: var(--sg-blur-md);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sg-space-2);
    height: var(--sg-button-height-md);
    padding-inline: var(--sg-button-pad-md);
    border: 0;
    cursor: pointer;
    overflow: hidden;
    font: var(--sg-text-weight-semibold) var(--sg-text-title-md-size) / 1 var(--sg-font-display);
    letter-spacing: 0.005em;
    color: var(--sg-color-ink);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }

  .sg-button:focus-visible {
    outline: 2px solid var(--sg-color-focus);
    outline-offset: 3px;
  }

  .sg-button--squircle {
    --sg-glass-radius: var(--sg-radius-md);
  }

  .sg-button--circle {
    --sg-glass-radius: var(--sg-radius-circle);
    width: var(--sg-button-height-md);
    padding: 0;
  }

  .sg-button--sm {
    height: var(--sg-button-height-sm);
    padding-inline: var(--sg-button-pad-sm);
    font-size: var(--sg-text-body-md-size);
  }

  .sg-button--sm.sg-button--circle {
    width: var(--sg-button-height-sm);
    padding: 0;
  }

  .sg-button--lg {
    height: var(--sg-button-height-lg);
    padding-inline: var(--sg-button-pad-lg);
    font-size: 18px;
  }

  .sg-button--lg.sg-button--circle {
    width: var(--sg-button-height-lg);
    padding: 0;
  }

  .sg-button--primary {
    color: inherit;
  }

  .sg-button--primary:not([data-tint]) {
    color: var(--sg-color-seafoam-ink);
  }

  .sg-button--ghost {
    background: transparent;
    box-shadow: none;
    --sg-glass-blur: 0px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .sg-button--ghost::before,
  .sg-button--ghost::after {
    display: none;
  }

  .sg-button--primary[data-tint] {
    --sg-glass-tint-a: 0.28;
  }

  .sg-button--ghost:hover,
  .sg-button--ghost[data-sg-force-state='hover'] {
    background: color-mix(in srgb, var(--sg-color-ink) 7%, transparent);
    transform: none;
  }

  .sg-button:hover,
  .sg-button[data-sg-force-state='hover'] {
    transform: scale(var(--sg-motion-hover-scale));
    --sg-glass-lit: 1;
  }

  .sg-button:active,
  .sg-button[data-sg-force-state='press'] {
    transform: scale(var(--sg-motion-press-scale));
  }

  .sg-button:disabled,
  .sg-button[aria-disabled='true'] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    filter: grayscale(0.35);
  }

  .sg-chip {
    --sg-glass-radius: var(--sg-radius-pill);
    --sg-glass-blur: var(--sg-blur-md);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--sg-chip-height);
    padding-inline: 18px;
    border: 0;
    cursor: pointer;
    font: var(--sg-text-weight-medium) var(--sg-text-body-md-size) / 1 var(--sg-font-body);
    color: var(--sg-color-ink-2);
  }

  .sg-chip--squircle {
    --sg-glass-radius: var(--sg-radius-md);
  }

  .sg-chip[aria-pressed='true'] {
    color: inherit;
    padding-inline: 12px 18px;
  }

  .sg-chip:hover {
    color: var(--sg-color-ink);
  }

  .sg-chip:focus-visible {
    outline: 2px solid var(--sg-color-focus);
    outline-offset: 3px;
  }

  .sg-chip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .sg-switch {
    position: relative;
    display: inline-block;
    width: var(--sg-switch-width);
    height: var(--sg-switch-height);
    flex: none;
    transition: transform var(--sg-duration-base) var(--sg-ease-spring);
  }

  .sg-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 6;
  }

  .sg-switch__track {
    position: absolute;
    inset: 0;
    --sg-glass-radius: var(--sg-radius-pill);
  }

  .sg-switch__knob {
    position: absolute;
    z-index: 5;
    top: 6px;
    left: 6px;
    width: var(--sg-switch-knob);
    height: var(--sg-switch-knob);
    border-radius: var(--sg-radius-circle);
    pointer-events: none;
    background: radial-gradient(
      circle at 62% 68%,
      var(--sg-color-knob-hi),
      var(--sg-color-knob-lo) 76%
    );
    box-shadow:
      inset 2px 3px 4px rgb(30 45 42 / 0.3),
      inset -1px -1px 2px rgb(255 255 255 / 0.6),
      0 1px 1px rgb(255 255 255 / 0.8);
    transition:
      transform var(--sg-duration-slow) var(--sg-ease-spring),
      width 160ms var(--sg-ease-standard),
      background var(--sg-duration-base) var(--sg-ease-standard);
  }

  .sg-switch:has(input:checked) .sg-switch__knob {
    transform: translateX(28px);
    background: radial-gradient(
      circle at 62% 68%,
      var(--sg-color-teal-hi),
      var(--sg-color-teal) 78%
    );
  }

  .sg-switch input:focus-visible ~ .sg-switch__track {
    outline: 2px solid var(--sg-color-focus);
    outline-offset: 3px;
  }

  .sg-switch:hover:not(:has(input:disabled)) {
    transform: scale(var(--sg-motion-hover-scale));
  }

  .sg-switch:has(input:disabled) {
    opacity: 0.45;
  }

  .sg-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sg-space-3);
    cursor: pointer;
    font-size: 15px;
    min-height: var(--sg-space-8);
  }

  .sg-check input {
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--sg-control-size-sm);
    height: var(--sg-control-size-sm);
    margin: -12px 0 0;
    opacity: 0;
    cursor: pointer;
    z-index: 6;
  }

  .sg-check__box {
    position: relative;
    width: var(--sg-control-size-sm);
    height: var(--sg-control-size-sm);
    flex: none;
    display: block;
    --sg-glass-radius: var(--sg-radius-sm);
    --sg-glass-blur: var(--sg-blur-sm);
    transition:
      transform var(--sg-duration-base) var(--sg-ease-spring),
      box-shadow var(--sg-duration-base) var(--sg-ease-standard),
      background var(--sg-duration-base) var(--sg-ease-standard);
  }

  .sg-check--radio .sg-check__box {
    --sg-glass-radius: var(--sg-radius-circle);
  }

  .sg-check:has(input:checked) .sg-check__box,
  .sg-check:has(input:indeterminate) .sg-check__box {
    background: linear-gradient(165deg, var(--sg-color-teal-deep-hi), var(--sg-color-teal-deep));
    --sg-glass-glow-rgb: var(--sg-color-teal-deep-rgb);
    --sg-shadow-cast: var(--sg-elevation-3);
    --sg-shadow-glow:
      0 0 18px rgb(var(--sg-glass-glow-rgb) / 0.18),
      0 6px 16px -2px rgb(var(--sg-glass-glow-rgb) / 0.22);
    --sg-shadow-out: var(--sg-shadow-glow), var(--sg-shadow-cast);
  }

  .sg-check input:focus-visible ~ .sg-check__box {
    outline: 2px solid var(--sg-color-focus);
    outline-offset: 3px;
  }

  .sg-check:has(input:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .sg-slider,
  .sg-progress,
  .sg-ring {
    --sg-fill-top: var(--sg-color-fill-hi);
    --sg-fill-bot: var(--sg-color-fill-lo);
    --sg-fill-glow-rgb: var(--sg-color-kelly-rgb);
    --sg-sl-mint: color-mix(in srgb, var(--sg-fill-top) 70%, white);
    --sg-sl-mint-deep: var(--sg-fill-bot);
  }

  /* Slider: frosted rail, mint capsule continue (press = bout mint plus large) */
  .sg-slider {
    --sg-sl-a: 0;
    --sg-sl-b: 0.4;
    --sg-sl-h: 20px;
    position: relative;
    height: 52px;
    cursor: pointer;
    touch-action: pan-y;
    user-select: none;
  }

  .sg-slider__rail {
    position: absolute;
    inset-inline: 0;
    top: 16px;
    height: var(--sg-sl-h);
    border-radius: var(--sg-radius-pill);
    background: color-mix(in srgb, white 72%, var(--sg-color-surface-container, #e8e2d6));
    border: 1px solid rgb(255 255 255 / 0.95);
    box-shadow:
      inset 0 1px 2px rgb(255 255 255 / 0.9),
      inset 0 -1px 2px rgb(0 0 0 / 0.06);
    -webkit-backdrop-filter: blur(var(--sg-blur-md)) saturate(2.05);
    backdrop-filter: blur(var(--sg-blur-md)) saturate(2.05);
  }

  [data-sg-theme='dark'] .sg-slider__rail,
  [data-theme='dark'] .sg-slider__rail {
    background: color-mix(in srgb, white 8%, #0c1a18 70%);
    border-color: rgb(255 255 255 / 0.22);
    box-shadow:
      inset 0 2px 4px rgb(0 0 0 / 0.45),
      inset 0 -1px 1px rgb(255 255 255 / 0.12);
  }

  .sg-slider__fill {
    position: absolute;
    left: 0;
    top: 16px;
    height: var(--sg-sl-h);
    width: calc(10px + (100% - 20px) * var(--sg-sl-b) + var(--sg-sl-h) / 2);
    border-radius: var(--sg-radius-pill);
    overflow: hidden;
    z-index: 1;
    background: linear-gradient(180deg, var(--sg-fill-top), var(--sg-fill-bot));
    box-shadow:
      inset 0 1.5px 1px rgb(255 255 255 / 0.75),
      inset 0 -2px 3px -1px rgb(10 90 70 / 0.22);
    transition:
      width var(--sg-duration-base) var(--sg-ease-standard),
      left var(--sg-duration-base) var(--sg-ease-standard);
  }

  .sg-slider--range .sg-slider__fill {
    left: calc(10px + (100% - 20px) * var(--sg-sl-a) - var(--sg-sl-h) / 2);
    width: calc((100% - 20px) * (var(--sg-sl-b) - var(--sg-sl-a)) + var(--sg-sl-h));
  }

  .sg-slider__thumb {
    position: absolute;
    top: 0;
    left: calc(10px + (100% - 20px) * var(--sg-sl-v, var(--sg-sl-b)));
    width: 44px;
    height: 52px;
    margin-left: -22px;
    z-index: 3;
    outline: none;
    background: transparent;
    border: 0;
    border-radius: 999px;
  }

  .sg-slider__stem {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--sg-sl-h);
    height: var(--sg-sl-h);
    transform: translate(-50%, -50%);
    border-radius: 999px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--sg-fill-top) 70%, white),
      var(--sg-fill-bot) 55%,
      var(--sg-sl-mint-deep)
    );
    box-shadow:
      inset 1px 1.5px 1px rgb(255 255 255 / 0.65),
      inset -1px -1.5px 2px rgb(5 55 43 / 0.18);
    transition:
      width 280ms var(--sg-ease-spring),
      height 280ms var(--sg-ease-spring),
      background 200ms var(--sg-ease-standard),
      box-shadow 220ms var(--sg-ease-standard),
      transform 280ms var(--sg-ease-spring);
  }

  .sg-slider__blob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--sg-sl-h);
    height: var(--sg-sl-h);
    margin: calc(var(--sg-sl-h) / -2) 0 0 calc(var(--sg-sl-h) / -2);
    border-radius: 999px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(180deg, var(--sg-fill-top), var(--sg-fill-bot));
    box-shadow: inset 0 1.5px 1px rgb(255 255 255 / 0.55);
    opacity: 1;
    transition:
      width 280ms var(--sg-ease-spring),
      height 280ms var(--sg-ease-spring),
      margin 280ms var(--sg-ease-spring),
      box-shadow 220ms var(--sg-ease-standard),
      opacity 160ms var(--sg-ease-standard);
  }

  .sg-slider--range .sg-slider__blob {
    display: none;
  }

  .sg-slider__ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 999px;
    border: 0;
    background: radial-gradient(circle, rgb(255 255 255 / 0.35) 0%, rgb(255 255 255 / 0) 70%);
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition:
      transform 280ms var(--sg-ease-standard),
      opacity 200ms var(--sg-ease-standard);
  }

  .sg-slider__ring--1 {
    width: 40px;
    height: 40px;
  }

  .sg-slider__ring--2 {
    width: 56px;
    height: 56px;
    background: radial-gradient(circle, rgb(var(--sg-fill-glow-rgb) / 0.22) 0%, transparent 72%);
  }

  .sg-slider__value {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 2px);
    transform: translate(-50%, 6px) scale(0.85);
    opacity: 0;
    pointer-events: none;
    padding: 5px 10px;
    border-radius: 10px;
    font: 600 12px/1 var(--sg-font-mono, ui-monospace, monospace);
    white-space: nowrap;
    z-index: 5;
    background: color-mix(in srgb, var(--sg-fill-top) 85%, white);
    color: var(--sg-color-on-primary, #14463a);
    transition:
      opacity 160ms var(--sg-ease-standard),
      transform 260ms var(--sg-ease-spring);
  }

  .sg-slider:hover .sg-slider__stem,
  .sg-slider[data-state='hover'] .sg-slider__stem {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow:
      inset 1px 1.5px 1px rgb(255 255 255 / 0.7),
      inset -1px -1.5px 2px rgb(5 55 43 / 0.2),
      0 0 0 4px rgb(123 191 172 / 0.18);
  }

  .sg-slider[data-state='press'] .sg-slider__blob,
  .sg-slider[data-dragging] .sg-slider__thumb[data-active] .sg-slider__blob {
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border-radius: 999px;
    transform: scale(1);
    background: linear-gradient(180deg, var(--sg-fill-top), var(--sg-fill-bot));
    box-shadow: inset 0 1.5px 1px rgb(255 255 255 / 0.6);
    opacity: 1;
  }

  .sg-slider[data-state='press'] .sg-slider__stem,
  .sg-slider[data-dragging] .sg-slider__thumb[data-active] .sg-slider__stem {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--sg-fill-top) 75%, white),
      var(--sg-fill-bot) 50%,
      var(--sg-sl-mint-deep)
    );
    box-shadow:
      inset 1.5px 2px 2px rgb(255 255 255 / 0.75),
      inset -1px -2px 3px rgb(5 55 43 / 0.22),
      0 2px 8px -2px rgb(var(--sg-fill-glow-rgb) / 0.35);
  }

  .sg-slider[data-state='press'] .sg-slider__ring,
  .sg-slider[data-dragging] .sg-slider__thumb[data-active] .sg-slider__ring,
  .sg-slider[data-state='focus'] .sg-slider__ring--1,
  .sg-slider__thumb:focus-visible .sg-slider__ring--1 {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .sg-slider[data-state='press'] .sg-slider__value,
  .sg-slider[data-dragging] .sg-slider__thumb[data-active] .sg-slider__value,
  .sg-slider[data-state='focus'] .sg-slider__value,
  .sg-slider__thumb:focus-visible .sg-slider__value {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }

  .sg-slider[aria-disabled='true'],
  .sg-slider:disabled {
    opacity: 0.45;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .sg-slider__stem,
    .sg-slider__blob,
    .sg-slider__ring,
    .sg-slider__fill,
    .sg-slider__value {
      transition: none !important;
    }
  }

  .sg-progress {
    --sg-progress-h: 18px;
    --sg-progress-f: 0.6;
    --sg-progress-buf: 0;
    position: relative;
    height: var(--sg-progress-h);
    border-radius: var(--sg-radius-pill);
    overflow: hidden;
    background: linear-gradient(
      180deg,
      rgb(255 255 255 / var(--sg-glass-well-a)),
      rgb(255 255 255 / var(--sg-glass-well-b))
    );
    box-shadow:
      inset 1.5px 2px 3px -1px var(--sg-glass-carved-lo),
      inset -1px -1.5px 1px -1px var(--sg-glass-carved-hi),
      0 1px 0 var(--sg-glass-carved-hi);
  }

  .sg-progress--sm {
    --sg-progress-h: 10px;
  }

  .sg-progress--lg {
    --sg-progress-h: 26px;
  }

  .sg-progress__bar {
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    width: calc((100% - 4px) * var(--sg-progress-f));
    border-radius: var(--sg-radius-pill);
    background: linear-gradient(180deg, var(--sg-fill-top), var(--sg-fill-bot));
    box-shadow:
      inset 0 1px 1px rgb(255 255 255 / 0.85),
      0 0 10px rgb(var(--sg-fill-glow-rgb) / 0.4);
    transition: width var(--sg-duration-slow) var(--sg-ease-spring);
  }

  .sg-progress--aqua {
    --sg-fill-top: #9adbf4;
    --sg-fill-bot: var(--sg-color-aqua);
    --sg-fill-glow-rgb: var(--sg-color-aqua-rgb);
  }

  .sg-progress--amber {
    --sg-fill-top: #fada95;
    --sg-fill-bot: var(--sg-color-amber);
    --sg-fill-glow-rgb: var(--sg-color-amber-rgb);
  }

  .sg-progress--ruby {
    --sg-fill-top: #f2a99b;
    --sg-fill-bot: var(--sg-color-ruby);
    --sg-fill-glow-rgb: var(--sg-color-ruby-rgb);
  }

  .sg-progress--indeterminate .sg-progress__bar {
    width: 34%;
    transform: translateX(-100%);
    animation: sg-progress-indeterminate 1.7s var(--sg-ease-standard) infinite;
    transition: none;
  }

  @keyframes sg-progress-indeterminate {
    to {
      transform: translateX(290%);
    }
  }

  .sg-tabs {
    --sg-glass-radius: var(--sg-radius-pill);
    --sg-glass-blur: var(--sg-blur-md);
    display: inline-flex;
    padding: var(--sg-space-1);
    gap: 2px;
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sg-tabs__tab {
    position: relative;
    z-index: 3;
    flex: none;
    height: var(--sg-space-8);
    padding-inline: 22px;
    border: 0;
    background: transparent;
    border-radius: var(--sg-radius-pill);
    font: var(--sg-text-weight-semibold) 15px / 1 var(--sg-font-display);
    color: var(--sg-color-ink-3);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--sg-duration-base) var(--sg-ease-standard);
  }

  .sg-tabs__tab:hover {
    color: var(--sg-color-ink);
  }

  .sg-tabs__tab[aria-selected='true'] {
    background: color-mix(in srgb, var(--sg-color-seafoam) 72%, transparent);
    color: var(--sg-color-seafoam-ink);
  }

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

  .sg-tabs__tab:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .sg-field {
    display: grid;
    gap: 6px;
  }

  .sg-field > label {
    font-size: 13px;
    font-weight: var(--sg-text-weight-medium);
    color: var(--sg-color-ink-2);
  }

  .sg-field__input {
    display: block;
    width: 100%;
    height: 52px;
    padding-inline: 18px;
    border: 0;
    border-radius: var(--sg-radius-lg);
    background: transparent;
    font: var(--sg-text-weight-regular) var(--sg-text-body-lg-size) var(--sg-font-body);
    color: var(--sg-color-ink);
  }

  .sg-field__input:focus-visible {
    outline: 2px solid var(--sg-color-focus);
    outline-offset: 3px;
  }

  .sg-field__help {
    font-size: var(--sg-text-label-md-size);
    color: var(--sg-color-ink-3);
  }

  .sg-field__help--error {
    color: var(--sg-color-danger-strong);
    font-weight: var(--sg-text-weight-medium);
  }

  [data-sg-theme='dark'] .sg-field__help--error,
  [data-theme='dark'] .sg-field__help--error {
    color: var(--sg-color-ruby);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-sg-theme='light'], [data-theme='light']) .sg-field__help--error {
      color: var(--sg-color-ruby);
    }
  }

  .sg-card {
    padding: var(--sg-space-6);
    display: grid;
    gap: 10px;
    --sg-glass-radius: var(--sg-radius-xl);
    min-width: 0;
  }

  .sg-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding-inline: var(--sg-space-3);
    --sg-glass-radius: var(--sg-radius-pill);
    --sg-glass-blur: var(--sg-blur-sm);
    font: var(--sg-text-weight-medium) var(--sg-text-label-md-size) / 1 var(--sg-font-body);
    white-space: nowrap;
  }

  .sg-tooltip {
    display: inline-block;
    padding: var(--sg-space-2) 14px;
    --sg-glass-radius: var(--sg-radius-md);
    --sg-glass-blur: var(--sg-blur-md);
    font-size: 13px;
  }

  .sg-snack {
    display: flex;
    align-items: center;
    gap: var(--sg-space-4);
    padding: var(--sg-space-2) var(--sg-space-2) var(--sg-space-2) 22px;
    --sg-glass-radius: var(--sg-radius-pill);
    font-size: var(--sg-text-body-md-size);
    max-width: 100%;
  }

  .sg-toast-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--sg-z-toast) - 1);
    pointer-events: none;
    opacity: 0;
    background: color-mix(in srgb, var(--sg-color-ground) 28%, transparent);
    backdrop-filter: blur(var(--sg-blur-md)) saturate(2.05);
    -webkit-backdrop-filter: blur(var(--sg-blur-md)) saturate(2.05);
    transition: opacity var(--sg-duration-base) var(--sg-ease-standard);
  }

  .sg-toast-scrim[data-open],
  .sg-toast-scrim.sg-toast-scrim--open {
    opacity: 1;
  }

  .sg-toast-host {
    position: fixed;
    left: 50%;
    top: calc(var(--sg-space-5) + env(safe-area-inset-top, 0px));
    transform: translate(-50%, -12px);
    opacity: 0;
    pointer-events: none;
    z-index: var(--sg-z-toast);
    width: min(420px, calc(100vw - 32px));
    transition:
      transform var(--sg-duration-slow) var(--sg-ease-spring),
      opacity var(--sg-duration-base) var(--sg-ease-standard);
  }

  .sg-toast-host[data-open],
  .sg-toast-host.sg-toast-host--open {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Toast = alerte positionnée (haut centre) */
  .sg-toast.sg-alert {
    position: fixed;
    left: 50%;
    top: calc(var(--sg-space-5) + env(safe-area-inset-top, 0px));
    bottom: auto;
    width: min(420px, calc(100vw - 32px));
    transform: translate(-50%, -12px);
    opacity: 0;
    pointer-events: none;
    z-index: var(--sg-z-toast);
    transition:
      transform var(--sg-duration-slow) var(--sg-ease-spring),
      opacity var(--sg-duration-base) var(--sg-ease-standard);
  }

  .sg-toast.sg-alert[data-open],
  .sg-toast.sg-alert.sg-toast--open {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
  }

  .sg-toast-host .sg-toast.sg-alert {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  .sg-ripple {
    position: absolute;
    z-index: 5;
    border-radius: var(--sg-radius-circle);
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  /* ---------- List / Divider ---------- */
  .sg-list {
    --sg-glass-radius: var(--sg-radius-lg);
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: var(--sg-space-2);
    list-style: none;
    min-width: 0;
  }

  .sg-list__item {
    display: flex;
    align-items: center;
    gap: var(--sg-space-3);
    min-height: var(--sg-button-height-md);
    padding: var(--sg-space-2) var(--sg-space-4);
    border: 0;
    border-radius: var(--sg-radius-md);
    background: transparent;
    color: inherit;
    font: var(--sg-text-weight-medium) var(--sg-text-body-lg-size) / 1.3 var(--sg-font-body);
    text-align: start;
    cursor: pointer;
    width: 100%;
    transition:
      background var(--sg-duration-fast) var(--sg-ease-standard),
      transform var(--sg-duration-base) var(--sg-ease-spring);
  }

  .sg-list__item:hover,
  .sg-list__item[data-sg-force-state='hover'] {
    background: color-mix(in srgb, var(--sg-color-ink) 6%, transparent);
  }

  .sg-list__item[aria-current='true'],
  .sg-list__item[aria-selected='true'] {
    background: color-mix(in srgb, var(--sg-color-seafoam) 42%, transparent);
    color: var(--sg-color-ink);
    font-weight: var(--sg-text-weight-semibold);
  }

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

  .sg-list__item:disabled,
  .sg-list__item[aria-disabled='true'] {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .sg-list__leading,
  .sg-list__trailing {
    flex: none;
    display: inline-flex;
    align-items: center;
  }

  .sg-list__body {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .sg-list__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sg-list__meta {
    font-size: var(--sg-text-label-md-size);
    color: var(--sg-color-ink-3);
    font-weight: var(--sg-text-weight-regular);
  }

  .sg-divider {
    display: block;
    height: 1px;
    margin: var(--sg-space-2) var(--sg-space-3);
    border: 0;
    background: color-mix(in srgb, var(--sg-color-ink) 14%, transparent);
  }

  .sg-divider--inset {
    margin-inline-start: calc(var(--sg-space-4) + var(--sg-control-size-sm) + var(--sg-space-3));
  }

  /* ---------- Overlay / Dialog / Menu ---------- */
  .sg-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--sg-z-overlay);
    display: grid;
    place-items: center;
    padding: var(--sg-space-6);
    background: rgb(var(--sg-color-drop-rgb) / 0.42);
    -webkit-backdrop-filter: blur(var(--sg-blur-sm)) saturate(2.05);
    backdrop-filter: blur(var(--sg-blur-sm)) saturate(2.05);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--sg-duration-base) var(--sg-ease-standard),
      visibility 0s linear var(--sg-duration-base);
  }

  .sg-overlay[data-open],
  .sg-overlay.sg-overlay--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--sg-duration-base) var(--sg-ease-standard);
  }

  .sg-dialog {
    --sg-glass-radius: var(--sg-radius-xl);
    --sg-glass-blur: var(--sg-blur-xl);
    width: min(100%, 28rem);
    max-height: min(85vh, 40rem);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    color: var(--sg-color-ink);
    transform: translateY(12px) scale(0.98);
    transition: transform var(--sg-duration-slow) var(--sg-ease-spring);
  }

  .sg-overlay[data-open] .sg-dialog,
  .sg-overlay.sg-overlay--open .sg-dialog {
    transform: none;
  }

  .sg-dialog:focus {
    outline: none;
  }

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

  .sg-dialog__header,
  .sg-dialog__footer {
    display: flex;
    align-items: center;
    gap: var(--sg-space-3);
    padding: var(--sg-space-5) var(--sg-space-5) var(--sg-space-3);
  }

  .sg-dialog__footer {
    justify-content: flex-end;
    padding: var(--sg-space-3) var(--sg-space-5) var(--sg-space-5);
    flex-wrap: wrap;
  }

  .sg-dialog__title {
    margin: 0;
    flex: 1;
    font: var(--sg-text-weight-semibold) var(--sg-text-title-lg-size) / 1.2 var(--sg-font-display);
  }

  .sg-dialog__body {
    padding: 0 var(--sg-space-5) var(--sg-space-4);
    overflow: auto;
    font-size: var(--sg-text-body-lg-size);
    line-height: 1.5;
    color: var(--sg-color-ink-2);
  }

  .sg-menu {
    --sg-glass-radius: var(--sg-radius-lg);
    --sg-glass-blur: var(--sg-blur-lg);
    position: absolute;
    z-index: var(--sg-z-dropdown);
    min-width: 12rem;
    max-width: min(20rem, 90vw);
    padding: var(--sg-space-2);
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top left;
    transition:
      opacity var(--sg-duration-fast) var(--sg-ease-standard),
      transform var(--sg-duration-base) var(--sg-ease-spring),
      visibility 0s linear var(--sg-duration-fast);
  }

  .sg-menu[data-open],
  .sg-menu.sg-menu--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition:
      opacity var(--sg-duration-fast) var(--sg-ease-standard),
      transform var(--sg-duration-base) var(--sg-ease-spring);
  }

  .sg-menu__item {
    display: flex;
    align-items: center;
    gap: var(--sg-space-3);
    width: 100%;
    min-height: 40px;
    padding: var(--sg-space-2) var(--sg-space-3);
    border: 0;
    border-radius: var(--sg-radius-md);
    background: transparent;
    color: inherit;
    font: var(--sg-text-weight-medium) var(--sg-text-body-md-size) / 1.3 var(--sg-font-body);
    text-align: start;
    cursor: pointer;
  }

  .sg-menu__item:hover,
  .sg-menu__item[data-highlighted],
  .sg-menu__item[data-sg-force-state='hover'] {
    background: color-mix(in srgb, var(--sg-color-ink) 7%, transparent);
  }

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

  .sg-menu__item:disabled,
  .sg-menu__item[aria-disabled='true'] {
    opacity: 0.45;
    cursor: not-allowed;
  }

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

  @media (prefers-reduced-motion: reduce) {
    .sg-overlay,
    .sg-dialog,
    .sg-menu {
      transition: none;
    }

    .sg-overlay[data-open] .sg-dialog,
    .sg-menu[data-open] {
      transform: none;
    }
  }

  /* ---------- Alert / Banner / Callout ---------- */
  .sg-alert,
  .sg-banner,
  .sg-callout {
    --sg-glass-radius: var(--sg-radius-lg);
    --sg-glass-tint-a: 0.28;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--sg-space-3);
    align-items: center;
    padding: var(--sg-space-4) var(--sg-space-5);
    font-size: var(--sg-text-body-md-size);
    line-height: 1.45;
    color: var(--sg-color-ink);
  }

  .sg-alert__icon {
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    color: inherit;
    flex: none;
  }

  .sg-alert__icon svg {
    display: block;
    width: 1.375rem;
    height: 1.375rem;
  }

  .sg-alert__title,
  .sg-banner__title,
  .sg-callout__title {
    margin: 0 0 2px;
    font: var(--sg-text-weight-semibold) var(--sg-text-title-md-size) / 1.3 var(--sg-font-display);
  }

  .sg-alert[data-tone='success'],
  .sg-banner[data-tone='success'] {
    --sg-glass-tint-rgb: var(--sg-color-kelly-rgb);
    color: var(--sg-color-kelly-ink);
  }

  .sg-alert[data-tone='warning'],
  .sg-banner[data-tone='warning'] {
    --sg-glass-tint-rgb: var(--sg-color-amber-rgb);
    color: var(--sg-color-amber-ink);
  }

  .sg-alert[data-tone='danger'],
  .sg-alert[data-tone='error'],
  .sg-banner[data-tone='danger'],
  .sg-banner[data-tone='error'] {
    --sg-glass-tint-rgb: var(--sg-color-ruby-rgb);
    color: var(--sg-color-ruby-ink);
  }

  .sg-alert[data-tone='info'],
  .sg-banner[data-tone='info'] {
    --sg-glass-tint-rgb: var(--sg-color-aqua-rgb);
    color: var(--sg-color-aqua-ink);
  }

  .sg-banner {
    width: 100%;
  }

  .sg-callout {
    grid-template-columns: 1fr;
    --sg-glass-tint-rgb: var(--sg-color-aqua-rgb);
    --sg-glass-tint-a: 0.28;
  }

  .sg-callout--highlight {
    --sg-glass-tint-rgb: var(--sg-color-citron-rgb);
  }

  /* ---------- Accordion ---------- */
  .sg-accordion {
    --sg-glass-radius: var(--sg-radius-lg);
    display: grid;
    gap: 2px;
    padding: var(--sg-space-2);
  }

  .sg-accordion__item {
    border-radius: var(--sg-radius-md);
  }

  .sg-accordion__trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--sg-space-3);
    min-height: var(--sg-button-height-md);
    padding: var(--sg-space-3) var(--sg-space-4);
    border: 0;
    border-radius: var(--sg-radius-md);
    background: transparent;
    color: inherit;
    font: var(--sg-text-weight-semibold) var(--sg-text-body-lg-size) / 1.3 var(--sg-font-display);
    text-align: start;
    cursor: pointer;
  }

  .sg-accordion__trigger:hover {
    background: color-mix(in srgb, var(--sg-color-ink) 6%, transparent);
  }

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

  .sg-accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    color: var(--sg-color-ink-2);
    font-size: var(--sg-text-body-md-size);
    line-height: 1.5;
    transition: grid-template-rows var(--sg-duration-base) var(--sg-ease-standard);
  }

  .sg-accordion__panel[data-open],
  .sg-accordion__panel--open {
    grid-template-rows: 1fr;
  }

  .sg-accordion__panel-inner {
    overflow: hidden;
    padding: 0 var(--sg-space-4);
  }

  .sg-accordion__panel[data-open] .sg-accordion__panel-inner,
  .sg-accordion__panel--open .sg-accordion__panel-inner {
    padding-bottom: var(--sg-space-4);
  }

  @media (prefers-reduced-motion: reduce) {
    .sg-accordion__panel {
      transition: none;
    }
  }

  /* ---------- Select / Combobox / Search ---------- */
  .sg-select,
  .sg-combobox,
  .sg-search {
    --sg-glass-radius: var(--sg-radius-lg);
    position: relative;
    display: grid;
    gap: 6px;
  }

  .sg-select__control,
  .sg-combobox__shell {
    position: relative;
    display: flex;
    align-items: center;
  }

  .sg-combobox__control,
  .sg-search__control {
    display: flex;
    align-items: center;
    gap: var(--sg-space-2);
    min-height: 52px;
    padding-inline: 18px;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--sg-color-ink);
    font: var(--sg-text-weight-regular) var(--sg-text-body-lg-size) var(--sg-font-body);
  }

  .sg-combobox__shell .sg-combobox__control {
    padding-inline-end: 44px;
  }

  .sg-combobox__control::placeholder {
    color: var(--sg-color-ink-2);
    opacity: 1;
  }

  .sg-combobox__toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--sg-color-ink-2);
    cursor: pointer;
    padding: 0;
  }

  .sg-combobox__toggle .sg-chevron {
    position: static;
    transform: none;
    pointer-events: none;
  }

  .sg-combobox__toggle .sg-chevron--open,
  .sg-combobox__shell[data-open] .sg-combobox__toggle .sg-chevron {
    transform: rotate(180deg);
  }

  .sg-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    display: grid;
    place-items: center;
    color: var(--sg-color-ink-2);
    pointer-events: none;
    transform: translateY(-50%) rotate(0deg);
    transition: transform var(--sg-duration-base) var(--sg-ease-spring);
  }

  .sg-chevron--open,
  .sg-combobox__shell[data-open] .sg-chevron,
  [aria-expanded='true'] + .sg-chevron,
  .sg-accordion__trigger[aria-expanded='true'] .sg-chevron {
    transform: translateY(-50%) rotate(180deg);
  }

  .sg-accordion__trigger .sg-chevron {
    position: static;
    transform: none;
  }

  .sg-accordion__trigger[aria-expanded='true'] .sg-chevron {
    transform: rotate(180deg);
  }

  .sg-select__control:focus-visible,
  .sg-combobox__control:focus-visible,
  .sg-search__control:focus-visible {
    outline: 2px solid var(--sg-color-focus);
    outline-offset: 3px;
  }

  .sg-select select {
    appearance: none;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
  }

  .sg-combobox__list {
    --sg-glass-radius: var(--sg-radius-lg);
    position: absolute;
    z-index: var(--sg-z-dropdown);
    inset-inline: 0;
    top: calc(100% + 6px);
    margin: 0;
    padding: var(--sg-space-2);
    list-style: none;
    max-height: 16rem;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top center;
    transition:
      opacity var(--sg-duration-fast) var(--sg-ease-standard),
      transform var(--sg-duration-base) var(--sg-ease-spring),
      visibility 0s linear var(--sg-duration-fast);
  }

  .sg-combobox__list[data-open],
  .sg-combobox__list--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition:
      opacity var(--sg-duration-fast) var(--sg-ease-standard),
      transform var(--sg-duration-base) var(--sg-ease-spring);
  }

  @media (prefers-reduced-motion: reduce) {
    .sg-combobox__list {
      transition: none;
    }
  }

  .sg-search {
    --sg-glass-radius: var(--sg-radius-pill);
  }

  .sg-search__control {
    padding-inline-end: 8px;
  }

  /* ---------- Segmented ---------- */
  .sg-segmented {
    --sg-glass-radius: var(--sg-radius-pill);
    display: inline-flex;
    padding: 4px;
    gap: 2px;
    max-width: 100%;
  }

  .sg-segmented__btn {
    flex: none;
    height: 40px;
    padding-inline: 18px;
    border: 0;
    border-radius: var(--sg-radius-pill);
    background: transparent;
    color: var(--sg-color-ink-3);
    font: var(--sg-text-weight-semibold) 15px / 1 var(--sg-font-display);
    cursor: pointer;
  }

  .sg-segmented__btn[aria-checked='true'] {
    background: color-mix(in srgb, var(--sg-color-seafoam) 72%, transparent);
    color: var(--sg-color-on-tint);
  }

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

  /* ---------- Link / Skip / Breadcrumbs / Pagination ---------- */
  .sg-link {
    color: var(--sg-color-cobalt);
    font-weight: var(--sg-text-weight-medium);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .sg-link:hover {
    color: var(--sg-color-aqua);
  }

  .sg-skip {
    position: absolute;
    inset-inline-start: var(--sg-space-4);
    top: var(--sg-space-4);
    z-index: var(--sg-z-tooltip);
    padding: var(--sg-space-2) var(--sg-space-4);
    transform: translateY(-200%);
  }

  .sg-skip:focus {
    transform: none;
  }

  .sg-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sg-space-2);
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--sg-text-body-md-size);
    color: var(--sg-color-ink-3);
  }

  .sg-breadcrumbs a {
    color: inherit;
  }

  .sg-breadcrumbs [aria-current='page'] {
    color: var(--sg-color-ink);
    font-weight: var(--sg-text-weight-semibold);
  }

  .sg-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sg-space-2);
    align-items: center;
  }

  .sg-pagination__btn {
    min-width: 40px;
    height: 40px;
    padding-inline: var(--sg-space-3);
    border: 0;
    border-radius: var(--sg-radius-pill);
    background: transparent;
    color: inherit;
    font: var(--sg-text-weight-medium) var(--sg-text-body-md-size) var(--sg-font-body);
    cursor: pointer;
  }

  .sg-pagination__btn[aria-current='page'] {
    background: color-mix(in srgb, var(--sg-color-seafoam) 50%, transparent);
    font-weight: var(--sg-text-weight-semibold);
  }

  /* ---------- Header / Footer / Sidebar / Nav ---------- */
  .sg-header,
  .sg-footer {
    --sg-glass-radius: var(--sg-radius-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sg-space-4);
    padding: var(--sg-space-4) var(--sg-space-5);
    width: 100%;
  }

  .sg-header__brand {
    font: var(--sg-text-weight-bold) var(--sg-text-title-lg-size) / 1 var(--sg-font-display);
    text-decoration: none;
    color: inherit;
  }

  .sg-header__nav,
  .sg-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sg-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sg-header__nav a,
  .sg-nav a,
  .sg-sidebar a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--sg-space-3);
    border-radius: var(--sg-radius-pill);
    color: var(--sg-color-ink-2);
    text-decoration: none;
    font: var(--sg-text-weight-medium) var(--sg-text-body-md-size) var(--sg-font-body);
  }

  .sg-header__nav a[aria-current='page'],
  .sg-nav a[aria-current='page'],
  .sg-sidebar a[aria-current='page'] {
    background: color-mix(in srgb, var(--sg-color-seafoam) 72%, transparent);
    color: var(--sg-color-on-tint);
    font-weight: var(--sg-text-weight-semibold);
  }

  .sg-sidebar {
    --sg-glass-radius: var(--sg-radius-lg);
    display: grid;
    gap: var(--sg-space-2);
    padding: var(--sg-space-4);
    min-width: 0;
  }

  .sg-sidebar__label {
    padding: var(--sg-space-2) var(--sg-space-3);
    font: var(--sg-text-weight-medium) var(--sg-text-label-md-size) var(--sg-font-display);
    letter-spacing: 0.04em;
    color: var(--sg-color-ink-3);
    text-transform: uppercase;
  }

  .sg-footer {
    justify-content: space-between;
    color: var(--sg-color-ink-2);
    font-size: var(--sg-text-body-md-size);
  }

  .sg-toc {
    display: grid;
    gap: var(--sg-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sg-toc a {
    color: var(--sg-color-ink-2);
    text-decoration: none;
    font-size: var(--sg-text-body-md-size);
  }

  .sg-toc a[aria-current='true'] {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--sg-space-3);
    border-radius: var(--sg-radius-pill);
    background: color-mix(in srgb, var(--sg-color-seafoam) 72%, transparent);
    color: var(--sg-color-on-tint);
    font-weight: var(--sg-text-weight-semibold);
  }

  /* ---------- Stepper ---------- */
  .sg-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sg-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sg-stepper__step {
    display: flex;
    align-items: center;
    gap: var(--sg-space-2);
    color: var(--sg-color-ink-3);
    font-size: var(--sg-text-body-md-size);
  }

  .sg-stepper__step[data-state='current'] {
    color: var(--sg-color-ink);
    font-weight: var(--sg-text-weight-semibold);
  }

  .sg-stepper__step[data-state='done'] {
    color: var(--sg-color-kelly);
  }

  .sg-stepper__index {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--sg-radius-circle);
    background: color-mix(in srgb, var(--sg-color-ink) 8%, transparent);
    font-size: 12px;
    font-weight: var(--sg-text-weight-semibold);
  }

  /* ---------- Table ---------- */
  .sg-table-wrap {
    --sg-glass-radius: var(--sg-radius-xl);
    overflow: auto;
    padding: var(--sg-space-2);
  }

  .sg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sg-text-body-md-size);
  }

  .sg-table th,
  .sg-table td {
    padding: var(--sg-space-3) var(--sg-space-4);
    text-align: start;
    border-bottom: 1px solid color-mix(in srgb, var(--sg-color-ink) 12%, transparent);
  }

  .sg-table th {
    font-family: var(--sg-font-display);
    font-weight: var(--sg-text-weight-semibold);
  }

  /* ---------- Tile / Quote / Media / Hero ---------- */
  .sg-tile {
    --sg-glass-radius: var(--sg-radius-lg);
    display: grid;
    gap: var(--sg-space-2);
    padding: var(--sg-space-5);
    text-decoration: none;
    color: inherit;
    min-height: 8rem;
  }

  .sg-tile__title {
    margin: 0;
    font: var(--sg-text-weight-semibold) var(--sg-text-title-lg-size) / 1.2 var(--sg-font-display);
  }

  .sg-quote {
    --sg-glass-radius: var(--sg-radius-lg);
    margin: 0;
    padding: var(--sg-space-5);
    font: italic var(--sg-text-weight-regular) var(--sg-text-title-md-size) / 1.45
      var(--sg-font-display);
  }

  .sg-quote footer {
    margin-top: var(--sg-space-3);
    font-style: normal;
    font-size: var(--sg-text-body-md-size);
    color: var(--sg-color-ink-3);
  }

  .sg-media {
    --sg-media-pad: 12px;
    --sg-glass-radius: var(--sg-radius-lg);
    display: grid;
    gap: var(--sg-space-3);
    width: 100%;
    margin-inline: 0;
    padding: var(--sg-media-pad);
    overflow: hidden;
  }

  .sg-media__frame,
  .sg-media img,
  .sg-media video {
    display: block;
    width: 100%;
    border-radius: calc(var(--sg-radius-lg) - var(--sg-media-pad));
  }

  .sg-media__frame {
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--sg-color-ink) 12%, transparent);
    color: var(--sg-color-ink-2);
  }

  .sg-media__icon {
    opacity: 0.72;
  }

  .sg-dialog-demo {
    position: relative;
    width: min(100%, 28rem);
    margin-inline: auto;
    --sg-glass-tint-a: 0.28;
    --sg-glass-tint-rgb: 18 28 26;
    color: var(--sg-color-ink);
    transform: none;
    opacity: 1;
  }

  .sg-dialog-demo .sg-dialog__title,
  .sg-dialog-demo .sg-dialog__body,
  .sg-dialog-demo .sg-button--ghost {
    color: inherit;
  }

  :root:not([data-sg-theme='dark'], [data-theme='dark']) .sg-dialog-demo {
    --sg-glass-tint-rgb: 247 249 247;
    --sg-glass-tint-a: 0.28;
    color: var(--sg-color-ink);
  }

  :root:not([data-sg-theme='dark'], [data-theme='dark']) .sg-dialog-demo .sg-button--ghost {
    color: var(--sg-color-ink);
  }

  .sg-media figcaption,
  .sg-transcription {
    font-size: var(--sg-text-body-md-size);
    color: var(--sg-color-ink-2);
  }

  .sg-transcription {
    --sg-glass-radius: var(--sg-radius-lg);
    padding: var(--sg-space-4);
  }

  .sg-transcription p {
    margin: 8px 0 0;
  }

  .sg-hero {
    --sg-glass-radius: var(--sg-radius-lg);
    display: grid;
    gap: var(--sg-space-4);
    padding: clamp(1.5rem, 4vw, 3rem);
    min-height: 12rem;
  }

  .sg-table-wrap,
  .sg-list {
    --sg-glass-radius: var(--sg-radius-lg);
  }

  .sg-hero__title {
    margin: 0;
    font: var(--sg-text-weight-bold) clamp(1.75rem, 4vw, 2.75rem) / 1.05 var(--sg-font-display);
  }

  /* ---------- File upload / Share / Consent / Theme / Lang ---------- */
  .sg-upload {
    --sg-glass-radius: var(--sg-radius-xl);
    display: grid;
    gap: var(--sg-space-3);
    place-items: center;
    padding: var(--sg-space-6);
    text-align: center;
    border: 1px dashed color-mix(in srgb, var(--sg-color-ink) 22%, transparent);
    cursor: pointer;
  }

  .sg-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
  }

  .sg-upload:focus-within {
    outline: 2px solid var(--sg-color-focus);
    outline-offset: 3px;
  }

  .sg-share,
  .sg-theme,
  .sg-consent {
    --sg-glass-radius: var(--sg-radius-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sg-space-2);
    align-items: center;
    padding: var(--sg-space-3) var(--sg-space-4);
  }

  .sg-lang {
    --sg-glass-radius: var(--sg-radius-pill);
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 4px;
    width: auto;
    min-width: 7.5rem;
    max-width: max-content;
    gap: 0;
  }

  .sg-lang__pill {
    position: absolute;
    z-index: 1;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: var(--sg-radius-pill);
    background: color-mix(in srgb, var(--sg-color-seafoam) 88%, transparent);
    transition: transform var(--sg-duration-base) var(--sg-ease-spring);
    pointer-events: none;
  }

  .sg-lang__btn {
    position: relative;
    z-index: 2;
    height: 40px;
    border: 0;
    border-radius: var(--sg-radius-pill);
    background: transparent;
    color: var(--sg-color-ink-2);
    font: var(--sg-text-weight-semibold) var(--sg-text-body-md-size) / 1 var(--sg-font-display);
    cursor: pointer;
  }

  .sg-lang__btn[aria-pressed='true'] {
    color: var(--sg-color-on-tint);
  }

  .sg-consent {
    position: fixed;
    z-index: var(--sg-z-toast);
    inset-inline: var(--sg-space-4);
    bottom: calc(var(--sg-space-4) + env(safe-area-inset-bottom, 0px));
    max-width: 36rem;
    margin-inline: auto;
    right: var(--sg-space-4);
    left: var(--sg-space-4);
  }

  .sg-form {
    display: grid;
    gap: var(--sg-space-4);
  }

  .sg-form__fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: var(--sg-space-3);
  }

  .sg-form__legend {
    padding: 0;
    margin-bottom: var(--sg-space-2);
    font: var(--sg-text-weight-semibold) var(--sg-text-title-md-size) var(--sg-font-display);
  }

  .sg-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding-inline: 12px;
    --sg-glass-radius: var(--sg-radius-pill);
    font: var(--sg-text-weight-medium) var(--sg-text-label-md-size) / 1 var(--sg-font-body);
  }

  .sg-tag__remove {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 1;
  }

  .sg-password {
    position: relative;
  }

  .sg-password__toggle {
    position: absolute;
    inset-inline-end: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--sg-color-ink-3);
    cursor: pointer;
    font-size: 12px;
    font-weight: var(--sg-text-weight-medium);
  }
}


@layer sg.utilities {
  .sg-pill {
    --sg-glass-radius: var(--sg-radius-pill);
    border-radius: var(--sg-radius-pill);
  }

  .sg-circle {
    --sg-glass-radius: var(--sg-radius-circle);
    border-radius: var(--sg-radius-circle);
  }

  .sg-squircle {
    --sg-glass-radius: var(--sg-radius-squircle);
    border-radius: var(--sg-radius-squircle);
  }

  @supports (corner-shape: squircle) {
    .sg-squircle {
      border-radius: var(--sg-radius-lg);
      corner-shape: squircle;
    }
  }

  .sg-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sg-space-3);
  }

  .sg-stack {
    display: grid;
    gap: var(--sg-space-4);
    min-width: 0;
  }
}


@layer sg.a11y {
  @media (prefers-reduced-motion: reduce) {
    .sg-glass,
    .sg-button,
    .sg-chip,
    .sg-switch,
    .sg-switch__knob,
    .sg-check__box,
    .sg-progress__bar,
    .sg-tabs__tab,
    .sg-toast,
    .sg-toast-scrim,
    .sg-toast-host {
      transition: none;
      animation: none;
    }

    .sg-glass[data-alive]:hover,
    .sg-glass[data-alive]:active,
    .sg-button:hover,
    .sg-button:active,
    .sg-switch:hover {
      transform: none;
    }

    .sg-progress--indeterminate .sg-progress__bar {
      animation: none;
      transform: translateX(90%);
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .sg-glass {
      --sg-glass-a: var(--sg-glass-alpha-reduce);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    .sg-glass::after,
    .sg-glass::before {
      display: none;
    }
  }

  @media (prefers-contrast: more) {
    .sg-glass {
      outline: 1px solid var(--sg-color-outline);
      --sg-glass-a: max(var(--sg-glass-a), 0.88);
    }

    .sg-button,
    .sg-chip,
    .sg-tabs__tab {
      color: var(--sg-color-ink);
    }
  }

  @media (forced-colors: active) {
    .sg-glass,
    .sg-button,
    .sg-chip,
    .sg-progress,
    .sg-card,
    .sg-badge {
      border: 1px solid CanvasText;
      background: Canvas;
      box-shadow: none;
      forced-color-adjust: none;
    }

    .sg-button[aria-pressed='true'],
    .sg-chip[aria-pressed='true'],
    .sg-check:has(input:checked) .sg-check__box {
      background: Highlight;
      color: HighlightText;
    }

    .sg-button:focus-visible,
    .sg-chip:focus-visible,
    .sg-tabs__tab:focus-visible {
      outline: 2px solid Highlight;
    }
  }

  @supports not (backdrop-filter: blur(1px)) {
    .sg-glass {
      --sg-glass-a: 0.92;
    }

    .sg-scene .sg-glass {
      --sg-glass-a: 0.88;
    }
  }
}