From 28a4b15aa55da7659bb1c19fe8a842e3f30ecf7c Mon Sep 17 00:00:00 2001
From: uncenter <47499684+uncenter@users.noreply.github.com>
Date: Wed, 21 Feb 2024 22:58:07 -0800
Subject: [PATCH] feat(stack-overflow): init

---
 scripts/userstyles.yml                    |   8 +
 styles/stack-overflow/catppuccin.user.css | 244 ++++++++++++++++++++++
 2 files changed, 252 insertions(+)
 create mode 100644 styles/stack-overflow/catppuccin.user.css

diff --git a/scripts/userstyles.yml b/scripts/userstyles.yml
index bd1216649a..cdccfb9489 100644
--- a/scripts/userstyles.yml
+++ b/scripts/userstyles.yml
@@ -586,6 +586,14 @@ userstyles:
       usage: "Switch to a default Skiff light/dark theme via **Settings** > **Appearance** for the best experience!"
       app-link: "https://app.skiff.com/mail"
       current-maintainers: [*coopw1]
+  stack-overflow:
+    name: Stack Overflow
+    category: development
+    color: peach
+    icon: stackoverflow
+    readme:
+      app-link: "https://stackoverflow.com/"
+      current-maintainers: [*uncenter]
   stylus:
     name: Stylus
     category: productivity
diff --git a/styles/stack-overflow/catppuccin.user.css b/styles/stack-overflow/catppuccin.user.css
new file mode 100644
index 0000000000..894623b749
--- /dev/null
+++ b/styles/stack-overflow/catppuccin.user.css
@@ -0,0 +1,244 @@
+/* ==UserStyle==
+@name Stack Overflow Catppuccin
+@namespace github.com/catppuccin/userstyles/styles/stack-overflow
+@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/stack-overflow
+@version 0.0.1
+@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/stack-overflow/catppuccin.user.css
+@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Astack-overflow
+@description Soothing pastel theme for Stack Overflow
+@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('stackoverflow.com') {
+  // TODO: Switch back to the @import (and remove 22-163) once we can get !important's in there.
+  // @import url("https://unpkg.com/@catppuccin/highlightjs@0.1.2/css/catppuccin.variables.css");
+  /* prettier-ignore */
+  code {&.hljs{color: rgb(var(--ctp-text)) !important;}.hljs-emphasis,.hljs-link,.hljs-quote{font-style:italic!important}.hljs-keyword,.hljs-name,.hljs-selector-attr,.hljs-variable,.hljs-variable.language_{color:rgb(var(--ctp-mauve))!important}.hljs-built_in,.hljs-doctag{color:rgb(var(--ctp-red))!important}.hljs-selector-tag,.hljs-title.class_,.hljs-type{color:rgb(var(--ctp-yellow))!important}.hljs-literal,.hljs-meta,.hljs-number,.hljs-variable.constant_{color:rgb(var(--ctp-peach))!important}.hljs-bullet,.hljs-formula,.hljs-operator,.hljs-property,.hljs-selector-class,.hljs-selector-pseudo{color:rgb(var(--ctp-teal))!important}.hljs-punctuation{color:rgb(var(--ctp-subtext1))!important}.hljs-regexp{color:rgb(var(--ctp-pink))!important}.hljs-attribute,.hljs-char.escape_,.hljs-code,.hljs-string{color:rgb(var(--ctp-green))!important}.hljs-subst,.hljs-tag{color:rgb(var(--ctp-subtext0))!important}.hljs-symbol,.hljs-template-tag,.hljs-template-variable{color:rgb(var(--ctp-flamingo))!important}.hljs-attr,.hljs-section,.hljs-selector-id,.hljs-title,.hljs-title.function_{color:rgb(var(--ctp-blue))!important}.hljs-params{color:rgb(var(--ctp-text))!important}.hljs-comment{color:rgb(var(--ctp-surface2))!important}.hljs-emphasis,.hljs-strong{color:rgb(var(--ctp-red))!important}.hljs-strong{font-weight:700!important}.hljs-link{color:rgb(var(--ctp-sapphire))!important}.hljs-diff-addition,.hljs-quote{color:rgb(var(--ctp-green))!important}.hljs-diff-addition{background:rgba(var(--ctp-green),15%)!important}.hljs-diff-deletion{color:rgb(var(--ctp-red))!important;background:rgba(var(--ctp-red),15%)!important}}
+
+  /* prettier-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: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; };
+  }
+
+  #rgbify(@color) {
+    @rgb-raw: red(@color), green(@color), blue(@color);
+  }
+
+  #catppuccin(@lookup, @accent) {
+    @rosewater: @catppuccin[@@lookup][@rosewater];
+    @flamingo: @catppuccin[@@lookup][@flamingo];
+    @pink: @catppuccin[@@lookup][@pink];
+    @mauve: @catppuccin[@@lookup][@mauve];
+    @red: @catppuccin[@@lookup][@red];
+    @maroon: @catppuccin[@@lookup][@maroon];
+    @peach: @catppuccin[@@lookup][@peach];
+    @yellow: @catppuccin[@@lookup][@yellow];
+    @green: @catppuccin[@@lookup][@green];
+    @teal: @catppuccin[@@lookup][@teal];
+    @sky: @catppuccin[@@lookup][@sky];
+    @sapphire: @catppuccin[@@lookup][@sapphire];
+    @blue: @catppuccin[@@lookup][@blue];
+    @lavender: @catppuccin[@@lookup][@lavender];
+    @text: @catppuccin[@@lookup][@text];
+    @subtext1: @catppuccin[@@lookup][@subtext1];
+    @subtext0: @catppuccin[@@lookup][@subtext0];
+    @overlay2: @catppuccin[@@lookup][@overlay2];
+    @overlay1: @catppuccin[@@lookup][@overlay1];
+    @overlay0: @catppuccin[@@lookup][@overlay0];
+    @surface2: @catppuccin[@@lookup][@surface2];
+    @surface1: @catppuccin[@@lookup][@surface1];
+    @surface0: @catppuccin[@@lookup][@surface0];
+    @base: @catppuccin[@@lookup][@base];
+    @mantle: @catppuccin[@@lookup][@mantle];
+    @crust: @catppuccin[@@lookup][@crust];
+    @accent-color: @catppuccin[@@lookup][@@accent];
+
+    --ctp-rosewater: #rgbify(@rosewater) [];
+    --ctp-flamingo: #rgbify(@flamingo) [];
+    --ctp-pink: #rgbify(@pink) [];
+    --ctp-mauve: #rgbify(@mauve) [];
+    --ctp-red: #rgbify(@red) [];
+    --ctp-maroon: #rgbify(@maroon) [];
+    --ctp-peach: #rgbify(@peach) [];
+    --ctp-yellow: #rgbify(@yellow) [];
+    --ctp-green: #rgbify(@green) [];
+    --ctp-teal: #rgbify(@teal) [];
+    --ctp-sky: #rgbify(@sky) [];
+    --ctp-sapphire: #rgbify(@sapphire) [];
+    --ctp-blue: #rgbify(@blue) [];
+    --ctp-lavender: #rgbify(@lavender) [];
+    --ctp-text: #rgbify(@text) [];
+    --ctp-subtext1: #rgbify(@subtext1) [];
+    --ctp-subtext0: #rgbify(@subtext0) [];
+    --ctp-overlay2: #rgbify(@overlay2) [];
+    --ctp-overlay1: #rgbify(@overlay1) [];
+    --ctp-overlay0: #rgbify(@overlay0) [];
+    --ctp-surface2: #rgbify(@surface2) [];
+    --ctp-surface1: #rgbify(@surface1) [];
+    --ctp-surface0: #rgbify(@surface0) [];
+    --ctp-base: #rgbify(@crust) [];
+    --ctp-mantle: #rgbify(@mantle) [];
+    --ctp-crust: #rgbify(@crust) [];
+
+    --white: @crust;
+    --black-050: @crust;
+    --black-100: @mantle;
+    --black-150: @surface0;
+    --black-200: @surface0;
+    --black-225: @surface1;
+    --black-250: @surface2;
+    --black-300: @overlay0;
+    --black-350: @subtext0;
+    --black-400: @subtext1;
+    --black-500: @text;
+    --black-600: @text;
+    --black: @text;
+
+    & when (@lookup = latte) {
+      --orange-600: darken(@peach, 30%);
+      --orange-500: darken(@peach, 20%);
+      --orange-400: darken(@peach, 10%);
+      --orange-300: @peach;
+      --orange-200: lighten(tint(@peach, 10%), 10%);
+      --orange-100: lighten(tint(@peach, 20%), 20%);
+      --blue-600: desaturate(darken(@blue, 30%), 40%);
+      --blue-500: desaturate(darken(@blue, 20%), 40%);
+      --blue-400: desaturate(darken(@blue, 10%), 40%);
+      --blue-300: @blue;
+      --blue-200: lighten(@blue, 10%);
+      --blue-100: lighten(@blue, 20%);
+      --green-600: saturate(darken(@green, 30%), 5%);
+      --green-500: saturate(darken(@green, 20%), 5%);
+      --green-400: saturate(darken(@green, 10%), 5%);
+      --green-300: @green;
+      --green-200: lighten(@green, 10%);
+      --green-100: lighten(@green, 20%);
+      --red-600: desaturate(darken(@red, 30%), 40%);
+      --red-500: desaturate(darken(@red, 20%), 40%);
+      --red-400: desaturate(darken(@red, 10%), 40%);
+      --red-300: @red;
+      --red-200: lighten(@red, 10%);
+      --red-100: lighten(@red, 20%);
+      --yellow-600: desaturate(darken(@yellow, 30%), 40%);
+      --yellow-500: desaturate(darken(@yellow, 20%), 40%);
+      --yellow-400: desaturate(darken(@yellow, 10%), 40%);
+      --yellow-300: @yellow;
+      --yellow-200: lighten(@yellow, 10%);
+      --yellow-100: lighten(@yellow, 20%);
+      --purple-600: darken(@lavender, 30%);
+      --purple-500: darken(@lavender, 20%);
+      --purple-400: darken(@lavender, 10%);
+      --purple-300: @lavender;
+      --purple-200: lighten(@lavender, 5%);
+      --purple-100: lighten(@lavender, 10%);
+    }
+    & when not (@lookup = latte) {
+      --orange-100: darken(shade(@peach, 50%), 10%);
+      --orange-200: darken(shade(@peach, 40%), 10%);
+      --orange-300: darken(shade(@peach, 30%), 10%);
+      --orange-400: darken(shade(@peach, 20%), 10%);
+      --orange-500: lighten(@peach, 10%);
+      --orange-600: lighten(@peach, 20%);
+      --blue-100: desaturate(darken(@blue, 30%), 40%);
+      --blue-200: desaturate(darken(@blue, 20%), 40%);
+      --blue-300: desaturate(darken(@blue, 10%), 40%);
+      --blue-400: @blue;
+      --blue-500: lighten(@blue, 10%);
+      --blue-600: lighten(@blue, 20%);
+      --green-100: saturate(darken(@green, 30%), 5%);
+      --green-200: saturate(darken(@green, 20%), 5%);
+      --green-300: saturate(darken(@green, 10%), 5%);
+      --green-400: @green;
+      --green-500: lighten(@green, 10%);
+      --green-600: lighten(@green, 20%);
+      --red-100: desaturate(darken(@red, 30%), 40%);
+      --red-200: desaturate(darken(@red, 20%), 40%);
+      --red-300: desaturate(darken(@red, 10%), 40%);
+      --red-400: @red;
+      --red-500: lighten(@red, 10%);
+      --red-600: lighten(@red, 20%);
+      --yellow-100: darken(shade(@yellow, 50%), 10%);
+      --yellow-200: darken(shade(@yellow, 40%), 10%);
+      --yellow-300: darken(shade(@yellow, 30%), 10%);
+      --yellow-400: darken(shade(@yellow, 20%), 10%);
+      --yellow-500: lighten(@yellow, 10%);
+      --yellow-600: lighten(@yellow, 20%);
+      --purple-100: darken(@lavender, 30%);
+      --purple-200: darken(@lavender, 20%);
+      --purple-300: darken(@lavender, 10%);
+      --purple-400: @lavender;
+      --purple-500: lighten(@lavender, 5%);
+      --purple-600: lighten(@lavender, 10%);
+      --gold-100: hsl(45, 29%, 24%);
+      --gold-200: hsl(45, 47%, 37%);
+      --gold-300: hsl(45, 92%, 62%);
+      --gold-400: hsl(46, 93%, 78%);
+      --silver-100: hsl(220, 2%, 26%);
+      --silver-200: hsl(220, 1%, 46%);
+      --silver-300: hsl(216, 4%, 69%);
+      --silver-400: hsl(214, 8%, 83%);
+      --bronze-100: hsl(28, 13%, 27%);
+      --bronze-200: hsl(28, 27%, 45%);
+      --bronze-300: hsl(28, 58%, 67%);
+      --bronze-400: hsl(28, 59%, 83%);
+      --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.1),
+        0 2px 8px hsla(0, 0%, 0%, 0.1);
+      --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11),
+        0 3px 8px hsla(0, 0%, 0%, 0.14);
+      --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14),
+        0 4px 13px hsla(0, 0%, 0%, 0.18);
+      --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.1),
+        0 20px 48px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.15);
+      --focus-ring: var(
+        --theme-dark-secondary-custom-focus-ring,
+        hsla(206, 100%, 40%, 0.25)
+      );
+      --focus-ring-success: hsla(140, 40%, 75%, 0.4);
+      --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
+      --focus-ring-error: hsla(358, 62%, 47%, 0.15);
+      --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
+    }
+    --highlight-bg: @base;
+    --scrollbar: fade(@text, 20%);
+
+    .site-footer {
+      background-color: @mantle !important;
+    }
+
+    .s-topbar .s-topbar--logo .-img {
+      @svg: escape(
+        '<svg width="189" height="530" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M48 280.8v7.6l8.5 7.6L73 281.2V273l-16.5 14.9zM22 324v3l4 4 7-6v-4l-7 6" fill="@{green}"/><path d="M8 280.8v7.6l8.6 7.6L33 281.2V273l-16.4 14.9" fill="@{surface0}"/><path d="M45 191h29l-14.4-15" fill="@{peach}"/><path d="M5 191h29l-14.5-15" fill="@{surface0}"/><path d="M59.6 243 74 228H45zM6.5 322.5 0 329h13" fill="@{peach}"/><path d="M7.5 386.5 0 380v13zm47.5 87-8-6.5v13zm-48.5 0L14 480v-13zm20-84L33 383H20M6.5 341.5 0 348h13m6.5-105L34 228H5m14.5-108 2.9 9.2H32l-7.7 5.6 3 9.2-7.8-5.7-7.8 5.7 3-9.2-7.7-5.6h9.6" fill="@{surface0}"/><path d="m59.6 120 2.9 9.2h9.6l-7.7 5.6 3 9.2-7.8-5.7-7.8 5.7 3-9.2-7.7-5.6h9.6" fill="@{yellow}"/><path d="m59.6 123.3 2.2 6.9H69l-5.8 4.2 2.3 6.9-5.9-4.3-5.9 4.3 2.3-6.9-5.8-4.2h7.3zm0-3.3-2.9 9.2h-9.6l7.7 5.6-3 9.2 7.8-5.7 7.8 5.7-3-9.2 7.7-5.6h-9.6z" fill="@{yellow}"/><path d="M65 408a3 3 0 1 0 0-6 3 3 0 0 0 0 6" fill="@{rosewater}"/><path d="M85 408a3 3 0 1 0 0-6 3 3 0 0 0 0 6" fill="@{surface1}"/><path d="M105 408a3 3 0 1 0 0-6 3 3 0 0 0 0 6" fill="@{yellow}"/><path d="M47 367h2v2h-2zm3 3h2v2h-2zm6 0h2v2h-2zm6 0h2v2h-2zm6 0h2v2h-2zm-15-3h2v2h-2zm6 0h2v2h-2zm6 0h2v2h-2zm6 0h2v2h-2" fill="@{overlay0}"/><path d="M0 400v31h31v-31" fill="@{surface0}"/><path d="M20 419a14 14 0 0 1 8 12H3a14.1 14.1 0 0 1 8-12v-.5a7.5 7.5 0 1 1 11.6-8.4 7.5 7.5 0 0 1-2.6 8.4z" fill="@{base}"/><path d="M60 340h2v14h-2m3-13h10v8H63" fill="@{surface0}"/><path d="M60 320h2v14h-2" fill="@{red}"/><path d="M63 321h10v8H63" fill="@{rosewater}"/><path d="M80 320h14v14H80" fill="@{peach}"/><path d="M84 329c-1.4 0-2 .6-2 2 0 .4.6 1 2 1 .4 0 1-.6 1-1 0-1.4-.6-2-1-2m-2-4v2a5.1 5.1 0 0 1 5 5h2a7 7 0 0 0-7-7m0-3v2a7.9 7.9 0 0 1 8 8h2a10 10 0 0 0-10-10" fill="@{base}"/><path d="m22.6 347.1-.7 3.2 3.2-.7zm.8-.7 3.6-3.6 2.5 2.5-3.6 3.6zm5.7-5.1c-.4 0-.8.1-1.1.4l-.7.7 2.5 2.5.7-.7c.2-.3.4-.7.4-1.1 0-1-.8-1.8-1.8-1.8" fill="@{subtext0}"/><path d="M107 459a7 7 0 1 0 0-14 7 7 0 0 0 0 14" fill="@{red}"/><path d="m110.2 453.7-1.9-1.9 1.9-1.9v-.3l-.9-.8h-.3l-2 2-1.8-2h-.3l-.9.8v.3l1.9 1.9-1.9 1.9v.3l.9.9h.3l1.9-1.9 1.9 1.9h.3l.9-.9" fill="@{base}"/><path d="M47 354a7 7 0 1 0 0-14 7 7 0 0 0 0 14" fill="@{red}"/><path d="m50.2 348.7-1.9-1.9 1.9-1.9v-.3l-.9-.8H49l-2 2-1.8-2h-.3l-.9.8v.3l1.9 1.9-1.9 1.9v.3l.9.9h.3l1.9-1.9 1.9 1.9h.3l.9-.9" fill="@{base}"/><path d="M47 333a7 7 0 1 0 0-14 7 7 0 0 0 0 14" fill="@{surface0}"/><path d="m50.2 327.7-1.9-1.9 1.9-1.9v-.3l-.9-.8H49l-2 2-1.8-2h-.3l-.9.8v.3l1.9 1.9-1.9 1.9v.3l.9.9h.3l1.9-1.9 1.9 1.9h.3l.9-.9" fill="@{base}"/><path d="m42 31-2.2-.2c-1.7-.1-2.3-.8-2.3-2 0-1.4 1-2.2 3-2.2 1.3-.1 2.6.3 3.6 1.1l1.3-1.3a7.5 7.5 0 0 0-4.8-1.4c-2.9 0-4.9 1.5-4.9 3.9 0 2.2 1.4 3.4 4 3.6l2.2.2c1.6.1 2.2.8 2.2 2 0 1.6-1.4 2.4-3.6 2.4-1.6.1-3.1-.5-4.2-1.6L35 36.8c1.5 1.4 3.5 2 5.5 1.9 3.2 0 5.5-1.5 5.5-4.1s-1.6-3.4-4-3.6m15.8-6.1c-2.2 0-3.5.4-4.7 1.9l1.3 1.3a3.6 3.6 0 0 1 3.4-1.5c2.5 0 3.4 1 3.4 2.9v1.3h-4c-3 0-4.6 1.5-4.6 3.9 0 1 .3 2 1 2.7.8.9 1.9 1.2 3.8 1.2 1.4.1 2.9-.4 3.9-1.4v1.3h2v-9.1c-.1-2.9-1.9-4.5-5.5-4.5m3.4 8.9c.1.8-.1 1.7-.7 2.3a4 4 0 0 1-3 .9c-2.1 0-3.1-.7-3.1-2.3q0-2.4 3-2.4h3.8zm9.7-7.1c1.2 0 2.4.5 3.1 1.5l1.3-1.3a5.4 5.4 0 0 0-4.4-2c-3.4 0-5.9 2.3-5.9 6.9s2.6 6.9 5.9 6.9c1.7.1 3.3-.7 4.4-2L74 35.4c-.7 1-1.9 1.5-3.1 1.5-1.2.1-2.4-.5-3.1-1.5q-1.05-1.65-.9-3.6-.15-1.95.9-3.6c.7-1 1.9-1.6 3.1-1.5m16.8-1.6h-2.4L79.2 31V19.1h-2v19.4h2v-4.9l2.4-2.4 4.5 7.3h2.4l-5.6-8.6zm9.2-.2c-1.6 0-3.2.5-4.3 1.7-1.3 1.3-1.6 3-1.6 5.4 0 2.5.3 4.1 1.6 5.4a6.1 6.1 0 0 0 4.3 1.7c1.6.1 3.2-.5 4.3-1.7 1.3-1.3 1.6-2.9 1.6-5.4s-.3-4-1.6-5.4a5.4 5.4 0 0 0-4.3-1.7m1.7 10.5c-.9.8-2.3.8-3.2 0-.7-.7-.8-2-.8-3.4s.1-2.7.8-3.4c.9-.8 2.3-.8 3.2 0 .7.7.8 2 .8 3.4 0 1.5-.1 2.7-.8 3.4M112.2 25l-2.8 8.6-2.8-8.6h-3.7l5.2 14h2.7l5.1-14zm9.6 0c-3.6 0-6.1 2.5-6.1 7 0 5.7 3.2 7.2 6.5 7.2 2 .1 4-.7 5.3-2.2l-2.1-2c-.8.8-2 1.3-3.2 1.2a3 3 0 0 1-3.1-2.7v-.4h8.7v-1.6c.1-3.8-2.1-6.6-6-6.6zm-2.7 5.7.3-1.5c.4-.9 1.3-1.4 2.3-1.4s1.9.5 2.3 1.4l.3 1.5zm13.3-4.3v-1.3H129v14h3.5v-8.4c0-1.3.8-2.4 2.1-2.6h.2c.7 0 1.4.3 1.8.8l2.6-2.6A4.1 4.1 0 0 0 136 25c-1.3 0-2.6.4-3.5 1.4zm7.6-2.8V39h3.5V28h2.6v-2.7h-2.6v-1.5c0-.6.3-1.2 1-1.3h1.5v-3h-2a3.9 3.9 0 0 0-4 3.8zm20.3 1.3c-1.6 0-3.2.5-4.3 1.7-1.3 1.3-1.6 3-1.6 5.4 0 2.5.3 4.1 1.6 5.4a6.1 6.1 0 0 0 4.3 1.7c1.6.1 3.2-.5 4.3-1.7 1.3-1.3 1.6-2.9 1.6-5.4s-.3-4-1.6-5.4a5.4 5.4 0 0 0-4.3-1.7m1.7 10.5c-.9.8-2.3.8-3.2 0-.7-.7-.8-2-.8-3.4s.1-2.7.8-3.4c.9-.8 2.3-.8 3.2 0 .7.7.8 2 .8 3.4 0 1.5-.1 2.7-.8 3.4M182.7 25l-2.3 8.6-2.9-8.6H175l-2.8 8.7-2.3-8.6h-3.7l4.3 14h2.9l2.9-8.8 2.9 8.8h3l4.3-14h-3.8zm-31.2 9.8V19.6H148V35a3.8 3.8 0 0 0 3.6 4h2.5v-3h-1.3c-.6.1-1.1-.2-1.3-.8zm-98.8-9.4H49V21h-2v13.9c0 2 1.1 3.6 3.4 3.6h1.4v-1.7h-1c-1.3 0-1.8-.7-1.8-2v-7.7h1.9z" fill="@{text}"/><path d="M26 41v-9h4v13H0V32h4v9z" fill="@{surface1}"/><path d="m23 34 .8-3-16.1-3.3L7 31zM9.2 23.2l15 7 1.4-3-15-7zm4.2-7.4L26 26.4l2.1-2.5-12.7-10.6-2.1 2.5zM21.5 8l-2.7 2 9.9 13.3 2.7-2zM7 38h16v-3H7z" fill="@{peach}"/><path d="M21 527v-8h3v11H0v-11h3v8z" fill="@{surface1}"/><path d="m5.4 519.1 13.6 2 .1-2.4L6 516l-.5 3zm1.8-6.8 12 5.6 1.1-2.4-12-5.6zm3.4-5.9 10.2 8.5 1.7-2-10.2-8.5zm6.5-6.2-2.1 1.6 7.9 10.6 2.1-1.6zM5 525h14v-3H5z" fill="@{peach}"/><path d="m34 518.9-1.7-.2c-1.3 0-1.8-.6-1.8-1.5 0-1 .7-1.8 2.3-1.8 1 0 2 .3 2.6.8l1-1c-1-.7-2.2-1-3.6-1-2.2 0-3.8 1.1-3.8 3 0 1.7 1 2.6 3 2.8l1.8.1c1.2.1 1.7.6 1.7 1.6 0 1.2-1 1.8-2.6 1.8-1.3 0-2.4-.3-3.2-1.1l-1 1c1.2 1 2.5 1.3 4.2 1.3 2.5 0 4.2-1.1 4.2-3-.2-2-1.5-2.6-3.2-2.8zm12.7-4.6c-1.7 0-2.7.3-3.6 1.4l1 1c.6-.9 1.2-1.2 2.6-1.2 1.8 0 2.6.8 2.6 2.2v1h-3.1c-2.3 0-3.6 1.2-3.6 3 0 .7.3 1.5.8 2 .7.8 1.4 1 2.9 1a4 4 0 0 0 3-1v1h1.5v-7c-.1-2.3-1.4-3.4-4.1-3.4m2.6 6.7c0 .9-.2 1.4-.5 1.7-.7.6-1.5.7-2.3.7-1.7 0-2.3-.6-2.3-1.7 0-1.2.7-1.8 2.3-1.8h2.9zm7.2-5.4c1 0 1.6.3 2.4 1.2l1-1c-1.1-1.1-2-1.5-3.4-1.5-2.6 0-4.6 1.7-4.6 5.3 0 3.4 2 5.2 4.6 5.2 1.4 0 2.3-.3 3.3-1.5l-1-1c-.8 1-1.4 1.2-2.3 1.2a3 3 0 0 1-2.4-1.1c-.5-.7-.7-1.5-.7-2.8s.2-2.1.7-2.8c.6-.8 1.5-1.2 2.4-1.2m12.9-1.2h-1.8l-4.6 4.5v-9.1h-1.6v14.8H63v-3.8l1.8-1.8 3.5 5.6H70l-4.2-6.7 3.5-3.5zm7-.3c-1.5 0-2.6.6-3.3 1.3-1 1-1.2 2.3-1.2 4.2s.3 3.1 1.2 4c.7.8 1.8 1.4 3.3 1.4s2.7-.5 3.3-1.3c1-1 1.2-2.2 1.2-4.1 0-2-.3-3.2-1.2-4.2-.6-.7-1.7-1.3-3.3-1.3m1.3 8c-.3.3-.7.4-1.3.4s-1-.1-1.2-.4c-.6-.6-.6-1.6-.6-2.6 0-1.2 0-2 .6-2.6.2-.3.6-.5 1.2-.5s1 .2 1.3.5c.5.6.5 1.4.5 2.6.1 1.1 0 2-.5 2.6m10.3-7.9-2.1 6.6-2.2-6.6h-2.8l4 10.6h2l4-10.6zm7.3-.1c-2.8 0-4.6 2-4.6 5.5 0 4.3 2.4 5.4 4.9 5.4 2 0 3-.5 4-1.6L98 522a3 3 0 0 1-2.4 1c-1.5 0-2.3-1-2.3-2.5h6.6v-1.1c0-3-1.6-5.2-4.6-5.2zm-2 4.4c0-.5 0-.8.3-1.1.3-.7.8-1.2 1.8-1.2a2 2 0 0 1 1.8 1.2c.2.3.2.6.3 1.1zm10.5-3.2v-1.1h-2.5v10.6h2.6v-6.4c0-1.3.9-1.9 1.8-1.9.6 0 1 .2 1.4.7l2-2c-.8-.8-1.4-1-2.5-1-1.2-.1-2.2.4-2.8 1zm5.4-2.3v11.8h2.7v-8.4h2v-2h-2v-1.2c0-.5.3-1 1-1h1v-2.1h-1.5c-2.2 0-3.2 1.5-3.2 3zm16.2 1.1c-1.5 0-2.6.6-3.2 1.3-1 1-1.3 2.3-1.3 4.2s.3 3.1 1.3 4c.6.8 1.7 1.4 3.2 1.4 1.6 0 2.7-.5 3.3-1.3 1-1 1.2-2.2 1.2-4.1 0-2-.3-3.2-1.2-4.2-.6-.7-1.7-1.3-3.3-1.3m1.3 8c-.3.3-.7.4-1.3.4s-1-.1-1.2-.4c-.6-.6-.6-1.6-.6-2.6 0-1.2.1-2 .6-2.6.3-.3.6-.5 1.2-.5s1 .2 1.3.5c.5.6.5 1.4.5 2.6 0 1.1 0 2-.5 2.6m15.8-7.9-1.7 6.6-2.2-6.6h-2l-2.2 6.6-1.7-6.6H130l3.3 10.6h2.2l2.2-6.7 2.2 6.7h2.2l3.3-10.6h-2.8zm-24.6 7.4V510h-2.7v11.8c0 1.5 1 3 3.1 3h1.6v-2.2h-1c-.7 0-1-.3-1-1M41 516l1.4-1.3h-3v-3.4H38V522c0 1.5.9 2.7 2.6 2.7h1v-1.2h-.7c-1 0-1.4-.6-1.4-1.5v-6z" fill="@{text}"/></svg>'
+      );
+      background-image: url("data:image/svg+xml,@{svg}") !important;
+      filter: none;
+    }
+  }
+
+  body:not(.theme-highcontrast).theme-dark {
+    #catppuccin(@darkFlavor, @accentColor);
+  }
+  body:not(.theme-highcontrast, .theme-dark, .theme-system) {
+    #catppuccin(@lightFlavor, @accentColor);
+  }
+  body:not(.theme-highcontrast).theme-system {
+    @media (prefers-color-scheme: light) {
+      #catppuccin(@lightFlavor, @accentColor);
+    }
+    @media (prefers-color-scheme: dark) {
+      #catppuccin(@darkFlavor, @accentColor);
+    }
+  }
+}
+// vim:ft=less
+
+// TODO: Footer styling (appears unchanged by CSS vars).
+// TODO: StackOverflow logo in header styling (not working in all themes).