@media -moz-pref("userChrome.theme-material") {
  :root {
    --md-sys-color-primary: #565f6a;
    --md-sys-color-surface-tint: #565f6a;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #dae3f1;
    --md-sys-color-on-primary-container: #131c26;
    --md-sys-color-secondary: #5a5f66;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #dee3eb;
    --md-sys-color-on-secondary-container: #171c22;
    --md-sys-color-tertiary: #51606f;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #d5e4f7;
    --md-sys-color-on-tertiary-container: #0e1d2a;
    --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: #fbf9fa;
    --md-sys-color-on-background: #1b1c1d;
    --md-sys-color-surface: #fbf9fa;
    --md-sys-color-on-surface: #1b1c1d;
    --md-sys-color-surface-variant: #e4e2e3;
    --md-sys-color-on-surface-variant: #474748;
    --md-sys-color-outline: #777778;
    --md-sys-color-outline-variant: #c8c6c7;
    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;
    --md-sys-color-inverse-surface: #303031;
    --md-sys-color-inverse-on-surface: #f2f0f1;
    --md-sys-color-inverse-primary: #bec7d4;
    --md-sys-color-primary-fixed: #dae3f1;
    --md-sys-color-on-primary-fixed: #131c26;
    --md-sys-color-primary-fixed-dim: #bec7d4;
    --md-sys-color-on-primary-fixed-variant: #3e4852;
    --md-sys-color-secondary-fixed: #dee3eb;
    --md-sys-color-on-secondary-fixed: #171c22;
    --md-sys-color-secondary-fixed-dim: #c2c7cf;
    --md-sys-color-on-secondary-fixed-variant: #42474e;
    --md-sys-color-tertiary-fixed: #d5e4f7;
    --md-sys-color-on-tertiary-fixed: #0e1d2a;
    --md-sys-color-tertiary-fixed-dim: #b9c8da;
    --md-sys-color-on-tertiary-fixed-variant: #3a4857;
    --md-sys-color-surface-dim: #dbd9da;
    --md-sys-color-surface-bright: #fbf9fa;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f5f3f4;
    --md-sys-color-surface-container: #fbf9fa;
    --md-sys-color-surface-container-high: #fbf9fa;
    --md-sys-color-surface-container-highest: #fbf9fa;

    --m3-radius: 12px;
    --m3-radius-sm: 10px;
    --m3-elev-0: none;
    --m3-elev-1: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 8%, transparent), 0 1px 3px color-mix(in srgb, var(--md-sys-color-shadow) 6%, transparent);
    --m3-elev-2: 0 2px 6px color-mix(in srgb, var(--md-sys-color-shadow) 10%, transparent), 0 1px 3px color-mix(in srgb, var(--md-sys-color-shadow) 6%, transparent);
    --m3-elev-3: 0 11px 7px color-mix(in srgb, var(--md-sys-color-shadow) 19%, transparent), 0 13px 25px color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent);
    --m3-elev-4: 0 14px 12px color-mix(in srgb, var(--md-sys-color-shadow) 17%, transparent), 0 20px 40px color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent);
    --m3-elev-5: 0 17px 17px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent), 0 27px 55px color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent);

    --tab-height: 34px;
    --urlbar-height: 38px;

    --state-hover: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
    --state-press: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);

    --focus-ring: 0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 70%, transparent);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #bec7d4;
    --md-sys-color-surface-tint: #bec7d4;
    --md-sys-color-on-primary: #28313b;
    --md-sys-color-primary-container: #3e4852;
    --md-sys-color-on-primary-container: #dae3f1;
    --md-sys-color-secondary: #c2c7cf;
    --md-sys-color-on-secondary: #2c3137;
    --md-sys-color-secondary-container: #42474e;
    --md-sys-color-on-secondary-container: #dee3eb;
    --md-sys-color-tertiary: #b9c8da;
    --md-sys-color-on-tertiary: #233240;
    --md-sys-color-tertiary-container: #3a4857;
    --md-sys-color-on-tertiary-container: #d5e4f7;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-background: #131314;
    --md-sys-color-on-background: #e4e2e3;
    --md-sys-color-surface: #131314;
    --md-sys-color-on-surface: #e4e2e3;
    --md-sys-color-surface-variant: #474748;
    --md-sys-color-on-surface-variant: #c8c6c7;
    --md-sys-color-outline: #919091;
    --md-sys-color-outline-variant: #474748;
    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;
    --md-sys-color-inverse-surface: #e4e2e3;
    --md-sys-color-inverse-on-surface: #303031;
    --md-sys-color-inverse-primary: #565f6a;
    --md-sys-color-primary-fixed: #dae3f1;
    --md-sys-color-on-primary-fixed: #131c26;
    --md-sys-color-primary-fixed-dim: #bec7d4;
    --md-sys-color-on-primary-fixed-variant: #3e4852;
    --md-sys-color-secondary-fixed: #dee3eb;
    --md-sys-color-on-secondary-fixed: #171c22;
    --md-sys-color-secondary-fixed-dim: #c2c7cf;
    --md-sys-color-on-secondary-fixed-variant: #42474e;
    --md-sys-color-tertiary-fixed: #d5e4f7;
    --md-sys-color-on-tertiary-fixed: #0e1d2a;
    --md-sys-color-tertiary-fixed-dim: #b9c8da;
    --md-sys-color-on-tertiary-fixed-variant: #3a4857;
    --md-sys-color-surface-dim: #131314;
    --md-sys-color-surface-bright: #39393a;
    --md-sys-color-surface-container-lowest: #0e0e0f;
    --md-sys-color-surface-container-low: #1b1c1d;
    --md-sys-color-surface-container: #1f2021;
    --md-sys-color-surface-container-high: #2a2a2b;
    --md-sys-color-surface-container-highest: #343536;

    --m3-elev-1: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 50%, transparent), 0 1px 3px color-mix(in srgb, var(--md-sys-color-shadow) 35%, transparent);
    --m3-elev-2: 0 4px 10px color-mix(in srgb, var(--md-sys-color-shadow) 55%, transparent), 0 1px 3px color-mix(in srgb, var(--md-sys-color-shadow) 35%, transparent);
    --m3-elev-3: 0 11px 7px color-mix(in srgb, var(--md-sys-color-shadow) 45%, transparent), 0 13px 25px color-mix(in srgb, var(--md-sys-color-shadow) 55%, transparent);
    --m3-elev-4: 0 14px 12px color-mix(in srgb, var(--md-sys-color-shadow) 42%, transparent), 0 20px 40px color-mix(in srgb, var(--md-sys-color-shadow) 55%, transparent);
    --m3-elev-5: 0 17px 17px color-mix(in srgb, var(--md-sys-color-shadow) 40%, transparent), 0 27px 55px color-mix(in srgb, var(--md-sys-color-shadow) 55%, transparent);

    --state-hover: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent);
    --state-press: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
  }
}

/* idk if this even works, but the suggestion in the material updated readme bricks symbols no matter how many fallbacks I add */
:root {
  font-family: system-ui, "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}