:root, [data-theme="light"] {
  color-scheme: light;
  --ma-primary-50: #FAF8E6;
  --ma-on-primary-50: #080702;
  --ma-primary-100: #F2EECE;
  --ma-on-primary-100: #080702;
  --ma-primary-200: #FFE600;
  --ma-on-primary-200: #080702;
  --ma-primary-300: #D5C75E;
  --ma-on-primary-300: #080702;
  --ma-primary-400: #BCAA00;
  --ma-on-primary-400: #080702;
  --ma-primary-500: #948500;
  --ma-on-primary-500: #080702;
  --ma-primary-600: #706400;
  --ma-on-primary-600: #FAFAF7;
  --ma-primary-700: #5A5100;
  --ma-on-primary-700: #FAFAF7;
  --ma-primary-800: #494000;
  --ma-on-primary-800: #FAFAF7;
  --ma-primary-900: #373100;
  --ma-on-primary-900: #FAFAF7;
  --ma-primary-950: #242000;
  --ma-on-primary-950: #FAFAF7;
  --ma-primary: #706400;
  --ma-primary-hover: #5A5100;
  --ma-primary-active: #494000;
  --ma-on-primary: #FAFAF7;
  --ma-primary-subtle: #FAF8E6;
  --ma-on-primary-subtle: #494000;
  --ma-primary-text: #5A5100;
  --ma-secondary-50: #F2F7FF;
  --ma-on-secondary-50: #080702;
  --ma-secondary-100: #E3EEFF;
  --ma-on-secondary-100: #080702;
  --ma-secondary-200: #CADEFF;
  --ma-on-secondary-200: #080702;
  --ma-secondary-300: #A3C5FF;
  --ma-on-secondary-300: #080702;
  --ma-secondary-400: #74A7FF;
  --ma-on-secondary-400: #080702;
  --ma-secondary-500: #2F6FE0;
  --ma-on-secondary-500: #FAFAF7;
  --ma-secondary-600: #1B5BCA;
  --ma-on-secondary-600: #FAFAF7;
  --ma-secondary-700: #0946AD;
  --ma-on-secondary-700: #FAFAF7;
  --ma-secondary-800: #02378F;
  --ma-on-secondary-800: #FAFAF7;
  --ma-secondary-900: #012970;
  --ma-on-secondary-900: #FAFAF7;
  --ma-secondary-950: #001A4E;
  --ma-on-secondary-950: #FAFAF7;
  --ma-secondary: #1B5BCA;
  --ma-secondary-hover: #0946AD;
  --ma-secondary-active: #02378F;
  --ma-on-secondary: #FAFAF7;
  --ma-secondary-subtle: #F2F7FF;
  --ma-on-secondary-subtle: #02378F;
  --ma-secondary-text: #0946AD;
  --ma-accent-50: #EEFBF1;
  --ma-on-accent-50: #080702;
  --ma-accent-100: #DDF4E2;
  --ma-on-accent-100: #080702;
  --ma-accent-200: #BDE9C8;
  --ma-on-accent-200: #080702;
  --ma-accent-300: #90D8A4;
  --ma-on-accent-300: #080702;
  --ma-accent-400: #5EBF7E;
  --ma-on-accent-400: #080702;
  --ma-accent-500: #0B9A50;
  --ma-on-accent-500: #080702;
  --ma-accent-600: #00773C;
  --ma-on-accent-600: #FAFAF7;
  --ma-accent-700: #00612F;
  --ma-on-accent-700: #FAFAF7;
  --ma-accent-800: #004E25;
  --ma-on-accent-800: #FAFAF7;
  --ma-accent-900: #003B1A;
  --ma-on-accent-900: #FAFAF7;
  --ma-accent-950: #00270F;
  --ma-on-accent-950: #FAFAF7;
  --ma-accent: #00773C;
  --ma-accent-hover: #00612F;
  --ma-accent-active: #004E25;
  --ma-on-accent: #FAFAF7;
  --ma-accent-subtle: #EEFBF1;
  --ma-on-accent-subtle: #004E25;
  --ma-accent-text: #00612F;
  --ma-neutral-50: #FAFAF7;
  --ma-on-neutral-50: #080702;
  --ma-neutral-100: #F5F5F0;
  --ma-on-neutral-100: #080702;
  --ma-neutral-200: #E9E8DF;
  --ma-on-neutral-200: #080702;
  --ma-neutral-300: #D6D5C7;
  --ma-on-neutral-300: #080702;
  --ma-neutral-400: #A2A18F;
  --ma-on-neutral-400: #080702;
  --ma-neutral-500: #686653;
  --ma-on-neutral-500: #FAFAF7;
  --ma-neutral-600: #575543;
  --ma-on-neutral-600: #FAFAF7;
  --ma-neutral-700: #434130;
  --ma-on-neutral-700: #FAFAF7;
  --ma-neutral-800: #2B291B;
  --ma-on-neutral-800: #FAFAF7;
  --ma-neutral-900: #1A180D;
  --ma-on-neutral-900: #FAFAF7;
  --ma-neutral-950: #080702;
  --ma-on-neutral-950: #FAFAF7;
  --ma-neutral: #575543;
  --ma-neutral-hover: #434130;
  --ma-neutral-active: #2B291B;
  --ma-on-neutral: #FAFAF7;
  --ma-neutral-subtle: #FAFAF7;
  --ma-on-neutral-subtle: #2B291B;
  --ma-neutral-text: #434130;
  --ma-success-50: #EEFBEF;
  --ma-on-success-50: #080702;
  --ma-success-100: #DCF4E0;
  --ma-on-success-100: #080702;
  --ma-success-200: #BCEAC3;
  --ma-on-success-200: #080702;
  --ma-success-300: #8FD99C;
  --ma-on-success-300: #080702;
  --ma-success-400: #5CC173;
  --ma-on-success-400: #080702;
  --ma-success-500: #16A34A;
  --ma-on-success-500: #080702;
  --ma-success-600: #007832;
  --ma-on-success-600: #FAFAF7;
  --ma-success-700: #006127;
  --ma-on-success-700: #FAFAF7;
  --ma-success-800: #004E1E;
  --ma-on-success-800: #FAFAF7;
  --ma-success-900: #003C15;
  --ma-on-success-900: #FAFAF7;
  --ma-success-950: #00280B;
  --ma-on-success-950: #FAFAF7;
  --ma-success: #007832;
  --ma-success-hover: #006127;
  --ma-success-active: #004E1E;
  --ma-on-success: #FAFAF7;
  --ma-success-subtle: #EEFBEF;
  --ma-on-success-subtle: #004E1E;
  --ma-success-text: #006127;
  --ma-warning-50: #FFF5EA;
  --ma-on-warning-50: #080702;
  --ma-warning-100: #FDE9D3;
  --ma-on-warning-100: #080702;
  --ma-warning-200: #FBD5AB;
  --ma-on-warning-200: #080702;
  --ma-warning-300: #F1B873;
  --ma-on-warning-300: #080702;
  --ma-warning-400: #F59E0B;
  --ma-on-warning-400: #080702;
  --ma-warning-500: #B57300;
  --ma-on-warning-500: #080702;
  --ma-warning-600: #8A5600;
  --ma-on-warning-600: #FAFAF7;
  --ma-warning-700: #704500;
  --ma-on-warning-700: #FAFAF7;
  --ma-warning-800: #5A3700;
  --ma-on-warning-800: #FAFAF7;
  --ma-warning-900: #462900;
  --ma-on-warning-900: #FAFAF7;
  --ma-warning-950: #2F1A00;
  --ma-on-warning-950: #FAFAF7;
  --ma-warning: #8A5600;
  --ma-warning-hover: #704500;
  --ma-warning-active: #5A3700;
  --ma-on-warning: #FAFAF7;
  --ma-warning-subtle: #FFF5EA;
  --ma-on-warning-subtle: #5A3700;
  --ma-warning-text: #704500;
  --ma-danger-50: #FFF4F3;
  --ma-on-danger-50: #080702;
  --ma-danger-100: #FFE6E4;
  --ma-on-danger-100: #080702;
  --ma-danger-200: #FFCFCB;
  --ma-on-danger-200: #080702;
  --ma-danger-300: #FFAAA4;
  --ma-on-danger-300: #080702;
  --ma-danger-400: #FF7872;
  --ma-on-danger-400: #080702;
  --ma-danger-500: #DB343A;
  --ma-on-danger-500: #FAFAF7;
  --ma-danger-600: #BB001F;
  --ma-on-danger-600: #FAFAF7;
  --ma-danger-700: #990017;
  --ma-on-danger-700: #FAFAF7;
  --ma-danger-800: #7C0011;
  --ma-on-danger-800: #FAFAF7;
  --ma-danger-900: #61000B;
  --ma-on-danger-900: #FAFAF7;
  --ma-danger-950: #430005;
  --ma-on-danger-950: #FAFAF7;
  --ma-danger: #BB001F;
  --ma-danger-hover: #990017;
  --ma-danger-active: #7C0011;
  --ma-on-danger: #FAFAF7;
  --ma-danger-subtle: #FFF4F3;
  --ma-on-danger-subtle: #7C0011;
  --ma-danger-text: #990017;
  --ma-info-50: #F0F8FF;
  --ma-on-info-50: #080702;
  --ma-info-100: #DDF0FF;
  --ma-on-info-100: #080702;
  --ma-info-200: #BDE2FF;
  --ma-on-info-200: #080702;
  --ma-info-300: #8ECCFB;
  --ma-on-info-300: #080702;
  --ma-info-400: #5CB0EC;
  --ma-on-info-400: #080702;
  --ma-info-500: #0284C7;
  --ma-on-info-500: #080702;
  --ma-info-600: #0069A0;
  --ma-on-info-600: #FAFAF7;
  --ma-info-700: #005582;
  --ma-on-info-700: #FAFAF7;
  --ma-info-800: #00446A;
  --ma-on-info-800: #FAFAF7;
  --ma-info-900: #003452;
  --ma-on-info-900: #FAFAF7;
  --ma-info-950: #002238;
  --ma-on-info-950: #FAFAF7;
  --ma-info: #0069A0;
  --ma-info-hover: #005582;
  --ma-info-active: #00446A;
  --ma-on-info: #FAFAF7;
  --ma-info-subtle: #F0F8FF;
  --ma-on-info-subtle: #00446A;
  --ma-info-text: #005582;
  --ma-bg: #F5F5F0;
  --ma-surface-overlay: #1A180D;
  --ma-surface-sunken: #F5F5F0;
  --ma-border: #E9E8DF;
  --ma-border-strong: #D6D5C7;
  --ma-divider: #E9E8DF;
  --ma-text: #1A180D;
  --ma-text-secondary: #575543;
  --ma-text-muted: #686653;
  --ma-text-disabled: #A2A18F;
  --ma-text-inverse: #FAFAF7;
  --ma-surface: #FFFFFF;
  --ma-surface-raised: #FFFFFF;
  --ma-surface-hover: #FAFAF7;
  --ma-link: #706400;
  --ma-link-hover: #5A5100;
  --ma-focus-ring: #4F84CE;
  --ma-hue-sky: #00567D;
  --ma-hue-sky-subtle: color-mix(in oklch, #008DC9 15%, var(--ma-surface));
  --ma-hue-sky-solid: #006B9A;
  --ma-hue-blue: #0047AD;
  --ma-hue-blue-subtle: color-mix(in oklch, #3B82F6 15%, var(--ma-surface));
  --ma-hue-blue-solid: #115BCC;
  --ma-hue-violet: #5A23B3;
  --ma-hue-violet-subtle: color-mix(in oklch, #8B5CF6 15%, var(--ma-surface));
  --ma-hue-violet-solid: #6E38D1;
  --ma-hue-emerald: #005F40;
  --ma-hue-emerald-subtle: color-mix(in oklch, #009B6B 15%, var(--ma-surface));
  --ma-hue-emerald-solid: #007650;
  --ma-hue-teal: #005D53;
  --ma-hue-teal-subtle: color-mix(in oklch, #009889 15%, var(--ma-surface));
  --ma-hue-teal-solid: #007368;
  --ma-hue-amber: #704500;
  --ma-hue-amber-subtle: color-mix(in oklch, #B57300 15%, var(--ma-surface));
  --ma-hue-amber-solid: #8A5600;
  --ma-hue-orange: #813600;
  --ma-hue-orange-subtle: color-mix(in oklch, #D05C00 15%, var(--ma-surface));
  --ma-hue-orange-solid: #9F4400;
  --ma-hue-rose: #97002D;
  --ma-hue-rose-subtle: color-mix(in oklch, #F43F5E 15%, var(--ma-surface));
  --ma-hue-rose-solid: #BA0039;
  --ma-shadow-card: 0 1px 2px 0 color-mix(in oklch, var(--ma-neutral-950) 6%, transparent), 0 1px 3px 0 color-mix(in oklch, var(--ma-neutral-950) 8%, transparent);
  --ma-shadow-card-hover: 0 2px 4px -1px color-mix(in oklch, var(--ma-neutral-950) 10%, transparent), 0 6px 12px -2px color-mix(in oklch, var(--ma-neutral-950) 12%, transparent);
  --ma-shadow-pop: 0 8px 24px -4px color-mix(in oklch, var(--ma-neutral-950) 18%, transparent), 0 2px 6px -1px color-mix(in oklch, var(--ma-neutral-950) 12%, transparent);
}

[data-theme="dark"] {
  color-scheme: dark;
  --ma-primary-50: #FAF8E6;
  --ma-on-primary-50: #080702;
  --ma-primary-100: #F2EECE;
  --ma-on-primary-100: #080702;
  --ma-primary-200: #FFE600;
  --ma-on-primary-200: #080702;
  --ma-primary-300: #D5C75E;
  --ma-on-primary-300: #080702;
  --ma-primary-400: #BCAA00;
  --ma-on-primary-400: #080702;
  --ma-primary-500: #948500;
  --ma-on-primary-500: #080702;
  --ma-primary-600: #706400;
  --ma-on-primary-600: #FAFAF7;
  --ma-primary-700: #5A5100;
  --ma-on-primary-700: #FAFAF7;
  --ma-primary-800: #494000;
  --ma-on-primary-800: #FAFAF7;
  --ma-primary-900: #373100;
  --ma-on-primary-900: #FAFAF7;
  --ma-primary-950: #242000;
  --ma-on-primary-950: #FAFAF7;
  --ma-primary: #706400;
  --ma-primary-hover: #5A5100;
  --ma-primary-active: #494000;
  --ma-on-primary: #FAFAF7;
  --ma-primary-subtle: #242000;
  --ma-on-primary-subtle: #FFE600;
  --ma-primary-text: #D5C75E;
  --ma-secondary-50: #F2F7FF;
  --ma-on-secondary-50: #080702;
  --ma-secondary-100: #E3EEFF;
  --ma-on-secondary-100: #080702;
  --ma-secondary-200: #CADEFF;
  --ma-on-secondary-200: #080702;
  --ma-secondary-300: #A3C5FF;
  --ma-on-secondary-300: #080702;
  --ma-secondary-400: #74A7FF;
  --ma-on-secondary-400: #080702;
  --ma-secondary-500: #2F6FE0;
  --ma-on-secondary-500: #FAFAF7;
  --ma-secondary-600: #1B5BCA;
  --ma-on-secondary-600: #FAFAF7;
  --ma-secondary-700: #0946AD;
  --ma-on-secondary-700: #FAFAF7;
  --ma-secondary-800: #02378F;
  --ma-on-secondary-800: #FAFAF7;
  --ma-secondary-900: #012970;
  --ma-on-secondary-900: #FAFAF7;
  --ma-secondary-950: #001A4E;
  --ma-on-secondary-950: #FAFAF7;
  --ma-secondary: #1B5BCA;
  --ma-secondary-hover: #0946AD;
  --ma-secondary-active: #02378F;
  --ma-on-secondary: #FAFAF7;
  --ma-secondary-subtle: #001A4E;
  --ma-on-secondary-subtle: #CADEFF;
  --ma-secondary-text: #A3C5FF;
  --ma-accent-50: #EEFBF1;
  --ma-on-accent-50: #080702;
  --ma-accent-100: #DDF4E2;
  --ma-on-accent-100: #080702;
  --ma-accent-200: #BDE9C8;
  --ma-on-accent-200: #080702;
  --ma-accent-300: #90D8A4;
  --ma-on-accent-300: #080702;
  --ma-accent-400: #5EBF7E;
  --ma-on-accent-400: #080702;
  --ma-accent-500: #0B9A50;
  --ma-on-accent-500: #080702;
  --ma-accent-600: #00773C;
  --ma-on-accent-600: #FAFAF7;
  --ma-accent-700: #00612F;
  --ma-on-accent-700: #FAFAF7;
  --ma-accent-800: #004E25;
  --ma-on-accent-800: #FAFAF7;
  --ma-accent-900: #003B1A;
  --ma-on-accent-900: #FAFAF7;
  --ma-accent-950: #00270F;
  --ma-on-accent-950: #FAFAF7;
  --ma-accent: #00773C;
  --ma-accent-hover: #00612F;
  --ma-accent-active: #004E25;
  --ma-on-accent: #FAFAF7;
  --ma-accent-subtle: #00270F;
  --ma-on-accent-subtle: #BDE9C8;
  --ma-accent-text: #90D8A4;
  --ma-neutral-50: #FAFAF7;
  --ma-on-neutral-50: #080702;
  --ma-neutral-100: #F5F5F0;
  --ma-on-neutral-100: #080702;
  --ma-neutral-200: #E9E8DF;
  --ma-on-neutral-200: #080702;
  --ma-neutral-300: #D6D5C7;
  --ma-on-neutral-300: #080702;
  --ma-neutral-400: #A2A18F;
  --ma-on-neutral-400: #080702;
  --ma-neutral-500: #686653;
  --ma-on-neutral-500: #FAFAF7;
  --ma-neutral-600: #575543;
  --ma-on-neutral-600: #FAFAF7;
  --ma-neutral-700: #434130;
  --ma-on-neutral-700: #FAFAF7;
  --ma-neutral-800: #2B291B;
  --ma-on-neutral-800: #FAFAF7;
  --ma-neutral-900: #1A180D;
  --ma-on-neutral-900: #FAFAF7;
  --ma-neutral-950: #080702;
  --ma-on-neutral-950: #FAFAF7;
  --ma-neutral: #575543;
  --ma-neutral-hover: #434130;
  --ma-neutral-active: #2B291B;
  --ma-on-neutral: #FAFAF7;
  --ma-neutral-subtle: #080702;
  --ma-on-neutral-subtle: #E9E8DF;
  --ma-neutral-text: #D6D5C7;
  --ma-success-50: #EEFBEF;
  --ma-on-success-50: #080702;
  --ma-success-100: #DCF4E0;
  --ma-on-success-100: #080702;
  --ma-success-200: #BCEAC3;
  --ma-on-success-200: #080702;
  --ma-success-300: #8FD99C;
  --ma-on-success-300: #080702;
  --ma-success-400: #5CC173;
  --ma-on-success-400: #080702;
  --ma-success-500: #16A34A;
  --ma-on-success-500: #080702;
  --ma-success-600: #007832;
  --ma-on-success-600: #FAFAF7;
  --ma-success-700: #006127;
  --ma-on-success-700: #FAFAF7;
  --ma-success-800: #004E1E;
  --ma-on-success-800: #FAFAF7;
  --ma-success-900: #003C15;
  --ma-on-success-900: #FAFAF7;
  --ma-success-950: #00280B;
  --ma-on-success-950: #FAFAF7;
  --ma-success: #007832;
  --ma-success-hover: #006127;
  --ma-success-active: #004E1E;
  --ma-on-success: #FAFAF7;
  --ma-success-subtle: #00280B;
  --ma-on-success-subtle: #BCEAC3;
  --ma-success-text: #8FD99C;
  --ma-warning-50: #FFF5EA;
  --ma-on-warning-50: #080702;
  --ma-warning-100: #FDE9D3;
  --ma-on-warning-100: #080702;
  --ma-warning-200: #FBD5AB;
  --ma-on-warning-200: #080702;
  --ma-warning-300: #F1B873;
  --ma-on-warning-300: #080702;
  --ma-warning-400: #F59E0B;
  --ma-on-warning-400: #080702;
  --ma-warning-500: #B57300;
  --ma-on-warning-500: #080702;
  --ma-warning-600: #8A5600;
  --ma-on-warning-600: #FAFAF7;
  --ma-warning-700: #704500;
  --ma-on-warning-700: #FAFAF7;
  --ma-warning-800: #5A3700;
  --ma-on-warning-800: #FAFAF7;
  --ma-warning-900: #462900;
  --ma-on-warning-900: #FAFAF7;
  --ma-warning-950: #2F1A00;
  --ma-on-warning-950: #FAFAF7;
  --ma-warning: #8A5600;
  --ma-warning-hover: #704500;
  --ma-warning-active: #5A3700;
  --ma-on-warning: #FAFAF7;
  --ma-warning-subtle: #2F1A00;
  --ma-on-warning-subtle: #FBD5AB;
  --ma-warning-text: #F1B873;
  --ma-danger-50: #FFF4F3;
  --ma-on-danger-50: #080702;
  --ma-danger-100: #FFE6E4;
  --ma-on-danger-100: #080702;
  --ma-danger-200: #FFCFCB;
  --ma-on-danger-200: #080702;
  --ma-danger-300: #FFAAA4;
  --ma-on-danger-300: #080702;
  --ma-danger-400: #FF7872;
  --ma-on-danger-400: #080702;
  --ma-danger-500: #DB343A;
  --ma-on-danger-500: #FAFAF7;
  --ma-danger-600: #BB001F;
  --ma-on-danger-600: #FAFAF7;
  --ma-danger-700: #990017;
  --ma-on-danger-700: #FAFAF7;
  --ma-danger-800: #7C0011;
  --ma-on-danger-800: #FAFAF7;
  --ma-danger-900: #61000B;
  --ma-on-danger-900: #FAFAF7;
  --ma-danger-950: #430005;
  --ma-on-danger-950: #FAFAF7;
  --ma-danger: #BB001F;
  --ma-danger-hover: #990017;
  --ma-danger-active: #7C0011;
  --ma-on-danger: #FAFAF7;
  --ma-danger-subtle: #430005;
  --ma-on-danger-subtle: #FFCFCB;
  --ma-danger-text: #FFAAA4;
  --ma-info-50: #F0F8FF;
  --ma-on-info-50: #080702;
  --ma-info-100: #DDF0FF;
  --ma-on-info-100: #080702;
  --ma-info-200: #BDE2FF;
  --ma-on-info-200: #080702;
  --ma-info-300: #8ECCFB;
  --ma-on-info-300: #080702;
  --ma-info-400: #5CB0EC;
  --ma-on-info-400: #080702;
  --ma-info-500: #0284C7;
  --ma-on-info-500: #080702;
  --ma-info-600: #0069A0;
  --ma-on-info-600: #FAFAF7;
  --ma-info-700: #005582;
  --ma-on-info-700: #FAFAF7;
  --ma-info-800: #00446A;
  --ma-on-info-800: #FAFAF7;
  --ma-info-900: #003452;
  --ma-on-info-900: #FAFAF7;
  --ma-info-950: #002238;
  --ma-on-info-950: #FAFAF7;
  --ma-info: #0069A0;
  --ma-info-hover: #005582;
  --ma-info-active: #00446A;
  --ma-on-info: #FAFAF7;
  --ma-info-subtle: #002238;
  --ma-on-info-subtle: #BDE2FF;
  --ma-info-text: #8ECCFB;
  --ma-bg: #080702;
  --ma-surface: #1A180D;
  --ma-surface-raised: #2B291B;
  --ma-surface-overlay: #F5F5F0;
  --ma-surface-sunken: #2B291B;
  --ma-border: #2B291B;
  --ma-border-strong: #434130;
  --ma-divider: #2B291B;
  --ma-text: #F5F5F0;
  --ma-text-secondary: #A2A18F;
  --ma-text-muted: #686653;
  --ma-text-disabled: #575543;
  --ma-text-inverse: #080702;
  --ma-surface-hover: color-mix(in oklch, #2B291B 60%, transparent);
  --ma-link: #D5C75E;
  --ma-link-hover: #FFE600;
  --ma-focus-ring: #76AFFF;
  --ma-hue-sky: #85CEFC;
  --ma-hue-sky-subtle: color-mix(in oklch, #008DC9 15%, var(--ma-surface));
  --ma-hue-sky-solid: #006B9A;
  --ma-hue-blue: #A2C6FF;
  --ma-hue-blue-subtle: color-mix(in oklch, #3B82F6 15%, var(--ma-surface));
  --ma-hue-blue-solid: #115BCC;
  --ma-hue-violet: #C6B8FF;
  --ma-hue-violet-subtle: color-mix(in oklch, #8B5CF6 15%, var(--ma-surface));
  --ma-hue-violet-solid: #6E38D1;
  --ma-hue-emerald: #86D8B1;
  --ma-hue-emerald-subtle: color-mix(in oklch, #009B6B 15%, var(--ma-surface));
  --ma-hue-emerald-solid: #007650;
  --ma-hue-teal: #86D6C8;
  --ma-hue-teal-subtle: color-mix(in oklch, #009889 15%, var(--ma-surface));
  --ma-hue-teal-solid: #007368;
  --ma-hue-amber: #F1B873;
  --ma-hue-amber-subtle: color-mix(in oklch, #B57300 15%, var(--ma-surface));
  --ma-hue-amber-solid: #8A5600;
  --ma-hue-orange: #FFAE85;
  --ma-hue-orange-subtle: color-mix(in oklch, #D05C00 15%, var(--ma-surface));
  --ma-hue-orange-solid: #9F4400;
  --ma-hue-rose: #FFA9AD;
  --ma-hue-rose-subtle: color-mix(in oklch, #F43F5E 15%, var(--ma-surface));
  --ma-hue-rose-solid: #BA0039;
  --ma-shadow-card: 0 1px 2px 0 color-mix(in oklch, black 30%, transparent), 0 1px 3px 0 color-mix(in oklch, black 40%, transparent);
  --ma-shadow-card-hover: 0 2px 4px -1px color-mix(in oklch, black 45%, transparent), 0 6px 12px -2px color-mix(in oklch, black 50%, transparent);
  --ma-shadow-pop: 0 8px 24px -4px color-mix(in oklch, black 60%, transparent), 0 2px 6px -1px color-mix(in oklch, black 45%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ma-primary-50: #FAF8E6;
    --ma-on-primary-50: #080702;
    --ma-primary-100: #F2EECE;
    --ma-on-primary-100: #080702;
    --ma-primary-200: #FFE600;
    --ma-on-primary-200: #080702;
    --ma-primary-300: #D5C75E;
    --ma-on-primary-300: #080702;
    --ma-primary-400: #BCAA00;
    --ma-on-primary-400: #080702;
    --ma-primary-500: #948500;
    --ma-on-primary-500: #080702;
    --ma-primary-600: #706400;
    --ma-on-primary-600: #FAFAF7;
    --ma-primary-700: #5A5100;
    --ma-on-primary-700: #FAFAF7;
    --ma-primary-800: #494000;
    --ma-on-primary-800: #FAFAF7;
    --ma-primary-900: #373100;
    --ma-on-primary-900: #FAFAF7;
    --ma-primary-950: #242000;
    --ma-on-primary-950: #FAFAF7;
    --ma-primary: #706400;
    --ma-primary-hover: #5A5100;
    --ma-primary-active: #494000;
    --ma-on-primary: #FAFAF7;
    --ma-primary-subtle: #242000;
    --ma-on-primary-subtle: #FFE600;
    --ma-primary-text: #D5C75E;
    --ma-secondary-50: #F2F7FF;
    --ma-on-secondary-50: #080702;
    --ma-secondary-100: #E3EEFF;
    --ma-on-secondary-100: #080702;
    --ma-secondary-200: #CADEFF;
    --ma-on-secondary-200: #080702;
    --ma-secondary-300: #A3C5FF;
    --ma-on-secondary-300: #080702;
    --ma-secondary-400: #74A7FF;
    --ma-on-secondary-400: #080702;
    --ma-secondary-500: #2F6FE0;
    --ma-on-secondary-500: #FAFAF7;
    --ma-secondary-600: #1B5BCA;
    --ma-on-secondary-600: #FAFAF7;
    --ma-secondary-700: #0946AD;
    --ma-on-secondary-700: #FAFAF7;
    --ma-secondary-800: #02378F;
    --ma-on-secondary-800: #FAFAF7;
    --ma-secondary-900: #012970;
    --ma-on-secondary-900: #FAFAF7;
    --ma-secondary-950: #001A4E;
    --ma-on-secondary-950: #FAFAF7;
    --ma-secondary: #1B5BCA;
    --ma-secondary-hover: #0946AD;
    --ma-secondary-active: #02378F;
    --ma-on-secondary: #FAFAF7;
    --ma-secondary-subtle: #001A4E;
    --ma-on-secondary-subtle: #CADEFF;
    --ma-secondary-text: #A3C5FF;
    --ma-accent-50: #EEFBF1;
    --ma-on-accent-50: #080702;
    --ma-accent-100: #DDF4E2;
    --ma-on-accent-100: #080702;
    --ma-accent-200: #BDE9C8;
    --ma-on-accent-200: #080702;
    --ma-accent-300: #90D8A4;
    --ma-on-accent-300: #080702;
    --ma-accent-400: #5EBF7E;
    --ma-on-accent-400: #080702;
    --ma-accent-500: #0B9A50;
    --ma-on-accent-500: #080702;
    --ma-accent-600: #00773C;
    --ma-on-accent-600: #FAFAF7;
    --ma-accent-700: #00612F;
    --ma-on-accent-700: #FAFAF7;
    --ma-accent-800: #004E25;
    --ma-on-accent-800: #FAFAF7;
    --ma-accent-900: #003B1A;
    --ma-on-accent-900: #FAFAF7;
    --ma-accent-950: #00270F;
    --ma-on-accent-950: #FAFAF7;
    --ma-accent: #00773C;
    --ma-accent-hover: #00612F;
    --ma-accent-active: #004E25;
    --ma-on-accent: #FAFAF7;
    --ma-accent-subtle: #00270F;
    --ma-on-accent-subtle: #BDE9C8;
    --ma-accent-text: #90D8A4;
    --ma-neutral-50: #FAFAF7;
    --ma-on-neutral-50: #080702;
    --ma-neutral-100: #F5F5F0;
    --ma-on-neutral-100: #080702;
    --ma-neutral-200: #E9E8DF;
    --ma-on-neutral-200: #080702;
    --ma-neutral-300: #D6D5C7;
    --ma-on-neutral-300: #080702;
    --ma-neutral-400: #A2A18F;
    --ma-on-neutral-400: #080702;
    --ma-neutral-500: #686653;
    --ma-on-neutral-500: #FAFAF7;
    --ma-neutral-600: #575543;
    --ma-on-neutral-600: #FAFAF7;
    --ma-neutral-700: #434130;
    --ma-on-neutral-700: #FAFAF7;
    --ma-neutral-800: #2B291B;
    --ma-on-neutral-800: #FAFAF7;
    --ma-neutral-900: #1A180D;
    --ma-on-neutral-900: #FAFAF7;
    --ma-neutral-950: #080702;
    --ma-on-neutral-950: #FAFAF7;
    --ma-neutral: #575543;
    --ma-neutral-hover: #434130;
    --ma-neutral-active: #2B291B;
    --ma-on-neutral: #FAFAF7;
    --ma-neutral-subtle: #080702;
    --ma-on-neutral-subtle: #E9E8DF;
    --ma-neutral-text: #D6D5C7;
    --ma-success-50: #EEFBEF;
    --ma-on-success-50: #080702;
    --ma-success-100: #DCF4E0;
    --ma-on-success-100: #080702;
    --ma-success-200: #BCEAC3;
    --ma-on-success-200: #080702;
    --ma-success-300: #8FD99C;
    --ma-on-success-300: #080702;
    --ma-success-400: #5CC173;
    --ma-on-success-400: #080702;
    --ma-success-500: #16A34A;
    --ma-on-success-500: #080702;
    --ma-success-600: #007832;
    --ma-on-success-600: #FAFAF7;
    --ma-success-700: #006127;
    --ma-on-success-700: #FAFAF7;
    --ma-success-800: #004E1E;
    --ma-on-success-800: #FAFAF7;
    --ma-success-900: #003C15;
    --ma-on-success-900: #FAFAF7;
    --ma-success-950: #00280B;
    --ma-on-success-950: #FAFAF7;
    --ma-success: #007832;
    --ma-success-hover: #006127;
    --ma-success-active: #004E1E;
    --ma-on-success: #FAFAF7;
    --ma-success-subtle: #00280B;
    --ma-on-success-subtle: #BCEAC3;
    --ma-success-text: #8FD99C;
    --ma-warning-50: #FFF5EA;
    --ma-on-warning-50: #080702;
    --ma-warning-100: #FDE9D3;
    --ma-on-warning-100: #080702;
    --ma-warning-200: #FBD5AB;
    --ma-on-warning-200: #080702;
    --ma-warning-300: #F1B873;
    --ma-on-warning-300: #080702;
    --ma-warning-400: #F59E0B;
    --ma-on-warning-400: #080702;
    --ma-warning-500: #B57300;
    --ma-on-warning-500: #080702;
    --ma-warning-600: #8A5600;
    --ma-on-warning-600: #FAFAF7;
    --ma-warning-700: #704500;
    --ma-on-warning-700: #FAFAF7;
    --ma-warning-800: #5A3700;
    --ma-on-warning-800: #FAFAF7;
    --ma-warning-900: #462900;
    --ma-on-warning-900: #FAFAF7;
    --ma-warning-950: #2F1A00;
    --ma-on-warning-950: #FAFAF7;
    --ma-warning: #8A5600;
    --ma-warning-hover: #704500;
    --ma-warning-active: #5A3700;
    --ma-on-warning: #FAFAF7;
    --ma-warning-subtle: #2F1A00;
    --ma-on-warning-subtle: #FBD5AB;
    --ma-warning-text: #F1B873;
    --ma-danger-50: #FFF4F3;
    --ma-on-danger-50: #080702;
    --ma-danger-100: #FFE6E4;
    --ma-on-danger-100: #080702;
    --ma-danger-200: #FFCFCB;
    --ma-on-danger-200: #080702;
    --ma-danger-300: #FFAAA4;
    --ma-on-danger-300: #080702;
    --ma-danger-400: #FF7872;
    --ma-on-danger-400: #080702;
    --ma-danger-500: #DB343A;
    --ma-on-danger-500: #FAFAF7;
    --ma-danger-600: #BB001F;
    --ma-on-danger-600: #FAFAF7;
    --ma-danger-700: #990017;
    --ma-on-danger-700: #FAFAF7;
    --ma-danger-800: #7C0011;
    --ma-on-danger-800: #FAFAF7;
    --ma-danger-900: #61000B;
    --ma-on-danger-900: #FAFAF7;
    --ma-danger-950: #430005;
    --ma-on-danger-950: #FAFAF7;
    --ma-danger: #BB001F;
    --ma-danger-hover: #990017;
    --ma-danger-active: #7C0011;
    --ma-on-danger: #FAFAF7;
    --ma-danger-subtle: #430005;
    --ma-on-danger-subtle: #FFCFCB;
    --ma-danger-text: #FFAAA4;
    --ma-info-50: #F0F8FF;
    --ma-on-info-50: #080702;
    --ma-info-100: #DDF0FF;
    --ma-on-info-100: #080702;
    --ma-info-200: #BDE2FF;
    --ma-on-info-200: #080702;
    --ma-info-300: #8ECCFB;
    --ma-on-info-300: #080702;
    --ma-info-400: #5CB0EC;
    --ma-on-info-400: #080702;
    --ma-info-500: #0284C7;
    --ma-on-info-500: #080702;
    --ma-info-600: #0069A0;
    --ma-on-info-600: #FAFAF7;
    --ma-info-700: #005582;
    --ma-on-info-700: #FAFAF7;
    --ma-info-800: #00446A;
    --ma-on-info-800: #FAFAF7;
    --ma-info-900: #003452;
    --ma-on-info-900: #FAFAF7;
    --ma-info-950: #002238;
    --ma-on-info-950: #FAFAF7;
    --ma-info: #0069A0;
    --ma-info-hover: #005582;
    --ma-info-active: #00446A;
    --ma-on-info: #FAFAF7;
    --ma-info-subtle: #002238;
    --ma-on-info-subtle: #BDE2FF;
    --ma-info-text: #8ECCFB;
    --ma-bg: #080702;
    --ma-surface: #1A180D;
    --ma-surface-raised: #2B291B;
    --ma-surface-overlay: #F5F5F0;
    --ma-surface-sunken: #2B291B;
    --ma-border: #2B291B;
    --ma-border-strong: #434130;
    --ma-divider: #2B291B;
    --ma-text: #F5F5F0;
    --ma-text-secondary: #A2A18F;
    --ma-text-muted: #686653;
    --ma-text-disabled: #575543;
    --ma-text-inverse: #080702;
    --ma-surface-hover: color-mix(in oklch, #2B291B 60%, transparent);
    --ma-link: #D5C75E;
    --ma-link-hover: #FFE600;
    --ma-focus-ring: #76AFFF;
    --ma-hue-sky: #85CEFC;
    --ma-hue-sky-subtle: color-mix(in oklch, #008DC9 15%, var(--ma-surface));
    --ma-hue-sky-solid: #006B9A;
    --ma-hue-blue: #A2C6FF;
    --ma-hue-blue-subtle: color-mix(in oklch, #3B82F6 15%, var(--ma-surface));
    --ma-hue-blue-solid: #115BCC;
    --ma-hue-violet: #C6B8FF;
    --ma-hue-violet-subtle: color-mix(in oklch, #8B5CF6 15%, var(--ma-surface));
    --ma-hue-violet-solid: #6E38D1;
    --ma-hue-emerald: #86D8B1;
    --ma-hue-emerald-subtle: color-mix(in oklch, #009B6B 15%, var(--ma-surface));
    --ma-hue-emerald-solid: #007650;
    --ma-hue-teal: #86D6C8;
    --ma-hue-teal-subtle: color-mix(in oklch, #009889 15%, var(--ma-surface));
    --ma-hue-teal-solid: #007368;
    --ma-hue-amber: #F1B873;
    --ma-hue-amber-subtle: color-mix(in oklch, #B57300 15%, var(--ma-surface));
    --ma-hue-amber-solid: #8A5600;
    --ma-hue-orange: #FFAE85;
    --ma-hue-orange-subtle: color-mix(in oklch, #D05C00 15%, var(--ma-surface));
    --ma-hue-orange-solid: #9F4400;
    --ma-hue-rose: #FFA9AD;
    --ma-hue-rose-subtle: color-mix(in oklch, #F43F5E 15%, var(--ma-surface));
    --ma-hue-rose-solid: #BA0039;
    --ma-shadow-card: 0 1px 2px 0 color-mix(in oklch, black 30%, transparent), 0 1px 3px 0 color-mix(in oklch, black 40%, transparent);
    --ma-shadow-card-hover: 0 2px 4px -1px color-mix(in oklch, black 45%, transparent), 0 6px 12px -2px color-mix(in oklch, black 50%, transparent);
    --ma-shadow-pop: 0 8px 24px -4px color-mix(in oklch, black 60%, transparent), 0 2px 6px -1px color-mix(in oklch, black 45%, transparent);
  }
}

:root {
  --ma-font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ma-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ma-text-2xs: 0.625rem;
  --ma-text-xs: 0.75rem;
  --ma-text-sm: 0.875rem;
  --ma-text-base: 1rem;
  --ma-text-lg: 1.125rem;
  --ma-text-xl: 1.25rem;
  --ma-text-2xl: 1.5rem;
  --ma-text-3xl: 1.875rem;
  --ma-leading-tight: 1.25;
  --ma-leading-normal: 1.5;
  --ma-leading-relaxed: 1.7;
  --ma-weight-regular: 400;
  --ma-weight-medium: 500;
  --ma-weight-semibold: 600;
  --ma-weight-bold: 700;
  --ma-tracking-tight: -0.01em;
  --ma-tracking-normal: 0;
  --ma-tracking-wide: 0.02em;
  --ma-label-size: var(--ma-text-xs);
  --ma-label-weight: var(--ma-weight-medium);
  --ma-label-transform: uppercase;
  --ma-label-tracking: 0.05em;
  --ma-label-color: var(--ma-text-secondary);
  --ma-container-sm: 40rem;
  --ma-container-md: 48rem;
  --ma-container-lg: 64rem;
  --ma-container-xl: 80rem;
  --ma-sidebar-width: 15rem;
  --ma-sidebar-collapsed-width: 4rem;
  --ma-topbar-height: 3.5rem;
  --ma-radius-none: 0;
  --ma-radius-sm: 0.333rem;
  --ma-radius-md: 0.5rem;
  --ma-radius-lg: 0.667rem;
  --ma-radius-xl: 1rem;
  --ma-radius-full: 9999px;
  --ma-shadow-xs: 0 1px 2px color-mix(in oklch, var(--ma-neutral-950) 6%, transparent);
  --ma-shadow-sm: 0 1px 3px color-mix(in oklch, var(--ma-neutral-950) 10%, transparent), 0 1px 2px color-mix(in oklch, var(--ma-neutral-950) 6%, transparent);
  --ma-shadow-md: 0 4px 8px -2px color-mix(in oklch, var(--ma-neutral-950) 10%, transparent), 0 2px 4px -2px color-mix(in oklch, var(--ma-neutral-950) 6%, transparent);
  --ma-shadow-lg: 0 12px 20px -4px color-mix(in oklch, var(--ma-neutral-950) 12%, transparent), 0 4px 8px -4px color-mix(in oklch, var(--ma-neutral-950) 6%, transparent);
  --ma-shadow-xl: 0 24px 40px -8px color-mix(in oklch, var(--ma-neutral-950) 18%, transparent);
  --ma-border-width: 1px;
  --ma-focus-ring-width: 2px;
  --ma-focus-ring-offset: 2px;
  --ma-duration-fast: 120ms;
  --ma-duration-normal: 200ms;
  --ma-duration-slow: 320ms;
  --ma-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ma-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ma-ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --ma-z-dropdown: 1000;
  --ma-z-sticky: 1100;
  --ma-z-drawer: 1200;
  --ma-z-modal: 1300;
  --ma-z-toast: 1400;
  --ma-z-tooltip: 1500;
  --ma-density: 1;
  --ma-control-height-sm: calc(1.75rem * var(--ma-density));
  --ma-control-height-md: calc(2.25rem * var(--ma-density));
  --ma-control-height-lg: calc(2.5rem * var(--ma-density));
  --ma-control-padding-x: 0.75rem;
  --ma-control-radius: var(--ma-radius-md);
  --ma-control-bg: var(--ma-surface);
  --ma-control-border: var(--ma-border-strong);
  --ma-control-placeholder: var(--ma-text-muted);
  --ma-card-padding: calc(1.25rem * var(--ma-density));
  --ma-table-row-height: calc(3rem * var(--ma-density));
  --ma-backdrop: color-mix(in oklch, var(--ma-neutral-950) 55%, transparent);
  --ma-space-0: 0;
  --ma-space-1: 0.25rem;
  --ma-space-2: 0.5rem;
  --ma-space-3: 0.75rem;
  --ma-space-4: 1rem;
  --ma-space-5: 1.25rem;
  --ma-space-6: 1.5rem;
  --ma-space-7: 1.75rem;
  --ma-space-8: 2rem;
  --ma-space-9: 2.25rem;
  --ma-space-10: 2.5rem;
  --ma-space-11: 2.75rem;
  --ma-space-12: 3rem;
  --ma-space-13: 3.25rem;
  --ma-space-14: 3.5rem;
  --ma-space-15: 3.75rem;
  --ma-space-16: 4rem;
}

:root, [data-theme="light"] {
  --yellow:#FFE600;--yellow-grad:linear-gradient(90deg,#FFF159 0%,#FFE600 50%,#F5B800 100%);--on-yellow:#111008;--bg:#F2F2EE;--surface:#FFFFFF;--surface-2:#F4F3EC;
  --line:#E2E0D5;--text:#17160F;--muted:#686653;--faint:#8B8876;--blue:#2F6FE0;--green:#0B9A50;
  --amber:#C56B12;--red:#DB343A;--soft-yellow:rgba(255,230,0,.25);--soft-green:rgba(11,154,80,.10);
  --soft-blue:rgba(47,111,224,.10);--soft-amber:rgba(217,105,10,.10);--r:14px;
  --display:"Bricolage Grotesque",Figtree,system-ui,sans-serif;--body:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
}
[data-theme="dark"] {
  --yellow:#FFE600;--yellow-grad:linear-gradient(90deg,#FFF159 0%,#FFE600 50%,#F5B800 100%);--on-yellow:#111008;--bg:#0C0C0A;--surface:#151512;--surface-2:#1E1D18;
  --line:#302F27;--text:#F5F4EC;--muted:#A6A391;--faint:#777462;--blue:#76AFFF;--green:#32D583;
  --amber:#FFAD53;--red:#FF6A6E;--soft-yellow:rgba(255,230,0,.10);--soft-green:rgba(50,213,131,.12);
  --soft-blue:rgba(118,175,255,.12);--soft-amber:rgba(255,173,83,.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --yellow:#FFE600;--yellow-grad:linear-gradient(90deg,#FFF159 0%,#FFE600 50%,#F5B800 100%);--on-yellow:#111008;--bg:#0C0C0A;--surface:#151512;--surface-2:#1E1D18;
    --line:#302F27;--text:#F5F4EC;--muted:#A6A391;--faint:#777462;--blue:#76AFFF;--green:#32D583;
    --amber:#FFAD53;--red:#FF6A6E;--soft-yellow:rgba(255,230,0,.10);--soft-green:rgba(50,213,131,.12);
    --soft-blue:rgba(118,175,255,.12);--soft-amber:rgba(255,173,83,.12);
  }
}
body{background:var(--bg);color:var(--text);font:14px/1.5 var(--body);-webkit-font-smoothing:antialiased}
.ma-shell{background:var(--bg);color:var(--text);font-family:var(--body)}
.ma-sidebar{background:var(--surface)!important;border-color:var(--line)!important}
.ma-topbar{background:color-mix(in srgb,var(--bg) 92%,transparent)!important;backdrop-filter:blur(14px);border-color:var(--line)!important}
.ma-shell__content:has(.bf-shell),.ma-shell__main:has(.brand){padding:0!important;background:var(--bg);color:var(--text)}
.bf-shell{background:var(--bg);color:var(--text);font:14px/1.5 var(--body);min-height:100%}
.bf-shell button,.bf-shell select,.bf-shell input{font:inherit;color:inherit}
.bf-shell button{cursor:pointer}
.bf-shell button:focus-visible,.bf-shell select:focus-visible,.bf-shell input:focus-visible,.bf-shell a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrap{max-width:1600px;margin:auto;padding:0 34px}.brand{background:var(--yellow-grad);color:var(--on-yellow);border-bottom:3px solid #2D3277}
.brand-in{min-height:114px;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:20px 0}
.brand-id{display:flex;align-items:center;gap:16px;min-width:0}.brand-mark{width:54px;height:54px;border-radius:16px;background:var(--on-yellow);color:var(--yellow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:800 13px/1 var(--display);letter-spacing:-.03em;flex:none;position:relative;box-shadow:0 4px 12px rgba(17,16,8,.18)}
.brand-mark svg{width:17px;height:17px;stroke:var(--yellow)}
.eyebrow{font:800 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#111008;opacity:.92}.brand h1{font:900 clamp(27px,3vw,38px)/1.05 var(--display);letter-spacing:-.04em;margin:7px 0 0;color:var(--on-yellow)}.brand-sub{font-weight:800;font-size:13.5px;margin-top:5px;color:#111008;opacity:.9}
.brand-meta{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap}.meta-block span{display:block;font:800 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#111008;opacity:.82;margin-bottom:6px}.meta-block strong{font-size:14.5px;font-weight:800;color:#111008}.demo-badge{display:inline-flex;align-items:center;gap:7px;background:var(--on-yellow);color:var(--yellow);padding:8px 12px;border-radius:999px;font:700 10px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.toolbar{position:sticky;top:var(--ma-topbar-height,0);z-index:30;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.toolbar-in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:62px}.tabs{display:flex;gap:4px;overflow:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{border:0;background:transparent;color:var(--muted);padding:10px 13px;border-radius:9px;font-weight:700;white-space:nowrap;transition:background .16s ease,color .16s ease}.tab:hover{background:var(--surface);color:var(--text)}.tab[aria-selected="true"]{background:var(--yellow-grad);color:var(--on-yellow);font-weight:800}
.toolbar-actions{display:flex;gap:8px;align-items:center;flex:none}.icon-btn{height:36px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);display:inline-flex;gap:8px;align-items:center;color:var(--muted);font-size:12px;font-weight:700}.icon-btn:hover{color:var(--text);border-color:var(--faint)}.icon-btn svg{width:15px;height:15px}
main.wrap,.bf-main.wrap{padding-top:22px;padding-bottom:54px}.filter-panel{display:grid;grid-template-columns:1.08fr 1fr 1.1fr 1fr 1fr auto;gap:10px;align-items:end;background:var(--surface);border:1px solid var(--line);padding:14px;border-radius:var(--r);margin-bottom:20px}
.field{min-width:0}.field label{display:block;color:var(--faint);font:600 9px/1.1 var(--mono);letter-spacing:.1em;text-transform:uppercase;margin:0 0 6px 2px}.control{width:100%;height:39px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:0 11px;font-size:12px;color:var(--text)}select.control{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 14px) 16px,calc(100% - 9px) 16px;background-size:5px 5px;background-repeat:no-repeat;padding-right:25px}input[type=date].control{padding-right:7px;color-scheme:light}[data-theme="dark"] input[type=date].control{color-scheme:dark}.clear-btn{height:39px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--muted);font-size:11px;font-weight:700;white-space:nowrap}.clear-btn:hover{color:var(--text);border-color:var(--faint)}
.active-filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:-10px 0 16px;min-height:22px}.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:var(--soft-yellow);color:var(--text);padding:4px 9px;font-size:10px;font-weight:600}.chip button{border:0;background:transparent;color:var(--muted);padding:0;font-size:14px;line-height:1}.filter-summary{margin-left:auto;color:var(--faint);font-size:10px}
.demo-note{display:flex;align-items:center;gap:9px;border:1px solid color-mix(in srgb,var(--amber) 35%,var(--line));background:var(--soft-amber);padding:9px 12px;border-radius:10px;color:var(--muted);font-size:11px;margin-bottom:20px}.demo-note strong{color:var(--amber)}.demo-note svg{width:15px;height:15px;flex:none;color:var(--amber)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:26px 0 12px}.section-title{display:flex;align-items:center;gap:9px;margin:0;font:700 16px/1.2 var(--display);letter-spacing:-.02em;color:var(--text)}.section-title:before{content:"";width:3px;height:17px;border-radius:2px;background:linear-gradient(180deg,#FFF159 0%,#F5B800 100%)}.section-hint{color:var(--faint);font-size:11px}.section-kicker{color:var(--faint);font:600 9px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;margin-bottom:7px}
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 14px;min-width:0;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;transition:transform .18s ease,border-color .18s ease}.kpi:hover{transform:translateY(-2px);border-color:var(--faint)}.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.kpi-head-text{min-width:0}.kpi-label{display:block;font:800 16px/1.25 var(--display);letter-spacing:-.015em;color:var(--text)}.kpi-subtitle{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kpi-ring-row{display:flex;align-items:center;gap:15px;margin:18px 0 16px}.kpi-ring-wrap{position:relative;width:84px;height:84px;flex:none;display:grid;place-items:center}.kpi-ring{width:84px;height:84px;display:block;overflow:visible}.kpi-ring-track{fill:none;stroke:var(--surface-2);stroke-width:6.5}.kpi-ring-fill{fill:none;stroke-width:6.5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dasharray .35s ease}.kpi-ring-pct{position:absolute;inset:0;display:grid;place-items:center;font:800 14.5px/1 var(--mono);color:var(--text);letter-spacing:-.03em}.kpi-metrics{min-width:0;flex:1}.kpi-value{font:800 clamp(20px,1.7vw,25px)/1.08 var(--display);letter-spacing:-.04em;color:var(--text);margin:0;white-space:nowrap}.kpi-meta{font-size:11.5px;font-weight:600;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kpi-delta{font-size:11px;font-weight:700;margin-top:4px;color:var(--green)}.kpi-delta.warn{color:var(--amber)}.kpi-delta.down{color:var(--red)}.kpi-delta.neutral{color:var(--blue)}.kpi-bq-foot{border-top:1px solid var(--line);padding-top:11px;display:flex;align-items:center;justify-content:space-between;gap:8px}.kpi-bq-col{font:600 10.5px/1 var(--mono);color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kpi-bq-agg{border:1px solid var(--line);background:var(--surface-2);color:var(--muted);border-radius:999px;padding:3px 9px;font:700 9.5px/1 var(--mono);flex:none}
.onoff-panel{margin-top:14px;padding:20px 22px;border-top:3px solid #3483FA}.onoff-badge{border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:999px;padding:5px 12px;font:700 11px/1 var(--body);white-space:nowrap}.onoff-group{margin-top:16px}.onoff-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font:800 11.5px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--text);margin-bottom:7px}.onoff-bar{position:relative;display:flex;width:100%;height:34px;border-radius:7px;overflow:hidden;background:#2D3277;border:1px solid rgba(52,131,250,.35)}.onoff-fill-on{height:100%;background:var(--yellow-grad);border-right:2px solid #2D3277;transition:width .28s ease}.onoff-fill-off{height:100%;flex:1;background:linear-gradient(90deg,#3483FA 0%,#2D3277 100%)}.onoff-labels{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 14px;pointer-events:none;font:800 13px/1 var(--display);letter-spacing:-.01em}.onoff-lbl-on{color:#111008;font-weight:800}.onoff-lbl-off{color:#FFFFFF;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.28)}
.grid-main{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(290px,.9fr);gap:12px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:17px;min-width:0}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:12px}.panel-head h3{margin:0;font:800 15.5px/1.2 var(--display);letter-spacing:-.02em;color:var(--text)}.panel-head p{margin:5px 0 0;font-size:11.5px;color:var(--muted)}.panel-tool{height:30px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding:0 9px;font-size:10px;color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:10px;align-items:center}.legend-item{display:inline-flex;align-items:center;gap:6px}.swatch{width:15px;height:3px;border-radius:4px;background:var(--yellow-grad)}.swatch.plan{height:0;border-top:2px dashed var(--blue);background:none}.swatch.last{background:var(--faint)}.chart-wrap{position:relative;width:100%;height:250px;margin-top:5px}.chart-wrap svg{width:100%;height:100%;overflow:visible}.axis-label{font:10px var(--body);fill:var(--faint)}.grid-line{stroke:var(--line);stroke-width:1}.actual-line{fill:none;stroke:var(--yellow);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.plan-line{fill:none;stroke:var(--blue);stroke-width:2;stroke-dasharray:6 5;stroke-linecap:round}.event-line{stroke:var(--amber);stroke-width:1.5;stroke-dasharray:3 4}.chart-dot{fill:var(--yellow);stroke:var(--surface);stroke-width:2}.chart-event{font:600 9px var(--mono);fill:var(--amber)}.chart-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px}
.donut-row{display:grid;grid-template-columns:186px 1fr;align-items:center;gap:20px;min-height:236px}.donut{width:180px;height:180px;border-radius:50%;position:relative;background:conic-gradient(var(--yellow) 0 36%,var(--blue) 36% 64%,var(--green) 64% 83%,#837D66 83% 100%);margin:auto}.donut:after{content:"";position:absolute;inset:22px;border-radius:50%;background:var(--surface)}.donut-center{position:absolute;z-index:1;inset:0;display:grid;place-content:center;text-align:center}.donut-center strong{font:800 23px/1 var(--display)}.donut-center span{font-size:10px;font-weight:600;color:var(--faint);margin-top:5px}.legend-list{display:flex;flex-direction:column;gap:12px}.legend-row{display:grid;grid-template-columns:9px 1fr auto;gap:7px;align-items:center;font-size:11px}.legend-row .color-dot{width:8px;height:8px;border-radius:50%}.legend-row span:nth-child(2){color:var(--muted)}.legend-row strong{font:600 11px var(--mono)}.donut-foot{font-size:9px;color:var(--faint);margin-top:7px}
.channel-panel{margin-top:12px}.bar-list{display:flex;flex-direction:column;gap:15px;margin-top:18px}.bar-row{display:grid;grid-template-columns:112px minmax(80px,1fr) 72px;gap:12px;align-items:center}.bar-name{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-track{position:relative;height:17px;border-radius:5px;background:var(--surface-2);overflow:hidden}.bar-track .plan{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--soft-blue);border:1px solid var(--blue);opacity:.95}.bar-track .real{position:absolute;left:0;top:4px;height:9px;border-radius:5px;background:var(--yellow-grad)}.bar-value{text-align:right;font:500 10px var(--mono);color:var(--text)}.bar-legend{display:flex;gap:16px;margin-top:17px}.bar-legend .legend-item{font-size:10px;color:var(--muted)}.bar-swatch{width:13px;height:8px;border-radius:3px;background:var(--yellow-grad)}.bar-swatch.plan{background:transparent;border:1px solid var(--blue)}
.table-panel{margin-top:12px;padding-bottom:0}.table-tools{display:flex;align-items:center;gap:8px}.search{height:31px;width:180px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:0 10px;font-size:10px}.table-scroll{overflow:auto;margin:0 -17px;border-top:1px solid var(--line)}.table-panel table{width:100%;border-collapse:collapse;white-space:nowrap;font-variant-numeric:tabular-nums}.table-panel thead th{background:var(--surface);position:sticky;top:0;z-index:2;color:var(--faint);font:600 9px var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:right;padding:12px 14px;border-bottom:1px solid var(--line)}.table-panel thead th:first-child,.table-panel tbody td:first-child{text-align:left;position:sticky;left:0;background:var(--surface);z-index:1}.table-panel tbody td{text-align:right;padding:11px 14px;border-bottom:1px solid var(--line);font-size:10px;color:var(--muted)}.table-panel tbody tr:hover td{background:var(--surface-2)}.table-panel tbody tr:hover td:first-child{background:var(--surface-2)}.table-panel tbody td strong{color:var(--text);font-size:11px}.status{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;font-size:9px;font-weight:700}.status:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}.status.ok{background:var(--soft-green);color:var(--green)}.status.warn{background:var(--soft-amber);color:var(--amber)}.status.none{background:var(--soft-blue);color:var(--blue)}.table-foot{display:flex;justify-content:space-between;align-items:center;padding:10px 0 12px;color:var(--faint);font-size:10px}.pager{display:flex;gap:6px}.pager button{width:25px;height:25px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);color:var(--muted)}
.note-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.method-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:11px;color:var(--muted);font-size:10px}.method-note b{color:var(--text)}.method-icon{width:23px;height:23px;border-radius:7px;background:var(--soft-blue);color:var(--blue);display:grid;place-items:center;flex:none;font:700 12px var(--mono)}
.view{display:none;animation:fadeIn .2s ease both}.view.active{display:block}@keyframes fadeIn{from{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.daily-controls{display:flex;gap:8px;align-items:center}.seg{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:3px;gap:2px}.seg button{border:0;background:transparent;color:var(--muted);padding:5px 8px;border-radius:6px;font-size:10px}.seg button[aria-pressed="true"]{background:var(--yellow-grad);color:var(--on-yellow);font-weight:700}
.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.insight-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}.insight-top{display:flex;justify-content:space-between;align-items:center}.insight-tag{font:600 9px var(--mono);letter-spacing:.1em;color:var(--blue);text-transform:uppercase}.insight-card h3{margin:13px 0 7px;font:700 16px var(--display);color:var(--text)}.insight-card p{margin:0;color:var(--muted);font-size:12px}.insight-card .action{margin-top:15px;color:var(--blue);font-size:11px;font-weight:700;border:0;background:transparent;padding:0;cursor:pointer}[data-theme="dark"] .insight-card .action{color:var(--yellow)}
.empty-hint{padding:52px 20px;text-align:center;border:1px dashed var(--line);border-radius:var(--r);color:var(--muted)}
footer{border-top:1px solid var(--line);padding:20px 0 30px;color:var(--faint);font-size:10px}.footer-in{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}.footer-mark{color:var(--muted);font-weight:700}
@media(max-width:1180px){.filter-panel{grid-template-columns:repeat(3,1fr)}.kpi-grid{grid-template-columns:repeat(3,1fr)}.kpi.featured{grid-column:span 1}.brand-meta{gap:15px}.bar-row{grid-template-columns:95px minmax(80px,1fr) 65px}}
@media(max-width:820px){.wrap{padding-left:18px;padding-right:18px}.brand-in{align-items:flex-start;flex-direction:column}.brand-meta{width:100%;justify-content:space-between;align-items:center}.toolbar-in{align-items:flex-start;flex-direction:column;padding:10px 0;gap:8px}.toolbar-actions{align-self:flex-end;margin-top:-43px}.tabs{width:100%;padding-right:105px}.tab{padding:9px 10px;font-size:11px}.filter-panel{grid-template-columns:repeat(2,1fr)}.clear-btn{width:100%}.grid-main{grid-template-columns:1fr}.donut-row{grid-template-columns:150px 1fr}.insight-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.wrap{padding-left:13px;padding-right:13px}.brand-in{min-height:0;padding:16px 0}.brand-mark{width:46px;height:46px}.brand h1{font-size:27px}.brand-meta{gap:10px;align-items:flex-start}.meta-block strong{font-size:11px}.demo-badge{font-size:8px;padding:7px}.tabs{padding-right:0}.toolbar-actions{margin:0;align-self:stretch;justify-content:flex-end}.toolbar-in{gap:8px}.filter-panel{grid-template-columns:1fr 1fr;padding:10px;gap:8px}.field label{font-size:8px}.control{font-size:11px;padding-left:8px}.active-filters{margin-top:-10px}.filter-summary{width:100%;margin-left:0}.kpi-grid{grid-template-columns:1fr 1fr;gap:8px}.kpi.featured{grid-column:1/-1}.kpi{padding:14px}.kpi-value{font-size:23px;margin:11px 0 7px}.kpi-label{font-size:13px}.kpi-foot{font-size:10px}.section-head{align-items:flex-start;flex-direction:column;gap:4px}.section-title{font-size:15px}.panel{padding:13px}.panel-head h3{font-size:14px}.chart-wrap{height:205px}.donut-row{grid-template-columns:1fr;gap:8px;padding:7px 0}.donut{width:132px;height:132px}.legend-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.bar-row{grid-template-columns:82px minmax(70px,1fr) 57px;gap:8px}.bar-name{font-size:9px}.bar-value{font-size:9px}.note-grid{grid-template-columns:1fr}.table-tools{width:100%}.search{width:100%}.panel-head:has(.table-tools){flex-direction:column}.insight-grid{grid-template-columns:1fr}.demo-note{align-items:flex-start}.demo-note svg{margin-top:1px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}