diff --git a/styles/google-drive/catppuccin.user.less b/styles/google-drive/catppuccin.user.less
index dedab12ae4..ef1620a643 100644
--- a/styles/google-drive/catppuccin.user.less
+++ b/styles/google-drive/catppuccin.user.less
@@ -17,13 +17,24 @@
 
 @import "https://userstyles.catppuccin.com/lib/lib.less";
 
+// @import "https://userstyles.catppuccin.com/lib/m3.less";
+@import "https://github.com/catppuccin/userstyles/raw/refs/heads/feat/m3-lib/lib/m3.less";
+
 @-moz-document domain("drive.google.com") {
   .vhoiae {
     &.KkxPLb {
       #catppuccin(@lightFlavor);
     }
 
-    &.LgGVmb, .yYWAMb.bvmRsc, .dif24c.bvmRsc {
+    &.LgGVmb,
+    .yYWAMb.bvmRsc,
+    .dif24c.bvmRsc,
+    // Video player (Google Vids and video files)
+    .fP5mL,
+    // File preview tooltip (in Drive)
+    .a-b-g-Ca.g-Ca,
+    // File preview tooltip (new tab)
+    .ndfHFb-c4YZDc-tk3N6e-suEOdc.tk3N6e-suEOdc {
       #catppuccin(@darkFlavor);
     }
   }
@@ -34,6 +45,10 @@
     // TODO: Try to make use `#lib.defaults()` here, but it causes issues with the color scheme (see below).
     // #lib.defaults(); // Color scheme is already set by Google Drive; setting it here causes bugs, and there are no known side effects as Google does not use native UI elements (which would reflect `color-scheme` state and cause potential issues).
 
+    #__m3.base();
+    #__m3.with-prefix(gm3-sys-color-);
+    #__m3.with-prefix(dt-);
+
     ::selection {
       background-color: fade(@accent, 30%);
     }
@@ -45,243 +60,135 @@
       }
     }
 
-    --dt-on-background: @text;
-    --dt-on-background-secondary: @subtext0;
-    --dt-background: @base;
-    --dt-on-surface: @text;
-    --dt-inverse-surface: @text;
-    --dt-on-surface-secondary: @subtext0;
-    --dt-on-surface-variant: @text;
-    --dt-surface-variant: @surface0;
-    --dt-inverse-on-surface: @surface0;
-    --dt-surface: @base;
-    --dt-surface-tint: @accent;
-    --dt-shadow-elevation-1:
-      0px 3px 1px -2px fade(@base, 20%), 0px 2px 2px 0px fade(@base, 14%), 0px
-      1px 5px 0px fade(@base, 12%);
-    --dt-shadow-elevation-2:
-      0px 2px 4px -1px fade(@base, 20%), 0px 4px 5px 0px fade(@base, 14%), 0px
-      1px 10px 0px fade(@base, 12%);
-    --dt-shadow-elevation-3:
-      0px 5px 5px -3px fade(@base, 20%), 0px 8px 10px 1px fade(@base, 14%), 0px
-      3px 14px 2px fade(@base, 12%);
-    --dt-shadow-elevation-4:
-      0px 5px 5px -3px fade(@base, 20%), 0px 8px 10px 1px fade(@base, 14%), 0px
-      3px 14px 2px fade(@base, 12%);
-    --dt-shadow-elevation-5:
-      0px 8px 10px -6px fade(@base, 20%), 0px 16px 24px 2px fade(@base, 14%),
-      0px 6px 30px 5px fade(@base, 12%);
-    --dt-surface-container-lowest: @crust;
-    --dt-surface-container-low: @mantle;
-    --dt-surface-container: @surface0;
-    --dt-surface-container-high: @surface1;
-    --dt-surface-container-highest: @surface2;
-    --dt-surface-dim: @crust;
-    --dt-surface-bright: @base;
-    --dt-on-primary-container: @text;
-    --dt-primary-container-icon: @text;
-    --dt-primary-container-link: @text;
-    --dt-primary: @accent;
-    --dt-primary-action: @accent;
-    --dt-primary-action-stateful: @accent;
-    --dt-primary-outline: @accent;
-    --dt-primary-action-state-layer: @accent;
-    --dt-primary-container: @surface0;
-    --dt-on-primary: @base;
-    --dt-primary-icon: @base;
-    --dt-primary-link: @base;
-    --dt-on-secondary-container: @text;
-    --dt-secondary-container-icon: @text;
-    --dt-secondary-container-link: @text;
-    --dt-secondary: @accent;
-    --dt-secondary-action: @accent;
-    --dt-secondary-action-stateful: @accent;
-    --dt-secondary-outline: @accent;
-    --dt-secondary-action-state-layer: @accent;
-    --dt-secondary-container: @surface0;
-    --dt-on-secondary: @base;
-    --dt-secondary-icon: @base;
-    --dt-secondary-link: @base;
-    --dt-on-tertiary-container: @text;
-    --dt-tertiary-container-icon: @text;
-    --dt-tertiary-container-link: @text;
-    --dt-tertiary: @accent;
-    --dt-tertiary-action: @accent;
-    --dt-tertiary-action-stateful: @accent;
-    --dt-tertiary-outline: @accent;
-    --dt-tertiary-action-state-layer: @accent;
-    --dt-tertiary-container: @surface0;
-    --dt-on-tertiary: @base;
-    --dt-tertiary-icon: @base;
-    --dt-tertiary-link: @base;
-    --dt-on-neutral-container: @text;
-    --dt-neutral-container-icon: @text;
-    --dt-neutral-container-link: @text;
-    --dt-neutral: @surface0;
-    --dt-neutral-action: @text;
-    --dt-neutral-action-stateful: @text;
-    --dt-neutral-outline: @surface0;
-    --dt-neutral-action-state-layer: @surface0;
-    --dt-neutral-container: @surface0;
-    --dt-on-neutral: @text;
-    --dt-neutral-icon: @surface0;
-    --dt-neutral-link: @surface0;
-    --dt-on-warning-container: @yellow;
-    --dt-warning-container-icon: @yellow;
-    --dt-warning-container-link: @yellow;
+    --dt-on-background-secondary: var(--dt-on-surface-variant);
+    --dt-on-surface-secondary: var(--dt-on-surface-variant);
+    --dt-shadow-elevation-1: 0px 3px 1px -2px rgba(var(--dt-shadow-rgb),0.2),0px 2px 2px 0px rgba(var(--dt-shadow-rgb),0.14),0px 1px 5px 0px rgba(var(--dt-shadow-rgb),0.12);
+    --dt-shadow-elevation-2: 0px 2px 4px -1px rgba(var(--dt-shadow-rgb),0.2),0px 4px 5px 0px rgba(var(--dt-shadow-rgb),0.14),0px 1px 10px 0px rgba(var(--dt-shadow-rgb),0.12);
+    --dt-shadow-elevation-3: 0px 5px 5px -3px rgba(var(--dt-shadow-rgb),0.2),0px 8px 10px 1px rgba(var(--dt-shadow-rgb),0.14),0px 3px 14px 2px rgba(var(--dt-shadow-rgb),0.12);
+    --dt-shadow-elevation-4: 0px 5px 5px -3px rgba(var(--dt-shadow-rgb),0.2),0px 8px 10px 1px rgba(var(--dt-shadow-rgb),0.14),0px 3px 14px 2px rgba(var(--dt-shadow-rgb),0.12);
+    --dt-shadow-elevation-5: 0px 8px 10px -6px rgba(var(--dt-shadow-rgb),0.2),0px 16px 24px 2px rgba(var(--dt-shadow-rgb),0.14),0px 6px 30px 5px rgba(var(--dt-shadow-rgb),0.12);
+    --dt-scrim: rgba(var(--dt-scrim-rgb),0.32);
+    --dt-scrim-2x: rgba(var(--dt-scrim-rgb),0.64);
+    --dt-primary-container-icon: var(--dt-on-primary-container);
+    --dt-primary-container-link: var(--dt-on-primary-container);
+    --dt-primary-action: var(--dt-primary);
+    --dt-primary-action-stateful: var(--dt-primary);
+    --dt-primary-outline: var(--dt-primary);
+    --dt-primary-action-state-layer: var(--dt-primary);
+    --dt-primary-icon: var(--dt-on-primary);
+    --dt-primary-link: var(--dt-on-primary);
+    --dt-secondary-container-icon: var(--dt-on-secondary-container);
+    --dt-secondary-container-link: var(--dt-on-secondary-container);
+    --dt-secondary-action: var(--dt-secondary);
+    --dt-secondary-action-stateful: var(--dt-secondary);
+    --dt-secondary-outline: var(--dt-secondary);
+    --dt-secondary-action-state-layer: var(--dt-secondary);
+    --dt-secondary-icon: var(--dt-on-secondary);
+    --dt-secondary-link: var(--dt-on-secondary);
+    --dt-tertiary-container-icon: var(--dt-on-tertiary-container);
+    --dt-tertiary-container-link: var(--dt-on-tertiary-container);
+    --dt-tertiary-action: var(--dt-tertiary);
+    --dt-tertiary-action-stateful: var(--dt-tertiary);
+    --dt-tertiary-outline: var(--dt-tertiary);
+    --dt-tertiary-action-state-layer: var(--dt-tertiary);
+    --dt-tertiary-icon: var(--dt-on-tertiary);
+    --dt-tertiary-link: var(--dt-on-tertiary);
+    --dt-on-neutral-container: var(--dt-on-surface);
+    --dt-neutral-container-icon: var(--dt-on-neutral-container);
+    --dt-neutral-container-link: var(--dt-on-neutral-container);
+    --dt-neutral: var(--dt-on-surface-variant);
+    --dt-neutral-action: var(--dt-neutral);
+    --dt-neutral-action-stateful: var(--dt-neutral);
+    --dt-neutral-outline: var(--dt-neutral);
+    --dt-neutral-action-state-layer: var(--dt-neutral);
+    --dt-neutral-container: var(--dt-surface-variant);
+    --dt-on-neutral: var(--dt-inverse-on-surface);
+    --dt-neutral-icon: var(--dt-neutral);
+    --dt-neutral-link: var(--dt-neutral);
+    --dt-on-warning-container: lighten(@yellow, @m3-emphasize);
+    --dt-warning-container-icon: var(--dt-on-warning-container);
+    --dt-warning-container-link: var(--dt-on-warning-container);
     --dt-warning: @yellow;
-    --dt-warning-action: @yellow;
-    --dt-warning-action-stateful: @yellow;
-    --dt-warning-outline: @yellow;
-    --dt-warning-action-state-layer: @yellow;
-    --dt-warning-container: @surface0;
+    --dt-warning-action: var(--dt-warning);
+    --dt-warning-action-stateful: var(--dt-warning);
+    --dt-warning-outline: var(--dt-on-warning-container);
+    --dt-warning-action-state-layer: var(--dt-warning);
+    --dt-warning-container: mix(@yellow, @base, @m3-tint);
     --dt-on-warning: @base;
-    --dt-warning-icon: @yellow;
-    --dt-warning-link: @yellow;
-    --dt-on-error-container: @red;
-    --dt-error-container-icon: @red;
-    --dt-error-container-link: @red;
-    --dt-error: @red;
-    --dt-error-action: @red;
-    --dt-error-action-stateful: @red;
-    --dt-error-outline: @red;
-    --dt-error-action-state-layer: @surface1;
-    --dt-error-container: @surface1;
-    --dt-on-error: @base;
-    --dt-error-icon: @base;
-    --dt-error-link: @base;
+    --dt-warning-icon: var(--dt-on-warning);
+    --dt-warning-link: var(--dt-on-warning);
+    --dt-error-container-icon: var(--dt-on-error-container);
+    --dt-error-container-link: var(--dt-on-error-container);
+    --dt-error-action: var(--dt-error);
+    --dt-error-action-stateful: var(--dt-error);
+    --dt-error-outline: var(--dt-error);
+    --dt-error-action-state-layer: var(--dt-error);
+    --dt-error-icon: var(--dt-on-error);
+    --dt-error-link: var(--dt-on-error);
+    
     --dt-mime-type-blue: @blue;
-    --dt-mime-type-dark-blue: @blue;
+    --dt-mime-type-dark-blue: darken(@blue, @m3-deemphasize);
     --dt-mime-type-green: @green;
     --dt-mime-type-grey: @overlay0;
     --dt-mime-type-purple: @mauve;
-    --dt-mime-type-deep-purple: @mauve;
+    --dt-mime-type-deep-purple: darken(@mauve, @m3-deemphasize);
     --dt-mime-type-red: @red;
     --dt-mime-type-yellow: @yellow;
+
     --dt-disabled: @overlay0;
     --dt-on-disabled: @text;
-    --dt-outline: @overlay0;
-    --dt-outline-variant: @surface2;
-    --dt-light-info-banner-button: @text;
+
+    --dt-light-info-banner-button: @accent;
     --dt-light-neutral-banner-button: @text;
     --dt-light-success-banner-button: @green;
     --dt-light-warning-banner-button: @yellow;
     --dt-light-error-banner-button: @red;
 
-    --gm3-sys-color-background: @base;
-    --gm3-sys-color-background-rgb: #lib.rgbify(@base)[];
-    --gm3-sys-color-error: @red;
-    --gm3-sys-color-error-rgb: #lib.rgbify(@red)[];
-    --gm3-sys-color-error-container: @surface2;
-    --gm3-sys-color-error-container-rgb: #lib.rgbify(@surface2)[];
-    --gm3-sys-color-inverse-on-surface: @surface0;
-    --gm3-sys-color-inverse-on-surface-rgb: #lib.rgbify(@surface0)[];
-    --gm3-sys-color-inverse-primary: red;
-    --gm3-sys-color-inverse-primary-rgb: 255, 0, 0;
-    --gm3-sys-color-inverse-surface: @text;
-    --gm3-sys-color-inverse-surface-rgb: #lib.rgbify(@text)[];
-    --gm3-sys-color-on-background: @text;
-    --gm3-sys-color-on-background-rgb: #lib.rgbify(@text)[];
-    --gm3-sys-color-on-error: @base;
-    --gm3-sys-color-on-error-rgb: #lib.rgbify(@base)[];
-    --gm3-sys-color-on-error-container: @red;
-    --gm3-sys-color-on-error-container-rgb: #lib.rgbify(@red)[];
-    --gm3-sys-color-on-primary: @base;
-    --gm3-sys-color-on-primary-rgb: #lib.rgbify(@base)[];
-    --gm3-sys-color-on-primary-container: @text;
-    --gm3-sys-color-on-primary-container-rgb: #lib.rgbify(@text)[];
-    --gm3-sys-color-on-primary-fixed: @base;
-    --gm3-sys-color-on-primary-fixed-rgb: #lib.rgbify(@base);
-    --gm3-sys-color-on-primary-fixed-variant: @base;
-    --gm3-sys-color-on-primary-fixed-variant-rgb: #lib.rgbify(@base);
-    --gm3-sys-color-on-secondary: @base;
-    --gm3-sys-color-on-secondary-rgb: #lib.rgbify(@base)[];
-    --gm3-sys-color-on-secondary-container: @text;
-    --gm3-sys-color-on-secondary-container-rgb: #lib.rgbify(@text)[];
-    --gm3-sys-color-on-secondary-fixed: @base;
-    --gm3-sys-color-on-secondary-fixed-rgb: #lib.rgbify(@base)[];
-    --gm3-sys-color-on-secondary-fixed-variant: @base;
-    --gm3-sys-color-on-secondary-fixed-variant-rgb: #lib.rgbify(@base)[];
-    --gm3-sys-color-on-surface: @text;
-    --gm3-sys-color-on-surface-rgb: #lib.rgbify(@text)[];
-    --gm3-sys-color-on-surface-variant: @text;
-    --gm3-sys-color-on-surface-variant-rgb: #lib.rgbify(@text)[];
-    --gm3-sys-color-on-tertiary: @base;
-    --gm3-sys-color-on-tertiary-rgb: #lib.rgbify(@base)[];
-    --gm3-sys-color-on-tertiary-container: @text;
-    --gm3-sys-color-on-tertiary-container-rgb: #lib.rgbify(@text)[];
-    --gm3-sys-color-on-tertiary-fixed: @base;
-    --gm3-sys-color-on-tertiary-fixed-rgb: #lib.rgbify(@base)[];
-    --gm3-sys-color-on-tertiary-fixed-variant: @base;
-    --gm3-sys-color-on-tertiary-fixed-variant-rgb: #lib.rgbify(@base)[];
-    --gm3-sys-color-outline: @overlay0;
-    --gm3-sys-color-outline-rgb: #lib.rgbify(@overlay0)[];
-    --gm3-sys-color-outline-variant: @surface2;
-    --gm3-sys-color-outline-variant-rgb: #lib.rgbify(@surface2)[];
-    --gm3-sys-color-primary: @accent;
-    --gm3-sys-color-primary-rgb: #lib.rgbify(@accent)[];
-    --gm3-sys-color-primary-container: @surface0;
-    --gm3-sys-color-primary-container-rgb: #lib.rgbify(@surface0)[];
-    --gm3-sys-color-primary-fixed: @accent;
-    --gm3-sys-color-primary-fixed-rgb: #lib.rgbify(@accent)[];
-    --gm3-sys-color-primary-fixed-dim: @accent;
-    --gm3-sys-color-primary-fixed-dim-rgb: #lib.rgbify(@accent)[];
-    --gm3-sys-color-secondary: @accent;
-    --gm3-sys-color-secondary-rgb: #lib.rgbify(@accent);
-    --gm3-sys-color-secondary-container: @surface0;
-    --gm3-sys-color-secondary-container-rgb: #lib.rgbify(@surface0)[];
-    --gm3-sys-color-secondary-fixed: #c2e7ff;
-    --gm3-sys-color-secondary-fixed-rgb: 194, 231, 255;
-    --gm3-sys-color-secondary-fixed-dim: #7fcfff;
-    --gm3-sys-color-secondary-fixed-dim-rgb: 127, 207, 255;
-    --gm3-sys-color-surface: @base;
-    --gm3-sys-color-surface-rgb: #lib.rgbify(@base)[];
-    --gm3-sys-color-surface-bright: @base;
-    --gm3-sys-color-surface-bright-rgb: #lib.rgbify(@base)[];
-    --gm3-sys-color-surface-container: @surface0;
-    --gm3-sys-color-surface-container-rgb: #lib.rgbify(@surface0)[];
-    --gm3-sys-color-surface-container-high: @surface1;
-    --gm3-sys-color-surface-container-high-rgb: #lib.rgbify(@surface1)[];
-    --gm3-sys-color-surface-container-highest: @surface2;
-    --gm3-sys-color-surface-container-highest-rgb: #lib.rgbify(@surface2)[];
-    --gm3-sys-color-surface-container-low: @mantle;
-    --gm3-sys-color-surface-container-low-rgb: #lib.rgbify(@mantle)[];
-    --gm3-sys-color-surface-container-lowest: @crust;
-    --gm3-sys-color-surface-container-lowest-rgb: #lib.rgbify(@crust)[];
-    --gm3-sys-color-surface-dim: @crust;
-    --gm3-sys-color-surface-dim-rgb: #lib.rgbify(@crust)[];
-    --gm3-sys-color-surface-tint: @accent;
-    --gm3-sys-color-surface-tint-rgb: #lib.rgbify(@accent)[];
-    --gm3-sys-color-surface-variant: @surface0;
-    --gm3-sys-color-surface-variant-rgb: #lib.rgbify(@surface0)[];
-    --gm3-sys-color-tertiary: @accent;
-    --gm3-sys-color-tertiary-rgb: #lib.rgbify(@accent)[];
-    --gm3-sys-color-tertiary-container: @surface0;
-    --gm3-sys-color-tertiary-container-rgb: #lib.rgbify(@surface0);
-    --gm3-sys-color-tertiary-fixed: @accent;
-    --gm3-sys-color-tertiary-fixed-rgb: #lib.rgbify(@accent)[];
-    --gm3-sys-color-tertiary-fixed-dim: @accent;
-    --gm3-sys-color-tertiary-fixed-dim-rgb: #lib.rgbify(@accent)[];
-
-    & when (@flavor = latte) {
-      --dt-scrim: fade(@text, 50%);
-      --dt-scrim-2x: fade(@text, 50%);
-      --gm3-sys-color-scrim: @text;
-      --gm3-sys-color-scrim-rgb: #lib.rgbify(@text)[];
-      --gm3-sys-color-shadow: @text;
-      --gm3-sys-color-shadow-rgb: #lib.rgbify(@text)[];
-    }
-
-    & when not(@flavor = latte) {
-      --dt-scrim: fade(@base, 50%);
-      --dt-scrim-2x: fade(@base, 50%);
-      --gm3-sys-color-scrim: @base;
-      --gm3-sys-color-scrim-rgb: #lib.rgbify(@base)[];
-      --gm3-sys-color-shadow: @base;
-      --gm3-sys-color-shadow-rgb: #lib.rgbify(@base)[];
-    }
-
-    /* Settings menu title & back button */
+    --dt-blue-fill: @blue;
+    --dt-blue-outline: mix(@blue, @base, @m3-tint);
+    --dt-blue-tonal: mix(@blue, @base, @m3-tint);
+    --dt-gray-fill: @overlay0;
+    --dt-gray-outline: mix(@overlay0, @base, @m3-tint);
+    --dt-gray-tonal: mix(@overlay0, @base, @m3-tint);
+    --dt-green-fill: @green;
+    --dt-green-outline: mix(@green, @base, @m3-tint);
+    --dt-green-tonal: mix(@green, @base, @m3-tint);
+    --dt-orange-fill: @peach;
+    --dt-orange-outline: mix(@peach, @base, @m3-tint);
+    --dt-orange-tonal: mix(@peach, @base, @m3-tint);
+    --dt-purple-fill: @mauve;
+    --dt-purple-outline: mix(@mauve, @base, @m3-tint);
+    --dt-purple-tonal: mix(@mauve, @base, @m3-tint);
+    --dt-red-fill: @red;
+    --dt-red-outline: mix(@red, @base, @m3-tint);
+    --dt-red-tonal: mix(@red, @base, @m3-tint);
+    --dt-yellow-fill: @yellow;
+    --dt-yellow-outline: mix(@yellow, @base, @m3-tint);
+    --dt-yellow-tonal: mix(@yellow, @base, @m3-tint);
+
+    --dt-on-blue-fill: @base;
+    --dt-on-blue-outline: @blue;
+    --dt-on-blue-tonal: @blue;
+    --dt-on-gray-fill: @base;
+    --dt-on-gray-outline: @overlay0;
+    --dt-on-gray-tonal: @overlay0;
+    --dt-on-green-fill: @base;
+    --dt-on-green-outline: @green;
+    --dt-on-green-tonal: @green;
+    --dt-on-orange-fill: @base;
+    --dt-on-orange-outline: @peach;
+    --dt-on-orange-tonal: @peach;
+    --dt-on-purple-fill: @base;
+    --dt-on-purple-outline: @mauve;
+    --dt-on-purple-tonal: @mauve;
+    --dt-on-red-fill: @base;
+    --dt-on-red-outline: @red;
+    --dt-on-red-tonal: @red;
+    --dt-on-yellow-fill: @base;
+    --dt-on-yellow-outline: @yellow;
+    --dt-on-yellow-tonal: @yellow;
+
+    // Settings menu title & back button
     .gb_Pc svg,
     .gb_Uc.gb_Zc svg,
     .gb_Pc .gb_gd .gb_od,
@@ -291,12 +198,12 @@
       color: @text !important;
     }
 
-    /* Settings menu Storage total used icon */
+    // Settings menu Storage total used icon
     .VBJTHe svg path {
       fill: @text;
     }
 
-    /* Drive sync checkbox disabled */
+    // Drive sync checkbox disabled
     .MlG5Jc gm-checkbox[disabled] ~ .VfPpkd-ga,
     .MlG5Jc gm-radio[disabled] ~ .VfPpkd-ga,
     .MlG5Jc .VfPpkd-Qa-Qu-db ~ .VfPpkd-ga,
@@ -304,29 +211,29 @@
       color: @subtext0 !important;
     }
 
-    /* Quota hover box-shadow */
+    // Quota hover box-shadow
     .KnDsIf:hover,
     .KnDsIf:focus,
     .al9hA {
       box-shadow: 0 2px 6px @overlay0;
     }
 
-    /* Quota Google Drive */
+    // Quota Google Drive
     .kJzqSb {
       color: @blue;
     }
 
-    /* Quota Google Photos */
+    // Quota Google Photos
     .L1pqQb {
       color: @yellow;
     }
 
-    /* Quota Gmail */
+    // Quota Gmail
     .au0LDe {
       color: @red;
     }
 
-    /* Google Account outline */
+    // Google Account outline
     .gb_Ea.gb_i {
       border-color: @overlay0;
       background-color: @surface0;
@@ -336,202 +243,157 @@
       border-color: @subtext0;
     }
 
-    /* File preview (separate tab) background */
-    &.ndfHFb-c4YZDc-uoC0bf.ndfHFb-c4YZDc-i5oIFb .ndfHFb-c4YZDc-bnBfGc {
-      background-color: @base;
+    // File preview (separate tab) background
+    &[itemscope] .vhoiae:first-child {
+      background-color: var(--dt-surface-container-low);
     }
-    .a-b-uoC0bf.a-b-L .a-b-jl /* File preview (in Drive) background */ {
-      background-color: fade(@base, 85%);
+    // File preview (in Drive) background
+    > .vhoiae[role="dialog"] {
+      background-color: rgba(var(--dt-surface-container-low-rgb), 0.85);
     }
 
-    /* File preview (separate tab) top bar */
+    // File preview (separate tab) top bar
     &.ndfHFb-c4YZDc-uoC0bf.ndfHFb-c4YZDc-i5oIFb
       .ndfHFb-c4YZDc-Wrql6b.ndfHFb-c4YZDc-Wrql6b-Hyc8Sd,
-    .a-b-uoC0bf.a-b-L .a-b-K.a-b-K-Hyc8Sd /* File preview (in Drive) top bar */
+    // File preview (in Drive) top bar
+    .a-b-uoC0bf.a-b-L .a-b-K.a-b-K-Hyc8Sd
     {
-      background-color: fade(@base, 85%);
+      background-color: rgba(var(--dt-surface-container-low-rgb), 0.85);
     }
 
-    /* File preview (separate tab) bottom bar */
+    // File preview (separate tab) bottom bar
     .ndfHFb-c4YZDc-q77wGc .ndfHFb-c4YZDc-DARUcf-NnAfwf-i5oIFb,
     .ndfHFb-c4YZDc-q77wGc .ndfHFb-c4YZDc-nJjxad-nK2kYb-i5oIFb,
     .a-b-vo .a-b-La-yc-L,
-    .a-b-vo .a-b-Kb-ac-L /* File preview (in Drive) bottom bar */ {
-      background-color: fade(@base, 85%);
+    // File preview (in Drive) bottom bar
+    .a-b-vo .a-b-Kb-ac-L {
+      background-color: rgba(var(--dt-surface-container-low-rgb), 0.85);
       color: @text !important;
-      /* File preview (separate tab) page input */
+      // File preview (separate tab) page input
       .ndfHFb-c4YZDc-DARUcf-NGme3c-YPqjbf,
-      .a-b-La-su-vb /* File preview (in Drive) page input */ {
-        background-color: fade(@base, 50%);
+      // File preview (in Drive) page input
+      .a-b-La-su-vb {
+        background-color: rgba(var(--dt-surface-container-low-rgb), 0.50);
         color: @text;
       }
     }
 
-    /* File preview (separate tab) share button */
+    // File preview (separate tab) share button
     &.ndfHFb-c4YZDc-uoC0bf .zAYgkb-uoC0bf .tk3N6e-LgbsSe,
     &.ndfHFb-c4YZDc-uoC0bf
       .zAYgkb-mAKE4e-LQLjdd-xl07Ob-LgbsSe.VIpgJd-Kb3HCc-xl07Ob-LgbsSe,
     .a-b-uoC0bf .ae-uoC0bf .g-d,
     .a-b-uoC0bf
-      .ae-mAKE4e-Hc-w-d.h-R-w-d /* File preview (in Drive) share button */ {
-      background-color: @accent;
-      color: @base;
-      /* File preview (separate tab) share icon */
+    // File preview (in Drive) share button */
+      .ae-mAKE4e-Hc-w-d.h-R-w-d {
+      background-color: var(--dt-secondary-container);
+      // Should be --dt-on-secondary-container, but doesn't work with filter
+      color: @accent;
+      // File preview (separate tab) share icon
       .IyROMc-euCgFf-LJSvSb,
-      .ae-c /* File preview (in Drive) share icon */ {
-        & when (@flavor = latte) {
-          filter: brightness(0) invert(97%) sepia(4%) saturate(152%) hue-rotate(
-            183deg
-          ) brightness(94%) contrast(106%);
-        }
-        & when (@flavor = frappe) {
-          filter: brightness(0) invert(15%) sepia(8%) saturate(2252%)
-            hue-rotate(192deg) brightness(98%) contrast(85%);
-        }
-        & when (@flavor = macchiato) {
-          filter: brightness(0) invert(13%) sepia(26%) saturate(823%)
-            hue-rotate(195deg) brightness(90%) contrast(92%);
-        }
-        & when (@flavor = mocha) {
-          filter: brightness(0) invert(10%) sepia(36%) saturate(650%)
-            hue-rotate(201deg) brightness(90%) contrast(93%);
-        }
+      // File preview (in Drive) share icon
+      .ae-c {
+        filter: @accent-filter;
       }
-      /* File preview (separate tab) share triangle */
+      // File preview (separate tab) share triangle
       .VIpgJd-Kb3HCc-xl07Ob-LgbsSe-j4gsHd,
-      .h-R-w-d-Re /* File preview (in Drive) share triangle */ {
-        border-color: @base transparent !important;
+      // File preview (in Drive) share triangle
+      .h-R-w-d-Re {
+        border-color: @accent transparent !important;
       }
     }
-    /* File preview (separate tab) share Quick options */
+    // File preview (separate tab) share Quick options
     .zAYgkb-NhlrFc-xl07Ob-BvBYQ,
-    .h-w.ae-NhlrFc-w /* File preview (in Drive) share Quick options */ {
+    // File preview (in Drive) share Quick options
+    .h-w.ae-NhlrFc-w {
       background-color: @base;
       * {
         color: @text !important;
       }
-      /* File preview (in Drive) share Quick options current share level container */
+      // File preview (in Drive) share Quick options current share level container
       .h-v-x {
         opacity: 100%;
       }
-      /* File preview (separate tab) share Quick options divider */
+      // File preview (separate tab) share Quick options divider
       .zAYgkb-NhlrFc-gqMrKb,
-      .ae-NhlrFc-Yo /* File preview (in Drive) share Quick options divider */ {
-        border-color: @overlay0;
+      // File preview (in Drive) share Quick options divider 
+      .ae-NhlrFc-Yo {
+        border-color: var(--dt-outline);
       }
-      /* File preview (separate tab) share Quick options row hover */
+      // File preview (separate tab) share Quick options row hover
       .VIpgJd-j7LFlb-sn54Q,
-      .h-v-pc /* File preview (in Drive) share Quick options row hover */ {
-        background-color: @surface0;
+      // File preview (in Drive) share Quick options row hover
+      .h-v-pc {
+        background-color: rgba(var(--dt-on-surface-rgb), 0.08);
       }
-      /* File preview (separate tab) share Quick options row icon */
+      // File preview (separate tab) share Quick options row icon
       .IyROMc-euCgFf-LJSvSb,
-      .ba-ea-i /* File preview (in Drive) share Quick options row icon */ {
-        & when (@flavor = latte) {
-          filter: brightness(0) invert(31%) sepia(10%) saturate(1268%)
-            hue-rotate(196deg) brightness(90%) contrast(86%);
-        }
-        & when (@flavor = frappe) {
-          filter: brightness(0) invert(80%) sepia(7%) saturate(1070%)
-            hue-rotate(192deg) brightness(104%) contrast(92%);
-        }
-        & when (@flavor = macchiato) {
-          filter: brightness(0) invert(84%) sepia(13%) saturate(579%)
-            hue-rotate(193deg) brightness(99%) contrast(94%);
-        }
-        & when (@flavor = mocha) {
-          filter: brightness(0) invert(84%) sepia(19%) saturate(370%)
-            hue-rotate(192deg) brightness(98%) contrast(95%);
-        }
+      // File preview (in Drive) share Quick options row icon
+      .ba-ea-i {
+        filter: @text-filter;
       }
     }
-    /* File preview (separate tab) Print, Download, 3 dots */
+    // File preview (separate tab) Print, Download, 3 dots
     .ndfHFb-c4YZDc-Bz112c:not([style]),
     .ndfHFb-c4YZDc-Bz112c[style*="googlematerialicons"],
     .ndfHFb-c4YZDc-Bz112c[style="user-select: none;"],
     .ndfHFb-c4YZDc-Wrql6b-htvI8d-wcotoc-wHEfpf-ndfHFb-Bz112c
-    /* File preview (separate tab) Save to drive */,
-    .ndfHFb-c4YZDc-Wrql6b-w37qKe-Bz112c
-    /* File preview (separate tab) Save to drive (clicked) */,
-    /* File preview (in Drive) Print, Download, 3 dots */
+    // File preview (separate tab) Save to drive 
+    .ndfHFb-c4YZDc-Wrql6b-w37qKe-Bz112c,
+    // File preview (separate tab) Save to drive (clicked)
+    // File preview (in Drive) Print, Download, 3 dots
     .a-b-c:not([style]),
     .a-b-c[style*="googlematerialicons"],
     .a-b-c[style="user-select: none;"],
-    .a-b-K-zc-Eb-bg-a-c /* File preview (in Drive) Save to drive */,
-    .a-b-K-X-c /* File preview (in Drive) Save to drive (clicked) */ {
-      & when (@flavor = latte) {
-        filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) hue-rotate(
-          196deg
-        ) brightness(90%) contrast(86%);
-      }
-      & when (@flavor = frappe) {
-        filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) hue-rotate(
-          192deg
-        ) brightness(104%) contrast(92%);
-      }
-      & when (@flavor = macchiato) {
-        filter: brightness(0) invert(84%) sepia(13%) saturate(579%) hue-rotate(
-          193deg
-        ) brightness(99%) contrast(94%);
-      }
-      & when (@flavor = mocha) {
-        filter: brightness(0) invert(84%) sepia(19%) saturate(370%) hue-rotate(
-          192deg
-        ) brightness(98%) contrast(95%);
-      }
+    // File preview (in Drive) Save to drive 
+    .a-b-K-zc-Eb-bg-a-c,
+    // File preview (in Drive) Save to drive (clicked) 
+    .a-b-K-X-c {
+      filter: @text-filter;
     }
-    /* File preview (separate tab) File title */
+    // File preview (separate tab) File title
     .ndfHFb-c4YZDc-Wrql6b-V1ur5d,
-    .a-b-cg-Zf /* File preview (in Drive) File title */ {
+    // File preview (in Drive) File title
+    .a-b-cg-Zf {
       color: @text;
     }
-    /* File preview (separate tab) 3 dots menu item hover */
+    // File preview (separate tab) 3 dots menu item hover
     .ndfHFb-c4YZDc-j7LFlb:hover,
-    .a-b-v:hover /* File preview (in Drive) 3 dots menu item hover */ {
+    // File preview (in Drive) 3 dots menu item hover
+    .a-b-v:hover {
       background-color: @surface0;
     }
-    /* File preview (separate tab) No preview available */
+    // File preview (separate tab) No preview available
     .ndfHFb-c4YZDc-EglORb-haAclf,
-    .a-b-Tb-j /* File preview (in Drive) No preview available */ {
-      background-color: @surface0;
-      color: @text;
-      /* File preview (separate tab) No preview available Download */
+    // File preview (in Drive) No preview available
+    .a-b-Tb-j {
+      background-color: var(--dt-surface-container);
+      color: var(--dt-on-surface);
+      // File preview (separate tab) No preview available Download
       .ndfHFb-c4YZDc-bN97Pc-nupQLb-LgbsSe,
-      .a-b-x-rb-d /* File preview (in Drive) No preview available Download */ {
-        background-color: @surface1;
-        color: @text;
+      // File preview (in Drive) No preview available Download
+      .a-b-x-rb-d {
+        background-color: var(--dt-primary);
+        color: var(--dt-on-primary);
         text-shadow: none;
         border-color: transparent;
         &:hover {
-          background-color: @surface2;
           background-image: none;
+          background-color: color-mix(in oklab, var(--dt-primary), var(--dt-on-primary) 8%);
         }
       }
-      /* File preview (separate tab) No preview available Download icon */
+      // File preview (separate tab) No preview available Download icon
       .ndfHFb-c4YZDc-bN97Pc-nupQLb-LgbsSe-Bz112c,
-      .a-b-x-rb-d-c /* File preview (in Drive) No preview available Download icon */
+      // File preview (in Drive) No preview available Download icon
+      .a-b-x-rb-d-c
       {
-        & when (@flavor = latte) {
-          filter: brightness(0) invert(31%) sepia(10%) saturate(1268%)
-            hue-rotate(196deg) brightness(90%) contrast(86%);
-        }
-        & when (@flavor = frappe) {
-          filter: brightness(0) invert(80%) sepia(7%) saturate(1070%)
-            hue-rotate(192deg) brightness(104%) contrast(92%);
-        }
-        & when (@flavor = macchiato) {
-          filter: brightness(0) invert(84%) sepia(13%) saturate(579%)
-            hue-rotate(193deg) brightness(99%) contrast(94%);
-        }
-        & when (@flavor = mocha) {
-          filter: brightness(0) invert(84%) sepia(19%) saturate(370%)
-            hue-rotate(192deg) brightness(98%) contrast(95%);
-        }
+        filter: @base-filter;
       }
     }
-    /* File preview (in Drive) text document */
+    // File preview (in Drive) text document
     .a-b-r-x,
-    .ndfHFb-c4YZDc-fmcmS-bN97Pc /* File preview (separate tab) text document */
+    // File preview (separate tab) text document
+    .ndfHFb-c4YZDc-fmcmS-bN97Pc
     {
       &,
       pre {
@@ -539,25 +401,25 @@
         color: @text !important;
       }
     }
-    /* File preview (in Drive) comment on image */
+    // File preview (in Drive) comment on image
     .Yk-efwuC {
       background-color: @surface0 !important;
-      /* File preview (in Drive) comment on image person */
+      // File preview (in Drive) comment on image person
       .Yk-Vq7Udc {
         background-color: @surface0 !important;
         [data-name] {
           color: @text !important;
         }
-        /* Comment text */
+        // Comment text
         .Yk-eKrold-Sg.Yk-eKrold-Sg {
           color: @text !important;
         }
-        /* Comment date */
+        // Comment date
         .Yk-eKrold-bi {
           color: @subtext0 !important;
         }
       }
-      /* File preview (in Drive) comments */
+      // File preview (in Drive) comments
       .Yk-efwuC-vb-Gd {
         background-color: @surface0;
         &,
@@ -573,7 +435,7 @@
         }
         [role="button"] {
           background-color: @surface1 !important;
-          /* needed to override border-color */
+          // needed to override border-color
           &[role="button"] {
             border-color: @overlay0 !important;
           }
@@ -585,79 +447,119 @@
       }
     }
 
-    /* Drive sharing window material icon */
+    // File preview (in Drive) video processing banner
+    .a-b-Un-R3oXPe-xf {
+      background: var(--dt-primary-container);
+      color: var(--dt-on-primary-container);
+    }
+
+    // Video player
+    [data-player-id] {
+      @ae-media-theme: @catppuccin[@@darkFlavor];
+      --ae-media-overlay-controls-seeking-slider-active-track-color: @ae-media-theme[@text];
+      --ae-media-overlay-controls-seeking-slider-focus-handle-color: @ae-media-theme[@text];
+      --ae-media-overlay-controls-seeking-slider-pressed-handle-color: @ae-media-theme[@subtext0];
+      --ae-media-overlay-controls-seeking-slider-handle-color: @ae-media-theme[@text];
+      --ae-media-overlay-controls-seeking-slider-inactive-track-color: fade(@ae-media-theme[@text], 60%);
+
+      --ae-media-overlay-controls-iconbutton-selected-icon-color: @ae-media-theme[@text];
+      --ae-media-overlay-controls-iconbutton-selected-hover-icon-color: @ae-media-theme[@subtext1];
+      --ae-media-overlay-controls-iconbutton-selected-focus-icon-color: @ae-media-theme[@text];
+      --ae-media-overlay-controls-iconbutton-selected-pressed-icon-color: @ae-media-theme[@subtext0];
+      --ae-media-overlay-controls-iconbutton-unselected-icon-color: @ae-media-theme[@text];
+      --ae-media-overlay-controls-iconbutton-unselected-hover-icon-color: @ae-media-theme[@subtext1];
+      --ae-media-overlay-controls-iconbutton-unselected-focus-icon-color: @ae-media-theme[@text];
+      --ae-media-overlay-controls-iconbutton-unselected-pressed-icon-color: @ae-media-theme[@subtext0];
+
+      --ae-media-overlay-controls-timestamp-color: @ae-media-theme[@text];
+      --ae-media-overlay-controls-container-background: linear-gradient(180deg, transparent 0, fade(@ae-media-theme[@crust], 30%) 100%);
+      
+      // Context menu
+      .wj7EP {
+        --gm3-menu-container-color: fade(@ae-media-theme[@base], 80%);
+        --gm3-menu-list-item-selected-container-color: fade(@ae-media-theme[@text], 80%);
+      }
+
+      // Play button
+      .QZj8kf {
+        --gm3-icon-button-filled-container-color: fade(@ae-media-theme[@surface1], 30%);
+        --gm3-icon-button-filled-unselected-container-color: @ae-media-theme[@text];
+        --gm3-icon-button-filled-selected-container-color: fade(@ae-media-theme[@surface1], 30%);
+        --gm3-icon-button-filled-toggle-unselected-icon-color: @ae-media-theme[@base];
+        --gm3-icon-button-filled-toggle-selected-icon-color: @ae-media-theme[@text];
+        --gm3-icon-button-filled-toggle-selected-hover-icon-color: @ae-media-theme[@text];
+        --gm3-icon-button-filled-toggle-unselected-hover-icon-color: @ae-media-theme[@base];
+        --gm3-icon-button-filled-toggle-selected-focus-icon-color: @ae-media-theme[@text];
+        --gm3-icon-button-filled-toggle-unselected-focus-icon-color: @ae-media-theme[@base];
+        --gm3-icon-button-filled-toggle-selected-pressed-icon-color: @ae-media-theme[@text];
+        --gm3-icon-button-filled-toggle-unselected-pressed-icon-color: @ae-media-theme[@base];
+      }
+      // Settings menu
+      .ws5S4e {
+        --gm3-menu-list-item-selected-container-color: fade(@ae-media-theme[@surface1], 30%);
+        --gm3-list-list-item-selected-container-color: fade(@ae-media-theme[@surface1], 30%);
+        --gm3-menu-container-color: fade(@ae-media-theme[@surface1], 30%);
+      }
+      // Timestamp container
+      .grhbAe {
+        background-color: fade(@ae-media-theme[@surface1], 30%);
+      }
+      // Options container 
+      .Z3tdfe::before {
+        background-color: fade(@ae-media-theme[@surface1], 30%);
+      }
+      // Volume popup slider container 
+      .PqDlCb {
+        background-color: fade(@ae-media-theme[@surface1], 30%);
+      }
+      // Slider value indicator 
+      .E6snnb, .dJ5x8c {
+        --gm3-slider-value-indicator-label-label-text-color: @text;
+        --gm3-slider-value-indicator-container-color: fade(@ae-media-theme[@surface0], 60%);
+      }
+    }
+
+    // Drive sharing window material icon
     .SbpzSe .VfPpkd-StrnGf-rymPhb-f7MjDc {
       color: @accent;
     }
 
-    /* Drive sharing window access hover */
+    // Drive sharing window access hover
     .lfDNBb:hover,
     .lfDNBb:focus-within,
     .ZelW3e:hover .FYhd9e,
-    .ZelW3e:focus-within .FYhd9e /* Drive sharing window person row hover */ {
+    // Drive sharing window person row hover
+    .ZelW3e:focus-within .FYhd9e {
       background-color: @surface0;
     }
 
-    /* Drive sharing iframe (in Drive) */
+    // Drive sharing iframe (in Drive)
     .lb-k-x {
       color-scheme: unset;
     }
-    /* Drive sharing iframe (file preview separate tab) */
+    // Drive sharing iframe (file preview separate tab)
     .XKSfm-Sx9Kwc-bN97Pc {
-      color-scheme: auto; /* unset doesn't work? */
-    }
-    [role="tooltip"],
-    .Kk7lMc-Ca /* Drive applications sidebar tooltip */,
-    .gb_2e /* Drive google account tooltip */ {
-      background-color: @surface2;
-      *,
-      & {
-        color: @text !important;
-      }
-      border-color: transparent;
-      /* File preview (separate tab) tooltip arrow */
-      .tk3N6e-suEOdc-jQ8oHc,
-      .tk3N6e-suEOdc-ez0xG {
-        border-color: @surface2 transparent !important;
-      }
+      // unset doesn't work?
+      color-scheme: auto;
     }
 
-    /* Drive applications sidebar close button */
+    // Drive applications sidebar close button
     .Kk7lMc-QWPxkf-d-j .Yb-Il-d .Yb-Il-d-c-j {
       background-color: @surface0;
       path:nth-child(1) {
         stroke: @text;
       }
     }
-    /* Drive applications sidebar get addons */
+    // Drive applications sidebar get addons
     .Yb-Il-d#qJTzr .Yb-Il-d-c-j {
-      & when (@flavor = latte) {
-        filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) hue-rotate(
-          196deg
-        ) brightness(90%) contrast(86%);
-      }
-      & when (@flavor = frappe) {
-        filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) hue-rotate(
-          192deg
-        ) brightness(104%) contrast(92%);
-      }
-      & when (@flavor = macchiato) {
-        filter: brightness(0) invert(84%) sepia(13%) saturate(579%) hue-rotate(
-          193deg
-        ) brightness(99%) contrast(94%);
-      }
-      & when (@flavor = mocha) {
-        filter: brightness(0) invert(84%) sepia(19%) saturate(370%) hue-rotate(
-          192deg
-        ) brightness(98%) contrast(95%);
-      }
+      filter: @text-filter;
     }
-    /* Drive applications sidebar close button white background */
+    // Drive applications sidebar close button white background
     .Yb-Il-d-c-Nd {
       background-color: transparent;
     }
 
-    /* Drive icon */
+    // Drive icon
     [src="//ssl.gstatic.com/images/branding/product/1x/drive_2020q4_48dp.png"] {
       @darkBlue: mix(@blue, @base, 80%);
       @darkGreen: mix(@green, @base, 80%);
@@ -668,7 +570,7 @@
       content: url("data:image/svg+xml,@{svg}");
     }
 
-    /* Drive upload checkmark */
+    // Drive upload checkmark
     .z-Ea-Fj-c svg path {
       fill: @green;
     }