@media -moz-pref("userChrome.theme-material") {
  :root {
    --md-sys-color-primary: #824c76;
    --md-sys-color-surface-tint: #824c76;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #ffd7f1;
    --md-sys-color-on-primary-container: #35082f;
    --md-sys-color-secondary: #6f5867;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #f9daed;
    --md-sys-color-on-secondary-container: #271623;
    --md-sys-color-tertiary: #815342;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #ffdbcf;
    --md-sys-color-on-tertiary-container: #321206;
    --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: #fff7f9;
    --md-sys-color-on-background: #201a1e;
    --md-sys-color-surface: #fff7f9;
    --md-sys-color-on-surface: #201a1e;
    --md-sys-color-surface-variant: #efdee6;
    --md-sys-color-on-surface-variant: #4e444a;
    --md-sys-color-outline: #80747b;
    --md-sys-color-outline-variant: #d2c2ca;
    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;
    --md-sys-color-inverse-surface: #362e33;
    --md-sys-color-inverse-on-surface: #fbedf3;
    --md-sys-color-inverse-primary: #f4b2e2;
    --md-sys-color-primary-fixed: #ffd7f1;
    --md-sys-color-on-primary-fixed: #35082f;
    --md-sys-color-primary-fixed-dim: #f4b2e2;
    --md-sys-color-on-primary-fixed-variant: #67355d;
    --md-sys-color-secondary-fixed: #f9daed;
    --md-sys-color-on-secondary-fixed: #271623;
    --md-sys-color-secondary-fixed-dim: #dcbed1;
    --md-sys-color-on-secondary-fixed-variant: #56404f;
    --md-sys-color-tertiary-fixed: #ffdbcf;
    --md-sys-color-on-tertiary-fixed: #321206;
    --md-sys-color-tertiary-fixed-dim: #f5b9a4;
    --md-sys-color-on-tertiary-fixed-variant: #663c2c;
    --md-sys-color-surface-dim: #e3d7dc;
    --md-sys-color-surface-bright: #fff7f9;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #fef0f6;
    --md-sys-color-surface-container: #fff7f9;
    --md-sys-color-surface-container-high: #fff7f9;
    --md-sys-color-surface-container-highest: #fff7f9;

    --m3-radius: 12px;
    --m3-radius-sm: 10px;
    --m3-elev-0: none;
    --m3-elev-1: 0 1px 2px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
    --m3-elev-2: 0 2px 6px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);

    --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: #f4b2e2;
    --md-sys-color-surface-tint: #f4b2e2;
    --md-sys-color-on-primary: #4e1e45;
    --md-sys-color-primary-container: #67355d;
    --md-sys-color-on-primary-container: #ffd7f1;
    --md-sys-color-secondary: #dcbed1;
    --md-sys-color-on-secondary: #3e2a39;
    --md-sys-color-secondary-container: #56404f;
    --md-sys-color-on-secondary-container: #f9daed;
    --md-sys-color-tertiary: #f5b9a4;
    --md-sys-color-on-tertiary: #4c2618;
    --md-sys-color-tertiary-container: #663c2c;
    --md-sys-color-on-tertiary-container: #ffdbcf;
    --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: #181216;
    --md-sys-color-on-background: #ecdfe5;
    --md-sys-color-surface: #181216;
    --md-sys-color-on-surface: #ecdfe5;
    --md-sys-color-surface-variant: #4e444a;
    --md-sys-color-on-surface-variant: #d2c2ca;
    --md-sys-color-outline: #9b8d95;
    --md-sys-color-outline-variant: #4e444a;
    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;
    --md-sys-color-inverse-surface: #ecdfe5;
    --md-sys-color-inverse-on-surface: #362e33;
    --md-sys-color-inverse-primary: #824c76;
    --md-sys-color-primary-fixed: #ffd7f1;
    --md-sys-color-on-primary-fixed: #35082f;
    --md-sys-color-primary-fixed-dim: #f4b2e2;
    --md-sys-color-on-primary-fixed-variant: #67355d;
    --md-sys-color-secondary-fixed: #f9daed;
    --md-sys-color-on-secondary-fixed: #271623;
    --md-sys-color-secondary-fixed-dim: #dcbed1;
    --md-sys-color-on-secondary-fixed-variant: #56404f;
    --md-sys-color-tertiary-fixed: #ffdbcf;
    --md-sys-color-on-tertiary-fixed: #321206;
    --md-sys-color-tertiary-fixed-dim: #f5b9a4;
    --md-sys-color-on-tertiary-fixed-variant: #663c2c;
    --md-sys-color-surface-dim: #181216;
    --md-sys-color-surface-bright: #3f373c;
    --md-sys-color-surface-container-lowest: #120c10;
    --md-sys-color-surface-container-low: #201a1e;
    --md-sys-color-surface-container: #241e22;
    --md-sys-color-surface-container-high: #2f282c;
    --md-sys-color-surface-container-highest: #3a3337;

    --m3-elev-1: 0 1px 2px rgba(0,0,0,.50), 0 1px 3px rgba(0,0,0,.35);
    --m3-elev-2: 0 4px 10px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.35);

    --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;
}