/* ==UserStyle==
@name ChatGPT Catppuccin
@namespace github.com/catppuccin/userstyles/styles/chatgpt
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chatgpt
@version 2025.06.13
@updateURL https://github.com/keonly/userstyles/raw/main/styles/chatgpt/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Achatgpt
@description Soothing pastel theme for ChatGPT
@author Catppuccin
@license MIT

@preprocessor  less
@var select lightFlavor "Light Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray*"]
==/UserStyle== */

@-moz-document domain("chatgpt.com") {
  @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css");

  :root.light {
    #catppuccin(@lightFlavor);
  }

  :root.dark {
    #catppuccin(@darkFlavor);
  }

  #catppuccin(@flavor) {
    @rosewater: @catppuccin[@@flavor][@rosewater];
    @flamingo: @catppuccin[@@flavor][@flamingo];
    @pink: @catppuccin[@@flavor][@pink];
    @mauve: @catppuccin[@@flavor][@mauve];
    @red: @catppuccin[@@flavor][@red];
    @maroon: @catppuccin[@@flavor][@maroon];
    @peach: @catppuccin[@@flavor][@peach];
    @yellow: @catppuccin[@@flavor][@yellow];
    @green: @catppuccin[@@flavor][@green];
    @teal: @catppuccin[@@flavor][@teal];
    @sky: @catppuccin[@@flavor][@sky];
    @sapphire: @catppuccin[@@flavor][@sapphire];
    @blue: @catppuccin[@@flavor][@blue];
    @lavender: @catppuccin[@@flavor][@lavender];
    @text: @catppuccin[@@flavor][@text];
    @subtext1: @catppuccin[@@flavor][@subtext1];
    @subtext0: @catppuccin[@@flavor][@subtext0];
    @overlay2: @catppuccin[@@flavor][@overlay2];
    @overlay1: @catppuccin[@@flavor][@overlay1];
    @overlay0: @catppuccin[@@flavor][@overlay0];
    @surface2: @catppuccin[@@flavor][@surface2];
    @surface1: @catppuccin[@@flavor][@surface1];
    @surface0: @catppuccin[@@flavor][@surface0];
    @base: @catppuccin[@@flavor][@base];
    @mantle: @catppuccin[@@flavor][@mantle];
    @crust: @catppuccin[@@flavor][@crust];
    @accent: @catppuccin[@@flavor][@@accentColor];

    --ctp-rosewater: @rosewater;
    --ctp-flamingo: @flamingo;
    --ctp-pink: @pink;
    --ctp-mauve: @mauve;
    --ctp-red: @red;
    --ctp-maroon: @maroon;
    --ctp-peach: @peach;
    --ctp-yellow: @yellow;
    --ctp-green: @green;
    --ctp-teal: @teal;
    --ctp-sky: @sky;
    --ctp-sapphire: @sapphire;
    --ctp-blue: @blue;
    --ctp-lavender: @lavender;
    --ctp-text: @text;
    --ctp-subtext1: @subtext1;
    --ctp-subtext0: @subtext0;
    --ctp-overlay2: @overlay2;
    --ctp-overlay1: @overlay1;
    --ctp-overlay0: @overlay0;
    --ctp-surface2: @surface2;
    --ctp-surface1: @surface1;
    --ctp-surface0: @surface0;
    --ctp-base: @base;
    --ctp-mantle: @mantle;
    --ctp-crust: @crust;

    color-scheme: if(@flavor = latte, light, dark);

    ::selection {
      background-color: fade(@accent, 30%);
    }

    input,
    textarea {
      &::placeholder {
        color: @subtext0 !important;
      }
    }

    code.hljs {
      background: none !important;
    }
    pre {
      .bg-token-main-surface-secondary {
        background-color: @surface0;
      }
      .bg-gray-950 {
        background-color: @crust;
      }
      .text-token-text-secondary {
        color: @subtext0;
      }
    }

    code[class*="language-"] {
      color: @text;
    }

    .dark\:bg-token-main-surface-secondary:is(.dark *) {
      background-color: @surface0;
    }

    .dark\:bg-gray-950:is(.dark *) {
      background-color: @mantle;
    }

    color: @text;

    @white: if(@flavor = latte, @crust, @text);
    @black: if(@flavor = latte, @text, @crust);
    --white: @white;
    --black: @black;

    & when not(@flavor = latte) {
      --gray-50: lighten(mix(@text, @subtext0), 5%);
      --gray-100: @text;
      --gray-200: @subtext1;
      --gray-300: @overlay2;
      --gray-400: @overlay0;
      --gray-500: @surface2;
      --gray-600: @surface1;
      --gray-700: @surface0;
      --gray-750: @surface0;
      --gray-800: @base;
      --gray-900: @mantle;
      --gray-950: @crust;
      --brand-purple: @accent;
      --bg-primary: var(--gray-800) !important;
      --text-primary: var(--gray-100) !important;
      --text-secondary: var(--gray-200) !important;
      --text-tertiary: var(--gray-300) !important;
      --text-quaternary: var(--gray-500) !important;
      --main-surface-primary: var(--gray-800) !important;
      --main-surface-secondary: var(--gray-700) !important;
      --main-surface-tertiary: var(--gray-600) !important;
      --message-surface: var(--gray-700) !important;
      --sidebar-surface-primary: var(--gray-900);
      --sidebar-surface-secondary: var(--gray-800);
      --sidebar-surface-tertiary: var(--gray-700);
      --bg-elevated-secondary: var(--gray-900);
      .popover,
      .dark,
      .dark .popover,
      .dark.popover,
      .popover .dark {
        --main-surface-primary: var(--gray-700) !important;
        --main-surface-secondary: var(--gray-600) !important;
        --main-surface-tertiary: var(--gray-500) !important;
        --text-primary: var(--white) !important;
        --text-secondary: var(--gray-200) !important;
        --text-tertiary: var(--gray-300) !important;
      }
    }
    & when (@flavor = latte) {
      --gray-50: @crust;
      --gray-100: @mantle;
      --gray-200: @base;
      --gray-300: @surface0;
      --gray-400: @surface1;
      --gray-500: @surface2;
      --gray-600: @overlay0;
      --gray-700: @overlay1;
      --gray-800: @subtext0;
      --gray-900: @subtext1;
      --gray-950: @text;
      --brand-purple: @accent;
      --bg-primary: var(--gray-200) !important;
      --text-primary: var(--gray-950);
      --text-secondary: var(--gray-600);
      --text-tertiary: var(--gray-400);
      --text-quaternary: var(--gray-300);
      --main-surface-primary: var(--gray-200);
      --main-surface-secondary: var(--gray-100);
      --main-surface-tertiary: var(--gray-50);
      --message-surface: var(--gray-100) !important;
      --sidebar-surface-primary: var(--gray-100);
      --sidebar-surface-secondary: var(--gray-200);
      --sidebar-surface-tertiary: var(--gray-300);
      --bg-elevated-secondary: var(--gray-100);
      .popover,
      .dark .popover,
      .dark.popover,
      .popover .dark {
        --main-surface-primary: var(--gray-200) !important;
        --main-surface-secondary: var(--gray-100) !important;
        --main-surface-tertiary: var(--gray-50) !important;
        --text-primary: var(--gray-950) !important;
        --text-secondary: var(--gray-600) !important;
        --text-tertiary: var(--gray-500) !important;
        --interactive-bg-secondary-hover: var(--gray-600) !important;
      }
    }

    --border-light: fade(@text, 10%);
    --border-medium: fade(@text, 15%);
    --border-heavy: fade(@text, 20%);
    --border-xheavy: fade(@text, 25%);
    --link: @accent;
    --link-hover: if(
      @flavor = latte,
      lighten(@accent, 10%),
      darken(@accent, 10%)
    );

    *:focus {
      --tw-ring-offset-color: @base;
      --tw-ring-color: @accent;
    }

    /* ChatGPT logo */
    [style*="background-color: rgb(25, 195, 125);"] {
      background-color: @green !important;
      color: @base !important;
    }

    /* Input */

    select {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="@{overlay2}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m6 8 4 4 4-4"/></svg>'
      );
      background-image: url("data:image/svg+xml;@{svg}");
    }

    [multiple],
    [type="date"],
    [type="datetime-local"],
    [type="email"],
    [type="month"],
    [type="number"],
    [type="password"],
    [type="search"],
    [type="tel"],
    [type="text"],
    [type="time"],
    [type="url"],
    [type="week"],
    select,
    textarea {
      background-color: @base;
      border-color: @overlay2;
    }

    [type="checkbox"],
    [type="radio"] {
      background-color: @base;
      border-color: @overlay2;
      color: @accent;
    }

    .form-input,
    .form-multiselect,
    .form-select,
    .form-textarea {
      background-color: @base;
      border-color: @overlay2;
    }

    .form-input:focus,
    .form-multiselect:focus,
    .form-select:focus,
    .form-textarea:focus {
      border-color: @accent;
    }

    .form-input::placeholder,
    .form-textarea::placeholder {
      color: @overlay2;
    }

    /* Buttons */

    .btn-primary,
    .btn-green {
      background-color: @accent;
      color: @base;

      &:hover {
        background-color: darken(@accent, 10%);
      }

      &:focus-visible {
        --tw-ring-color: darken(@accent, 10%) !important;
      }
    }

    .btn-danger {
      background-color: @red;
      color: @base;

      &:hover:not(:disabled) {
        background-color: darken(@red, 10%);
      }

      &.focus-visible,
      &:focus-visible {
        --tw-ring-color: darken(@red, 10%) !important;
      }
    }

    .btn-danger-outline {
      border-color: @red;
      color: @red;

      &.focus-visible,
      &:focus-visible {
        --tw-ring-color: lighten(@red, 10%) !important;
      }
    }

    .btn-neutral {
      &.focus-visible,
      &:focus-visible {
        --tw-ring-color: @overlay0 !important;
      }
    }

    .btn-dark {
      background-color: @surface0;
      border-color: @overlay0;
      color: @text;

      &:hover {
        background-color: @surface1;
      }
    }

    .btn-light {
      background-color: @overlay1;
      color: @black;

      &:hover {
        background-color: @overlay0;
      }
    }

    .btn-disabled,
    .btn-disabled:hover {
      background-color: @text;
    }

    /* Borders */

    .border-black,
    .border-black\/10,
    .border-black\/20,
    .border-black\/30,
    .border-black\/5 {
      border-color: var(--border-light);
    }

    .border-gray-100 {
      border-color: var(--gray-100);
    }

    .border-gray-200 {
      border-color: var(--gray-200);
    }

    .border-gray-300 {
      border-color: var(--gray-300);
    }

    .border-gray-400 {
      border-color: var(--gray-400);
    }

    .border-gray-500 {
      border-color: var(--gray-500);
    }

    .border-gray-700 {
      border-color: var(--gray-700);
    }

    .border-gray-950 {
      border-color: var(--gray-950);
    }

    .border-green-500 {
      border-color: lighten(@green, 10%);
    }

    .border-green-600 {
      border-color: @accent;
    }

    .border-orange-400 {
      border-color: lighten(mix(@red, @yellow), 10%);
    }

    .border-orange-500 {
      border-color: mix(@red, @yellow);
    }

    .border-red-500 {
      border-color: darken(@red, 10%);
    }

    .border-white {
      border-color: @white;
    }

    .border-white\/20 {
      border-color: fade(@white, 20%);
    }

    .border-t-[\#0077FF] {
      border-top-color: @blue;
    }

    /* Backgrounds */
    .\!bg-brand-purple {
      background-color: @accent !important;
    }

    .\!bg-gray-200 {
      background-color: var(--gray-200) !important;
    }

    .btn-blue {
      background-color: @blue;
      color: @crust;

      &:hover {
        background-color: darken(@blue, 5%);
      }
    }

    /* Main message input box, popup menus, and dropdowns */
    .bg-\[\#303030\],
    .dark\:bg-\[\#303030\],
    .dark\:bg-\[\#353535\] {
      background-color: @surface0;
      &.dark when (@flavor = latte) {
        background-color: @subtext0;
      }
    }

    .bg-[\#0077FF],
    .bg-\[\#3C46FF\],
    .bg-[\#3C46FF],
    .bg-[\#4046EC] {
      background-color: @blue;
    }

    .hover\:bg-\[\#0000FF\]:hover {
      background-color: darken(@blue, 5%);
    }

    .bg-[\#10A37F] {
      background-color: @green;
    }

    .bg-[\#B161FD] {
      background-color: @accent;
    }

    .bg-[\#F8CA27] {
      background-color: @yellow;
    }

    .bg-[\#FF5588] {
      background-color: mix(@red, @pink);
    }

    .bg-[\#FF6E3C] {
      background-color: saturate(mix(@red, @yellow), 10%);
    }
    .dark\:radix-highlighted\:bg-\[\#2E2F33\][data-highlighted] {
      background-color: @surface0;
    }

    .bg-black {
      background-color: @black;
    }

    .bg-black\/20 {
      background-color: fade(@black, 20%);
    }

    .bg-black\/5 {
      background-color: fade(@black, 5%);
    }

    .bg-black\/50 {
      background-color: fade(@black, 50%);
    }

    .bg-black\/90 {
      background-color: fade(@black, 90%);
    }

    .bg-black\/\[\.04\] {
      background-color: fade(@black, 4%);
    }

    .bg-black\/\[\.08\] {
      background-color: fade(@black, 8%);
    }

    .bg-black\/\[\.12\] {
      background-color: fade(@black, 12%);
    }

    .bg-blue-100 {
      background-color: lighten(@blue, 30%);
    }

    .bg-blue-200 {
      background-color: lighten(@blue, 20%);
    }

    .bg-blue-300 {
      background-color: lighten(@blue, 10%);
    }

    .bg-blue-400 {
      background-color: @blue;
    }

    .bg-blue-500 {
      background-color: darken(@blue, 5%);
    }

    .bg-blue-700 {
      background-color: darken(@blue, 10%);
    }

    .hover\:bg-blue-700:hover {
      background-color: darken(@blue, 15%);
    }

    .bg-brand-blue-800 {
      background-color: darken(@blue, 10%);
    }

    .bg-blue-950 {
      background-color: darken(@blue, 30%);
    }

    .checked\:bg-blue-600:checked {
      background-color: @accent;
    }

    .bg-brand-green {
      background-color: lighten(@green, 10%);
    }

    .bg-brand-green\/20 {
      background-color: fade(lighten(@green, 10%), 20%);
    }

    .bg-brand-green\/40 {
      background-color: fade(lighten(@green, 10%), 40%);
    }

    .bg-brand-purple {
      background-color: @accent;
    }

    .bg-gray-100 {
      background-color: var(--gray-100);
    }

    .bg-gray-200 {
      background-color: var(--gray-200);
    }

    .bg-gray-300 {
      background-color: var(--gray-300);
    }

    .bg-gray-400 {
      background-color: var(--gray-400);
    }

    .bg-gray-50 {
      background-color: var(--gray-50);
    }

    .bg-gray-500 {
      background-color: var(--gray-500);
    }

    .bg-gray-600 {
      background-color: var(--gray-600);
    }

    .bg-gray-700 {
      background-color: var(--gray-700);
    }

    .bg-gray-900 {
      background-color: var(--gray-900);
    }

    .bg-gray-950 {
      background-color: var(--gray-950);
    }

    .bg-green-100 {
      background-color: lighten(@green, 30%);
    }

    .bg-green-200 {
      background-color: lighten(@green, 20%);
    }

    .bg-green-500 {
      background-color: lighten(@green, 10%);
    }

    .bg-green-500\/10 {
      background-color: fade(lighten(@green, 10%), 10%);
    }

    .bg-green-600 {
      background-color: fade(@accent, 10%);
    }

    .bg-orange-500 {
      background-color: mix(@yellow, @red);
    }

    .bg-orange-500\/10 {
      background-color: fade(mix(@yellow, @red), 10%);
    }

    .bg-red-100 {
      background-color: fade(lighten(@red, 10%), 30%);
    }

    .bg-red-200 {
      background-color: lighten(@red, 20%);
    }

    .bg-red-500 {
      background-color: @red;
    }

    .bg-red-500\/10 {
      background-color: fade(@red, 10%);
    }

    .bg-red-600 {
      background-color: lighten(@red, 10%);
    }

    .bg-white {
      background-color: @white;
    }

    .bg-white\/20 {
      background-color: fade(@white, 20%);
    }

    .bg-white\/25 {
      background-color: fade(@white, 25%);
    }

    .bg-yellow-100 {
      background-color: lighten(@yellow, 20%);
    }

    .bg-yellow-200 {
      background-color: lighten(@yellow, 10%);
    }

    .bg-yellow-400 {
      background-color: @yellow;
    }

    .bg-yellow-500 {
      background-color: darken(@yellow, 10%);
    }

    .radix-state-checked\:\!bg-green-600[data-state="checked"] {
      background-color: @accent !important;
    }

    .dark\:radix-state-checked\:border-green-600[data-state="checked"]:is(
      .dark *
    ) {
      border-color: @accent;
    }

    [class*="bg-transparent"] {
      background-color: transparent;
    }

    /* Gradients */

    .from-white {
      --tw-gradient-from: @base var(--tw-gradient-from-position);
    }

    /* Fill/stroke */

    .fill-yellow-500 {
      fill: @yellow;
    }

    .stroke-black {
      stroke: @black;
    }

    .stroke-brand-purple\/25 {
      stroke: fade(@accent, 25%);
    }

    .stroke-gray-400 {
      stroke: @subtext0;
    }

    /* Text */

    .\!text-black {
      color: @black !important;
    }

    .text-\[\#FE7600\] {
      color: mix(@yellow, @red);
    }

    .text-\[\#fff\] {
      color: @base;
    }

    .text-black {
      color: @black;
    }

    .text-black\/60 {
      color: fade(@black, 60%);
    }

    .text-black\/70 {
      color: fade(@black, 70%);
    }

    .text-blue-500 {
      color: lighten(@blue, 10%);
    }

    .text-blue-600 {
      color: @blue;
    }

    .text-brand-blue-800 {
      color: @blue;
    }

    .text-brand-purple {
      color: @accent;
    }

    .text-gray-100 {
      color: var(--gray-100);
    }

    .text-gray-300 {
      color: var(--gray-300);
    }

    .text-gray-400 {
      color: var(--gray-400);
    }

    .text-gray-500 {
      color: var(--gray-500);
    }

    .text-gray-600 {
      color: var(--gray-600);
    }

    .text-gray-700 {
      color: var(--gray-700);
    }

    .text-gray-800 {
      color: var(--gray-800);
    }

    .text-gray-900 {
      color: var(--gray-900);
    }

    .text-green-500 {
      color: lighten(@green, 10%);
    }

    .text-green-600 {
      color: @accent;
    }

    .text-green-700 {
      color: darken(@green, 10%);
    }

    .text-green-800 {
      color: darken(@green, 20%);
    }

    .text-green-900 {
      color: darken(@green, 30%);
    }

    .text-orange-300 {
      color: lighten(mix(@yellow, @red), 15%);
    }

    .text-orange-400 {
      color: lighten(mix(@yellow, @red), 10%);
    }

    .text-orange-500 {
      color: mix(@yellow, @red);
    }

    .text-red-500 {
      color: @red;
    }

    .text-red-600 {
      color: lighten(@red, 10%);
    }

    .text-red-700 {
      color: @red;
    }

    .text-red-800 {
      color: darken(@red, 10%);
    }

    .text-token-text-error {
      --text-error: @red;
    }

    .text-white {
      color: @white;
    }

    .text-white\/25 {
      color: fade(@white, 25%);
    }

    .text-white\/50 {
      color: fade(@white, 50%);
    }

    .text-white\/80 {
      color: fade(@white, 80%);
    }

    .text-yellow-500 {
      color: @yellow;
    }

    .text-yellow-700 {
      color: darken(@yellow, 10%);
    }

    .text-yellow-800 {
      color: darken(@yellow, 20%);
    }

    .text-yellow-900 {
      color: darken(@yellow, 30%);
    }

    /* Dark mode overrides */
    /* stylelint-disable-next-line no-duplicate-selectors */
    & when not(@flavor = latte) {
      .dark\:bg-black {
        background-color: @black;
      }

      .dark\:bg-white {
        background-color: @white;
      }

      .dark\:bg-gray-700 {
        background-color: var(--gray-700);
      }

      /* "Was this response better or worse" dialog button hover */
      .dark\:hover\:bg-gray-800:hover {
        background-color: transparent;
      }

      .dark\:text-white {
        color: @white;
      }

      .dark\:text-black {
        color: @black;
      }

      /* Chat suggestions on new chat page */
      .dark\:text-gray-500 {
        color: var(--gray-300);
      }

      .dark\:text-\[\#D292FF\] {
        color: @mauve;
      }

      .dark\:focus\:border-white:focus {
        border-color: @text;
      }

      .dark\:border-gray-700 {
        border-color: var(--gray-700);
      }

      /* Up arrow send message button */
      .disabled\:dark\:bg-token-text-quaternary:is(.dark *):disabled {
        background-color: var(--text-quaternary);
      }
      .dark\:disabled\:text-token-main-surface-secondary:disabled:is(.dark *) {
        color: var(--main-surface-secondary);
      }
    }

    /* Other */

    .ring-black {
      --tw-ring-color: @black;
    }

    .ring-black\/10 {
      --tw-ring-color: fade(@black, 10%);
    }

    .ring-white {
      --tw-ring-color: @base;
    }

    .ring-offset-black {
      --tw-ring-offset-color: @base;
    }

    /* Invalid LaTeX expressions */
    [style*="color: rgb(204, 0, 0)"] {
      color: @red;
    }

    /* Circle around OpenAI logo in center of chat */
    .gizmo-shadow-stroke::after {
      --tw-shadow: inset 0 0 0 1px @surface0;
    }

    .katex-error {
      color: @red !important;
    }

    [style="background-color: rgb(0, 0, 46);"],
    [style="background-color: rgb(255, 255, 219);"] {
      background-color: @crust !important;
    }

    /* Icon colors for chat suggestion icons on new chat page */
    svg[style="color: rgb(203, 139, 208);"] {
      color: @pink !important;
    }
    svg[style="color: rgb(226, 197, 65);"] {
      color: @yellow !important;
    }
    svg[style="color: rgb(118, 208, 235);"] {
      color: @teal !important;
    }
    svg[style="color: rgb(237, 98, 98);"] {
      color: @red !important;
    }
  }
}

@-moz-document domain("auth.openai.com") {
  :root {
    @media (prefers-color-scheme: light) {
      #catppuccin(@lightFlavor);
    }
    @media (prefers-color-scheme: dark) {
      #catppuccin(@darkFlavor);
    }
  }

  #catppuccin(@flavor) {
    @rosewater: @catppuccin[@@flavor][@rosewater];
    @flamingo: @catppuccin[@@flavor][@flamingo];
    @pink: @catppuccin[@@flavor][@pink];
    @mauve: @catppuccin[@@flavor][@mauve];
    @red: @catppuccin[@@flavor][@red];
    @maroon: @catppuccin[@@flavor][@maroon];
    @peach: @catppuccin[@@flavor][@peach];
    @yellow: @catppuccin[@@flavor][@yellow];
    @green: @catppuccin[@@flavor][@green];
    @teal: @catppuccin[@@flavor][@teal];
    @sky: @catppuccin[@@flavor][@sky];
    @sapphire: @catppuccin[@@flavor][@sapphire];
    @blue: @catppuccin[@@flavor][@blue];
    @lavender: @catppuccin[@@flavor][@lavender];
    @text: @catppuccin[@@flavor][@text];
    @subtext1: @catppuccin[@@flavor][@subtext1];
    @subtext0: @catppuccin[@@flavor][@subtext0];
    @overlay2: @catppuccin[@@flavor][@overlay2];
    @overlay1: @catppuccin[@@flavor][@overlay1];
    @overlay0: @catppuccin[@@flavor][@overlay0];
    @surface2: @catppuccin[@@flavor][@surface2];
    @surface1: @catppuccin[@@flavor][@surface1];
    @surface0: @catppuccin[@@flavor][@surface0];
    @base: @catppuccin[@@flavor][@base];
    @mantle: @catppuccin[@@flavor][@mantle];
    @crust: @catppuccin[@@flavor][@crust];
    @accent: @catppuccin[@@flavor][@@accentColor];

    color-scheme: if(@flavor = latte, light, dark);

    ::selection {
      background-color: fade(@accent, 30%);
    }

    input,
    textarea {
      &::placeholder {
        color: @subtext0 !important;
      }
    }

    color: @text;
    background-color: @base;
    caret-color: @text;

    a {
      color: @accent;
    }

    body,
    .oai-header,
    .oai-footer,
    .login-container,
    .main-container {
      background-color: @base;
    }

    .oai-header img {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="@{text}"><path d="M29.293 13.167a7.77 7.77 0 0 0-.668-6.388 7.87 7.87 0 0 0-8.472-3.774A7.77 7.77 0 0 0 14.288.39a7.87 7.87 0 0 0-7.504 5.446 7.78 7.78 0 0 0-5.201 3.773 7.87 7.87 0 0 0 .968 9.223 7.78 7.78 0 0 0 .668 6.388 7.87 7.87 0 0 0 8.473 3.774 7.78 7.78 0 0 0 5.866 2.615 7.87 7.87 0 0 0 7.506-5.449 7.78 7.78 0 0 0 5.2-3.773 7.87 7.87 0 0 0-.97-9.22M17.559 29.57a5.83 5.83 0 0 1-3.746-1.354c.048-.026.131-.071.185-.105l6.216-3.59a1.01 1.01 0 0 0 .511-.885v-8.765l2.627 1.517a.1.1 0 0 1 .052.072v7.258a5.86 5.86 0 0 1-5.846 5.85M4.989 24.2a5.83 5.83 0 0 1-.698-3.92c.047.028.126.077.185.11l6.216 3.59a1.01 1.01 0 0 0 1.021 0l7.59-4.382v3.034a.1.1 0 0 1-.038.08l-6.284 3.628a5.857 5.857 0 0 1-7.992-2.142M3.354 10.63A5.83 5.83 0 0 1 6.4 8.065l-.003.214v7.181a1.01 1.01 0 0 0 .51.884l7.589 4.382-2.627 1.517a.1.1 0 0 1-.089.008L5.495 18.62a5.857 5.857 0 0 1-2.141-7.99m21.587 5.024-7.59-4.382 2.628-1.516a.1.1 0 0 1 .088-.008l6.284 3.628a5.852 5.852 0 0 1-.904 10.558v-7.396a1.01 1.01 0 0 0-.507-.884m2.615-3.936-.184-.11-6.217-3.59a1.01 1.01 0 0 0-1.021 0L12.544 12.4V9.366a.1.1 0 0 1 .038-.08l6.283-3.625a5.851 5.851 0 0 1 8.691 6.059m-16.439 5.408-2.628-1.517a.1.1 0 0 1-.051-.072V8.281a5.851 5.851 0 0 1 9.594-4.492l-.184.105-6.217 3.59a1.01 1.01 0 0 0-.51.884zm1.428-3.078 3.38-1.952 3.381 1.951v3.902l-3.38 1.951-3.38-1.951z"/></svg>'
      );
      content: url("data:image/svg+xml,@{svg}");
      background-color: transparent;
    }

    .title {
      color: @text;
    }

    .email-input {
      background-color: @base;
      border-color: @surface0;
      color: @text;

      &:focus,
      &:valid {
        border-color: @accent;

        + .email-label {
          color: @accent;
          background-color: @base;
        }
      }
    }
    .email-label {
      background-color: @base;
      color: @subtext0;
    }

    .continue-btn {
      background-color: @accent;
      color: @base;
    }

    .divider-wrapper {
      &::before,
      &::after {
        border-bottom-color: @surface2;
      }
    }

    .social-btn {
      background-color: @mantle;
      border-color: @surface0;
      color: @text;
    }

    @orange: mix(@red, @yellow);

    img[alt="Google logo"] {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" width="20" height="20"><defs><path id="a" d="M18.542 8.333H10v3.542h4.917c-.459 2.25-2.375 3.542-4.917 3.542C7 15.417 4.583 13 4.583 10S7 4.583 10 4.583c1.292 0 2.458.458 3.375 1.208l2.667-2.667C14.417 1.708 12.333.833 10 .833 4.917.833.833 4.917.833 10S4.916 19.167 10 19.167c4.583 0 8.75-3.333 8.75-9.167 0-.542-.083-1.125-.208-1.667"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="@{orange}" d="M0 15.417V4.583L7.083 10z"/><path clip-path="url(#b)" fill="@{red}" d="M0 4.583 7.083 10 10 7.458l10-1.625V0H0z"/><path clip-path="url(#b)" fill="@{green}" d="m0 15.417 12.5-9.583 3.292.417L20 0v20H0z"/><path clip-path="url(#b)" fill="@{blue}" d="M20 20 7.083 10 5.416 8.75l14.583-4.167z"/></svg>'
      );
      content: url("data:image/svg+xml,@{svg}");
    }
    img[alt="Microsoft logo"] {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="@{orange}" d="M.952.952h8.571v8.571H.952z"/><path fill="@{sapphire}" d="M.952 10.476h8.571v8.571H.952z"/><path fill="@{green}" d="M10.476.952h8.571v8.571h-8.571z"/><path fill="@{yellow}" d="M10.476 10.476h8.571v8.571h-8.571z"/></svg>'
      );

      content: url("data:image/svg+xml,@{svg}");
    }
    img[alt="Apple logo"] {
      @svg: escape(
        '<svg width="20" xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 20 20"><path fill="@{text}" d="M17.691 15.324a10.3 10.3 0 0 1-1.025 1.842q-.81 1.152-1.32 1.595-.79.727-1.696.747-.652 0-1.567-.374-.916-.373-1.687-.373-.808 0-1.735.373-.928.376-1.499.394-.87.037-1.735-.767-.553-.482-1.381-1.652-.888-1.249-1.46-2.9-.613-1.783-.613-3.456 0-1.916.829-3.302.65-1.112 1.736-1.756c1.086-.644 1.505-.648 2.347-.662q.69.001 1.815.422 1.123.422 1.44.423.238 0 1.596-.499 1.283-.462 2.17-.385 2.407.193 3.609 1.9-2.151 1.305-2.129 3.647.02 1.825 1.321 3.032a4.4 4.4 0 0 0 1.32.866 15 15 0 0 1-.336.884M14.013.852q0 1.43-1.042 2.667c-.838.979-1.851 1.545-2.95 1.456a3 3 0 0 1-.022-.361c0-.915.398-1.894 1.106-2.695q.53-.608 1.347-1.011.816-.398 1.541-.436.02.191.02.381z"/></svg>'
      );
      content: url("data:image/svg+xml,@{svg}");
    }
  }
}

@-moz-document domain("auth0.openai.com") {
  @media (prefers-color-scheme: light) {
    :root {
      #catppuccin(@lightFlavor);
    }
  }

  @media (prefers-color-scheme: dark) {
    :root {
      #catppuccin(@darkFlavor);
    }
  }

  #catppuccin(@flavor) {
    @rosewater: @catppuccin[@@flavor][@rosewater];
    @flamingo: @catppuccin[@@flavor][@flamingo];
    @pink: @catppuccin[@@flavor][@pink];
    @mauve: @catppuccin[@@flavor][@mauve];
    @red: @catppuccin[@@flavor][@red];
    @maroon: @catppuccin[@@flavor][@maroon];
    @peach: @catppuccin[@@flavor][@peach];
    @yellow: @catppuccin[@@flavor][@yellow];
    @green: @catppuccin[@@flavor][@green];
    @teal: @catppuccin[@@flavor][@teal];
    @sky: @catppuccin[@@flavor][@sky];
    @sapphire: @catppuccin[@@flavor][@sapphire];
    @blue: @catppuccin[@@flavor][@blue];
    @lavender: @catppuccin[@@flavor][@lavender];
    @text: @catppuccin[@@flavor][@text];
    @subtext1: @catppuccin[@@flavor][@subtext1];
    @subtext0: @catppuccin[@@flavor][@subtext0];
    @overlay2: @catppuccin[@@flavor][@overlay2];
    @overlay1: @catppuccin[@@flavor][@overlay1];
    @overlay0: @catppuccin[@@flavor][@overlay0];
    @surface2: @catppuccin[@@flavor][@surface2];
    @surface1: @catppuccin[@@flavor][@surface1];
    @surface0: @catppuccin[@@flavor][@surface0];
    @base: @catppuccin[@@flavor][@base];
    @mantle: @catppuccin[@@flavor][@mantle];
    @crust: @catppuccin[@@flavor][@crust];
    @accent: @catppuccin[@@flavor][@@accentColor];

    color-scheme: if(@flavor = latte, light, dark);

    ::selection {
      background-color: fade(@accent, 30%);
    }

    --primary-color: @accent;
    --primary-color-no-override: @accent;
    --action-primary-color: @accent;
    --link-color: @accent;
    --page-background-color: @base;
    --info-color: @blue;
    --success-color: @green;
    --error-color: @red;
    --error-text-color: @text;
    --warning-color: @yellow;
    --button-font-color: @text;
    --widget-background-color: @base;
    --presentational-content-color: @overlay2;
    --gray-lightest: @base;
    --gray-light: @crust;
    --gray-mid: @surface0;
    --gray-mid-dark: @surface1;
    --gray-dark: @overlay2;
    --gray-darkest: @text;
    --gray-social-border: @surface0;

    ._button-login-password,
    ._button-login-id {
      background-color: @accent;
      color: @base;
    }

    .password-icon-tooltip {
      background-color: @text;

      &::before {
        border-top-color: @text;
      }
    }

    .oai-header svg {
      fill: @text;
    }

    @orange: mix(@red, @yellow);

    button > span {
      &[data-provider^="google"] {
        @svg: escape(
          '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"><defs><path id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="@{orange}" d="M0 37V11l17 13z"/><path clip-path="url(#b)" fill="@{red}" d="m0 11 17 13 7-6.1L48 14V0H0z"/><path clip-path="url(#b)" fill="@{green}" d="m0 37 30-23 7.9 1L48 0v48H0z"/><path clip-path="url(#b)" fill="@{blue}" d="M48 48 17 24l-4-3 35-10z"/></svg>'
        );
        background-image: url("data:image/svg+xml;charset=utf-8,@{svg}");
      }
      &[data-provider^="windowslive"] {
        @svg: escape(
          '<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21"><path fill="@{orange}" d="M1 1h9v9H1z"/><path fill="@{sapphire}" d="M1 11h9v9H1z"/><path fill="@{green}" d="M11 1h9v9h-9z"/><path fill="@{yellow}" d="M11 11h9v9h-9z"/></svg>'
        );
        background-image: url("data:image/svg+xml;charset=utf-8,@{svg}");
      }
      &[data-provider^="apple"] {
        @svg: escape(
          '<svg width="170" xmlns="http://www.w3.org/2000/svg" height="170"><path fill="@{text}" d="M150.37 130.25c-2.45 5.66-5.35 10.87-8.71 15.66-4.58 6.53-8.33 11.05-11.22 13.56-4.48 4.12-9.28 6.23-14.42 6.35-3.69 0-8.14-1.05-13.32-3.18-5.197-2.12-9.973-3.17-14.34-3.17-4.58 0-9.492 1.05-14.746 3.17-5.262 2.13-9.501 3.24-12.742 3.35-4.929.21-9.842-1.96-14.746-6.52-3.13-2.73-7.045-7.41-11.735-14.04-5.032-7.08-9.169-15.29-12.41-24.65-3.471-10.11-5.211-19.9-5.211-29.378 0-10.857 2.346-20.221 7.045-28.068 3.693-6.303 8.606-11.275 14.755-14.925s12.793-5.51 19.948-5.629c3.915 0 9.049 1.211 15.429 3.591 6.362 2.388 10.447 3.599 12.238 3.599 1.339 0 5.877-1.416 13.57-4.239 7.275-2.618 13.415-3.702 18.445-3.275 13.63 1.1 23.87 6.473 30.68 16.153-12.19 7.386-18.22 17.731-18.1 31.002.11 10.337 3.86 18.939 11.23 25.769 3.34 3.17 7.07 5.62 11.22 7.36-.9 2.61-1.85 5.11-2.86 7.51M119.11 7.24c0 8.102-2.96 15.667-8.86 22.669-7.12 8.324-15.732 13.134-25.071 12.375a25 25 0 0 1-.188-3.07c0-7.778 3.386-16.102 9.399-22.908q4.504-5.168 11.45-8.597c4.62-2.252 8.99-3.497 13.1-3.71.12 1.083.17 2.166.17 3.24z"/></svg>'
        );
        background-image: url("data:image/svg+xml;charset=utf-8,@{svg}");
      }
    }
  }
}

#rgbify(@color) {
  @rgb: red(@color), green(@color), blue(@color);
}

/* deno-fmt-ignore */
@catppuccin: {
  @latte:     { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; };
  @frappe:    { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; };
  @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; };
  @mocha:     { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #f4f4f4; @subtext1: #e0e0e0; @subtext0: #c6c6c6; @overlay2: #a8a8a8; @overlay1: #8d8d8d; @overlay0: #6f6f6f; @surface2: #525252; @surface1: #393939; @surface0: #262626; @base: #161616; @mantle: #0b0b0b; @crust: #000000; };
};