:root {
    color-scheme: light;
    --md-sys-color-primary: #2b63b5;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #dbe6ff;
    --md-sys-color-on-primary-container: #001b3f;
    --md-sys-color-secondary: #555f72;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #d9e3f8;
    --md-sys-color-on-secondary-container: #121c2b;
    --md-sys-color-tertiary: #6f5778;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #f9d8ff;
    --md-sys-color-on-tertiary-container: #28132f;
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;
    --md-sys-color-background: #f8f9ff;
    --md-sys-color-on-background: #181c24;
    --md-sys-color-surface: #f8f9ff;
    --md-sys-color-surface-dim: #d8dbe4;
    --md-sys-color-surface-bright: #f8f9ff;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f2f4fb;
    --md-sys-color-surface-container: #eceef6;
    --md-sys-color-surface-container-high: #e7e9f0;
    --md-sys-color-surface-container-highest: #e1e3eb;
    --md-sys-color-on-surface: #181c24;
    --md-sys-color-on-surface-variant: #434a5a;
    --md-sys-color-outline: #737b8c;
    --md-sys-color-outline-variant: #c3c8da;
    --md-sys-color-shadow: rgba(15, 23, 42, 0.16);
    --md-sys-color-scrim: rgba(15, 23, 42, 0.38);
    --md-sys-color-inverse-surface: #2c313b;
    --md-sys-color-inverse-on-surface: #eef0f8;
    --md-sys-color-inverse-primary: #aec6ff;
    --md-sys-color-surface-tint: #2b63b5;

    --md-dark-sys-color-primary: #aec6ff;
    --md-dark-sys-color-on-primary: #002f66;
    --md-dark-sys-color-primary-container: #124a9a;
    --md-dark-sys-color-on-primary-container: #dbe6ff;
    --md-dark-sys-color-secondary: #bdc7dc;
    --md-dark-sys-color-on-secondary: #273141;
    --md-dark-sys-color-secondary-container: #3d4758;
    --md-dark-sys-color-on-secondary-container: #d9e3f8;
    --md-dark-sys-color-tertiary: #ddbce4;
    --md-dark-sys-color-on-tertiary: #3e2948;
    --md-dark-sys-color-tertiary-container: #563f5f;
    --md-dark-sys-color-on-tertiary-container: #f9d8ff;
    --md-dark-sys-color-error: #ffb4ab;
    --md-dark-sys-color-on-error: #690005;
    --md-dark-sys-color-error-container: #93000a;
    --md-dark-sys-color-on-error-container: #ffdad6;
    --md-dark-sys-color-background: #10131a;
    --md-dark-sys-color-on-background: #e1e2ea;
    --md-dark-sys-color-surface: #10131a;
    --md-dark-sys-color-on-surface: #e1e2ea;
    --md-dark-sys-color-surface-container-lowest: #0b0e14;
    --md-dark-sys-color-surface-container-low: #181c24;
    --md-dark-sys-color-surface-container: #1d2129;
    --md-dark-sys-color-surface-container-high: #272b33;
    --md-dark-sys-color-surface-container-highest: #31353e;
    --md-dark-sys-color-on-surface-variant: #c3c7d4;
    --md-dark-sys-color-outline: #8d93a3;
    --md-dark-sys-color-outline-variant: #434856;

    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 999px;

    --md-sys-elevation-level0: none;
    --md-sys-elevation-level1: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);
    --md-sys-elevation-level2: 0 2px 6px rgba(15, 23, 42, 0.1), 0 1px 3px rgba(15, 23, 42, 0.06);
    --md-sys-elevation-level3: 0 8px 18px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.08);
    --md-sys-elevation-level4: 0 14px 28px rgba(15, 23, 42, 0.14), 0 4px 10px rgba(15, 23, 42, 0.08);
    --md-sys-elevation-level5: 0 24px 48px rgba(15, 23, 42, 0.18), 0 8px 18px rgba(15, 23, 42, 0.12);

    --md-sys-typescale-display-small-font: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --md-sys-typescale-display-small-size: 2.25rem;
    --md-sys-typescale-headline-large-size: 2rem;
    --md-sys-typescale-headline-medium-size: 1.75rem;
    --md-sys-typescale-title-large-size: 1.375rem;
    --md-sys-typescale-title-medium-size: 1rem;
    --md-sys-typescale-body-large-size: 1rem;
    --md-sys-typescale-body-medium-size: 0.9375rem;
    --md-sys-typescale-body-small-size: 0.875rem;
    --md-sys-typescale-label-large-size: 0.875rem;
    --md-sys-typescale-label-medium-size: 0.75rem;
    --md-sys-typescale-label-small-size: 0.6875rem;

    --bg: var(--md-sys-color-background);
    --panel: var(--md-sys-color-surface-container-lowest);
    --panel-soft: var(--md-sys-color-surface-container-low);
    --panel-2: var(--md-sys-color-surface-container);
    --text: var(--md-sys-color-on-surface);
    --text-soft: var(--md-sys-color-on-surface-variant);
    --muted: var(--md-sys-color-on-surface-variant);
    --line: var(--md-sys-color-outline-variant);
    --line-2: var(--md-sys-color-outline);
    --brand: var(--md-sys-color-primary);
    --brand-soft: var(--md-sys-color-primary-container);
    --success: #1f6f43;
    --warning: #8a5800;
    --danger: var(--md-sys-color-error);
    --shadow: var(--md-sys-elevation-level2);

    --workspace-bar-height: 72px;
    --workspace-bar-bg: rgba(248, 249, 255, 0.92);
    --workspace-bar-border: var(--md-sys-color-outline-variant);
    --workspace-sidebar-bg: var(--md-sys-color-surface-container-low);
    --workspace-sidebar-line: var(--md-sys-color-outline-variant);
    --workspace-surface: var(--md-sys-color-background);
    --workspace-hover: rgba(43, 99, 181, 0.08);
    --workspace-active: var(--md-sys-color-secondary-container);
    --workspace-active-line: var(--md-sys-color-primary);
    --sidebar-width: 232px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    background: var(--md-sys-color-background);
}

body {
    margin: 0;
    background: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    font-family: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: var(--md-sys-typescale-body-large-size);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: var(--md-sys-color-primary);
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--md-sys-color-on-surface);
    font-weight: 500;
}

code,
pre,
kbd,
samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

:focus-visible {
    outline: 3px solid rgba(43, 99, 181, 0.22);
    outline-offset: 2px;
}

::selection {
    background: rgba(43, 99, 181, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
