diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less
index 8a78c86d90..fbd43a08db 100644
--- a/styles/canvas-lms/catppuccin.user.less
+++ b/styles/canvas-lms/catppuccin.user.less
@@ -2,7 +2,7 @@
 @name Canvas LMS Catppuccin
 @namespace github.com/catppuccin/userstyles/styles/canvas-lms
 @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/canvas-lms
-@version 2025.09.06
+@version 2026.03.01
 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/canvas-lms/catppuccin.user.less
 @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acanvas-lms
 @description Soothing pastel theme for Canvas LMS
@@ -17,7 +17,222 @@
 
 @import "https://userstyles.catppuccin.com/lib/lib.less";
 
-@-moz-document domain("instructure.com"), domain("instructuremedia.com") {
+@canvas: {
+  @button-colors: {
+    hover: @surface1;
+    hover-accent: mix(@base, @accent, 20%);
+    hover-flush: fade(@surface1, 30%);
+  };
+  /* filled-in buttons with neutral colors */
+  .neutral-button() {
+    color: @text;
+    background-color: @surface0;
+    border-color: @surface1;
+    &:hover {
+      background-color: @button-colors[hover];
+      > [class$="baseButton__content"] {
+        background-color: @button-colors[hover];
+      }
+      color: @text;
+    }
+    path[fill="#000000"] {
+      fill: @text;
+    }
+    > [class$="baseButton__content"] {
+      color: @text;
+      background-color: @surface0;
+      border-color: @surface1;
+      transition-property: background, transform, filter;
+    }
+    [class$="text"] {
+      color: @text;
+    }
+  }
+
+  /* above, but accent-colored */
+  .accent-button() {
+    background-color: @accent;
+    border-color: @surface1;
+    path[fill="#000000"] {
+      fill: @mantle;
+    }
+    > [class$="baseButton__content"] {
+      transition-property: all;
+      color: @mantle;
+      background-color: @accent;
+      border-color: @surface1;
+    }
+    &:hover {
+      background-color: @button-colors[hover-accent];
+      > [class$="baseButton__content"] {
+        background-color: @button-colors[hover-accent];
+      }
+      color: @mantle;
+    }
+  }
+
+  /* this is for buttons that have no border/background until hovered */
+  .flush-button() {
+    color: @text;
+    background-color: transparent;
+    border-color: transparent;
+    &:hover {
+      background-color: @button-colors[hover-flush];
+      > [class$="baseButton__content"] {
+        background-color: @button-colors[hover-flush];
+      }
+      color: @text;
+    }
+    path[fill="#000000"] {
+      fill: @text;
+    }
+    > [class$="baseButton__content"] {
+      color: @text;
+      transition-property: background, transform, filter;
+    }
+    [class$="text"] {
+      color: @text;
+    }
+  }
+
+  a[class$="link"]:not(.btn, .ic-DashboardCard__link),
+  a[class$="link"] > span,
+  button[class$="link"]:not(.btn) {
+    color: @blue;
+    &:focus {
+      outline-color: @accent;
+    }
+  }
+  a.external span {
+    color: @blue;
+  }
+
+  /* outlines around clicked elements */
+  [class$="__facade"] {
+    &::before {
+      border-color: @accent;
+    }
+  }
+  textarea + span[class$="textArea__outline"] {
+    border-color: @accent;
+  }
+
+  /* checkboxes */
+  input + label span[class$="checkboxFacade__facade"] {
+    border-color: @surface2;
+    background-color: @base;
+  }
+  input:checked + label span[class$="checkboxFacade__facade"] {
+    border-color: @surface2;
+    background-color: @text;
+    color: @base;
+  }
+
+  /* toggle switches */
+  input + label [class*="toggleFacade__facade"] {
+    border-color: @surface1;
+    background-color: @surface0;
+    span[class$="__iconToggle"] {
+      &::before {
+        background-color: @text;
+        border-color: @surface2;
+      }
+      svg {
+        color: @mantle;
+      }
+    }
+  }
+  input:checked + label [class*="toggleFacade__facade"] {
+    border-color: @surface1;
+    background-color: @green;
+    span[class$="__iconToggle"] {
+      &::before {
+        background-color: @mantle;
+        border-color: @green;
+      }
+      svg {
+        color: @green;
+      }
+    }
+  }
+
+  input + label span[class$="label"] {
+    color: @text;
+  }
+
+  /* dropdown menu buttons */
+  [class$="textInput__facade"] {
+    color: @text;
+    background-color: transparent;
+    border-color: @surface2;
+    input {
+      color: @text !important;
+    }
+  }
+};
+
+@-moz-document domain("login.instructure.com") {
+  :root {
+    @media (prefers-color-scheme: light) {
+      #catppuccin(@lightFlavor);
+    }
+    @media (prefers-color-scheme: dark) {
+      #catppuccin(@darkFlavor);
+    }
+  }
+
+  #catppuccin(@flavor) {
+    #lib.palette();
+    #lib.defaults();
+    @canvas();
+    header nav {
+      background-color: @surface0;
+      color: @text;
+      a {
+        .flush-button();
+      }
+      border-block-end-color: @surface1;
+    }
+
+    main {
+      span[data-testid="social-buttons"] a {
+        .neutral-button();
+      }
+    }
+
+    /* this page has primarily autogenerated classes so very specific selectors are needed */
+    #root > span > div:nth-child(1) > div > span {
+      > span > div > div > div:last-child {
+        // background of login page
+        background-color: @mantle;
+      }
+      > span > div > div > div {
+        color: @text;
+      }
+    }
+
+    div:has(span > main) {
+      background-color: @base;
+    }
+    button[type="submit"] {
+      .accent-button();
+    }
+    label > span,
+    h1 {
+      color: @text;
+    }
+
+    footer img {
+      filter: @text-filter;
+    }
+  }
+}
+
+/* Only LMS and media pages */
+@-moz-document regexp(
+    "https?://(?!(developerdocs|www|community)\.)[a-z0-9]+\.instructure\.com(?!/doc)(/.*)?"
+  ),
+  domain("instructuremedia.com") {
   :root {
     @media (prefers-color-scheme: light) {
       #catppuccin(@lightFlavor);
@@ -30,6 +245,9 @@
   #catppuccin(@flavor) {
     #lib.palette();
     #lib.defaults();
+    @canvas();
+    @hover-button: @canvas[@button-colors][hover];
+    @hover-accent: @canvas[@button-colors][hover-accent];
 
     /* GLOBALS/VARIABLES */
     --ic-brand-primary: @accent;
@@ -153,18 +371,6 @@
       }
     }
 
-    a[class$="link"]:not(.btn, .ic-DashboardCard__link),
-    a[class$="link"] > span,
-    button[class$="link"]:not(.btn) {
-      color: @blue;
-      &:focus {
-        outline-color: @accent;
-      }
-    }
-    a.external span {
-      color: @blue;
-    }
-
     /* sticky footers (e.g. teacher-side course settings) */
     .sticky-footer {
       background-color: @surface0;
@@ -378,85 +584,9 @@
       border-color: @blue;
     }
 
-    /* filled-in buttons - this auto-generated class covers a lot of them */
-    @hover-button: @surface1;
-    .neutral-button() {
-      color: @text;
-      background-color: @surface0;
-      border-color: @surface1;
-      &:hover {
-        background-color: @hover-button;
-        > [class$="baseButton__content"] {
-          background-color: @hover-button;
-        }
-        color: @text;
-      }
-      path[fill="#000000"] {
-        fill: @text;
-      }
-      > [class$="baseButton__content"] {
-        color: @text;
-        background-color: @surface0;
-        border-color: @surface1;
-        transition-property: background, transform, filter;
-      }
-      [class$="text"] {
-        color: @text;
-      }
-    }
-
-    /* this is for buttons that are accent-colored */
-    @hover-accent-button: mix(@base, @accent, 20%);
-    .accent-button() {
-      background-color: @accent;
-      border-color: @surface1;
-      path[fill="#000000"] {
-        fill: @mantle;
-      }
-      > [class$="baseButton__content"] {
-        transition-property: all;
-        color: @mantle;
-        background-color: @accent;
-        border-color: @surface1;
-      }
-      &:hover {
-        background-color: @hover-accent-button;
-        > [class$="baseButton__content"] {
-          background-color: @hover-accent-button;
-        }
-        color: @mantle;
-      }
-    }
-
     span[type="button"] {
       .neutral-button();
     }
-
-    /* this is for buttons that have no border/background until hovered */
-    @hover-flush-button: fade(@surface1, 30%);
-    .flush-button() {
-      color: @text;
-      background-color: transparent;
-      border-color: transparent;
-      &:hover {
-        background-color: @hover-flush-button;
-        > [class$="baseButton__content"] {
-          background-color: @hover-flush-button;
-        }
-        color: @text;
-      }
-      path[fill="#000000"] {
-        fill: @text;
-      }
-      > [class$="baseButton__content"] {
-        color: @text;
-        transition-property: background, transform, filter;
-      }
-      [class$="text"] {
-        color: @text;
-      }
-    }
-
     .btn:not(.btn-primary, .btn-link),
     .Button:not(
       .Button--link,
@@ -592,68 +722,6 @@
       box-shadow: inset 0 0 0 2px @crust;
     }
 
-    /* outlines around clicked elements */
-    [class$="__facade"] {
-      &::before {
-        border-color: @accent;
-      }
-    }
-    textarea + span[class$="textArea__outline"] {
-      border-color: @accent;
-    }
-
-    /* checkboxes */
-    input + label span[class$="checkboxFacade__facade"] {
-      border-color: @surface2;
-      background-color: @base;
-    }
-    input:checked + label span[class$="checkboxFacade__facade"] {
-      border-color: @surface2;
-      background-color: @text;
-      color: @base;
-    }
-
-    /* toggle switches */
-    input + label [class*="toggleFacade__facade"] {
-      border-color: @surface1;
-      background-color: @surface0;
-      span[class$="__iconToggle"] {
-        &::before {
-          background-color: @text;
-          border-color: @surface2;
-        }
-        svg {
-          color: @mantle;
-        }
-      }
-    }
-    input:checked + label [class*="toggleFacade__facade"] {
-      border-color: @surface1;
-      background-color: @green;
-      span[class$="__iconToggle"] {
-        &::before {
-          background-color: @mantle;
-          border-color: @green;
-        }
-        svg {
-          color: @green;
-        }
-      }
-    }
-
-    input + label span[class$="label"] {
-      color: @text;
-    }
-
-    /* dropdown menu buttons */
-    [class$="textInput__facade"] {
-      color: @text;
-      background-color: transparent;
-      border-color: @surface2;
-      input {
-        color: @text !important;
-      }
-    }
     select {
       color: @text;
       border-color: @surface2;
@@ -2251,7 +2319,6 @@
     }
 
     /* LOGIN PAGE */
-
     .ic-flash-info,
     .ic-flash-success,
     .ic-flash-warning,