html[data-theme="light"] {
  color-scheme: light;
  --color-background: #F8FAFD;
  --color-foreground: #171B2C;
  --color-surface: #FFFFFF;
  --color-surface-foreground: #171B2C;
  --color-surface-elevated: #FFFFFF;
  --color-surface-inset: #F3F6FA;
  --color-muted: #F1F4F9;
  --color-muted-foreground: #566078;
  --color-primary: #695FFA;
  --color-primary-hover: #6258F4;
  --color-primary-pressed: #5B50EB;
  --color-primary-foreground: #FFFFFF;
  --color-secondary: #E7EBF2;
  --color-secondary-hover: #DDE3EC;
  --color-secondary-pressed: #D3DAE5;
  --color-secondary-foreground: #171B2C;
  --color-accent: #F2F0FF;
  --color-accent-hover: #E8E5FF;
  --color-accent-pressed: #D3CFFF;
  --color-accent-foreground: #4D43D5;
  --color-destructive: #C04444;
  --color-destructive-hover: #B63C3C;
  --color-destructive-pressed: #A73434;
  --color-destructive-foreground: #FFFFFF;
  --color-border: #DDE3EC;
  --color-border-strong: #7A8498;
  --color-focus: #695FFA;
  --color-link: #5B50EB;
  --color-link-hover: #4D43D5;
  --color-disabled: #F1F4F9;
  --color-disabled-foreground: #667085;
  --color-success: #EAF9F1;
  --color-success-foreground: #1E6D4A;
  --color-warning: #FFF5DF;
  --color-warning-foreground: #7A4A00;
  --color-danger: #FFF0F0;
  --color-danger-foreground: #9A3030;
  --color-info: #EEF5FF;
  --color-info-foreground: #285BB7;
  --color-brand-signal: #695FFA;
  --color-live: #06719F;
  --color-frozen-edge: #8FD7FF;
  --color-frozen-highlight: #A7F0FF;
  --color-overlay: #171B2C99;
  --color-overlay-subtle: #171B2C33;
  --color-shadow: #1D263A;
  --color-skeleton: #E7EBF2;
  --elevation-none: none;
  --elevation-sm: 0px 4px 16px 0px rgba(29, 38, 58, 0.06);
  --elevation-md: 0px 12px 32px 0px rgba(29, 38, 58, 0.09);
  --elevation-lg: 0px 20px 60px 0px rgba(29, 38, 58, 0.12);
  --elevation-frozen: 0px 10px 36px 0px rgba(105, 95, 250, 0.14), 0px 18px 60px 0px rgba(143, 215, 255, 0.12);
  --elevation-frozen-dark: 0px 20px 64px 0px rgba(0, 0, 0, 0.45), 0px 10px 44px 0px rgba(105, 95, 250, 0.18);
  --elevation-glow-primary: 0px 0px 0px 1px rgba(105, 95, 250, 0.35), 0px 6px 20px 0px rgba(105, 95, 250, 0.28);
  --elevation-glow-live: 0px 0px 12px 0px rgba(94, 214, 255, 0.45);
  --material-standard-background: #FFFFFF;
  --material-standard-border: #DDE3EC;
  --material-standard-highlight: #FFFFFFFF;
  --material-elevated-background: #FFFFFF;
  --material-elevated-border: #DDE3EC;
  --material-elevated-elevation: 0px 12px 32px 0px rgba(29, 38, 58, 0.09);
  --material-elevated-highlight: #FFFFFFFF;
  --material-frozen-background-start: #FFFFFFB8;
  --material-frozen-background-end: #F3F8FF8A;
  --material-frozen-blur: 24px;
  --material-frozen-saturate: 1.4;
  --material-frozen-border: #FFFFFFCC;
  --material-frozen-inner-highlight: #FFFFFFF2;
  --material-frozen-edge: #9AD8FF66;
  --material-frozen-elevation: 0px 10px 36px 0px rgba(105, 95, 250, 0.14), 0px 18px 60px 0px rgba(143, 215, 255, 0.12);
  --material-frozen-reflection: [object Object];
  --material-frozen-prism: [object Object];
  --material-canvas-sky: #695FFA12;
  --material-canvas-sky-height: 360;
  --material-canvas-note: vertical gradient from sky to transparent at the top of the canvas; the one place Light Mode shows colour on the base layer;
  --material-metricAccent-start: #695FFA;
  --material-metricAccent-end: #06719F;
  --material-metricAccent-note: text gradient for hero numerals ≥ 32px only; both stops pass 3:1 large-text on surface;
}
@supports selector(:has(*)) {
html:not([data-theme]):has(#themeLight:checked) {
  color-scheme: light;
  --color-background: #F8FAFD;
  --color-foreground: #171B2C;
  --color-surface: #FFFFFF;
  --color-surface-foreground: #171B2C;
  --color-surface-elevated: #FFFFFF;
  --color-surface-inset: #F3F6FA;
  --color-muted: #F1F4F9;
  --color-muted-foreground: #566078;
  --color-primary: #695FFA;
  --color-primary-hover: #6258F4;
  --color-primary-pressed: #5B50EB;
  --color-primary-foreground: #FFFFFF;
  --color-secondary: #E7EBF2;
  --color-secondary-hover: #DDE3EC;
  --color-secondary-pressed: #D3DAE5;
  --color-secondary-foreground: #171B2C;
  --color-accent: #F2F0FF;
  --color-accent-hover: #E8E5FF;
  --color-accent-pressed: #D3CFFF;
  --color-accent-foreground: #4D43D5;
  --color-destructive: #C04444;
  --color-destructive-hover: #B63C3C;
  --color-destructive-pressed: #A73434;
  --color-destructive-foreground: #FFFFFF;
  --color-border: #DDE3EC;
  --color-border-strong: #7A8498;
  --color-focus: #695FFA;
  --color-link: #5B50EB;
  --color-link-hover: #4D43D5;
  --color-disabled: #F1F4F9;
  --color-disabled-foreground: #667085;
  --color-success: #EAF9F1;
  --color-success-foreground: #1E6D4A;
  --color-warning: #FFF5DF;
  --color-warning-foreground: #7A4A00;
  --color-danger: #FFF0F0;
  --color-danger-foreground: #9A3030;
  --color-info: #EEF5FF;
  --color-info-foreground: #285BB7;
  --color-brand-signal: #695FFA;
  --color-live: #06719F;
  --color-frozen-edge: #8FD7FF;
  --color-frozen-highlight: #A7F0FF;
  --color-overlay: #171B2C99;
  --color-overlay-subtle: #171B2C33;
  --color-shadow: #1D263A;
  --color-skeleton: #E7EBF2;
  --elevation-none: none;
  --elevation-sm: 0px 4px 16px 0px rgba(29, 38, 58, 0.06);
  --elevation-md: 0px 12px 32px 0px rgba(29, 38, 58, 0.09);
  --elevation-lg: 0px 20px 60px 0px rgba(29, 38, 58, 0.12);
  --elevation-frozen: 0px 10px 36px 0px rgba(105, 95, 250, 0.14), 0px 18px 60px 0px rgba(143, 215, 255, 0.12);
  --elevation-frozen-dark: 0px 20px 64px 0px rgba(0, 0, 0, 0.45), 0px 10px 44px 0px rgba(105, 95, 250, 0.18);
  --elevation-glow-primary: 0px 0px 0px 1px rgba(105, 95, 250, 0.35), 0px 6px 20px 0px rgba(105, 95, 250, 0.28);
  --elevation-glow-live: 0px 0px 12px 0px rgba(94, 214, 255, 0.45);
  --material-standard-background: #FFFFFF;
  --material-standard-border: #DDE3EC;
  --material-standard-highlight: #FFFFFFFF;
  --material-elevated-background: #FFFFFF;
  --material-elevated-border: #DDE3EC;
  --material-elevated-elevation: 0px 12px 32px 0px rgba(29, 38, 58, 0.09);
  --material-elevated-highlight: #FFFFFFFF;
  --material-frozen-background-start: #FFFFFFB8;
  --material-frozen-background-end: #F3F8FF8A;
  --material-frozen-blur: 24px;
  --material-frozen-saturate: 1.4;
  --material-frozen-border: #FFFFFFCC;
  --material-frozen-inner-highlight: #FFFFFFF2;
  --material-frozen-edge: #9AD8FF66;
  --material-frozen-elevation: 0px 10px 36px 0px rgba(105, 95, 250, 0.14), 0px 18px 60px 0px rgba(143, 215, 255, 0.12);
  --material-frozen-reflection: [object Object];
  --material-frozen-prism: [object Object];
  --material-canvas-sky: #695FFA12;
  --material-canvas-sky-height: 360;
  --material-canvas-note: vertical gradient from sky to transparent at the top of the canvas; the one place Light Mode shows colour on the base layer;
  --material-metricAccent-start: #695FFA;
  --material-metricAccent-end: #06719F;
  --material-metricAccent-note: text gradient for hero numerals ≥ 32px only; both stops pass 3:1 large-text on surface;
}
@media (prefers-color-scheme: light) {
html:not([data-theme]):has(#themeSystem:checked) {
  color-scheme: light;
  --color-background: #F8FAFD;
  --color-foreground: #171B2C;
  --color-surface: #FFFFFF;
  --color-surface-foreground: #171B2C;
  --color-surface-elevated: #FFFFFF;
  --color-surface-inset: #F3F6FA;
  --color-muted: #F1F4F9;
  --color-muted-foreground: #566078;
  --color-primary: #695FFA;
  --color-primary-hover: #6258F4;
  --color-primary-pressed: #5B50EB;
  --color-primary-foreground: #FFFFFF;
  --color-secondary: #E7EBF2;
  --color-secondary-hover: #DDE3EC;
  --color-secondary-pressed: #D3DAE5;
  --color-secondary-foreground: #171B2C;
  --color-accent: #F2F0FF;
  --color-accent-hover: #E8E5FF;
  --color-accent-pressed: #D3CFFF;
  --color-accent-foreground: #4D43D5;
  --color-destructive: #C04444;
  --color-destructive-hover: #B63C3C;
  --color-destructive-pressed: #A73434;
  --color-destructive-foreground: #FFFFFF;
  --color-border: #DDE3EC;
  --color-border-strong: #7A8498;
  --color-focus: #695FFA;
  --color-link: #5B50EB;
  --color-link-hover: #4D43D5;
  --color-disabled: #F1F4F9;
  --color-disabled-foreground: #667085;
  --color-success: #EAF9F1;
  --color-success-foreground: #1E6D4A;
  --color-warning: #FFF5DF;
  --color-warning-foreground: #7A4A00;
  --color-danger: #FFF0F0;
  --color-danger-foreground: #9A3030;
  --color-info: #EEF5FF;
  --color-info-foreground: #285BB7;
  --color-brand-signal: #695FFA;
  --color-live: #06719F;
  --color-frozen-edge: #8FD7FF;
  --color-frozen-highlight: #A7F0FF;
  --color-overlay: #171B2C99;
  --color-overlay-subtle: #171B2C33;
  --color-shadow: #1D263A;
  --color-skeleton: #E7EBF2;
  --elevation-none: none;
  --elevation-sm: 0px 4px 16px 0px rgba(29, 38, 58, 0.06);
  --elevation-md: 0px 12px 32px 0px rgba(29, 38, 58, 0.09);
  --elevation-lg: 0px 20px 60px 0px rgba(29, 38, 58, 0.12);
  --elevation-frozen: 0px 10px 36px 0px rgba(105, 95, 250, 0.14), 0px 18px 60px 0px rgba(143, 215, 255, 0.12);
  --elevation-frozen-dark: 0px 20px 64px 0px rgba(0, 0, 0, 0.45), 0px 10px 44px 0px rgba(105, 95, 250, 0.18);
  --elevation-glow-primary: 0px 0px 0px 1px rgba(105, 95, 250, 0.35), 0px 6px 20px 0px rgba(105, 95, 250, 0.28);
  --elevation-glow-live: 0px 0px 12px 0px rgba(94, 214, 255, 0.45);
  --material-standard-background: #FFFFFF;
  --material-standard-border: #DDE3EC;
  --material-standard-highlight: #FFFFFFFF;
  --material-elevated-background: #FFFFFF;
  --material-elevated-border: #DDE3EC;
  --material-elevated-elevation: 0px 12px 32px 0px rgba(29, 38, 58, 0.09);
  --material-elevated-highlight: #FFFFFFFF;
  --material-frozen-background-start: #FFFFFFB8;
  --material-frozen-background-end: #F3F8FF8A;
  --material-frozen-blur: 24px;
  --material-frozen-saturate: 1.4;
  --material-frozen-border: #FFFFFFCC;
  --material-frozen-inner-highlight: #FFFFFFF2;
  --material-frozen-edge: #9AD8FF66;
  --material-frozen-elevation: 0px 10px 36px 0px rgba(105, 95, 250, 0.14), 0px 18px 60px 0px rgba(143, 215, 255, 0.12);
  --material-frozen-reflection: [object Object];
  --material-frozen-prism: [object Object];
  --material-canvas-sky: #695FFA12;
  --material-canvas-sky-height: 360;
  --material-canvas-note: vertical gradient from sky to transparent at the top of the canvas; the one place Light Mode shows colour on the base layer;
  --material-metricAccent-start: #695FFA;
  --material-metricAccent-end: #06719F;
  --material-metricAccent-note: text gradient for hero numerals ≥ 32px only; both stops pass 3:1 large-text on surface;
}
}
}