@expressivecss/expressive 0.4.0 → 0.5.0

package/dist/css/expressive.css

@@ -5,8 +5,14 @@
     --md-source: #006A79;
     /* primary, secondary, tertiary, neutral, neutral-variant - all generated */
     --md-ref-palette-primary0: oklch(from var(--md-source) 0% 0 calc(h + 1));
+    --md-ref-palette-primary4: oklch(from var(--md-source) 8.95% 0.123 calc(h + 1));
+    --md-ref-palette-primary6: oklch(from var(--md-source) 13.42% 0.123 calc(h + 1));
     --md-ref-palette-primary10: oklch(from var(--md-source) 22.37% 0.123 calc(h + 1));
+    --md-ref-palette-primary12: oklch(from var(--md-source) 24.09% 0.123 calc(h + 1));
+    --md-ref-palette-primary17: oklch(from var(--md-source) 28.4% 0.123 calc(h + 1));
     --md-ref-palette-primary20: oklch(from var(--md-source) 30.99% 0.123 calc(h + 1));
+    --md-ref-palette-primary22: oklch(from var(--md-source) 32.7% 0.123 calc(h + 1));
+    --md-ref-palette-primary24: oklch(from var(--md-source) 34.41% 0.123 calc(h + 1));
     --md-ref-palette-primary25: oklch(from var(--md-source) 35.26% 0.123 calc(h + 1));
     --md-ref-palette-primary30: oklch(from var(--md-source) 39.48% 0.123 calc(h + 1));
     --md-ref-palette-primary35: oklch(from var(--md-source) 43.79% 0.123 calc(h + 1));
@@ -15,14 +21,24 @@
     --md-ref-palette-primary60: oklch(from var(--md-source) 65.42% 0.123 calc(h + 1));
     --md-ref-palette-primary70: oklch(from var(--md-source) 74.04% 0.123 calc(h + 1));
     --md-ref-palette-primary80: oklch(from var(--md-source) 82.63% 0.123 calc(h + 1));
+    --md-ref-palette-primary87: oklch(from var(--md-source) 88.72% 0.123 calc(h + 1));
     --md-ref-palette-primary90: oklch(from var(--md-source) 91.33% 0.123 calc(h + 1));
+    --md-ref-palette-primary92: oklch(from var(--md-source) 93.05% 0.123 calc(h + 1));
+    --md-ref-palette-primary94: oklch(from var(--md-source) 94.76% 0.123 calc(h + 1));
     --md-ref-palette-primary95: oklch(from var(--md-source) 95.62% 0.123 calc(h + 1));
+    --md-ref-palette-primary96: oklch(from var(--md-source) 96.5% 0.123 calc(h + 1));
     --md-ref-palette-primary98: oklch(from var(--md-source) 98.25% 0.123 calc(h + 1));
     --md-ref-palette-primary99: oklch(from var(--md-source) 99.19% 0.123 calc(h + 1));
     --md-ref-palette-primary100: oklch(from var(--md-source) 100% 0 calc(h + 1));
     --md-ref-palette-secondary0: oklch(from var(--md-source) 0% 0 calc(h + 5));
+    --md-ref-palette-secondary4: oklch(from var(--md-source) 8.95% 0.03 calc(h + 5));
+    --md-ref-palette-secondary6: oklch(from var(--md-source) 13.42% 0.03 calc(h + 5));
     --md-ref-palette-secondary10: oklch(from var(--md-source) 22.37% 0.03 calc(h + 5));
+    --md-ref-palette-secondary12: oklch(from var(--md-source) 24.09% 0.03 calc(h + 5));
+    --md-ref-palette-secondary17: oklch(from var(--md-source) 28.4% 0.03 calc(h + 5));
     --md-ref-palette-secondary20: oklch(from var(--md-source) 30.99% 0.03 calc(h + 5));
+    --md-ref-palette-secondary22: oklch(from var(--md-source) 32.7% 0.03 calc(h + 5));
+    --md-ref-palette-secondary24: oklch(from var(--md-source) 34.41% 0.03 calc(h + 5));
     --md-ref-palette-secondary25: oklch(from var(--md-source) 35.26% 0.03 calc(h + 5));
     --md-ref-palette-secondary30: oklch(from var(--md-source) 39.48% 0.03 calc(h + 5));
     --md-ref-palette-secondary35: oklch(from var(--md-source) 43.79% 0.03 calc(h + 5));
@@ -31,14 +47,24 @@
     --md-ref-palette-secondary60: oklch(from var(--md-source) 65.42% 0.03 calc(h + 5));
     --md-ref-palette-secondary70: oklch(from var(--md-source) 74.04% 0.03 calc(h + 5));
     --md-ref-palette-secondary80: oklch(from var(--md-source) 82.63% 0.03 calc(h + 5));
+    --md-ref-palette-secondary87: oklch(from var(--md-source) 88.72% 0.03 calc(h + 5));
     --md-ref-palette-secondary90: oklch(from var(--md-source) 91.33% 0.03 calc(h + 5));
+    --md-ref-palette-secondary92: oklch(from var(--md-source) 93.05% 0.03 calc(h + 5));
+    --md-ref-palette-secondary94: oklch(from var(--md-source) 94.76% 0.03 calc(h + 5));
     --md-ref-palette-secondary95: oklch(from var(--md-source) 95.62% 0.03 calc(h + 5));
+    --md-ref-palette-secondary96: oklch(from var(--md-source) 96.5% 0.03 calc(h + 5));
     --md-ref-palette-secondary98: oklch(from var(--md-source) 98.25% 0.03 calc(h + 5));
     --md-ref-palette-secondary99: oklch(from var(--md-source) 99.19% 0.03 calc(h + 5));
     --md-ref-palette-secondary100: oklch(from var(--md-source) 100% 0 calc(h + 5));
     --md-ref-palette-tertiary0: oklch(from var(--md-source) 0% 0 calc(h + 62));
+    --md-ref-palette-tertiary4: oklch(from var(--md-source) 8.95% 0.058 calc(h + 62));
+    --md-ref-palette-tertiary6: oklch(from var(--md-source) 13.42% 0.058 calc(h + 62));
     --md-ref-palette-tertiary10: oklch(from var(--md-source) 22.37% 0.058 calc(h + 62));
+    --md-ref-palette-tertiary12: oklch(from var(--md-source) 24.09% 0.058 calc(h + 62));
+    --md-ref-palette-tertiary17: oklch(from var(--md-source) 28.4% 0.058 calc(h + 62));
     --md-ref-palette-tertiary20: oklch(from var(--md-source) 30.99% 0.058 calc(h + 62));
+    --md-ref-palette-tertiary22: oklch(from var(--md-source) 32.7% 0.058 calc(h + 62));
+    --md-ref-palette-tertiary24: oklch(from var(--md-source) 34.41% 0.058 calc(h + 62));
     --md-ref-palette-tertiary25: oklch(from var(--md-source) 35.26% 0.058 calc(h + 62));
     --md-ref-palette-tertiary30: oklch(from var(--md-source) 39.48% 0.058 calc(h + 62));
     --md-ref-palette-tertiary35: oklch(from var(--md-source) 43.79% 0.058 calc(h + 62));
@@ -47,14 +73,24 @@
     --md-ref-palette-tertiary60: oklch(from var(--md-source) 65.42% 0.058 calc(h + 62));
     --md-ref-palette-tertiary70: oklch(from var(--md-source) 74.04% 0.058 calc(h + 62));
     --md-ref-palette-tertiary80: oklch(from var(--md-source) 82.63% 0.058 calc(h + 62));
+    --md-ref-palette-tertiary87: oklch(from var(--md-source) 88.72% 0.058 calc(h + 62));
     --md-ref-palette-tertiary90: oklch(from var(--md-source) 91.33% 0.058 calc(h + 62));
+    --md-ref-palette-tertiary92: oklch(from var(--md-source) 93.05% 0.058 calc(h + 62));
+    --md-ref-palette-tertiary94: oklch(from var(--md-source) 94.76% 0.058 calc(h + 62));
     --md-ref-palette-tertiary95: oklch(from var(--md-source) 95.62% 0.058 calc(h + 62));
+    --md-ref-palette-tertiary96: oklch(from var(--md-source) 96.5% 0.058 calc(h + 62));
     --md-ref-palette-tertiary98: oklch(from var(--md-source) 98.25% 0.058 calc(h + 62));
     --md-ref-palette-tertiary99: oklch(from var(--md-source) 99.19% 0.058 calc(h + 62));
     --md-ref-palette-tertiary100: oklch(from var(--md-source) 100% 0 calc(h + 62));
     --md-ref-palette-neutral0: oklch(from var(--md-source) 0% 0 calc(h + 17));
+    --md-ref-palette-neutral4: oklch(from var(--md-source) 8.95% 0.004 calc(h + 17));
+    --md-ref-palette-neutral6: oklch(from var(--md-source) 13.42% 0.004 calc(h + 17));
     --md-ref-palette-neutral10: oklch(from var(--md-source) 22.37% 0.004 calc(h + 17));
+    --md-ref-palette-neutral12: oklch(from var(--md-source) 24.09% 0.004 calc(h + 17));
+    --md-ref-palette-neutral17: oklch(from var(--md-source) 28.4% 0.004 calc(h + 17));
     --md-ref-palette-neutral20: oklch(from var(--md-source) 30.99% 0.004 calc(h + 17));
+    --md-ref-palette-neutral22: oklch(from var(--md-source) 32.7% 0.004 calc(h + 17));
+    --md-ref-palette-neutral24: oklch(from var(--md-source) 34.41% 0.004 calc(h + 17));
     --md-ref-palette-neutral25: oklch(from var(--md-source) 35.26% 0.004 calc(h + 17));
     --md-ref-palette-neutral30: oklch(from var(--md-source) 39.48% 0.004 calc(h + 17));
     --md-ref-palette-neutral35: oklch(from var(--md-source) 43.79% 0.004 calc(h + 17));
@@ -63,14 +99,24 @@
     --md-ref-palette-neutral60: oklch(from var(--md-source) 65.42% 0.004 calc(h + 17));
     --md-ref-palette-neutral70: oklch(from var(--md-source) 74.04% 0.004 calc(h + 17));
     --md-ref-palette-neutral80: oklch(from var(--md-source) 82.63% 0.004 calc(h + 17));
+    --md-ref-palette-neutral87: oklch(from var(--md-source) 88.72% 0.004 calc(h + 17));
     --md-ref-palette-neutral90: oklch(from var(--md-source) 91.33% 0.004 calc(h + 17));
+    --md-ref-palette-neutral92: oklch(from var(--md-source) 93.05% 0.004 calc(h + 17));
+    --md-ref-palette-neutral94: oklch(from var(--md-source) 94.76% 0.004 calc(h + 17));
     --md-ref-palette-neutral95: oklch(from var(--md-source) 95.62% 0.004 calc(h + 17));
+    --md-ref-palette-neutral96: oklch(from var(--md-source) 96.5% 0.004 calc(h + 17));
     --md-ref-palette-neutral98: oklch(from var(--md-source) 98.25% 0.004 calc(h + 17));
     --md-ref-palette-neutral99: oklch(from var(--md-source) 99.19% 0.004 calc(h + 17));
     --md-ref-palette-neutral100: oklch(from var(--md-source) 100% 0 calc(h + 17));
     --md-ref-palette-neutral-variant0: oklch(from var(--md-source) 0% 0 calc(h + 9));
+    --md-ref-palette-neutral-variant4: oklch(from var(--md-source) 8.95% 0.013 calc(h + 9));
+    --md-ref-palette-neutral-variant6: oklch(from var(--md-source) 13.42% 0.013 calc(h + 9));
     --md-ref-palette-neutral-variant10: oklch(from var(--md-source) 22.37% 0.013 calc(h + 9));
+    --md-ref-palette-neutral-variant12: oklch(from var(--md-source) 24.09% 0.013 calc(h + 9));
+    --md-ref-palette-neutral-variant17: oklch(from var(--md-source) 28.4% 0.013 calc(h + 9));
     --md-ref-palette-neutral-variant20: oklch(from var(--md-source) 30.99% 0.013 calc(h + 9));
+    --md-ref-palette-neutral-variant22: oklch(from var(--md-source) 32.7% 0.013 calc(h + 9));
+    --md-ref-palette-neutral-variant24: oklch(from var(--md-source) 34.41% 0.013 calc(h + 9));
     --md-ref-palette-neutral-variant25: oklch(from var(--md-source) 35.26% 0.013 calc(h + 9));
     --md-ref-palette-neutral-variant30: oklch(from var(--md-source) 39.48% 0.013 calc(h + 9));
     --md-ref-palette-neutral-variant35: oklch(from var(--md-source) 43.79% 0.013 calc(h + 9));
@@ -79,8 +125,12 @@
     --md-ref-palette-neutral-variant60: oklch(from var(--md-source) 65.42% 0.013 calc(h + 9));
     --md-ref-palette-neutral-variant70: oklch(from var(--md-source) 74.04% 0.013 calc(h + 9));
     --md-ref-palette-neutral-variant80: oklch(from var(--md-source) 82.63% 0.013 calc(h + 9));
+    --md-ref-palette-neutral-variant87: oklch(from var(--md-source) 88.72% 0.013 calc(h + 9));
     --md-ref-palette-neutral-variant90: oklch(from var(--md-source) 91.33% 0.013 calc(h + 9));
+    --md-ref-palette-neutral-variant92: oklch(from var(--md-source) 93.05% 0.013 calc(h + 9));
+    --md-ref-palette-neutral-variant94: oklch(from var(--md-source) 94.76% 0.013 calc(h + 9));
     --md-ref-palette-neutral-variant95: oklch(from var(--md-source) 95.62% 0.013 calc(h + 9));
+    --md-ref-palette-neutral-variant96: oklch(from var(--md-source) 96.5% 0.013 calc(h + 9));
     --md-ref-palette-neutral-variant98: oklch(from var(--md-source) 98.25% 0.013 calc(h + 9));
     --md-ref-palette-neutral-variant99: oklch(from var(--md-source) 99.19% 0.013 calc(h + 9));
     --md-ref-palette-neutral-variant100: oklch(from var(--md-source) 100% 0 calc(h + 9));
@@ -111,63 +161,101 @@
     --md-sys-color-on-primary-light: var(--md-ref-palette-primary100);
     --md-sys-color-primary-container-light: var(--md-ref-palette-primary90);
     --md-sys-color-on-primary-container-light: var(--md-ref-palette-primary10);
+    --md-sys-color-primary-fixed-light: var(--md-ref-palette-primary90);
+    --md-sys-color-primary-fixed-dim-light: var(--md-ref-palette-primary80);
+    --md-sys-color-on-primary-fixed-light: var(--md-ref-palette-primary10);
+    --md-sys-color-on-primary-fixed-variant-light: var(--md-ref-palette-primary30);
     --md-sys-color-secondary-light: var(--md-ref-palette-secondary40);
     --md-sys-color-on-secondary-light: var(--md-ref-palette-secondary100);
     --md-sys-color-secondary-container-light: var(--md-ref-palette-secondary90);
     --md-sys-color-on-secondary-container-light: var(--md-ref-palette-secondary10);
+    --md-sys-color-secondary-fixed-light: var(--md-ref-palette-secondary90);
+    --md-sys-color-secondary-fixed-dim-light: var(--md-ref-palette-secondary80);
+    --md-sys-color-on-secondary-fixed-light: var(--md-ref-palette-secondary10);
+    --md-sys-color-on-secondary-fixed-variant-light: var(--md-ref-palette-secondary30);
     --md-sys-color-tertiary-light: var(--md-ref-palette-tertiary40);
     --md-sys-color-on-tertiary-light: var(--md-ref-palette-tertiary100);
     --md-sys-color-tertiary-container-light: var(--md-ref-palette-tertiary90);
     --md-sys-color-on-tertiary-container-light: var(--md-ref-palette-tertiary10);
+    --md-sys-color-tertiary-fixed-light: var(--md-ref-palette-tertiary90);
+    --md-sys-color-tertiary-fixed-dim-light: var(--md-ref-palette-tertiary80);
+    --md-sys-color-on-tertiary-fixed-light: var(--md-ref-palette-tertiary10);
+    --md-sys-color-on-tertiary-fixed-variant-light: var(--md-ref-palette-tertiary30);
     --md-sys-color-error-light: var(--md-ref-palette-error40);
     --md-sys-color-on-error-light: var(--md-ref-palette-error100);
     --md-sys-color-error-container-light: var(--md-ref-palette-error90);
     --md-sys-color-on-error-container-light: var(--md-ref-palette-error10);
-    --md-sys-color-background-light: var(--md-ref-palette-neutral99);
-    --md-sys-color-on-background-light: var(--md-ref-palette-neutral10);
-    --md-sys-color-surface-light: var(--md-ref-palette-neutral99);
+    --md-sys-color-surface-light: var(--md-ref-palette-neutral98);
     --md-sys-color-on-surface-light: var(--md-ref-palette-neutral10);
-    --md-sys-color-surface-variant-light: var(--md-ref-palette-neutral-variant90);
     --md-sys-color-on-surface-variant-light: var(--md-ref-palette-neutral-variant30);
+    --md-sys-color-surface-dim-light: var(--md-ref-palette-neutral87);
+    --md-sys-color-surface-bright-light: var(--md-ref-palette-neutral98);
+    --md-sys-color-surface-container-lowest-light: var(--md-ref-palette-neutral100);
+    --md-sys-color-surface-container-low-light: var(--md-ref-palette-neutral96);
+    --md-sys-color-surface-container-light: var(--md-ref-palette-neutral94);
+    --md-sys-color-surface-container-high-light: var(--md-ref-palette-neutral92);
+    --md-sys-color-surface-container-highest-light: var(--md-ref-palette-neutral90);
     --md-sys-color-outline-light: var(--md-ref-palette-neutral-variant50);
     --md-sys-color-outline-variant-light: var(--md-ref-palette-neutral-variant80);
     --md-sys-color-inverse-surface-light: var(--md-ref-palette-neutral20);
     --md-sys-color-inverse-on-surface-light: var(--md-ref-palette-neutral95);
     --md-sys-color-inverse-primary-light: var(--md-ref-palette-primary80);
-    --md-sys-color-surface-tint-light: var(--md-ref-palette-primary40);
-    --md-sys-color-shadow-light: var(--md-ref-palette-neutral0);
     --md-sys-color-scrim-light: var(--md-ref-palette-neutral0);
+    --md-sys-color-shadow-light: var(--md-ref-palette-neutral0);
+    --md-sys-color-background-light: var(--md-ref-palette-neutral98);
+    --md-sys-color-on-background-light: var(--md-ref-palette-neutral10);
+    --md-sys-color-surface-variant-light: var(--md-ref-palette-neutral-variant90);
+    --md-sys-color-surface-tint-light: var(--md-ref-palette-primary40);
     /* dark scheme */
     --md-sys-color-primary-dark: var(--md-ref-palette-primary80);
     --md-sys-color-on-primary-dark: var(--md-ref-palette-primary20);
     --md-sys-color-primary-container-dark: var(--md-ref-palette-primary30);
     --md-sys-color-on-primary-container-dark: var(--md-ref-palette-primary90);
+    --md-sys-color-primary-fixed-dark: var(--md-ref-palette-primary90);
+    --md-sys-color-primary-fixed-dim-dark: var(--md-ref-palette-primary80);
+    --md-sys-color-on-primary-fixed-dark: var(--md-ref-palette-primary10);
+    --md-sys-color-on-primary-fixed-variant-dark: var(--md-ref-palette-primary30);
     --md-sys-color-secondary-dark: var(--md-ref-palette-secondary80);
     --md-sys-color-on-secondary-dark: var(--md-ref-palette-secondary20);
     --md-sys-color-secondary-container-dark: var(--md-ref-palette-secondary30);
     --md-sys-color-on-secondary-container-dark: var(--md-ref-palette-secondary90);
+    --md-sys-color-secondary-fixed-dark: var(--md-ref-palette-secondary90);
+    --md-sys-color-secondary-fixed-dim-dark: var(--md-ref-palette-secondary80);
+    --md-sys-color-on-secondary-fixed-dark: var(--md-ref-palette-secondary10);
+    --md-sys-color-on-secondary-fixed-variant-dark: var(--md-ref-palette-secondary30);
     --md-sys-color-tertiary-dark: var(--md-ref-palette-tertiary80);
     --md-sys-color-on-tertiary-dark: var(--md-ref-palette-tertiary20);
     --md-sys-color-tertiary-container-dark: var(--md-ref-palette-tertiary30);
     --md-sys-color-on-tertiary-container-dark: var(--md-ref-palette-tertiary90);
+    --md-sys-color-tertiary-fixed-dark: var(--md-ref-palette-tertiary90);
+    --md-sys-color-tertiary-fixed-dim-dark: var(--md-ref-palette-tertiary80);
+    --md-sys-color-on-tertiary-fixed-dark: var(--md-ref-palette-tertiary10);
+    --md-sys-color-on-tertiary-fixed-variant-dark: var(--md-ref-palette-tertiary30);
     --md-sys-color-error-dark: var(--md-ref-palette-error80);
     --md-sys-color-on-error-dark: var(--md-ref-palette-error20);
     --md-sys-color-error-container-dark: var(--md-ref-palette-error30);
     --md-sys-color-on-error-container-dark: var(--md-ref-palette-error90);
-    --md-sys-color-background-dark: var(--md-ref-palette-neutral10);
-    --md-sys-color-on-background-dark: var(--md-ref-palette-neutral90);
-    --md-sys-color-surface-dark: var(--md-ref-palette-neutral10);
+    --md-sys-color-surface-dark: var(--md-ref-palette-neutral6);
     --md-sys-color-on-surface-dark: var(--md-ref-palette-neutral90);
-    --md-sys-color-surface-variant-dark: var(--md-ref-palette-neutral-variant30);
     --md-sys-color-on-surface-variant-dark: var(--md-ref-palette-neutral-variant80);
+    --md-sys-color-surface-dim-dark: var(--md-ref-palette-neutral6);
+    --md-sys-color-surface-bright-dark: var(--md-ref-palette-neutral24);
+    --md-sys-color-surface-container-lowest-dark: var(--md-ref-palette-neutral4);
+    --md-sys-color-surface-container-low-dark: var(--md-ref-palette-neutral10);
+    --md-sys-color-surface-container-dark: var(--md-ref-palette-neutral12);
+    --md-sys-color-surface-container-high-dark: var(--md-ref-palette-neutral17);
+    --md-sys-color-surface-container-highest-dark: var(--md-ref-palette-neutral22);
     --md-sys-color-outline-dark: var(--md-ref-palette-neutral-variant60);
     --md-sys-color-outline-variant-dark: var(--md-ref-palette-neutral-variant30);
     --md-sys-color-inverse-surface-dark: var(--md-ref-palette-neutral90);
     --md-sys-color-inverse-on-surface-dark: var(--md-ref-palette-neutral10);
     --md-sys-color-inverse-primary-dark: var(--md-ref-palette-primary40);
-    --md-sys-color-surface-tint-dark: var(--md-ref-palette-primary80);
-    --md-sys-color-shadow-dark: var(--md-ref-palette-neutral0);
     --md-sys-color-scrim-dark: var(--md-ref-palette-neutral0);
+    --md-sys-color-shadow-dark: var(--md-ref-palette-neutral0);
+    --md-sys-color-background-dark: var(--md-ref-palette-neutral6);
+    --md-sys-color-on-background-dark: var(--md-ref-palette-neutral90);
+    --md-sys-color-surface-variant-dark: var(--md-ref-palette-neutral-variant30);
+    --md-sys-color-surface-tint-dark: var(--md-ref-palette-primary80);
     /* display - large */
     --md-sys-typescale-display-large-font-family-name: Roboto;
     --md-sys-typescale-display-large-font-family-style: Regular;
@@ -292,6 +380,22 @@
       var(--md-sys-color-on-primary-container-light),
       var(--md-sys-color-on-primary-container-dark)
     );
+    --md-sys-color-primary-fixed: light-dark(
+      var(--md-sys-color-primary-fixed-light),
+      var(--md-sys-color-primary-fixed-dark)
+    );
+    --md-sys-color-primary-fixed-dim: light-dark(
+      var(--md-sys-color-primary-fixed-dim-light),
+      var(--md-sys-color-primary-fixed-dim-dark)
+    );
+    --md-sys-color-on-primary-fixed: light-dark(
+      var(--md-sys-color-on-primary-fixed-light),
+      var(--md-sys-color-on-primary-fixed-dark)
+    );
+    --md-sys-color-on-primary-fixed-variant: light-dark(
+      var(--md-sys-color-on-primary-fixed-variant-light),
+      var(--md-sys-color-on-primary-fixed-variant-dark)
+    );
     --md-sys-color-secondary: light-dark(
       var(--md-sys-color-secondary-light),
       var(--md-sys-color-secondary-dark)
@@ -308,6 +412,22 @@
       var(--md-sys-color-on-secondary-container-light),
       var(--md-sys-color-on-secondary-container-dark)
     );
+    --md-sys-color-secondary-fixed: light-dark(
+      var(--md-sys-color-secondary-fixed-light),
+      var(--md-sys-color-secondary-fixed-dark)
+    );
+    --md-sys-color-secondary-fixed-dim: light-dark(
+      var(--md-sys-color-secondary-fixed-dim-light),
+      var(--md-sys-color-secondary-fixed-dim-dark)
+    );
+    --md-sys-color-on-secondary-fixed: light-dark(
+      var(--md-sys-color-on-secondary-fixed-light),
+      var(--md-sys-color-on-secondary-fixed-dark)
+    );
+    --md-sys-color-on-secondary-fixed-variant: light-dark(
+      var(--md-sys-color-on-secondary-fixed-variant-light),
+      var(--md-sys-color-on-secondary-fixed-variant-dark)
+    );
     --md-sys-color-tertiary: light-dark(
       var(--md-sys-color-tertiary-light),
       var(--md-sys-color-tertiary-dark)
@@ -324,6 +444,22 @@
       var(--md-sys-color-on-tertiary-container-light),
       var(--md-sys-color-on-tertiary-container-dark)
     );
+    --md-sys-color-tertiary-fixed: light-dark(
+      var(--md-sys-color-tertiary-fixed-light),
+      var(--md-sys-color-tertiary-fixed-dark)
+    );
+    --md-sys-color-tertiary-fixed-dim: light-dark(
+      var(--md-sys-color-tertiary-fixed-dim-light),
+      var(--md-sys-color-tertiary-fixed-dim-dark)
+    );
+    --md-sys-color-on-tertiary-fixed: light-dark(
+      var(--md-sys-color-on-tertiary-fixed-light),
+      var(--md-sys-color-on-tertiary-fixed-dark)
+    );
+    --md-sys-color-on-tertiary-fixed-variant: light-dark(
+      var(--md-sys-color-on-tertiary-fixed-variant-light),
+      var(--md-sys-color-on-tertiary-fixed-variant-dark)
+    );
     --md-sys-color-error: light-dark(
       var(--md-sys-color-error-light),
       var(--md-sys-color-error-dark)
@@ -340,22 +476,6 @@
       var(--md-sys-color-on-error-container-light),
       var(--md-sys-color-on-error-container-dark)
     );
-    --md-sys-color-outline: light-dark(
-      var(--md-sys-color-outline-light),
-      var(--md-sys-color-outline-dark)
-    );
-    --md-sys-color-outline-variant: light-dark(
-      var(--md-sys-color-outline-variant-light),
-      var(--md-sys-color-outline-variant-dark)
-    );
-    --md-sys-color-background: light-dark(
-      var(--md-sys-color-background-light),
-      var(--md-sys-color-background-dark)
-    );
-    --md-sys-color-on-background: light-dark(
-      var(--md-sys-color-on-background-light),
-      var(--md-sys-color-on-background-dark)
-    );
     --md-sys-color-surface: light-dark(
       var(--md-sys-color-surface-light),
       var(--md-sys-color-surface-dark)
@@ -364,14 +484,46 @@
       var(--md-sys-color-on-surface-light),
       var(--md-sys-color-on-surface-dark)
     );
-    --md-sys-color-surface-variant: light-dark(
-      var(--md-sys-color-surface-variant-light),
-      var(--md-sys-color-surface-variant-dark)
-    );
     --md-sys-color-on-surface-variant: light-dark(
       var(--md-sys-color-on-surface-variant-light),
       var(--md-sys-color-on-surface-variant-dark)
     );
+    --md-sys-color-surface-dim: light-dark(
+      var(--md-sys-color-surface-dim-light),
+      var(--md-sys-color-surface-dim-dark)
+    );
+    --md-sys-color-surface-bright: light-dark(
+      var(--md-sys-color-surface-bright-light),
+      var(--md-sys-color-surface-bright-dark)
+    );
+    --md-sys-color-surface-container-lowest: light-dark(
+      var(--md-sys-color-surface-container-lowest-light),
+      var(--md-sys-color-surface-container-lowest-dark)
+    );
+    --md-sys-color-surface-container-low: light-dark(
+      var(--md-sys-color-surface-container-low-light),
+      var(--md-sys-color-surface-container-low-dark)
+    );
+    --md-sys-color-surface-container: light-dark(
+      var(--md-sys-color-surface-container-light),
+      var(--md-sys-color-surface-container-dark)
+    );
+    --md-sys-color-surface-container-high: light-dark(
+      var(--md-sys-color-surface-container-high-light),
+      var(--md-sys-color-surface-container-high-dark)
+    );
+    --md-sys-color-surface-container-highest: light-dark(
+      var(--md-sys-color-surface-container-highest-light),
+      var(--md-sys-color-surface-container-highest-dark)
+    );
+    --md-sys-color-outline: light-dark(
+      var(--md-sys-color-outline-light),
+      var(--md-sys-color-outline-dark)
+    );
+    --md-sys-color-outline-variant: light-dark(
+      var(--md-sys-color-outline-variant-light),
+      var(--md-sys-color-outline-variant-dark)
+    );
     --md-sys-color-inverse-surface: light-dark(
       var(--md-sys-color-inverse-surface-light),
       var(--md-sys-color-inverse-surface-dark)
@@ -384,18 +536,30 @@
       var(--md-sys-color-inverse-primary-light),
       var(--md-sys-color-inverse-primary-dark)
     );
+    --md-sys-color-scrim: light-dark(
+      var(--md-sys-color-scrim-light),
+      var(--md-sys-color-scrim-dark)
+    );
     --md-sys-color-shadow: light-dark(
       var(--md-sys-color-shadow-light),
       var(--md-sys-color-shadow-dark)
     );
+    --md-sys-color-background: light-dark(
+      var(--md-sys-color-background-light),
+      var(--md-sys-color-background-dark)
+    );
+    --md-sys-color-on-background: light-dark(
+      var(--md-sys-color-on-background-light),
+      var(--md-sys-color-on-background-dark)
+    );
+    --md-sys-color-surface-variant: light-dark(
+      var(--md-sys-color-surface-variant-light),
+      var(--md-sys-color-surface-variant-dark)
+    );
     --md-sys-color-surface-tint: light-dark(
       var(--md-sys-color-surface-tint-light),
       var(--md-sys-color-surface-tint-dark)
     );
-    --md-sys-color-scrim: light-dark(
-      var(--md-sys-color-scrim-light),
-      var(--md-sys-color-scrim-dark)
-    );
   }
   /* ===================================================================== Themes */
   :root[theme=light] {
@@ -404,6 +568,9 @@
   :root[theme=dark] {
     color-scheme: dark;
   }
+  :root[theme=auto] {
+    color-scheme: light dark;
+  }
 }
 @layer base {
   /*! Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
@@ -596,7 +763,7 @@
     box-sizing: inherit;
   }
   body {
-    background-color: var(--md-sys-color-background);
+    background-color: var(--md-sys-color-surface);
     color: var(--md-sys-color-on-background);
   }
   button,
@@ -841,26 +1008,45 @@
     font-size: clamp(1.2rem, 0.912rem + 1.12vw, 1.68rem);
   }
   .container {
+    --md-comp-container-max-width: 1280px;
+    --md-comp-container-width: 90%;
     margin: 0 auto;
-    max-width: 1280px;
-    width: 90%;
+    width: var(--md-comp-container-width);
+    max-width: var(--md-comp-container-max-width);
   }
   @media (width >= 601px) {
     .container {
-      width: 85%;
+      --md-comp-container-width: 85%;
     }
   }
   @media (width >= 993px) {
     .container {
-      width: 70%;
+      --md-comp-container-width: 70%;
+    }
+  }
+  @media (width >= 1601px) {
+    .container {
+      --md-comp-container-width: 75%;
+      --md-comp-container-max-width: 1920px;
     }
   }
+  .container.wide {
+    --md-comp-container-max-width: 2400px;
+  }
+  .container.max {
+    --md-comp-container-max-width: none;
+  }
   .section {
     padding: 1rem 0;
   }
   body {
     --gap-size: 1.5rem;
   }
+  @media (width >= 1601px) {
+    body {
+      --gap-size: 2rem;
+    }
+  }
   .row {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
@@ -903,10 +1089,10 @@
     grid-column: auto/span 12;
   }
   .row .offset-s1 {
-    grid-column-start: 3;
+    grid-column-start: 2;
   }
   .row .offset-s2 {
-    grid-column-start: 2;
+    grid-column-start: 3;
   }
   .row .offset-s3 {
     grid-column-start: 4;
@@ -1148,6 +1334,77 @@
       grid-column-start: 12;
     }
   }
+  @media (width >= 1601px) {
+    .row .xxl1 {
+      grid-column: auto/span 1;
+    }
+    .row .xxl2 {
+      grid-column: auto/span 2;
+    }
+    .row .xxl3 {
+      grid-column: auto/span 3;
+    }
+    .row .xxl4 {
+      grid-column: auto/span 4;
+    }
+    .row .xxl5 {
+      grid-column: auto/span 5;
+    }
+    .row .xxl6 {
+      grid-column: auto/span 6;
+    }
+    .row .xxl7 {
+      grid-column: auto/span 7;
+    }
+    .row .xxl8 {
+      grid-column: auto/span 8;
+    }
+    .row .xxl9 {
+      grid-column: auto/span 9;
+    }
+    .row .xxl10 {
+      grid-column: auto/span 10;
+    }
+    .row .xxl11 {
+      grid-column: auto/span 11;
+    }
+    .row .xxl12 {
+      grid-column: auto/span 12;
+    }
+    .row .offset-xxl1 {
+      grid-column-start: 2;
+    }
+    .row .offset-xxl2 {
+      grid-column-start: 3;
+    }
+    .row .offset-xxl3 {
+      grid-column-start: 4;
+    }
+    .row .offset-xxl4 {
+      grid-column-start: 5;
+    }
+    .row .offset-xxl5 {
+      grid-column-start: 6;
+    }
+    .row .offset-xxl6 {
+      grid-column-start: 7;
+    }
+    .row .offset-xxl7 {
+      grid-column-start: 8;
+    }
+    .row .offset-xxl8 {
+      grid-column-start: 9;
+    }
+    .row .offset-xxl9 {
+      grid-column-start: 10;
+    }
+    .row .offset-xxl10 {
+      grid-column-start: 11;
+    }
+    .row .offset-xxl11 {
+      grid-column-start: 12;
+    }
+  }
   .g-0 {
     gap: 0;
   }
@@ -1274,16 +1531,16 @@
   }
   :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).elevated {
     color: var(--md-sys-color-primary);
-    background-color: var(--md-sys-color-surface);
+    background-color: var(--md-sys-color-surface-container-low);
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
   }
   :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).elevated:hover {
     box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface));
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface-container-low));
   }
   :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).elevated:active, :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).elevated:focus {
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, var(--md-sys-color-surface));
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, var(--md-sys-color-surface-container-low));
   }
   :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).elevated:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
@@ -1655,73 +1912,99 @@
       --md-comp-fab-stagger: 0s;
     }
   }
-  .collection {
-    --md-comp-collection-shape: 12px;
-    --md-comp-collection-container-color: var(--md-sys-color-surface);
-    --md-comp-collection-outline-color: var(--md-sys-color-outline-variant);
-    --md-comp-collection-item-height: 56px;
-    --md-comp-collection-item-padding: 16px;
-    --md-comp-collection-avatar-size: 40px;
+  .list {
+    --md-comp-list-item-height: 56px;
+    --md-comp-list-item-two-line-height: 72px;
+    --md-comp-list-item-padding: 16px;
+    --md-comp-list-item-shape: 100px;
+    --md-comp-list-item-container-color: transparent;
+    --md-comp-list-selected-container-color: var(--md-sys-color-secondary-container);
+    --md-comp-list-selected-color: var(--md-sys-color-on-secondary-container);
+    --md-comp-list-gap: 16px;
+    --md-comp-list-leading-icon-size: 24px;
+    --md-comp-list-trailing-icon-size: 24px;
+    --md-comp-list-avatar-size: 40px;
+    --md-comp-list-image-size: 56px;
+    --md-comp-list-segmented-gap: 2px;
     box-sizing: border-box;
-    padding: 0;
     margin: 0.5rem 0 1rem;
-    overflow: hidden;
+    padding: 0;
     list-style: none;
-    border: 1px solid var(--md-comp-collection-outline-color);
-    border-radius: var(--md-comp-collection-shape);
-    background-color: var(--md-comp-collection-container-color);
     color: var(--md-sys-color-on-surface);
   }
-  .collection > * + * {
-    border-top: 1px solid var(--md-comp-collection-outline-color);
+  .list > li {
+    box-sizing: border-box;
+    margin: 0;
+    border-radius: var(--md-comp-list-item-shape);
+    background-color: var(--md-comp-list-item-container-color);
+    color: inherit;
+    transition: background-color 0.2s ease-out;
   }
-  .collection > :is(li, a) {
+  .list > li:not(:has(> :is(a, label):only-child)),
+  .list > li > :is(a, label):only-child {
     display: grid;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: auto minmax(0, 1fr) auto;
     grid-template-rows: auto auto;
     align-items: center;
-    column-gap: 16px;
+    column-gap: var(--md-comp-list-gap);
     box-sizing: border-box;
-    min-height: var(--md-comp-collection-item-height);
-    margin: 0;
-    padding: 8px var(--md-comp-collection-item-padding);
-    background-color: transparent;
-    color: inherit;
-    text-decoration: none;
-    transition: background-color 0.2s ease-out;
+    min-height: var(--md-comp-list-item-height);
+    padding: 8px var(--md-comp-list-item-padding);
+    font-family: var(--md-sys-typescale-body-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-body-large-font-size);
+    font-weight: var(--md-sys-typescale-body-large-font-weight);
+    line-height: var(--md-sys-typescale-body-large-line-height);
+    letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
   }
-  .collection > :is(li, a) > :is(img, i).circle {
+  .list > li:not(:has(> :is(a, label):only-child)) > :is(i, img, input):first-child,
+  .list > li > :is(a, label):only-child > :is(i, img, input):first-child {
     grid-column: 1;
     grid-row: 1/-1;
-    box-sizing: border-box;
-    width: var(--md-comp-collection-avatar-size);
-    height: var(--md-comp-collection-avatar-size);
-    overflow: hidden;
+    align-self: center;
+    flex-shrink: 0;
+  }
+  .list > li:not(:has(> :is(a, label):only-child)) > i:first-child:not(.circle),
+  .list > li > :is(a, label):only-child > i:first-child:not(.circle) {
+    font-size: var(--md-comp-list-leading-icon-size);
+    width: var(--md-comp-list-leading-icon-size);
+    height: var(--md-comp-list-leading-icon-size);
+    color: var(--md-sys-color-on-surface-variant);
+  }
+  .list > li:not(:has(> :is(a, label):only-child)) > img:first-child,
+  .list > li > :is(a, label):only-child > img:first-child {
+    width: var(--md-comp-list-image-size);
+    height: var(--md-comp-list-image-size);
+    object-fit: cover;
+    border-radius: 8px;
+  }
+  .list > li:not(:has(> :is(a, label):only-child)) > :is(img, i).circle,
+  .list > li > :is(a, label):only-child > :is(img, i).circle {
+    width: var(--md-comp-list-avatar-size);
+    height: var(--md-comp-list-avatar-size);
+    border-radius: 50%;
     object-fit: cover;
   }
-  .collection > :is(li, a) > i.circle {
+  .list > li:not(:has(> :is(a, label):only-child)) > i.circle,
+  .list > li > :is(a, label):only-child > i.circle {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     line-height: 1;
-    color: var(--md-sys-color-on-primary-container);
     background-color: var(--md-sys-color-primary-container);
-    text-align: center;
+    color: var(--md-sys-color-on-primary-container);
   }
-  .collection > :is(li, a) > .title {
+  .list > li:not(:has(> :is(a, label):only-child)) > div:not(.meta),
+  .list > li:not(:has(> :is(a, label):only-child)) > span,
+  .list > li > :is(a, label):only-child > div:not(.meta),
+  .list > li > :is(a, label):only-child > span {
     grid-column: 2;
-    grid-row: 1;
     min-width: 0;
-    font-family: var(--md-sys-typescale-title-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
-    font-size: var(--md-sys-typescale-title-medium-font-size);
-    font-weight: var(--md-sys-typescale-title-medium-font-weight);
-    line-height: var(--md-sys-typescale-title-medium-line-height);
-    letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
   }
-  .collection > :is(li, a) > p {
+  .list > li:not(:has(> :is(a, label):only-child)) > p,
+  .list > li > :is(a, label):only-child > p {
     grid-column: 2;
-    grid-row: 1;
+    grid-row: 2;
     min-width: 0;
     margin: 0;
     color: var(--md-sys-color-on-surface-variant);
@@ -1731,144 +2014,247 @@
     line-height: var(--md-sys-typescale-body-medium-line-height);
     letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
   }
-  .collection > :is(li, a) > .title ~ p {
-    grid-row: 2;
-  }
-  .collection > :is(li, a) > :is(a:last-child, .badge) {
+  .list > li:not(:has(> :is(a, label):only-child)) > :is(i, kbd, button, time, .meta, .badge, .button, a):last-child:not(:first-child),
+  .list > li > :is(a, label):only-child > :is(i, kbd, button, time, .meta, .badge, .button, a):last-child:not(:first-child) {
     grid-column: 3;
     grid-row: 1/-1;
-    align-self: center;
     justify-self: end;
+    align-self: center;
   }
-  .collection > :is(li, a) > a:not(.badge) {
-    grid-column: 1/-1;
-    display: flex;
+  .list > li:not(:has(> :is(a, label):only-child)) > i:last-child:not(:first-child),
+  .list > li > :is(a, label):only-child > i:last-child:not(:first-child) {
+    font-size: var(--md-comp-list-trailing-icon-size);
+    width: var(--md-comp-list-trailing-icon-size);
+    height: var(--md-comp-list-trailing-icon-size);
+    color: var(--md-sys-color-on-surface-variant);
+  }
+  .list > li:not(:has(> :is(a, label):only-child)) > :is(kbd, time, .meta):last-child,
+  .list > li > :is(a, label):only-child > :is(kbd, time, .meta):last-child {
+    color: var(--md-sys-color-on-surface-variant);
+    font-family: var(--md-sys-typescale-label-small-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-label-small-font-size);
+    font-weight: var(--md-sys-typescale-label-small-font-weight);
+    line-height: var(--md-sys-typescale-label-small-line-height);
+    letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
+  }
+  .list > li:not(:has(> :is(a, label):only-child)) > kbd:last-child,
+  .list > li > :is(a, label):only-child > kbd:last-child {
+    font-family: inherit;
+    border: 0;
+    background: none;
+    padding: 0;
+  }
+  .list > li:not(:has(> :is(a, label):only-child)) > button:last-child:not(:first-child):not(.button),
+  .list > li:not(:has(> :is(a, label):only-child)) > a:last-child:not(:first-child):not(.button):has(> i:only-child),
+  .list > li > :is(a, label):only-child > button:last-child:not(:first-child):not(.button),
+  .list > li > :is(a, label):only-child > a:last-child:not(:first-child):not(.button):has(> i:only-child) {
+    display: inline-flex;
     align-items: center;
-    gap: 16px;
-    min-width: 0;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    background: transparent;
     color: inherit;
-    text-decoration: none;
+    cursor: pointer;
+    appearance: none;
   }
-  .collection > :is(li, a) > a:not(.badge) > .badge {
-    margin-inline-start: auto;
+  .list > li:not(:has(> :is(a, label):only-child)) > button:last-child:not(:first-child):not(.button):focus-visible,
+  .list > li:not(:has(> :is(a, label):only-child)) > a:last-child:not(:first-child):not(.button):has(> i:only-child):focus-visible,
+  .list > li > :is(a, label):only-child > button:last-child:not(:first-child):not(.button):focus-visible,
+  .list > li > :is(a, label):only-child > a:last-child:not(:first-child):not(.button):has(> i:only-child):focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
   }
-  .collection > :is(li, a):has(> .circle) {
-    min-height: 72px;
+  .list > li:not(:has(> :is(a, label):only-child)):has(> p), .list > li:not(:has(> :is(a, label):only-child)):has(> div:not(.meta) > p),
+  .list > li > :is(a, label):only-child:has(> p),
+  .list > li > :is(a, label):only-child:has(> div:not(.meta) > p) {
+    min-height: var(--md-comp-list-item-two-line-height);
   }
-  .collection > li:has(> :is(h1, h2, h3, h4, h5, h6)) {
-    min-height: 0;
-    padding-block: 12px;
+  .list > li:not(:has(> :is(a, label):only-child)):has(> img:first-child:not(.circle)),
+  .list > li > :is(a, label):only-child:has(> img:first-child:not(.circle)) {
+    min-height: calc(var(--md-comp-list-image-size) + 16px);
   }
-  .collection > li:has(> :is(h1, h2, h3, h4, h5, h6)) > :is(h1, h2, h3, h4, h5, h6) {
-    grid-column: 1/-1;
-    margin: 0;
-    font-family: var(--md-sys-typescale-title-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
-    font-size: var(--md-sys-typescale-title-medium-font-size);
-    font-weight: var(--md-sys-typescale-title-medium-font-weight);
-    line-height: var(--md-sys-typescale-title-medium-line-height);
-    letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
+  .list > li > :is(a, label):only-child {
+    color: inherit;
+    text-decoration: none;
+    border-radius: inherit;
+    cursor: pointer;
   }
-  .collection > a:focus-visible,
-  .collection > li > a:focus-visible {
+  .list > li > :is(a, label):only-child:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  .collection > a:hover,
-  .collection > li:has(> a:hover) {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
-  }
-  .collection > :is(.active, [aria-current=page]),
-  .collection > li:has(> [aria-current=page]) {
-    background-color: var(--md-sys-color-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-  }
-  .collection > :is(.active, [aria-current=page]) > a:last-child,
-  .collection > li:has(> [aria-current=page]) > a:last-child {
-    color: var(--md-sys-color-on-secondary-container);
+  .list > li:not(.active):not([aria-selected=true]):not([aria-current]):not(:has(> [aria-current])):not(:has([aria-selected=true])):not(:has(:checked)):hover {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, var(--md-comp-list-item-container-color));
+  }
+  .list > li.active,
+  .list > li[aria-selected=true],
+  .list > li[aria-current],
+  .list > li:has(> [aria-current]),
+  .list > li:has([aria-selected=true]),
+  .list > li:has(:checked) {
+    background-color: var(--md-comp-list-selected-container-color);
+    color: var(--md-comp-list-selected-color);
+  }
+  .list > li.active i,
+  .list > li.active p,
+  .list > li.active kbd,
+  .list > li.active time,
+  .list > li.active .meta,
+  .list > li[aria-selected=true] i,
+  .list > li[aria-selected=true] p,
+  .list > li[aria-selected=true] kbd,
+  .list > li[aria-selected=true] time,
+  .list > li[aria-selected=true] .meta,
+  .list > li[aria-current] i,
+  .list > li[aria-current] p,
+  .list > li[aria-current] kbd,
+  .list > li[aria-current] time,
+  .list > li[aria-current] .meta,
+  .list > li:has(> [aria-current]) i,
+  .list > li:has(> [aria-current]) p,
+  .list > li:has(> [aria-current]) kbd,
+  .list > li:has(> [aria-current]) time,
+  .list > li:has(> [aria-current]) .meta,
+  .list > li:has([aria-selected=true]) i,
+  .list > li:has([aria-selected=true]) p,
+  .list > li:has([aria-selected=true]) kbd,
+  .list > li:has([aria-selected=true]) time,
+  .list > li:has([aria-selected=true]) .meta,
+  .list > li:has(:checked) i,
+  .list > li:has(:checked) p,
+  .list > li:has(:checked) kbd,
+  .list > li:has(:checked) time,
+  .list > li:has(:checked) .meta {
+    color: inherit;
   }
-  .collection > :is(.active, [aria-current=page]) span.badge:not(.new),
-  .collection > li:has(> [aria-current=page]) span.badge:not(.new) {
-    color: var(--md-sys-color-on-secondary-container);
+  .list > li.active > i:first-child,
+  .list > li.active > :is(a, label):only-child > i:first-child,
+  .list > li[aria-selected=true] > i:first-child,
+  .list > li[aria-selected=true] > :is(a, label):only-child > i:first-child,
+  .list > li[aria-current] > i:first-child,
+  .list > li[aria-current] > :is(a, label):only-child > i:first-child,
+  .list > li:has(> [aria-current]) > i:first-child,
+  .list > li:has(> [aria-current]) > :is(a, label):only-child > i:first-child,
+  .list > li:has([aria-selected=true]) > i:first-child,
+  .list > li:has([aria-selected=true]) > :is(a, label):only-child > i:first-child,
+  .list > li:has(:checked) > i:first-child,
+  .list > li:has(:checked) > :is(a, label):only-child > i:first-child {
+    --md-icon-fill: 1;
   }
-  .collection > :is(.disabled, [aria-disabled=true]) {
+  .list > li:has(> :is(h1, h2, h3, h4, h5, h6):only-child) {
+    min-height: 0;
+    padding: 16px var(--md-comp-list-item-padding) 8px;
+    background: transparent;
     pointer-events: none;
-    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+    color: var(--md-sys-color-on-surface-variant);
   }
-  .collection span.badge {
-    float: none;
-    margin-block: 0;
-    margin-inline-start: auto;
+  .list > li:has(> :is(h1, h2, h3, h4, h5, h6):only-child) > :is(h1, h2, h3, h4, h5, h6) {
+    margin: 0;
+    font-family: var(--md-sys-typescale-title-small-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-title-small-font-size);
+    font-weight: var(--md-sys-typescale-title-small-font-weight);
+    line-height: var(--md-sys-typescale-title-small-line-height);
+    letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
   }
-  .collection.flush {
-    border: 0;
+  .list > li.divider {
+    height: 1px;
+    min-height: 0;
+    padding: 0;
+    margin: 8px var(--md-comp-list-item-padding);
     border-radius: 0;
+    background-color: var(--md-sys-color-outline-variant);
+    pointer-events: none;
   }
-  .collapsible .collection {
-    margin: 0;
-    border: none;
-    border-radius: 0;
-  }
-  :root {
-    --bagde-height: 22px;
+  .list > li.disabled,
+  .list > li[aria-disabled=true] {
+    pointer-events: none;
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
   }
-  span.badge {
-    min-width: 3rem;
-    padding: 0 6px;
-    margin-left: 14px;
-    text-align: center;
-    font-size: 1rem;
-    line-height: var(--bagde-height);
-    height: var(--bagde-height);
-    color: var(--md-sys-color-on-surface-variant);
-    float: right;
+  .list.segmented {
+    --md-comp-list-item-container-color: color-mix(
+      in oklab,
+      var(--md-sys-color-on-surface) 8%,
+      var(--md-sys-color-surface)
+    );
+    --md-comp-list-item-shape: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--md-comp-list-segmented-gap);
+  }
+  .badge {
+    --md-comp-badge-color: var(--md-sys-color-error);
+    --md-comp-badge-label-text-color: var(--md-sys-color-on-error);
+    --md-comp-badge-large-size: 16px;
+    --md-comp-badge-small-size: 6px;
+    --md-comp-badge-large-shape: 8px;
+    --md-comp-badge-icon-size: 24px;
     box-sizing: border-box;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--md-comp-badge-large-size);
+    height: var(--md-comp-badge-large-size);
+    max-width: calc(4ch + 8px);
+    margin: 0;
+    padding: 0 4px;
+    overflow: hidden;
+    border-radius: var(--md-comp-badge-large-shape);
+    background-color: var(--md-comp-badge-color);
+    color: var(--md-comp-badge-label-text-color);
+    white-space: nowrap;
+    font-family: var(--md-sys-typescale-label-small-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-label-small-font-size);
+    font-weight: var(--md-sys-typescale-label-small-font-weight);
+    line-height: var(--md-sys-typescale-label-small-line-height);
+    letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
+    line-height: var(--md-comp-badge-large-size);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   }
-  span.badge.new {
-    font-weight: 300;
-    font-size: 0.8rem;
-    color: var(--md-sys-color-on-primary);
-    background-color: var(--md-sys-color-primary);
-    border-radius: 2px;
-  }
-  span.badge.new:after {
-    content: " new";
+  .badge:empty {
+    width: var(--md-comp-badge-small-size);
+    min-width: var(--md-comp-badge-small-size);
+    max-width: var(--md-comp-badge-small-size);
+    height: var(--md-comp-badge-small-size);
+    padding: 0;
+    border-radius: 50%;
+    font-size: 0;
+    line-height: 0;
+    color: transparent;
   }
-  span.badge[data-badge-caption]::after {
-    content: " " attr(data-badge-caption);
+  :is(i,
+  .material-symbols,
+  .material-symbols-outlined,
+  .material-symbols-rounded,
+  .material-symbols-sharp,
+  .material-icons) {
+    position: relative;
+    overflow: visible;
   }
-  .active span.badge {
-    color: var(--md-sys-color-on-primary);
+  :is(i,
+  .material-symbols,
+  .material-symbols-outlined,
+  .material-symbols-rounded,
+  .material-symbols-sharp,
+  .material-icons) > .badge {
+    position: absolute;
+    z-index: 1;
+    inset-block-start: calc((100% - var(--md-comp-badge-icon-size)) / 2);
+    inset-inline-end: calc((100% - var(--md-comp-badge-icon-size)) / 2);
+    transform: translate(50%, -50%);
   }
-  header:has(> nav) nav a span.badge {
-    display: inline-block;
-    float: none;
-    margin-left: 4px;
-    line-height: var(--bagde-height);
-    height: var(--bagde-height);
-    -webkit-font-smoothing: auto;
+  .list .badge,
+  .sidenav .badge,
+  menu .badge {
+    position: static;
+    transform: none;
   }
-  .collection span.badge {
-    float: none;
-    margin-block: 0;
+  .list .badge {
     margin-inline-start: auto;
   }
-  .collapsible span.badge {
-    margin-left: auto;
-  }
-  .collapsible span.badge.leading {
-    margin-right: 7px;
-    order: -1;
-  }
-  .collapsible :is(.active, [open]) span.badge:not(.new) {
-    color: var(--md-sys-color-on-surface-variant);
-  }
-  .sidenav span.badge {
-    margin-top: calc(var(--md-comp-nav-drawer-line-height) * 0.5 - 11px);
-  }
-  table span.badge {
-    display: inline-block;
-    float: none;
-    margin-left: auto;
+  .sidenav summary .badge {
+    margin-inline-start: 14px;
   }
   :root {
     --md-icon-font-outlined: "Material Symbols Outlined";
@@ -1935,20 +2321,26 @@
   .icon-filled {
     --md-icon-fill: 1;
   }
-  header:has(> nav) {
+  @property --md-comp-top-app-bar-scroll {
+    syntax: "<number>";
+    inherits: false;
+    initial-value: 0;
+  }
+  header:has(> nav:not(.navigation-bar, .navigation-rail)) {
     --md-comp-top-app-bar-container-color: var(--md-sys-color-surface);
+    --md-comp-top-app-bar-scrolled-container-color: var(--md-sys-color-surface-container);
     --md-comp-top-app-bar-headline-color: var(--md-sys-color-on-surface);
     --md-comp-top-app-bar-leading-icon-color: inherit;
     --md-comp-top-app-bar-trailing-icon-color: inherit;
     --md-comp-top-app-bar-container-height: 64px;
     --md-comp-top-app-bar-leading-icon-size: 24px;
     --md-comp-top-app-bar-container-shape: 0;
-    background-color: var(--md-comp-top-app-bar-container-color);
+    background-color: color-mix(in oklab, var(--md-comp-top-app-bar-scrolled-container-color) calc(100% * var(--md-comp-top-app-bar-scroll)), var(--md-comp-top-app-bar-container-color));
     color: var(--md-comp-top-app-bar-headline-color);
     border-radius: var(--md-comp-top-app-bar-container-shape);
     width: 100%;
   }
-  header:has(> nav) > nav:not(.tabs) {
+  header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
     display: flex;
     align-items: center;
     box-sizing: border-box;
@@ -1957,16 +2349,16 @@
     padding-inline: 4px;
     margin: 0;
   }
-  header:has(> nav) > nav:not(.tabs) > :is(h1, h2, h3, h4, h5, h6) {
+  header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6) {
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;
     padding-inline: 4px 12px;
   }
-  header:has(> nav) > nav:not(.tabs) > :is(h1, h2, h3, h4, h5, h6):first-child {
+  header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6):first-child {
     padding-inline-start: 12px;
   }
-  header:has(> nav) > nav:not(.tabs) > :is(h1, h2, h3, h4, h5, h6) {
+  header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6) {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1977,7 +2369,7 @@
     line-height: var(--md-sys-typescale-title-large-line-height);
     letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
   }
-  header:has(> nav) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child) {
+  header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child) {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
@@ -1985,7 +2377,8 @@
     width: 48px;
     height: 48px;
     padding: 0;
-    margin: 0;
+    margin-block: 0;
+    margin-inline-end: 0;
     border: 0;
     border-radius: 50%;
     background: transparent;
@@ -1995,24 +2388,24 @@
     font: inherit;
     text-decoration: none;
   }
-  header:has(> nav) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child):focus-visible {
+  header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child):focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  header:has(> nav) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child) > i {
+  header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child) > i {
     display: block;
     font-size: var(--md-comp-top-app-bar-leading-icon-size);
     width: var(--md-comp-top-app-bar-leading-icon-size);
     height: var(--md-comp-top-app-bar-leading-icon-size);
     line-height: var(--md-comp-top-app-bar-leading-icon-size);
   }
-  header:has(> nav) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child):hover {
+  header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child):hover {
     background-color: color-mix(in oklab, currentColor 8%, transparent);
   }
-  header:has(> nav) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child):active {
+  header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child):active {
     background-color: color-mix(in oklab, currentColor 10%, transparent);
   }
-  header:has(> nav) > nav:not(.tabs) > :is(menu, ul) {
+  header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(menu, ul) {
     display: flex;
     align-items: stretch;
     align-self: stretch;
@@ -2020,11 +2413,11 @@
     margin: 0;
     padding: 0;
   }
-  header:has(> nav) > nav:not(.tabs) > :is(menu, ul) > li {
+  header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(menu, ul) > li {
     display: flex;
     align-items: stretch;
   }
-  header:has(> nav) > nav:not(.tabs) > ol {
+  header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > ol {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -2035,7 +2428,7 @@
     margin: 0;
     padding-inline: 12px;
   }
-  header:has(> nav) > nav:not(.tabs) > form {
+  header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > form {
     display: flex;
     flex: 1 1 auto;
     align-items: center;
@@ -2043,7 +2436,7 @@
     min-width: 0;
     margin: 0;
   }
-  header:has(> nav) > nav:not(.tabs) > form input {
+  header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > form input {
     flex: 1 1 auto;
     min-width: 0;
     height: 100%;
@@ -2058,24 +2451,12 @@
     font-weight: var(--md-sys-typescale-body-large-font-weight);
     line-height: var(--md-sys-typescale-body-large-line-height);
   }
-  header:has(> nav) > nav:not(.tabs) > form input:focus, header:has(> nav) > nav:not(.tabs) > form input:focus-visible {
+  header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > form input:focus, header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > form input:focus-visible {
     outline: none;
     border: 0;
     box-shadow: none;
   }
-  header:has(> nav) > .tabs {
-    background-color: transparent;
-    width: 100%;
-  }
-  @media (width >= 993px) {
-    header:has(> nav) > nav:not(.tabs) > .sidenav-trigger {
-      display: none !important;
-    }
-    header:has(> nav) > nav:not(.tabs) > .sidenav-trigger + :is(h1, h2, h3, h4, h5, h6) {
-      padding-inline-start: 12px;
-    }
-  }
-  header:has(> nav) > nav:not(.tabs) > a:not(:has(> i:only-child)):not(.button):not(.circle):not(.breadcrumb), header:has(> nav) > nav:not(.tabs) > :is(menu, ul) > li > a {
+  header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > a:not(:has(> i:only-child)):not(.button):not(.circle):not(.breadcrumb), header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(menu, ul) > li > a {
     display: inline-flex;
     align-items: center;
     padding: 0 12px;
@@ -2087,21 +2468,21 @@
     line-height: var(--md-sys-typescale-label-large-line-height);
     letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
   }
-  header:has(> nav) > nav:not(.tabs) > a:focus-visible:not(:has(> i:only-child)):not(.button):not(.circle):not(.breadcrumb), header:has(> nav) > nav:not(.tabs) > :is(menu, ul) > li > a:focus-visible {
+  header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > a:focus-visible:not(:has(> i:only-child)):not(.button):not(.circle):not(.breadcrumb), header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(menu, ul) > li > a:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  header:has(> nav) > nav:not(.tabs) > a:hover:not(.active):not(:has(> i:only-child)):not(.button):not(.circle):not(.breadcrumb), header:has(> nav) > nav:not(.tabs) > :is(menu, ul) > li > a:hover:not(.active) {
+  header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > a:hover:not(.active):not(:has(> i:only-child)):not(.button):not(.circle):not(.breadcrumb), header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(menu, ul) > li > a:hover:not(.active) {
     background-color: color-mix(in oklab, currentColor 8%, transparent);
   }
-  header:has(> nav) > nav:not(.tabs) > a.active:not(:has(> i:only-child)):not(.button):not(.circle):not(.breadcrumb), header:has(> nav) > nav:not(.tabs) > :is(menu, ul) > li > a.active {
+  header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > a.active:not(:has(> i:only-child)):not(.button):not(.circle):not(.breadcrumb), header:has(> nav:not(.navigation-bar, .navigation-rail)) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(menu, ul) > li > a.active {
     background-color: color-mix(in oklab, currentColor 10%, transparent);
   }
-  header.center:has(> nav) > nav:not(.tabs) {
+  header.center:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
     position: relative;
     justify-content: space-between;
   }
-  header.center:has(> nav) > nav:not(.tabs) > :is(h1, h2, h3, h4, h5, h6) {
+  header.center:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6) {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
@@ -2111,25 +2492,31 @@
     text-align: center;
     pointer-events: none;
   }
-  header.medium:has(> nav) > nav:not(.tabs),
-  header.large:has(> nav) > nav:not(.tabs) {
+  header.medium:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail),
+  header.large:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
     flex-wrap: wrap;
-    align-content: flex-start;
+    align-content: space-between;
+    align-items: flex-start;
     height: auto;
+    padding-top: 4px;
   }
-  header.medium:has(> nav) > nav:not(.tabs) > :is(h1, h2, h3, h4, h5, h6),
-  header.large:has(> nav) > nav:not(.tabs) > :is(h1, h2, h3, h4, h5, h6) {
+  header.medium:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6),
+  header.large:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6) {
     order: 1;
     flex: 1 0 100%;
     white-space: normal;
     overflow: visible;
     text-overflow: unset;
   }
-  header.medium:has(> nav) > nav:not(.tabs) {
+  header.medium:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6) + *,
+  header.large:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6) + * {
+    margin-inline-start: auto;
+  }
+  header.medium:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
     min-height: 112px;
     padding-bottom: 16px;
   }
-  header.medium:has(> nav) > nav:not(.tabs) > :is(h1, h2, h3, h4, h5, h6) {
+  header.medium:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6) {
     padding: 4px 12px 0 16px;
     font-family: var(--md-sys-typescale-headline-small-font-family-name);
     font-size: var(--md-sys-typescale-headline-small-font-size);
@@ -2137,11 +2524,11 @@
     line-height: var(--md-sys-typescale-headline-small-line-height);
     letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
   }
-  header.large:has(> nav) > nav:not(.tabs) {
+  header.large:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
     min-height: 152px;
     padding-bottom: 28px;
   }
-  header.large:has(> nav) > nav:not(.tabs) > :is(h1, h2, h3, h4, h5, h6) {
+  header.large:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6) {
     padding: 12px 12px 0 16px;
     font-family: var(--md-sys-typescale-headline-medium-font-family-name);
     font-size: var(--md-sys-typescale-headline-medium-font-size);
@@ -2149,7 +2536,7 @@
     line-height: var(--md-sys-typescale-headline-medium-line-height);
     letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
   }
-  header.fixed:has(> nav) {
+  header.fixed:has(> nav:not(.navigation-bar, .navigation-rail)) {
     position: sticky;
     top: 0;
     z-index: 997;
@@ -2159,170 +2546,537 @@
   }
   @keyframes top-app-bar-scroll {
     to {
-      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
-    }
-  }
-  footer:has(> nav:only-child) {
-    --md-comp-bottom-app-bar-container-color: var(--md-sys-color-surface);
-    --md-comp-bottom-app-bar-container-height: 80px;
-    background-color: var(--md-comp-bottom-app-bar-container-color);
-    color: var(--md-sys-color-on-surface);
-    width: 100%;
-    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
-  }
-  footer:has(> nav:only-child) > nav:not(.tabs) {
+      --md-comp-top-app-bar-scroll: 1;
+    }
+  }
+  .navigation-bar {
+    --md-comp-nav-bar-container-color: var(--md-sys-color-surface-container);
+    --md-comp-nav-bar-container-height: 64px;
+    --md-comp-nav-bar-icon-size: 24px;
+    --md-comp-nav-bar-indicator-width: 56px;
+    --md-comp-nav-bar-indicator-height: 32px;
+    --md-comp-nav-bar-indicator-shape: 16px;
+    --md-comp-nav-bar-active-indicator-color: var(--md-sys-color-secondary-container);
+    --md-comp-nav-bar-active-color: var(--md-sys-color-on-secondary-container);
+    box-sizing: border-box;
     display: flex;
     align-items: center;
-    box-sizing: border-box;
+    justify-content: space-evenly;
     width: 100%;
-    min-height: var(--md-comp-bottom-app-bar-container-height);
-    padding: 12px 4px;
+    min-height: var(--md-comp-nav-bar-container-height);
     margin: 0;
+    padding: 6px 8px;
+    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
+    background-color: var(--md-comp-nav-bar-container-color);
+    color: var(--md-sys-color-on-surface);
   }
-  footer:has(> nav:only-child) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child) {
-    display: inline-flex;
-    flex: 0 0 auto;
+  .navigation-bar > :is(a, button) {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    width: 48px;
-    height: 48px;
-    padding: 0;
+    gap: 4px;
+    min-width: 0;
     margin: 0;
+    padding: 4px 0 6px;
     border: 0;
-    border-radius: 50%;
     background: transparent;
     color: var(--md-sys-color-on-surface-variant);
     cursor: pointer;
     appearance: none;
-    font: inherit;
     text-decoration: none;
+    font-family: var(--md-sys-typescale-label-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-label-medium-font-size);
+    font-weight: var(--md-sys-typescale-label-medium-font-weight);
+    line-height: var(--md-sys-typescale-label-medium-line-height);
+    letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
   }
-  footer:has(> nav:only-child) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child):focus-visible {
+  .navigation-bar > :is(a, button):focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  footer:has(> nav:only-child) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child) > i {
-    display: block;
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
+  .navigation-bar > :is(a, button) > i {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--md-comp-nav-bar-indicator-width);
+    height: var(--md-comp-nav-bar-indicator-height);
+    border-radius: var(--md-comp-nav-bar-indicator-shape);
+    font-size: var(--md-comp-nav-bar-icon-size);
+    color: inherit;
+    transition: background-color 0.2s ease-out;
   }
-  footer:has(> nav:only-child) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child):hover {
-    background-color: color-mix(in oklab, currentColor 8%, transparent);
+  .navigation-bar > :is(a, button):hover:not(.active, [aria-current]) > i {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
   }
-  footer:has(> nav:only-child) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child):active {
-    background-color: color-mix(in oklab, currentColor 10%, transparent);
+  .navigation-bar > :is(a, button).active, .navigation-bar > :is(a, button)[aria-current] {
+    color: var(--md-sys-color-on-surface);
   }
-  footer:has(> nav:only-child) > nav:not(.tabs) > :is(.button, .circle, .extra) {
-    margin-inline-start: auto;
+  .navigation-bar > :is(a, button).active > i, .navigation-bar > :is(a, button)[aria-current] > i {
+    background-color: var(--md-comp-nav-bar-active-indicator-color);
+    color: var(--md-comp-nav-bar-active-color);
+    --md-icon-fill: 1;
+  }
+  .navigation-bar > :is(a, button).disabled, .navigation-bar > :is(a, button)[aria-disabled=true] {
+    pointer-events: none;
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+  .navigation-bar > :is(a, button) > .badge {
+    position: absolute;
+    z-index: 1;
+    top: calc(4px + (var(--md-comp-nav-bar-indicator-height) - 24px) / 2);
+    left: calc(50% + 12px);
+    transform: translate(-50%, -50%);
+  }
+  .navigation-bar.horizontal {
+    --md-comp-nav-bar-indicator-shape: 100px;
+    min-height: 56px;
+  }
+  .navigation-bar.horizontal > :is(a, button) {
+    flex: 0 1 auto;
+    flex-direction: row;
+    gap: 8px;
+    min-height: 40px;
+    padding: 8px 16px;
+    border-radius: var(--md-comp-nav-bar-indicator-shape);
+  }
+  .navigation-bar.horizontal > :is(a, button) > i {
+    width: var(--md-comp-nav-bar-icon-size);
+    height: var(--md-comp-nav-bar-icon-size);
+    border-radius: 0;
+  }
+  .navigation-bar.horizontal > :is(a, button) > .badge {
+    top: calc(50% - 12px);
+    left: auto;
+    inset-inline-start: 40px;
+    transform: translate(-50%, -50%);
+  }
+  .navigation-bar.horizontal > :is(a, button):hover:not(.active, [aria-current]) {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
   }
-  footer:has(> nav:only-child).fixed {
+  .navigation-bar.horizontal > :is(a, button):hover:not(.active, [aria-current]) > i {
+    background-color: transparent;
+  }
+  .navigation-bar.horizontal > :is(a, button).active, .navigation-bar.horizontal > :is(a, button)[aria-current] {
+    background-color: var(--md-comp-nav-bar-active-indicator-color);
+    color: var(--md-comp-nav-bar-active-color);
+  }
+  .navigation-bar.horizontal > :is(a, button).active > i, .navigation-bar.horizontal > :is(a, button)[aria-current] > i {
+    background-color: transparent;
+    color: inherit;
+  }
+  .navigation-bar.fixed {
     position: sticky;
     bottom: 0;
     z-index: 997;
   }
-  nav.toolbar {
-    --md-comp-toolbar-container-color: var(--md-sys-color-surface-variant);
-    --md-comp-toolbar-container-shape: 32px;
-    --md-comp-toolbar-container-height: 64px;
-    --md-comp-toolbar-leading-space: 12px;
-    --md-comp-toolbar-action-size: 48px;
-    --md-comp-toolbar-icon-size: 24px;
+  :root {
+    --md-comp-nav-rail-collapsed-width: 96px;
+    --md-comp-nav-rail-expanded-width: 280px;
+  }
+  .navigation-rail {
+    --md-comp-nav-rail-icon-size: 24px;
+    --md-comp-nav-rail-indicator-width: 56px;
+    --md-comp-nav-rail-indicator-height: 32px;
+    --md-comp-nav-rail-indicator-shape: 16px;
+    --md-comp-nav-rail-fab-size: 56px;
+    --md-comp-nav-rail-active-indicator-color: var(--md-sys-color-secondary-container);
+    --md-comp-nav-rail-active-color: var(--md-sys-color-on-secondary-container);
+    --md-comp-nav-rail-duration: 250ms;
     box-sizing: border-box;
-    display: inline-flex;
+    display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: center;
     gap: 4px;
-    min-height: var(--md-comp-toolbar-container-height);
-    min-width: var(--md-comp-toolbar-container-height);
+    width: var(--md-comp-nav-rail-collapsed-width);
+    min-width: var(--md-comp-nav-rail-collapsed-width);
+    min-height: 100dvh;
     margin: 0;
-    padding: 8px var(--md-comp-toolbar-leading-space);
-    border: none;
-    border-radius: var(--md-comp-toolbar-container-shape);
-    background-color: var(--md-comp-toolbar-container-color);
+    padding: 20px 8px 16px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    background-color: var(--md-sys-color-surface-container);
     color: var(--md-sys-color-on-surface);
-    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+    transition: width var(--md-comp-nav-rail-duration) ease, min-width var(--md-comp-nav-rail-duration) ease, padding var(--md-comp-nav-rail-duration) ease;
   }
-  nav.toolbar + nav.toolbar {
-    margin-block-start: 16px;
-  }
-  nav.toolbar > :is(a, button):not(.extra) {
-    box-sizing: border-box;
-    display: inline-flex;
+  .navigation-rail > button:not(.button):first-child {
+    display: flex;
     flex: 0 0 auto;
     align-items: center;
     justify-content: center;
-    gap: 8px;
-    min-width: var(--md-comp-toolbar-action-size);
-    min-height: var(--md-comp-toolbar-action-size);
-    height: var(--md-comp-toolbar-action-size);
-    margin: 0;
-    padding: 0 12px;
-    border: none;
-    border-radius: calc(var(--md-comp-toolbar-action-size) / 2);
-    background-color: transparent;
-    color: inherit;
-    box-shadow: none;
-    text-decoration: none;
+    width: var(--md-comp-nav-rail-indicator-width);
+    height: 48px;
+    margin: 0 0 8px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--md-comp-nav-rail-indicator-shape);
+    background: transparent;
+    color: var(--md-sys-color-on-surface-variant);
     cursor: pointer;
     appearance: none;
-    font-family: var(--md-sys-typescale-label-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
-    font-size: var(--md-sys-typescale-label-large-font-size);
-    font-weight: var(--md-sys-typescale-label-large-font-weight);
-    line-height: var(--md-sys-typescale-label-large-line-height);
-    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   }
-  nav.toolbar > :is(a, button):not(.extra):focus-visible {
+  .navigation-rail > button:not(.button):first-child:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  nav.toolbar > :is(a, button):not(.extra) > i {
-    flex: 0 0 auto;
-    font-size: var(--md-comp-toolbar-icon-size);
-    width: var(--md-comp-toolbar-icon-size);
-    height: var(--md-comp-toolbar-icon-size);
-    line-height: var(--md-comp-toolbar-icon-size);
-  }
-  nav.toolbar > :is(a, button):not(.extra):hover:not(.active) {
-    background-color: color-mix(in oklab, currentColor 8%, transparent);
-  }
-  nav.toolbar > :is(a, button):not(.extra):active:not(.active) {
-    background-color: color-mix(in oklab, currentColor 10%, transparent);
-  }
-  nav.toolbar > :is(a, button):not(.extra).active {
-    background-color: var(--md-sys-color-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
+  .navigation-rail > button:not(.button):first-child > i {
+    font-size: var(--md-comp-nav-rail-icon-size);
+    width: var(--md-comp-nav-rail-icon-size);
+    height: var(--md-comp-nav-rail-icon-size);
   }
-  nav.toolbar > :is(a, button):not(.extra):disabled {
-    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
-    background-color: transparent;
-    box-shadow: none;
-    cursor: default;
+  .navigation-rail > button:not(.button):first-child:hover {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
   }
-  nav.toolbar > :is(a, button):not(.extra):is(.circle, :has(> i):not(:has(> span))) {
-    width: var(--md-comp-toolbar-action-size);
+  .navigation-rail > :is(a, button).button {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    box-sizing: border-box;
+    width: var(--md-comp-nav-rail-fab-size);
+    height: var(--md-comp-nav-rail-fab-size);
+    margin: 4px 0 16px;
     padding: 0;
-    border-radius: 50%;
-  }
-  nav.toolbar > .max {
-    flex: 1 1 auto;
-    align-self: stretch;
-    min-width: 0;
-    min-height: 0;
-  }
-  nav.toolbar.filled {
-    --md-comp-toolbar-container-color: var(--md-sys-color-primary-container);
+    overflow: hidden;
+    border-radius: 16px;
     color: var(--md-sys-color-on-primary-container);
+    background-color: var(--md-sys-color-primary-container);
+    text-decoration: none;
   }
-  nav.toolbar.filled > :is(a, button).active {
-    background-color: var(--md-sys-color-surface-variant);
-    color: var(--md-sys-color-on-surface);
+  .navigation-rail > :is(a, button).button > :not(i) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
   }
-  nav.toolbar.vertical {
+  .navigation-rail > a:not(.button),
+  .navigation-rail > button:not(.button):not(:first-child) {
+    position: relative;
+    display: flex;
+    flex: 0 0 auto;
     flex-direction: column;
-    min-width: var(--md-comp-toolbar-container-height);
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    padding: 6px 0;
+    border: 0;
+    background: transparent;
+    color: var(--md-sys-color-on-surface-variant);
+    cursor: pointer;
+    appearance: none;
+    text-decoration: none;
+    text-align: center;
+    font-family: var(--md-sys-typescale-label-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-label-medium-font-size);
+    font-weight: var(--md-sys-typescale-label-medium-font-weight);
+    line-height: var(--md-sys-typescale-label-medium-line-height);
+    letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
+  }
+  .navigation-rail > a:not(.button):focus-visible,
+  .navigation-rail > button:not(.button):not(:first-child):focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
+  }
+  .navigation-rail > a:not(.button) > i,
+  .navigation-rail > button:not(.button):not(:first-child) > i {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--md-comp-nav-rail-indicator-width);
+    height: var(--md-comp-nav-rail-indicator-height);
+    border-radius: var(--md-comp-nav-rail-indicator-shape);
+    font-size: var(--md-comp-nav-rail-icon-size);
+    color: inherit;
+    transition: background-color var(--md-comp-nav-rail-duration) ease;
+  }
+  .navigation-rail > a:not(.button):hover:not(.active, [aria-current]) > i,
+  .navigation-rail > button:not(.button):not(:first-child):hover:not(.active, [aria-current]) > i {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+  }
+  .navigation-rail > a:not(.button).active, .navigation-rail > a:not(.button)[aria-current],
+  .navigation-rail > button:not(.button):not(:first-child).active,
+  .navigation-rail > button:not(.button):not(:first-child)[aria-current] {
+    color: var(--md-sys-color-on-surface);
+  }
+  .navigation-rail > a:not(.button).active > i, .navigation-rail > a:not(.button)[aria-current] > i,
+  .navigation-rail > button:not(.button):not(:first-child).active > i,
+  .navigation-rail > button:not(.button):not(:first-child)[aria-current] > i {
+    background-color: var(--md-comp-nav-rail-active-indicator-color);
+    color: var(--md-comp-nav-rail-active-color);
+    --md-icon-fill: 1;
+  }
+  .navigation-rail > a:not(.button) > .badge,
+  .navigation-rail > button:not(.button):not(:first-child) > .badge {
+    position: absolute;
+    z-index: 1;
+    top: calc(6px + (var(--md-comp-nav-rail-indicator-height) - 24px) / 2);
+    left: calc(50% + 12px);
+    transform: translate(-50%, -50%);
+  }
+  .navigation-rail > :is(h1, h2, h3, h4, h5, h6) {
+    display: none;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    padding: 12px 16px 8px;
+    color: var(--md-sys-color-on-surface-variant);
+    font-family: var(--md-sys-typescale-title-small-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-title-small-font-size);
+    font-weight: var(--md-sys-typescale-title-small-font-weight);
+    line-height: var(--md-sys-typescale-title-small-line-height);
+    letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
+  }
+  .navigation-rail.expanded {
+    --md-comp-nav-rail-indicator-height: 56px;
+    --md-comp-nav-rail-indicator-shape: 28px;
+    align-items: stretch;
+    width: clamp(220px, var(--md-comp-nav-rail-expanded-width), 360px);
+    min-width: 220px;
+    padding-inline: 16px;
+  }
+  .navigation-rail.expanded > button:not(.button):first-child {
+    justify-content: flex-start;
+    width: auto;
+    padding-inline: 16px;
+  }
+  .navigation-rail.expanded > :is(a, button).button {
+    width: 100%;
+    justify-content: flex-start;
+    padding-inline: 16px 20px;
+    color: var(--md-sys-color-on-primary-container);
+    background-color: var(--md-sys-color-primary-container);
+  }
+  .navigation-rail.expanded > :is(a, button).button > :not(i) {
+    position: static;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    clip-path: none;
+    font-family: var(--md-sys-typescale-label-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-label-large-font-size);
+    font-weight: var(--md-sys-typescale-label-large-font-weight);
+    line-height: var(--md-sys-typescale-label-large-line-height);
+    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
+  }
+  .navigation-rail.expanded > a:not(.button),
+  .navigation-rail.expanded > button:not(.button):not(:first-child) {
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: 12px;
+    min-height: var(--md-comp-nav-rail-indicator-height);
+    padding: 0 16px;
+    border-radius: var(--md-comp-nav-rail-indicator-shape);
+    text-align: start;
+  }
+  .navigation-rail.expanded > a:not(.button) > i,
+  .navigation-rail.expanded > button:not(.button):not(:first-child) > i {
+    width: var(--md-comp-nav-rail-icon-size);
+    height: var(--md-comp-nav-rail-icon-size);
+    border-radius: 0;
+  }
+  .navigation-rail.expanded > a:not(.button):hover:not(.active, [aria-current]),
+  .navigation-rail.expanded > button:not(.button):not(:first-child):hover:not(.active, [aria-current]) {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+  }
+  .navigation-rail.expanded > a:not(.button):hover:not(.active, [aria-current]) > i,
+  .navigation-rail.expanded > button:not(.button):not(:first-child):hover:not(.active, [aria-current]) > i {
+    background-color: transparent;
+  }
+  .navigation-rail.expanded > a:not(.button).active, .navigation-rail.expanded > a:not(.button)[aria-current],
+  .navigation-rail.expanded > button:not(.button):not(:first-child).active,
+  .navigation-rail.expanded > button:not(.button):not(:first-child)[aria-current] {
+    background-color: var(--md-comp-nav-rail-active-indicator-color);
+    color: var(--md-comp-nav-rail-active-color);
+  }
+  .navigation-rail.expanded > a:not(.button).active > i, .navigation-rail.expanded > a:not(.button)[aria-current] > i,
+  .navigation-rail.expanded > button:not(.button):not(:first-child).active > i,
+  .navigation-rail.expanded > button:not(.button):not(:first-child)[aria-current] > i {
+    background-color: transparent;
+    color: inherit;
+  }
+  .navigation-rail.expanded > a:not(.button) > .badge,
+  .navigation-rail.expanded > button:not(.button):not(:first-child) > .badge {
+    top: calc((var(--md-comp-nav-rail-indicator-height) - 24px) / 2);
+    left: auto;
+    inset-inline-start: 40px;
+    transform: translate(-50%, -50%);
+  }
+  .navigation-rail.expanded > :is(h1, h2, h3, h4, h5, h6) {
+    display: block;
+  }
+  .navigation-rail.expanded.modal {
+    position: fixed;
+    inset: 0 auto 0 0;
+    z-index: 998;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+  }
+  .navigation-rail.expanded.modal::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    background-color: color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
+    z-index: -1;
+  }
+  @media (width < 601px) {
+    .navigation-rail.expanded:not(.modal) {
+      position: fixed;
+      inset: 0 auto 0 0;
+      z-index: 998;
+      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+    }
+    .navigation-rail.expanded:not(.modal)::before {
+      content: "";
+      position: fixed;
+      inset: 0;
+      background-color: color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
+      z-index: -1;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .navigation-rail {
+      transition: none;
+    }
+  }
+  nav.toolbar {
+    --md-comp-toolbar-container-color: var(--md-sys-color-surface-container);
+    --md-comp-toolbar-container-shape: 32px;
+    --md-comp-toolbar-container-height: 64px;
+    --md-comp-toolbar-leading-space: 12px;
+    --md-comp-toolbar-action-size: 48px;
+    --md-comp-toolbar-icon-size: 24px;
+    --md-comp-toolbar-selected-container-color: var(--md-sys-color-secondary-container);
+    --md-comp-toolbar-selected-color: var(--md-sys-color-on-secondary-container);
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    min-height: var(--md-comp-toolbar-container-height);
+    min-width: var(--md-comp-toolbar-container-height);
+    margin: 0;
+    padding: 8px var(--md-comp-toolbar-leading-space);
+    border: none;
+    border-radius: var(--md-comp-toolbar-container-shape);
+    background-color: var(--md-comp-toolbar-container-color);
+    color: var(--md-sys-color-on-surface);
+    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  }
+  nav.toolbar + nav.toolbar {
+    margin-block-start: 16px;
+  }
+  nav.toolbar > :is(a, button):not(.extra) {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-width: var(--md-comp-toolbar-action-size);
+    min-height: var(--md-comp-toolbar-action-size);
+    height: var(--md-comp-toolbar-action-size);
+    margin: 0;
+    padding: 0 12px;
+    border: none;
+    border-radius: calc(var(--md-comp-toolbar-action-size) / 2);
+    background-color: transparent;
+    color: inherit;
+    box-shadow: none;
+    text-decoration: none;
+    cursor: pointer;
+    appearance: none;
+    font-family: var(--md-sys-typescale-label-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-label-large-font-size);
+    font-weight: var(--md-sys-typescale-label-large-font-weight);
+    line-height: var(--md-sys-typescale-label-large-line-height);
+    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  }
+  nav.toolbar > :is(a, button):not(.extra):focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
+  }
+  nav.toolbar > :is(a, button):not(.extra) > i {
+    flex: 0 0 auto;
+    font-size: var(--md-comp-toolbar-icon-size);
+    width: var(--md-comp-toolbar-icon-size);
+    height: var(--md-comp-toolbar-icon-size);
+    line-height: var(--md-comp-toolbar-icon-size);
+  }
+  nav.toolbar > :is(a, button):not(.extra):hover:not(.active, .filled) {
+    background-color: color-mix(in oklab, currentColor 8%, transparent);
+  }
+  nav.toolbar > :is(a, button):not(.extra):active:not(.active, .filled) {
+    background-color: color-mix(in oklab, currentColor 10%, transparent);
+  }
+  nav.toolbar > :is(a, button):not(.extra).active {
+    background-color: var(--md-comp-toolbar-selected-container-color);
+    color: var(--md-comp-toolbar-selected-color);
+  }
+  nav.toolbar > :is(a, button):not(.extra):disabled {
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+    background-color: transparent;
+    box-shadow: none;
+    cursor: default;
+  }
+  nav.toolbar > :is(a, button):not(.extra):is(.circle, :has(> i):not(:has(> span))) {
+    width: var(--md-comp-toolbar-action-size);
+    padding: 0;
+    border-radius: 50%;
+  }
+  nav.toolbar > :is(a, button).filled:not(.extra) {
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+    border-radius: 16px;
+    box-shadow: none;
+  }
+  nav.toolbar > :is(a, button).filled:not(.extra):hover {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary));
+  }
+  nav.toolbar > :is(a, button).filled:not(.extra):active {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 10%, var(--md-sys-color-primary));
+  }
+  nav.toolbar > :is(a, button).filled:not(.extra):has(> span) {
+    height: 40px;
+    min-height: 40px;
+    padding: 0 24px;
+    border-radius: 20px;
+    width: auto;
+  }
+  nav.toolbar > .field {
+    flex: 1 1 auto;
+    align-self: center;
+    min-width: 0;
+    margin: 0;
+  }
+  nav.toolbar > .max {
+    flex: 1 1 auto;
+    align-self: stretch;
+    min-width: 0;
+    min-height: 0;
+  }
+  nav.toolbar.vibrant,
+  nav.toolbar.filled {
+    --md-comp-toolbar-container-color: var(--md-sys-color-primary-container);
+    --md-comp-toolbar-selected-container-color: var(--md-sys-color-surface);
+    --md-comp-toolbar-selected-color: var(--md-sys-color-on-surface);
+    color: var(--md-sys-color-on-primary-container);
+  }
+  nav.toolbar.vertical {
+    flex-direction: column;
+    min-width: var(--md-comp-toolbar-container-height);
     min-height: var(--md-comp-toolbar-container-height);
     padding: var(--md-comp-toolbar-leading-space) 8px;
   }
@@ -2339,6 +3093,17 @@
     justify-content: space-around;
     box-shadow: none !important;
   }
+  .toolbar-group {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .toolbar-group.vertical {
+    flex-direction: column;
+  }
+  .toolbar-group > nav.toolbar {
+    margin: 0;
+  }
   nav.toolbar.fixed {
     position: fixed;
     z-index: 996;
@@ -2362,10 +3127,12 @@
   nav.toolbar:is(.max, .docked).fixed.bottom {
     inset: auto 0 0 0;
     transform: none;
+    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
   }
   nav.toolbar:is(.max, .docked).fixed.top {
     inset: 0 0 auto 0;
     transform: none;
+    padding-bottom: 8px;
   }
   .scale-transition {
     transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
@@ -2378,7 +3145,7 @@
     transform: scale(1);
   }
   :where(article) {
-    --md-comp-elevated-card-container-color: var(--md-sys-color-surface);
+    --md-comp-elevated-card-container-color: var(--md-sys-color-surface-container-low);
     --md-comp-elevated-card-container-shape: 12px;
     position: relative;
     box-sizing: border-box;
@@ -2396,7 +3163,7 @@
   }
   :where(article).filled {
     box-shadow: none !important;
-    background-color: var(--md-sys-color-surface-variant);
+    background-color: var(--md-sys-color-surface-container-highest);
   }
   :where(article).outlined,
   :where(article).border {
@@ -2578,7 +3345,7 @@
     bottom: auto;
     height: calc(100% - 52px);
   }
-  #toast-container {
+  #snackbar-container {
     --md-comp-snackbar-container-margin-leading: 8px;
     --md-comp-snackbar-container-margin-trailing: 8px;
     --md-comp-snackbar-container-margin-bottom: 8px;
@@ -2589,33 +3356,32 @@
     gap: 8px;
     position: fixed;
     z-index: 10000;
-    inset: auto var(--md-comp-snackbar-container-margin-trailing) var(--md-comp-snackbar-container-margin-bottom) var(--md-comp-snackbar-container-margin-leading);
+    inset: auto var(--md-comp-snackbar-container-margin-trailing) max(var(--md-comp-snackbar-container-margin-bottom), env(safe-area-inset-bottom, 0px)) var(--md-comp-snackbar-container-margin-leading);
     width: auto;
     max-width: calc(100% - var(--md-comp-snackbar-container-margin-leading) - var(--md-comp-snackbar-container-margin-trailing));
     pointer-events: none;
   }
-  #toast-container > * {
+  #snackbar-container > * {
     pointer-events: auto;
   }
   @media (width >= 601px) {
-    #toast-container {
+    #snackbar-container {
       --md-comp-snackbar-container-margin-leading: 24px;
       --md-comp-snackbar-container-margin-trailing: 24px;
       --md-comp-snackbar-container-margin-bottom: 24px;
       --md-comp-snackbar-container-margin-top: 24px;
-      align-items: flex-start;
+      align-items: center;
+      left: 50%;
+      right: auto;
       width: max-content;
       min-width: min(344px, 100% - 48px);
       max-width: min(672px, 100% - 48px);
+      transform: translateX(-50%);
     }
   }
-  #toast-container:has(> .top), #toast-container.top {
-    inset: var(--md-comp-snackbar-container-margin-top) var(--md-comp-snackbar-container-margin-trailing) auto var(--md-comp-snackbar-container-margin-leading);
-  }
-  #toast-container:has(> .center), #toast-container.center {
-    left: 50%;
-    right: auto;
-    transform: translateX(-50%);
+  #snackbar-container:has(> .top), #snackbar-container.top {
+    inset-block-start: var(--md-comp-snackbar-container-margin-top);
+    inset-block-end: auto;
   }
   .snackbar {
     --md-comp-snackbar-container-color: var(--md-sys-color-inverse-surface);
@@ -2761,39 +3527,42 @@
   .snackbar + .snackbar {
     margin-top: 8px;
   }
-  #toast-container .snackbar {
+  #snackbar-container .snackbar {
     position: relative;
-    top: 35px;
     margin-top: 0;
   }
   .snackbar.active {
     position: fixed;
     z-index: 10000;
-    inset: auto auto 16px 16px;
+    left: 50%;
+    right: auto;
+    bottom: 24px;
     top: auto;
+    transform: translateX(-50%);
     width: max-content;
-    max-width: min(672px, 100% - 32px);
+    max-width: min(672px, 100% - 48px);
   }
   @media (width < 601px) {
     .snackbar.active {
-      inset: auto 8px 8px 8px;
+      left: 8px;
+      right: 8px;
+      bottom: max(8px, env(safe-area-inset-bottom, 0px));
+      transform: none;
       width: auto;
       max-width: none;
     }
   }
   .snackbar.active.top {
-    inset: 16px auto auto 16px;
+    top: 24px;
+    bottom: auto;
   }
   @media (width < 601px) {
     .snackbar.active.top {
-      inset: 8px 8px auto 8px;
+      top: 8px;
+      left: 8px;
+      right: 8px;
     }
   }
-  .snackbar.active.center {
-    left: 50%;
-    right: auto;
-    transform: translateX(-50%);
-  }
   .tabs {
     --md-comp-primary-tab-container-color: var(--md-sys-color-surface);
     --md-comp-primary-tab-container-height: 48px;
@@ -2949,24 +3718,6 @@
       padding-inline: 12px;
     }
   }
-  .tabs.transparent {
-    --md-comp-primary-tab-container-color: transparent;
-    --md-comp-primary-tab-label-text-color: color-mix(
-      in oklab,
-      var(--md-sys-color-on-primary) 74%,
-      transparent
-    );
-    --md-comp-primary-tab-active-label-text-color: var(--md-sys-color-on-primary);
-    --md-comp-primary-tab-active-indicator-color: var(--md-sys-color-on-primary);
-    border-block-end-color: color-mix(in oklab, var(--md-sys-color-on-primary) 20%, transparent);
-  }
-  .tabs.transparent > a:hover, .tabs.transparent > a:focus, .tabs.transparent > .tab > a:hover, .tabs.transparent > .tab > a:focus {
-    color: var(--md-sys-color-on-primary);
-    background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 8%, transparent);
-  }
-  .tabs.transparent > a.active:hover, .tabs.transparent > a.active:focus, .tabs.transparent > .tab > a.active:hover, .tabs.transparent > .tab > a.active:focus {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 10%, transparent);
-  }
   .tooltip {
     --md-comp-plain-tooltip-container-color: var(--md-sys-color-inverse-surface);
     --md-comp-plain-tooltip-supporting-text-color: var(--md-sys-color-inverse-on-surface);
@@ -3053,7 +3804,7 @@
   }
   .tooltip.rich,
   .tooltip.max {
-    --md-comp-rich-tooltip-container-color: var(--md-sys-color-surface);
+    --md-comp-rich-tooltip-container-color: var(--md-sys-color-surface-container);
     --md-comp-rich-tooltip-container-shape: 12px;
     display: flex;
     flex-direction: column;
@@ -3106,36 +3857,48 @@
     border: none;
   }
   menu[id] {
-    --md-comp-menu-container-color: var(--md-sys-color-surface);
-    --md-comp-menu-container-shape: 1rem;
+    --md-comp-menu-container-color: var(--md-sys-color-surface-container);
+    --md-comp-menu-container-shape: 16px;
     --md-comp-menu-item-container-height: 48px;
+    --md-comp-menu-item-container-shape: 4px;
+    --md-comp-menu-item-selected-container-shape: 12px;
+    --md-comp-menu-item-label-text-color: var(--md-sys-color-on-surface);
+    --md-comp-menu-item-leading-icon-color: var(--md-sys-color-on-surface-variant);
+    --md-comp-menu-item-trailing-icon-color: var(--md-sys-color-on-surface-variant);
+    --md-comp-menu-item-selected-container-color: var(--md-sys-color-tertiary-container);
+    --md-comp-menu-item-selected-label-text-color: var(--md-sys-color-on-tertiary-container);
+    --md-comp-menu-item-selected-leading-icon-color: var(--md-sys-color-on-tertiary-container);
+    --md-comp-menu-item-icon-size: 20px;
+    --md-comp-menu-supporting-text-color: var(--md-sys-color-on-surface-variant);
     box-sizing: border-box;
-    display: none;
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 9999;
     min-width: 112px;
     margin: 0;
-    padding: 8px 0;
+    padding: 4px;
     list-style: none;
-    overflow-y: auto;
-    opacity: 0;
-    user-select: none;
-    transform-origin: 0 0;
     background-color: var(--md-comp-menu-container-color);
     border-radius: var(--md-comp-menu-container-shape);
-    color: var(--md-sys-color-on-surface);
+    color: var(--md-comp-menu-item-label-text-color);
     box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+    transition: border-radius 200ms ease;
+  }
+  menu[id].vibrant {
+    --md-comp-menu-container-color: var(--md-sys-color-tertiary-container);
+    --md-comp-menu-item-label-text-color: var(--md-sys-color-on-tertiary-container);
+    --md-comp-menu-item-leading-icon-color: var(--md-sys-color-on-tertiary-container);
+    --md-comp-menu-item-trailing-icon-color: var(--md-sys-color-on-tertiary-container);
+    --md-comp-menu-supporting-text-color: var(--md-sys-color-on-tertiary-container);
+    --md-comp-menu-item-selected-container-color: var(--md-sys-color-tertiary);
+    --md-comp-menu-item-selected-label-text-color: var(--md-sys-color-on-tertiary);
+    --md-comp-menu-item-selected-leading-icon-color: var(--md-sys-color-on-tertiary);
   }
   menu[id] > li {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     width: 100%;
-    min-height: var(--md-comp-menu-item-container-height);
     cursor: pointer;
     text-align: left;
+    border-radius: var(--md-comp-menu-item-container-shape);
   }
   menu[id] > li > a,
   menu[id] > li > button,
@@ -3147,10 +3910,10 @@
     width: 100%;
     min-height: var(--md-comp-menu-item-container-height);
     margin: 0;
-    padding: 0 12px;
+    padding: 0 8px;
     border: 0;
     background: none;
-    color: var(--md-sys-color-on-surface);
+    color: var(--md-comp-menu-item-label-text-color);
     text-decoration: none;
     cursor: pointer;
   }
@@ -3174,21 +3937,63 @@
   menu[id] > li > a > i,
   menu[id] > li > button > i,
   menu[id] > li > i {
-    flex: 0 0 24px;
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
-    color: var(--md-sys-color-on-surface-variant);
+    flex: 0 0 var(--md-comp-menu-item-icon-size);
+    font-size: var(--md-comp-menu-item-icon-size);
+    width: var(--md-comp-menu-item-icon-size);
+    height: var(--md-comp-menu-item-icon-size);
+    line-height: var(--md-comp-menu-item-icon-size);
+    color: var(--md-comp-menu-item-leading-icon-color);
+  }
+  menu[id] > li > :is(a, button) > i:last-child:not(:only-child) {
+    margin-inline-start: auto;
+    color: var(--md-comp-menu-item-trailing-icon-color);
   }
-  menu[id] > li:not(.disabled, .divider, .optgroup) {
-    width: calc(100% - 16px);
-    margin-inline: 8px;
-    border-radius: 2rem;
+  menu[id] > li > :is(a, button) > :is(kbd, .shortcut) {
+    margin-inline-start: auto;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--md-comp-menu-supporting-text-color);
+    font-family: inherit;
+    font-family: var(--md-sys-typescale-label-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-label-large-font-size);
+    font-weight: var(--md-sys-typescale-label-large-font-weight);
+    line-height: var(--md-sys-typescale-label-large-line-height);
+    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
   }
-  menu[id] > li:not(.disabled, .divider):hover,
-  menu[id] > li.active {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+  menu[id] > li:not(.disabled, .divider, .optgroup, .gap, .label) {
+    min-height: var(--md-comp-menu-item-container-height);
+  }
+  menu[id] > li:not(.disabled, .divider, .optgroup, .gap, .label):hover,
+  menu[id] > li.active:not(.selected, [aria-selected=true]) {
+    background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 8%, transparent);
+  }
+  menu[id] > li:not(.disabled, .divider, .optgroup, .gap, .label):active {
+    background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 10%, transparent);
+  }
+  menu[id] > li.selected,
+  menu[id] > li[aria-selected=true] {
+    border-radius: var(--md-comp-menu-item-selected-container-shape);
+    background-color: var(--md-comp-menu-item-selected-container-color);
+    color: var(--md-comp-menu-item-selected-label-text-color);
+  }
+  menu[id] > li.selected > :is(a, button, span),
+  menu[id] > li[aria-selected=true] > :is(a, button, span) {
+    color: var(--md-comp-menu-item-selected-label-text-color);
+  }
+  menu[id] > li.selected > :is(a, button, span) > i,
+  menu[id] > li.selected > i,
+  menu[id] > li[aria-selected=true] > :is(a, button, span) > i,
+  menu[id] > li[aria-selected=true] > i {
+    color: var(--md-comp-menu-item-selected-leading-icon-color);
+  }
+  menu[id] > li.selected:hover,
+  menu[id] > li[aria-selected=true]:hover {
+    background-color: color-mix(in oklab, var(--md-comp-menu-item-selected-label-text-color) 8%, var(--md-comp-menu-item-selected-container-color));
+  }
+  menu[id] > li:focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: -3px;
   }
   menu[id] > li.disabled {
     pointer-events: none;
@@ -3197,75 +4002,248 @@
   menu[id] > hr,
   menu[id] > li.divider {
     display: block;
-    width: 100%;
+    width: calc(100% - 8px);
     height: 1px;
     min-height: 0;
-    margin: 8px 0;
+    margin: 4px auto;
     padding: 0;
     border: 0;
     background-color: var(--md-sys-color-outline-variant);
     cursor: default;
+    pointer-events: none;
+    border-radius: 0;
   }
-  menu[id]:has(> li > menu) {
-    overflow: visible;
+  menu[id] > li.gap {
+    height: 6px;
+    min-height: 6px;
+    margin: 0 -4px;
+    padding: 0;
+    pointer-events: none;
+    cursor: default;
+    background: transparent;
+    border-radius: 0;
+    box-shadow: none;
+  }
+  menu[id] > li.label {
+    display: flex;
+    align-items: center;
+    min-height: 32px;
+    padding: 0 8px;
+    pointer-events: none;
+    cursor: default;
+    color: var(--md-comp-menu-supporting-text-color);
+    font-family: var(--md-sys-typescale-label-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-label-large-font-size);
+    font-weight: var(--md-sys-typescale-label-large-font-weight);
+    line-height: var(--md-sys-typescale-label-large-line-height);
+    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   }
   menu[id] li:has(> menu) {
     position: relative;
   }
   menu[id] li:has(> menu) > :is(a, button, span)::after {
     content: "";
-    flex: 0 0 24px;
-    width: 24px;
-    height: 24px;
+    flex: 0 0 var(--md-comp-menu-item-icon-size);
+    width: var(--md-comp-menu-item-icon-size);
+    height: var(--md-comp-menu-item-icon-size);
     margin-inline-start: auto;
-    background-color: var(--md-sys-color-on-surface-variant);
-    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 6l6 6-6 6'/%3E%3C/svg%3E") center/24px no-repeat;
+    background-color: var(--md-comp-menu-item-trailing-icon-color);
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 6l6 6-6 6'/%3E%3C/svg%3E") center/20px no-repeat;
+  }
+  menu[id] {
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 9999;
+    overflow-y: auto;
+    opacity: 0;
+    user-select: none;
+    transform-origin: 0 0;
+  }
+  menu[id]:has(> li > menu) {
+    overflow: visible;
+  }
+  menu[id]:has(> li:is(:hover, :focus-within, .open) > menu) {
+    --md-comp-menu-container-shape: 8px;
   }
   menu[id] li > menu {
-    --md-comp-menu-container-color: var(--md-sys-color-surface);
-    --md-comp-menu-container-shape: 1rem;
+    --md-comp-menu-container-color: var(--md-sys-color-surface-container);
+    --md-comp-menu-container-shape: 16px;
     --md-comp-menu-item-container-height: 48px;
+    --md-comp-menu-item-container-shape: 4px;
+    --md-comp-menu-item-selected-container-shape: 12px;
+    --md-comp-menu-item-label-text-color: var(--md-sys-color-on-surface);
+    --md-comp-menu-item-leading-icon-color: var(--md-sys-color-on-surface-variant);
+    --md-comp-menu-item-trailing-icon-color: var(--md-sys-color-on-surface-variant);
+    --md-comp-menu-item-selected-container-color: var(--md-sys-color-tertiary-container);
+    --md-comp-menu-item-selected-label-text-color: var(--md-sys-color-on-tertiary-container);
+    --md-comp-menu-item-selected-leading-icon-color: var(--md-sys-color-on-tertiary-container);
+    --md-comp-menu-item-icon-size: 20px;
+    --md-comp-menu-supporting-text-color: var(--md-sys-color-on-surface-variant);
     box-sizing: border-box;
-    display: none;
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 100%;
-    z-index: 1;
     min-width: 112px;
     margin: 0;
-    padding: 8px 0;
+    padding: 4px;
     list-style: none;
-    overflow: visible;
-    opacity: 1;
-    transform: none;
     background-color: var(--md-comp-menu-container-color);
     border-radius: var(--md-comp-menu-container-shape);
-    color: var(--md-sys-color-on-surface);
+    color: var(--md-comp-menu-item-label-text-color);
     box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+    transition: border-radius 200ms ease;
+  }
+  menu[id] li > menu.vibrant {
+    --md-comp-menu-container-color: var(--md-sys-color-tertiary-container);
+    --md-comp-menu-item-label-text-color: var(--md-sys-color-on-tertiary-container);
+    --md-comp-menu-item-leading-icon-color: var(--md-sys-color-on-tertiary-container);
+    --md-comp-menu-item-trailing-icon-color: var(--md-sys-color-on-tertiary-container);
+    --md-comp-menu-supporting-text-color: var(--md-sys-color-on-tertiary-container);
+    --md-comp-menu-item-selected-container-color: var(--md-sys-color-tertiary);
+    --md-comp-menu-item-selected-label-text-color: var(--md-sys-color-on-tertiary);
+    --md-comp-menu-item-selected-leading-icon-color: var(--md-sys-color-on-tertiary);
   }
   menu[id] li > menu > li {
     box-sizing: border-box;
-    min-height: var(--md-comp-menu-item-container-height);
-  }
-  menu[id] li > menu > li:not(.disabled, .divider, .optgroup) {
-    width: calc(100% - 16px);
-    margin-inline: 8px;
-    border-radius: 2rem;
-  }
-  menu[id] li > menu > li:not(.disabled, .divider):hover,
-  menu[id] li > menu > li.active {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    cursor: pointer;
+    text-align: left;
+    border-radius: var(--md-comp-menu-item-container-shape);
   }
-  menu[id] li > menu > li > :is(a, button, span) {
+  menu[id] li > menu > li > a,
+  menu[id] li > menu > li > button,
+  menu[id] li > menu > li > span {
     display: flex;
     align-items: center;
     gap: 12px;
     box-sizing: border-box;
     width: 100%;
     min-height: var(--md-comp-menu-item-container-height);
-    padding: 0 12px;
-    color: var(--md-sys-color-on-surface);
+    margin: 0;
+    padding: 0 8px;
+    border: 0;
+    background: none;
+    color: var(--md-comp-menu-item-label-text-color);
     text-decoration: none;
+    cursor: pointer;
+  }
+  menu[id] li > menu > li > a:hover, menu[id] li > menu > li > a:focus,
+  menu[id] li > menu > li > button:hover,
+  menu[id] li > menu > li > button:focus,
+  menu[id] li > menu > li > span:hover,
+  menu[id] li > menu > li > span:focus {
+    background: none;
+  }
+  menu[id] li > menu > li > a,
+  menu[id] li > menu > li > button,
+  menu[id] li > menu > li > span {
+    font-family: var(--md-sys-typescale-label-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-label-large-font-size);
+    font-weight: var(--md-sys-typescale-label-large-font-weight);
+    line-height: var(--md-sys-typescale-label-large-line-height);
+    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  }
+  menu[id] li > menu > li > a > i,
+  menu[id] li > menu > li > button > i,
+  menu[id] li > menu > li > i {
+    flex: 0 0 var(--md-comp-menu-item-icon-size);
+    font-size: var(--md-comp-menu-item-icon-size);
+    width: var(--md-comp-menu-item-icon-size);
+    height: var(--md-comp-menu-item-icon-size);
+    line-height: var(--md-comp-menu-item-icon-size);
+    color: var(--md-comp-menu-item-leading-icon-color);
+  }
+  menu[id] li > menu > li > :is(a, button) > i:last-child:not(:only-child) {
+    margin-inline-start: auto;
+    color: var(--md-comp-menu-item-trailing-icon-color);
+  }
+  menu[id] li > menu > li > :is(a, button) > :is(kbd, .shortcut) {
+    margin-inline-start: auto;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--md-comp-menu-supporting-text-color);
+    font-family: inherit;
+    font-family: var(--md-sys-typescale-label-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-label-large-font-size);
+    font-weight: var(--md-sys-typescale-label-large-font-weight);
+    line-height: var(--md-sys-typescale-label-large-line-height);
+    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
+  }
+  menu[id] li > menu > li:not(.disabled, .divider, .optgroup, .gap, .label) {
+    min-height: var(--md-comp-menu-item-container-height);
+  }
+  menu[id] li > menu > li:not(.disabled, .divider, .optgroup, .gap, .label):hover,
+  menu[id] li > menu > li.active:not(.selected, [aria-selected=true]) {
+    background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 8%, transparent);
+  }
+  menu[id] li > menu > li:not(.disabled, .divider, .optgroup, .gap, .label):active {
+    background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 10%, transparent);
+  }
+  menu[id] li > menu > li.selected,
+  menu[id] li > menu > li[aria-selected=true] {
+    border-radius: var(--md-comp-menu-item-selected-container-shape);
+    background-color: var(--md-comp-menu-item-selected-container-color);
+    color: var(--md-comp-menu-item-selected-label-text-color);
+  }
+  menu[id] li > menu > li.selected > :is(a, button, span),
+  menu[id] li > menu > li[aria-selected=true] > :is(a, button, span) {
+    color: var(--md-comp-menu-item-selected-label-text-color);
+  }
+  menu[id] li > menu > li.selected > :is(a, button, span) > i,
+  menu[id] li > menu > li.selected > i,
+  menu[id] li > menu > li[aria-selected=true] > :is(a, button, span) > i,
+  menu[id] li > menu > li[aria-selected=true] > i {
+    color: var(--md-comp-menu-item-selected-leading-icon-color);
+  }
+  menu[id] li > menu > li.selected:hover,
+  menu[id] li > menu > li[aria-selected=true]:hover {
+    background-color: color-mix(in oklab, var(--md-comp-menu-item-selected-label-text-color) 8%, var(--md-comp-menu-item-selected-container-color));
+  }
+  menu[id] li > menu > li:focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: -3px;
+  }
+  menu[id] li > menu > li.disabled {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+  menu[id] li > menu > hr,
+  menu[id] li > menu > li.divider {
+    display: block;
+    width: calc(100% - 8px);
+    height: 1px;
+    min-height: 0;
+    margin: 4px auto;
+    padding: 0;
+    border: 0;
+    background-color: var(--md-sys-color-outline-variant);
+    cursor: default;
+    pointer-events: none;
+    border-radius: 0;
+  }
+  menu[id] li > menu > li.gap {
+    height: 6px;
+    min-height: 6px;
+    margin: 0 -4px;
+    padding: 0;
+    pointer-events: none;
+    cursor: default;
+    background: transparent;
+    border-radius: 0;
+    box-shadow: none;
+  }
+  menu[id] li > menu > li.label {
+    display: flex;
+    align-items: center;
+    min-height: 32px;
+    padding: 0 8px;
+    pointer-events: none;
+    cursor: default;
+    color: var(--md-comp-menu-supporting-text-color);
     font-family: var(--md-sys-typescale-label-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
     font-size: var(--md-sys-typescale-label-large-font-size);
     font-weight: var(--md-sys-typescale-label-large-font-weight);
@@ -3273,30 +4251,76 @@
     letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   }
+  menu[id] li > menu li:has(> menu) {
+    position: relative;
+  }
+  menu[id] li > menu li:has(> menu) > :is(a, button, span)::after {
+    content: "";
+    flex: 0 0 var(--md-comp-menu-item-icon-size);
+    width: var(--md-comp-menu-item-icon-size);
+    height: var(--md-comp-menu-item-icon-size);
+    margin-inline-start: auto;
+    background-color: var(--md-comp-menu-item-trailing-icon-color);
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 6l6 6-6 6'/%3E%3C/svg%3E") center/20px no-repeat;
+  }
+  menu[id] li > menu {
+    display: block;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 100%;
+    z-index: 1;
+    overflow: visible;
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(-4px) scale(0.96);
+    transform-origin: 0 0;
+    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease, border-radius 200ms ease;
+  }
   @media (hover: hover) and (pointer: fine) {
     menu[id] li:is(:hover, :focus-within) > menu {
-      display: block;
+      visibility: visible;
+      opacity: 1;
+      pointer-events: auto;
+      transform: none;
+      --md-comp-menu-container-shape: 20px;
     }
   }
   menu[id] li.open > menu {
-    display: block;
+    visibility: visible;
+    opacity: 1;
+    pointer-events: auto;
+    transform: none;
+    --md-comp-menu-container-shape: 20px;
   }
   menu[id] li.submenu-start > menu {
     inset-inline-start: auto;
     inset-inline-end: 100%;
+    transform-origin: 100% 0;
+  }
+  menu[id] li.submenu-start:is(:hover, :focus-within, .open) > menu {
+    transform: none;
   }
   body.keyboard-focused menu[id] > li:focus {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
+    background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 10%, transparent);
+  }
+  body.keyboard-focused menu[id] > li:focus:not(.selected, [aria-selected=true]) {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: -3px;
   }
-  .dropdown-trigger {
+  @media (prefers-reduced-motion: reduce) {
+    menu[id] li > menu {
+      transition: none;
+    }
+  }
+  .menu-trigger {
     cursor: pointer;
   }
   dialog {
-    --md-comp-basic-dialog-container-color: var(--md-sys-color-surface);
+    --md-comp-basic-dialog-container-color: var(--md-sys-color-surface-container-high);
     --md-comp-basic-dialog-container-shape: 28px;
     --md-comp-basic-dialog-container-min-width: 280px;
     --md-comp-basic-dialog-container-max-width: 560px;
-    --md-comp-basic-dialog-sheet-width: 400px;
     --md-comp-basic-dialog-scrim-blur: 12px;
     box-sizing: border-box;
     width: min(var(--md-comp-basic-dialog-container-max-width), 100% - 48px);
@@ -3338,12 +4362,12 @@
     flex: 0 0 auto;
     margin: 0;
     padding: 24px 24px 16px;
-    font-family: var(--md-sys-typescale-headline-small-font-family-name);
+    color: var(--md-sys-color-on-surface);
+    font-family: var(--md-sys-typescale-headline-small-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
     font-size: var(--md-sys-typescale-headline-small-font-size);
     font-weight: var(--md-sys-typescale-headline-small-font-weight);
     line-height: var(--md-sys-typescale-headline-small-line-height);
     letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
-    color: var(--md-sys-color-on-surface);
   }
   dialog > i:first-child + :is(h1, h2, h3, h4, h5, h6) {
     padding-top: 16px;
@@ -3356,17 +4380,39 @@
     overflow: auto;
     overscroll-behavior: contain;
     margin: 0;
-    padding: 0 24px 16px;
-    font-family: var(--md-sys-typescale-body-medium-font-family-name);
+    padding: 0 24px 24px;
+  }
+  dialog > p {
+    color: var(--md-sys-color-on-surface-variant);
+    font-family: var(--md-sys-typescale-body-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
     font-size: var(--md-sys-typescale-body-medium-font-size);
     font-weight: var(--md-sys-typescale-body-medium-font-weight);
     line-height: var(--md-sys-typescale-body-medium-line-height);
     letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
-    color: color-mix(in oklab, currentColor 72%, transparent);
+  }
+  dialog > i:first-child + :is(h1, h2, h3, h4, h5, h6) + p {
+    text-align: center;
   }
   dialog > :is(h1, h2, h3, h4, h5, h6) + p {
     padding-top: 0;
   }
+  dialog > hr {
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    width: 100%;
+    height: 1px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background-color: var(--md-sys-color-outline-variant);
+  }
+  dialog > .list {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    margin: 0;
+    --md-comp-list-item-padding: 24px;
+  }
   dialog > :is(form, nav):last-child {
     display: flex;
     flex-wrap: wrap;
@@ -3375,188 +4421,420 @@
     gap: 8px;
     flex: 0 0 auto;
     margin: 0;
-    padding: 8px 16px 16px;
+    padding: 0 24px 24px;
     border: 0;
     background: none;
   }
-  dialog.max {
-    width: 100%;
-    max-width: none;
-    height: 100%;
-    min-width: 0;
-    max-height: none;
+  dialog:not(.bottom,
+  .bottom-sheet,
+  .side-sheet,
+  .right,
+  .right-sheet,
+  .left,
+  .left-sheet,
+  .sidenav,
+  .sidenav-overlay) > :is(form, nav):last-child > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled) {
+    box-shadow: none !important;
+    color: var(--md-sys-color-primary);
+    background-color: transparent;
+    border-color: transparent;
+  }
+  dialog:not(.bottom,
+  .bottom-sheet,
+  .side-sheet,
+  .right,
+  .right-sheet,
+  .left,
+  .left-sheet,
+  .sidenav,
+  .sidenav-overlay) > :is(form, nav):last-child > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled):hover {
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+  }
+  dialog:not(.bottom,
+  .bottom-sheet,
+  .side-sheet,
+  .right,
+  .right-sheet,
+  .left,
+  .left-sheet,
+  .sidenav,
+  .sidenav-overlay) > :is(form, nav):last-child > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled):active, dialog:not(.bottom,
+  .bottom-sheet,
+  .side-sheet,
+  .right,
+  .right-sheet,
+  .left,
+  .left-sheet,
+  .sidenav,
+  .sidenav-overlay) > :is(form, nav):last-child > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled):focus {
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+  }
+  dialog:not(.bottom,
+  .bottom-sheet,
+  .side-sheet,
+  .right,
+  .right-sheet,
+  .left,
+  .left-sheet,
+  .sidenav,
+  .sidenav-overlay) > :is(form, nav):last-child > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled):focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
+  }
+  dialog.max {
+    --md-comp-basic-dialog-container-color: var(--md-sys-color-surface);
+    width: 100%;
+    max-width: none;
+    height: 100%;
+    min-width: 0;
+    max-height: none;
+    margin: 0;
+    border-radius: 0;
+    box-shadow: none !important;
+  }
+  dialog.max::backdrop {
+    background: none;
+    backdrop-filter: none;
+  }
+  dialog.max > header {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    min-height: 64px;
+    margin: 0;
+    padding: 8px 4px;
+    background: none;
+    box-shadow: none;
+  }
+  dialog.max > header > :is(h1, h2, h3, h4, h5, h6) {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    padding: 0 12px;
+    text-align: start;
+    color: var(--md-sys-color-on-surface);
+    font-family: var(--md-sys-typescale-title-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-title-large-font-size);
+    font-weight: var(--md-sys-typescale-title-large-font-weight);
+    line-height: var(--md-sys-typescale-title-large-line-height);
+    letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
+  }
+  dialog.max > header > form {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    margin: 0;
+    padding: 0 8px 0 0;
+    border: 0;
+    background: none;
+    box-shadow: none;
+  }
+  dialog.max > header > :is(button, a):has(> i:only-child) {
+    display: inline-flex;
+    flex: 0 0 48px;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 48px;
+    height: 48px;
+    min-width: 48px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: transparent;
+    color: var(--md-sys-color-on-surface-variant);
+    box-shadow: none;
+  }
+  dialog.max > header > :is(button, a):has(> i:only-child) > i {
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+  }
+  dialog.max > header > :is(button, a):has(> i:only-child):hover {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+  }
+  dialog.max > header > :is(button, a):has(> i:only-child):focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
+  }
+  dialog.max > header :is(button, a.button):not(:has(> i:only-child)) {
+    box-shadow: none !important;
+    color: var(--md-sys-color-primary);
+    background-color: transparent;
+    border-color: transparent;
+  }
+  dialog.max > header :is(button, a.button):not(:has(> i:only-child)):hover {
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+  }
+  dialog.max > header :is(button, a.button):not(:has(> i:only-child)):active, dialog.max > header :is(button, a.button):not(:has(> i:only-child)):focus {
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+  }
+  dialog.max > header :is(button, a.button):not(:has(> i:only-child)):focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
+  }
+  dialog.max > header :is(button, a.button):not(:has(> i:only-child)) {
+    width: auto;
+    min-width: 0;
+    height: 40px;
+    padding-inline: 12px;
+    border-radius: 20px;
+  }
+  dialog.max > :is(p, div) {
+    padding: 8px 24px 24px;
+  }
+  dialog.max > .list {
+    padding-block: 8px;
+  }
+  dialog.bottom,
+  dialog.bottom-sheet {
+    --md-comp-bottom-sheet-container-color: var(--md-sys-color-surface-container-low);
+    --md-comp-bottom-sheet-container-shape: 28px;
+    --md-comp-bottom-sheet-container-max-width: 640px;
+    --md-comp-bottom-sheet-margin-inline: 56px;
+    --md-comp-bottom-sheet-top-inset: 72px;
+    --md-comp-bottom-sheet-drag-handle-color: color-mix(
+      in oklab,
+      var(--md-sys-color-on-surface-variant) 40%,
+      transparent
+    );
+    --md-comp-bottom-sheet-shift: 0px;
+    box-sizing: border-box;
+    position: fixed;
+    inset: auto 0 0;
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+    height: auto;
+    max-height: calc(100dvh - var(--md-comp-bottom-sheet-top-inset));
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: var(--md-comp-bottom-sheet-container-shape) var(--md-comp-bottom-sheet-container-shape) 0 0;
+    background-color: var(--md-comp-bottom-sheet-container-color);
+    color: var(--md-sys-color-on-surface);
+    outline: none;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+    translate: 0 var(--md-comp-bottom-sheet-shift);
+    transition: translate 280ms ease;
+  }
+  dialog.bottom:not(:modal),
+  dialog.bottom-sheet:not(:modal) {
+    z-index: 1100;
+  }
+  @media (width >= 601px) {
+    dialog.bottom,
+    dialog.bottom-sheet {
+      width: min(var(--md-comp-bottom-sheet-container-max-width), 100% - 2 * var(--md-comp-bottom-sheet-margin-inline));
+      max-width: var(--md-comp-bottom-sheet-container-max-width);
+      margin-inline: auto;
+    }
+  }
+  dialog.bottom:not(:modal)::backdrop,
+  dialog.bottom-sheet:not(:modal)::backdrop {
+    background: none;
+    backdrop-filter: none;
+  }
+  dialog.bottom::before,
+  dialog.bottom-sheet::before {
+    content: "";
+    box-sizing: border-box;
+    flex: 0 0 48px;
+    width: 48px;
+    height: 48px;
+    align-self: center;
+    margin: 0;
+    padding: 0;
+    background-color: var(--md-comp-bottom-sheet-drag-handle-color);
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='4'%3E%3Crect width='32' height='4' rx='2' fill='black'/%3E%3C/svg%3E") center/32px 4px no-repeat;
+    pointer-events: none;
+  }
+  dialog.bottom:has(> .handle)::before,
+  dialog.bottom-sheet:has(> .handle)::before {
+    content: none;
+    display: none;
+  }
+  dialog.bottom > .handle,
+  dialog.bottom-sheet > .handle {
+    box-sizing: border-box;
+    flex: 0 0 48px;
+    align-self: center;
+    width: 48px;
+    height: 48px;
     margin: 0;
+    padding: 0;
+    border: 0;
     border-radius: 0;
+    background-color: var(--md-comp-bottom-sheet-drag-handle-color);
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='4'%3E%3Crect width='32' height='4' rx='2' fill='black'/%3E%3C/svg%3E") center/32px 4px no-repeat;
+    cursor: grab;
+    appearance: none;
   }
-  dialog.bottom,
-  dialog.bottom-sheet {
-    width: 100%;
-    min-width: 0;
-    max-width: none;
-    max-height: 50%;
-    margin: auto 0 0;
-    border-radius: var(--md-comp-basic-dialog-container-shape) var(--md-comp-basic-dialog-container-shape) 0 0;
+  dialog.bottom > :is(h1, h2, h3, h4, h5, h6),
+  dialog.bottom-sheet > :is(h1, h2, h3, h4, h5, h6) {
+    padding-top: 8px;
   }
-  dialog.top,
-  dialog.top-sheet {
-    width: 100%;
-    min-width: 0;
-    max-width: none;
-    max-height: 50%;
-    margin: 0 0 auto;
-    border-radius: 0 0 var(--md-comp-basic-dialog-container-shape) var(--md-comp-basic-dialog-container-shape);
-  }
-  dialog.left,
-  dialog.left-sheet,
-  dialog.right,
-  dialog.right-sheet {
+  dialog.bottom[open],
+  dialog.bottom-sheet[open] {
+    display: flex;
+    flex-direction: column;
+  }
+  @starting-style {
+    dialog.bottom[open],
+    dialog.bottom-sheet[open] {
+      translate: 0 100%;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    dialog.bottom,
+    dialog.bottom-sheet {
+      transition: none;
+    }
+  }
+  dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet {
+    --md-comp-side-sheet-container-color: var(--md-sys-color-surface-container-low);
+    --md-comp-side-sheet-container-shape: 28px;
+    --md-comp-side-sheet-container-width: 400px;
+    --md-comp-side-sheet-shift: 0px;
+    box-sizing: border-box;
+    position: fixed;
     float: none !important;
-    width: min(var(--md-comp-basic-dialog-sheet-width), 85%);
-    max-width: none;
+    inset-block: 0;
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+    width: min(var(--md-comp-side-sheet-container-width), 85%);
+    max-width: var(--md-comp-side-sheet-container-width);
     height: auto;
     max-height: none;
     min-width: 0;
     min-height: 0;
     margin: 0;
-    inset-block: 0;
+    padding: 0;
+    border: none;
+    background-color: var(--md-comp-side-sheet-container-color);
+    color: var(--md-sys-color-on-surface);
+    outline: none;
+    translate: var(--md-comp-side-sheet-shift) 0;
+    transition: translate 280ms ease, border-radius 200ms ease;
+  }
+  dialog.side-sheet:not(:modal), dialog.right:not(:modal), dialog.right-sheet:not(:modal), dialog.left:not(:modal), dialog.left-sheet:not(:modal) {
+    z-index: 1100;
+    border-radius: 0;
+    box-shadow: none;
+    border-inline-start: 1px solid var(--md-sys-color-outline-variant);
+  }
+  dialog.side-sheet:modal, dialog.right:modal, dialog.right-sheet:modal, dialog.left:modal, dialog.left-sheet:modal {
+    border-radius: var(--md-comp-side-sheet-container-shape) 0 0 var(--md-comp-side-sheet-container-shape);
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+  }
+  dialog.side-sheet:not(:modal)::backdrop, dialog.right:not(:modal)::backdrop, dialog.right-sheet:not(:modal)::backdrop, dialog.left:not(:modal)::backdrop, dialog.left-sheet:not(:modal)::backdrop {
+    background: none;
+    backdrop-filter: none;
   }
-  dialog.left,
-  dialog.left-sheet {
+  dialog.side-sheet.left, dialog.side-sheet.left-sheet, dialog.side-sheet.start, dialog.right.left, dialog.right.left-sheet, dialog.right.start, dialog.right-sheet.left, dialog.right-sheet.left-sheet, dialog.right-sheet.start, dialog.left.left, dialog.left.left-sheet, dialog.left.start, dialog.left-sheet.left, dialog.left-sheet.left-sheet, dialog.left-sheet.start {
     inset-inline-start: 0;
     inset-inline-end: auto;
-    border-radius: 0 var(--md-comp-basic-dialog-container-shape) var(--md-comp-basic-dialog-container-shape) 0;
   }
-  dialog.right,
-  dialog.right-sheet {
-    inset-inline-start: auto;
-    inset-inline-end: 0;
-    border-radius: var(--md-comp-basic-dialog-container-shape) 0 0 var(--md-comp-basic-dialog-container-shape);
-  }
-  .collapsible {
-    --md-comp-collapsible-shape: 12px;
-    --md-comp-collapsible-container-color: var(--md-sys-color-surface);
-    --md-comp-collapsible-outline-color: var(--md-sys-color-outline-variant);
-    --md-comp-collapsible-header-padding: 1rem;
-    --md-comp-collapsible-body-padding: 0 1rem;
-    --md-comp-collapsible-duration: 500ms;
-    --md-comp-collapsible-easing-open: cubic-bezier(0.65, 0, 0.35, 1);
-    --md-comp-collapsible-easing-close: cubic-bezier(0.65, 0, 0.35, 1);
-    --md-comp-collapsible-icon-size: 24px;
-    --md-comp-collapsible-popout-inset: 24px;
-    --md-comp-collapsible-popout-gap: 16px;
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0.5rem 0 1rem;
-    list-style: none;
-    overflow: hidden;
-    border: 1px solid var(--md-comp-collapsible-outline-color);
-    border-radius: var(--md-comp-collapsible-shape);
-    background-color: var(--md-comp-collapsible-container-color);
-    color: var(--md-sys-color-on-surface);
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+  dialog.side-sheet.left:not(:modal), dialog.side-sheet.left-sheet:not(:modal), dialog.side-sheet.start:not(:modal), dialog.right.left:not(:modal), dialog.right.left-sheet:not(:modal), dialog.right.start:not(:modal), dialog.right-sheet.left:not(:modal), dialog.right-sheet.left-sheet:not(:modal), dialog.right-sheet.start:not(:modal), dialog.left.left:not(:modal), dialog.left.left-sheet:not(:modal), dialog.left.start:not(:modal), dialog.left-sheet.left:not(:modal), dialog.left-sheet.left-sheet:not(:modal), dialog.left-sheet.start:not(:modal) {
+    border-inline-start: 0;
+    border-inline-end: 1px solid var(--md-sys-color-outline-variant);
   }
-  .collapsible > details + details {
-    border-top: 1px solid var(--md-comp-collapsible-outline-color);
+  dialog.side-sheet.left:modal, dialog.side-sheet.left-sheet:modal, dialog.side-sheet.start:modal, dialog.right.left:modal, dialog.right.left-sheet:modal, dialog.right.start:modal, dialog.right-sheet.left:modal, dialog.right-sheet.left-sheet:modal, dialog.right-sheet.start:modal, dialog.left.left:modal, dialog.left.left-sheet:modal, dialog.left.start:modal, dialog.left-sheet.left:modal, dialog.left-sheet.left-sheet:modal, dialog.left-sheet.start:modal {
+    border-radius: 0 var(--md-comp-side-sheet-container-shape) var(--md-comp-side-sheet-container-shape) 0;
   }
-  .collapsible summary {
+  dialog.side-sheet > header, dialog.right > header, dialog.right-sheet > header, dialog.left > header, dialog.left-sheet > header {
     display: flex;
     align-items: center;
+    gap: 12px;
+    flex: 0 0 auto;
     box-sizing: border-box;
-    width: 100%;
+    min-height: 64px;
     margin: 0;
-    padding: var(--md-comp-collapsible-header-padding);
-    border: 0;
+    padding: 8px 12px 8px 24px;
     background: none;
-    color: inherit;
-    font: inherit;
-    font-weight: inherit;
-    line-height: 1.5;
-    text-align: start;
-    list-style: none;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-  }
-  .collapsible summary::-webkit-details-marker {
-    display: none;
-  }
-  .collapsible summary:focus-visible {
-    outline: 3px solid var(--md-sys-color-secondary);
-    outline-offset: 2px;
-  }
-  .collapsible summary > i {
-    width: 2rem;
-    margin-right: 1rem;
-    font-size: 1.6rem;
-    line-height: 1;
-    text-align: center;
+    box-shadow: none;
   }
-  .collapsible summary::after {
-    content: "expand_more";
-    flex-shrink: 0;
-    margin-inline-start: auto;
-    font-family: var(--md-icon-font);
-    font-size: var(--md-comp-collapsible-icon-size);
-    font-variation-settings: "FILL" var(--md-icon-fill), "wght" var(--md-icon-weight), "GRAD" var(--md-icon-grade), "opsz" var(--md-icon-optical-size);
-    line-height: 1;
-    -webkit-font-smoothing: antialiased;
-    transition: transform var(--md-comp-collapsible-duration) var(--md-comp-collapsible-easing-close);
+  dialog.side-sheet > header:has(> :is(button, a):first-child), dialog.right > header:has(> :is(button, a):first-child), dialog.right-sheet > header:has(> :is(button, a):first-child), dialog.left > header:has(> :is(button, a):first-child), dialog.left-sheet > header:has(> :is(button, a):first-child) {
+    padding-inline-start: 8px;
   }
-  .collapsible details[open] > summary::after {
-    transform: rotate(180deg);
-    transition-timing-function: var(--md-comp-collapsible-easing-open);
+  dialog.side-sheet > header > :is(h1, h2, h3, h4, h5, h6), dialog.right > header > :is(h1, h2, h3, h4, h5, h6), dialog.right-sheet > header > :is(h1, h2, h3, h4, h5, h6), dialog.left > header > :is(h1, h2, h3, h4, h5, h6), dialog.left-sheet > header > :is(h1, h2, h3, h4, h5, h6) {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    color: var(--md-sys-color-on-surface);
+    font-family: var(--md-sys-typescale-title-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-title-large-font-size);
+    font-weight: var(--md-sys-typescale-title-large-font-weight);
+    line-height: var(--md-sys-typescale-title-large-line-height);
+    letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
   }
-  .collapsible .collapsible-header-content {
-    flex-grow: 1;
+  dialog.side-sheet > header > form, dialog.right > header > form, dialog.right-sheet > header > form, dialog.left > header > form, dialog.left-sheet > header > form {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    box-shadow: none;
   }
-  .collapsible details > :not(summary) {
-    display: grid;
-    grid-template-rows: 0fr;
+  dialog.side-sheet > header :is(button, a.button), dialog.right > header :is(button, a.button), dialog.right-sheet > header :is(button, a.button), dialog.left > header :is(button, a.button), dialog.left-sheet > header :is(button, a.button) {
+    flex: 0 0 48px;
     box-sizing: border-box;
-    padding: var(--md-comp-collapsible-body-padding);
-    overflow: hidden;
-    transition: grid-template-rows var(--md-comp-collapsible-duration) var(--md-comp-collapsible-easing-close);
-  }
-  .collapsible details > :not(summary) > * {
-    min-height: 0;
-    overflow: hidden;
+    width: 48px;
+    height: 48px;
+    min-width: 48px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: transparent;
+    color: var(--md-sys-color-on-surface-variant);
+    box-shadow: none;
   }
-  .collapsible details[open] > :not(summary) {
-    grid-template-rows: 1fr;
-    transition-timing-function: var(--md-comp-collapsible-easing-open);
+  dialog.side-sheet > header :is(button, a.button) > i, dialog.right > header :is(button, a.button) > i, dialog.right-sheet > header :is(button, a.button) > i, dialog.left > header :is(button, a.button) > i, dialog.left-sheet > header :is(button, a.button) > i {
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
   }
-  .collapsible details:not([open]) > :not(summary) {
-    display: grid;
+  dialog.side-sheet > header :is(button, a.button):hover, dialog.right > header :is(button, a.button):hover, dialog.right-sheet > header :is(button, a.button):hover, dialog.left > header :is(button, a.button):hover, dialog.left-sheet > header :is(button, a.button):hover {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
   }
-  .collapsible.no-icon summary::after {
-    content: none;
+  dialog.side-sheet > header :is(button, a.button):focus-visible, dialog.right > header :is(button, a.button):focus-visible, dialog.right-sheet > header :is(button, a.button):focus-visible, dialog.left > header :is(button, a.button):focus-visible, dialog.left-sheet > header :is(button, a.button):focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
   }
-  .collapsible.popout {
-    overflow: visible;
-    border: 0;
-    background: transparent;
-    box-shadow: none !important;
+  dialog.side-sheet > :is(form, nav):last-child, dialog.right > :is(form, nav):last-child, dialog.right-sheet > :is(form, nav):last-child, dialog.left > :is(form, nav):last-child, dialog.left-sheet > :is(form, nav):last-child {
+    justify-content: flex-start;
+    gap: 8px;
+    padding: 16px 24px;
+    border-block-start: 1px solid var(--md-sys-color-outline-variant);
   }
-  .collapsible.popout > details {
-    margin-inline: var(--md-comp-collapsible-popout-inset);
-    overflow: hidden;
-    border: 0;
-    border-radius: var(--md-comp-collapsible-shape);
-    background-color: var(--md-comp-collapsible-container-color);
-    transition: margin var(--md-comp-collapsible-duration) var(--md-comp-collapsible-easing-close);
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+  :is(dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet):not([open]) {
+    display: none;
   }
-  .collapsible.popout > details + details {
-    border-top: 0;
+  :is(dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet)[open] {
+    display: flex;
+    flex-direction: column;
   }
-  .collapsible.popout > details[open] {
-    margin-block: var(--md-comp-collapsible-popout-gap);
-    margin-inline: 0;
-    transition-timing-function: var(--md-comp-collapsible-easing-open);
-    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  @starting-style {
+    dialog.side-sheet[open],
+    dialog.right[open],
+    dialog.right-sheet[open] {
+      translate: 100% 0;
+    }
+    dialog.left[open],
+    dialog.left-sheet[open] {
+      translate: -100% 0;
+    }
   }
   @media (prefers-reduced-motion: reduce) {
-    .collapsible {
-      --md-comp-collapsible-duration: 0s;
+    dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet {
+      transition: none;
     }
   }
   .chip {
@@ -3564,7 +4842,7 @@
     --font-size-icon: 18px;
     --padding: 8px;
     color: var(--md-sys-color-on-surface-variant);
-    background-color: rgba(0, 0, 0, 0.09);
+    background-color: var(--md-sys-color-surface-container-low);
     display: inline-flex;
     white-space: nowrap;
     gap: 8px;
@@ -3579,10 +4857,10 @@
     user-select: none;
     vertical-align: top;
   }
-  .chip:focus {
+  .chip:focus, .chip.active {
     outline: none;
-    background-color: var(--md-sys-color-primary);
-    color: var(--md-sys-color-on-primary);
+    background-color: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
   }
   .chip.outlined {
     background-color: transparent;
@@ -3612,7 +4890,7 @@
     cursor: pointer;
   }
   .chip .close:hover {
-    background-color: rgba(136, 136, 136, 0.5333333333);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface-variant) 8%, transparent);
   }
   .chips {
     display: flex;
@@ -3792,19 +5070,13 @@
       transform: translateY(calc(-1 * var(--md-comp-parallax-travel)));
     }
   }
-  .pin-top, .pin-bottom {
-    position: relative;
-  }
-  .pinned {
-    position: fixed !important;
-  }
   .display-docked {
     position: absolute;
     opacity: 0;
     z-index: 9999;
     visibility: hidden;
   }
-  footer:not(:has(> nav:only-child)) {
+  footer:not(:has(> .navigation-bar:only-child)) {
     --md-comp-footer-padding-block: 3rem;
     --md-comp-footer-padding-inline: 1rem;
     --md-comp-footer-gap: 2rem;
@@ -3815,7 +5087,7 @@
     border-top: 1px dashed var(--md-sys-color-outline-variant);
     color: var(--md-sys-color-on-surface);
   }
-  footer:not(:has(> nav:only-child)) p {
+  footer:not(:has(> .navigation-bar:only-child)) p {
     margin: 0 0 8px;
     color: var(--md-sys-color-on-surface-variant);
     font-family: var(--md-sys-typescale-body-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
@@ -3825,15 +5097,15 @@
     letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   }
-  footer:not(:has(> nav:only-child)) a:not(.button, .circle, .extra) {
+  footer:not(:has(> .navigation-bar:only-child)) a:not(.button, .circle, .extra) {
     color: var(--md-sys-color-primary);
     text-decoration: none;
   }
-  footer:not(:has(> nav:only-child)) a:not(.button, .circle, .extra):focus-visible {
+  footer:not(:has(> .navigation-bar:only-child)) a:not(.button, .circle, .extra):focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  footer:not(:has(> nav:only-child)) :is(h1, h2, h3, h4, h5, h6) {
+  footer:not(:has(> .navigation-bar:only-child)) :is(h1, h2, h3, h4, h5, h6) {
     margin: 0 0 8px;
     color: var(--md-sys-color-on-surface);
     font-family: var(--md-sys-typescale-title-small-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
@@ -3843,7 +5115,7 @@
     letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   }
-  footer:not(:has(> nav:only-child)) ul {
+  footer:not(:has(> .navigation-bar:only-child)) ul {
     margin: 0;
     padding: 0;
     list-style: none;
@@ -3877,6 +5149,12 @@
       grid-template-columns: repeat(5, 1fr);
     }
   }
+  @media (width >= 1601px) {
+    footer:not(:has(> nav:only-child)) > .container,
+    footer:not(:has(> nav:only-child)):not(:has(> .container)) {
+      grid-template-columns: repeat(6, 1fr);
+    }
+  }
   footer:not(:has(> nav:only-child)) > .container > .row,
   footer:not(:has(> nav:only-child)) > .row {
     grid-column: 1/-1;
@@ -3956,7 +5234,7 @@
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   }
   .field {
-    --md-comp-filled-text-field-container-color: var(--md-sys-color-surface-variant);
+    --md-comp-filled-text-field-container-color: var(--md-sys-color-surface-container-highest);
     --md-comp-filled-text-field-container-shape: 1rem;
     --md-comp-filled-text-field-caret-color: var(--md-sys-color-primary);
     --input-color: var(--md-comp-filled-text-field-caret-color);
@@ -4785,7 +6063,7 @@
     left: 24px;
   }
   select {
-    --md-comp-filled-select-container-color: var(--md-sys-color-surface-variant);
+    --md-comp-filled-select-container-color: var(--md-sys-color-surface-container-highest);
     --md-comp-filled-select-container-shape: 1rem;
     --md-comp-filled-select-input-text-color: var(--md-sys-color-on-surface);
     box-sizing: border-box;
@@ -4839,10 +6117,10 @@
     position: relative;
     border-radius: var(--md-comp-filled-select-container-shape);
   }
-  .field:has(> .hide-select) > input.dropdown-trigger {
+  .field:has(> .hide-select) > input.menu-trigger {
     border-radius: inherit;
   }
-  .field:has(> .hide-select) > input.dropdown-trigger {
+  .field:has(> .hide-select) > input.menu-trigger {
     padding-inline-end: 52px;
   }
   .field:has(> .hide-select) .caret {
@@ -4885,7 +6163,7 @@
   .field:has(> .hide-select).disabled > label {
     color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
   }
-  .field:has(> .hide-select) > input.dropdown-trigger:disabled {
+  .field:has(> .hide-select) > input.menu-trigger:disabled {
     cursor: default;
     user-select: none;
   }
@@ -4899,17 +6177,19 @@
     align-items: center;
   }
   menu[role=listbox] > li.selected:not(.disabled, .optgroup) {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
+    background-color: var(--md-comp-menu-item-selected-container-color, var(--md-sys-color-tertiary-container));
+    color: var(--md-comp-menu-item-selected-label-text-color, var(--md-sys-color-on-tertiary-container));
+    border-radius: var(--md-comp-menu-item-selected-container-shape, 12px);
   }
-  menu[role=listbox]:not(.multiple-select-dropdown) > li.selected:not(.disabled, .optgroup)::after {
+  menu[role=listbox]:not(.multiple-select-menu) > li.selected:not(.disabled, .optgroup)::after {
     content: "";
-    flex: 0 0 24px;
-    width: 24px;
-    height: 24px;
+    flex: 0 0 20px;
+    width: 20px;
+    height: 20px;
     margin-inline-start: auto;
-    margin-inline-end: 12px;
-    background-color: var(--md-sys-color-on-surface);
-    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/24px no-repeat;
+    margin-inline-end: 8px;
+    background-color: var(--md-comp-menu-item-selected-leading-icon-color, var(--md-sys-color-on-tertiary-container));
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/20px no-repeat;
   }
   menu[role=listbox] li img {
     box-sizing: border-box;
@@ -4979,18 +6259,29 @@
   .file-field input[type=file]::file-selector-button {
     display: none;
   }
-  .range,
-  .range-field,
-  label:has(> [type=range]) {
+  :is(.range, .range-field, label:has(> [type=range])),
+  input[type=range] {
     --md-comp-slider-track-height: 16px;
     --md-comp-slider-handle-width: 4px;
     --md-comp-slider-handle-width-pressed: 2px;
     --md-comp-slider-handle-height: 44px;
     --md-comp-slider-gap: 6px;
+    --md-comp-slider-stop-size: 2px;
+    --md-comp-slider-stop-inset: 8px;
+    --md-comp-slider-icon-size: 24px;
     --md-comp-slider-active-track-color: var(--md-sys-color-primary);
     --md-comp-slider-inactive-track-color: var(--md-sys-color-secondary-container);
     --md-comp-slider-handle-color: var(--md-sys-color-primary);
+    --md-comp-slider-stop-color: var(--md-sys-color-primary);
     --md-comp-slider-gradient: to right;
+    --md-comp-slider-stop-at-start: var(--md-comp-slider-stop-inset) 50%;
+    --md-comp-slider-stop-at-end: calc(100% - var(--md-comp-slider-stop-inset)) 50%;
+    --md-comp-slider-active-fraction: 0%;
+    --md-comp-slider-start-fraction: 0%;
+    --md-comp-slider-end-fraction: 100%;
+    --md-comp-slider-stop-count: 6;
+  }
+  :is(.range, .range-field, label:has(> [type=range])) {
     position: relative;
     display: block;
     overflow: visible;
@@ -5002,49 +6293,73 @@
     letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   }
-  .range.small,
-  .range-field.small,
-  label.small:has(> [type=range]),
-  .range.small [type=range],
-  .range-field.small [type=range],
-  label.small > [type=range] {
-    --md-comp-slider-track-height: 8px;
-    --md-comp-slider-handle-height: 32px;
-  }
-  .range.large,
-  .range-field.large,
-  label.large:has(> [type=range]),
-  .range.large [type=range],
-  .range-field.large [type=range],
-  label.large > [type=range] {
+  :is(.range, .range-field, label:has(> [type=range])).s,
+  :is(.range, .range-field, label:has(> [type=range])).small,
+  :is(.range, .range-field, label:has(> [type=range])).s [type=range],
+  :is(.range, .range-field, label:has(> [type=range])).small [type=range] {
     --md-comp-slider-track-height: 24px;
-    --md-comp-slider-handle-height: 52px;
+    --md-comp-slider-handle-height: 44px;
+    --md-comp-slider-stop-inset: 8px;
   }
-  .range.vertical,
-  .range-field.vertical,
-  label.vertical:has(> [type=range]) {
+  :is(.range, .range-field, label:has(> [type=range])).m,
+  :is(.range, .range-field, label:has(> [type=range])).medium,
+  :is(.range, .range-field, label:has(> [type=range])).m [type=range],
+  :is(.range, .range-field, label:has(> [type=range])).medium [type=range] {
+    --md-comp-slider-track-height: 40px;
+    --md-comp-slider-handle-height: 52px;
+    --md-comp-slider-stop-inset: 12px;
+    --md-comp-slider-icon-size: 24px;
+  }
+  :is(.range, .range-field, label:has(> [type=range])).l,
+  :is(.range, .range-field, label:has(> [type=range])).large,
+  :is(.range, .range-field, label:has(> [type=range])).l [type=range],
+  :is(.range, .range-field, label:has(> [type=range])).large [type=range] {
+    --md-comp-slider-track-height: 56px;
+    --md-comp-slider-handle-height: 68px;
+    --md-comp-slider-stop-inset: 16px;
+    --md-comp-slider-icon-size: 24px;
+  }
+  :is(.range, .range-field, label:has(> [type=range])).xl,
+  :is(.range, .range-field, label:has(> [type=range])).xl [type=range] {
+    --md-comp-slider-track-height: 96px;
+    --md-comp-slider-handle-height: 108px;
+    --md-comp-slider-stop-inset: 28px;
+    --md-comp-slider-icon-size: 32px;
+  }
+  :is(.range, .range-field, label:has(> [type=range])).vertical {
     --md-comp-slider-gradient: to top;
+    --md-comp-slider-stop-at-start: 50% var(--md-comp-slider-stop-inset);
+    --md-comp-slider-stop-at-end: 50% calc(100% - var(--md-comp-slider-stop-inset));
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     width: auto;
   }
-  .range.vertical [type=range],
-  .range-field.vertical [type=range],
-  label.vertical > [type=range] {
+  :is(.range, .range-field, label:has(> [type=range])).vertical [type=range] {
     --md-comp-slider-gradient: to top;
+    --md-comp-slider-stop-at-start: 50% var(--md-comp-slider-stop-inset);
+    --md-comp-slider-stop-at-end: 50% calc(100% - var(--md-comp-slider-stop-inset));
+  }
+  :is(.range, .range-field, label:has(> [type=range])) > i:first-child {
+    position: absolute;
+    z-index: 1;
+    left: var(--md-comp-slider-stop-inset);
+    top: 50%;
+    translate: 0 -50%;
+    font-size: var(--md-comp-slider-icon-size);
+    width: var(--md-comp-slider-icon-size);
+    height: var(--md-comp-slider-icon-size);
+    line-height: 1;
+    color: var(--md-sys-color-on-primary);
+    pointer-events: none;
+  }
+  :is(.range, .range-field, label:has(> [type=range])).vertical > i:first-child {
+    left: 50%;
+    top: auto;
+    bottom: var(--md-comp-slider-stop-inset);
+    translate: -50% 0;
   }
   input[type=range] {
-    --md-comp-slider-track-height: 16px;
-    --md-comp-slider-handle-width: 4px;
-    --md-comp-slider-handle-width-pressed: 2px;
-    --md-comp-slider-handle-height: 44px;
-    --md-comp-slider-gap: 6px;
-    --md-comp-slider-active-track-color: var(--md-sys-color-primary);
-    --md-comp-slider-inactive-track-color: var(--md-sys-color-secondary-container);
-    --md-comp-slider-handle-color: var(--md-sys-color-primary);
-    --md-comp-slider-gradient: to right;
-    --md-comp-slider-active-fraction: 0%;
     appearance: none;
     box-sizing: border-box;
     display: block;
@@ -5065,9 +6380,7 @@
     cursor: default;
     opacity: 0.38;
   }
-  .range.vertical > [type=range],
-  .range-field.vertical > [type=range],
-  label.vertical > [type=range] {
+  :is(.range, .range-field, label:has(> [type=range])).vertical > [type=range] {
     writing-mode: vertical-lr;
     direction: rtl;
     width: var(--md-comp-slider-handle-height);
@@ -5081,7 +6394,7 @@
     border: none;
     border-radius: calc(var(--md-comp-slider-track-height) / 2);
     background-color: transparent;
-    background-image: linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-active-track-color) max(0%, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
+    background-image: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end), var(--md-comp-slider-stop-color) 99%, transparent), linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-active-track-color) max(0%, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
   }
   input[type=range]::-webkit-slider-thumb {
     appearance: none;
@@ -5107,25 +6420,22 @@
   input[type=range]:active:not(:disabled)::-webkit-slider-thumb {
     width: var(--md-comp-slider-handle-width-pressed);
   }
-  .range.vertical > [type=range]::-webkit-slider-runnable-track,
-  .range-field.vertical > [type=range]::-webkit-slider-runnable-track,
-  label.vertical > [type=range]::-webkit-slider-runnable-track {
+  :is(.range, .range-field, label:has(> [type=range])).centered [type=range]::-webkit-slider-runnable-track {
+    background-image: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-start), var(--md-comp-slider-stop-color) 99%, transparent), radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end), var(--md-comp-slider-stop-color) 99%, transparent), linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-inactive-track-color) max(0%, min(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, min(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, min(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) min(100%, min(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) max(0%, max(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, max(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, max(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, max(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
+  }
+  :is(.range, .range-field, label:has(> [type=range])).vertical > [type=range]::-webkit-slider-runnable-track {
     width: var(--md-comp-slider-track-height);
     height: 100%;
     margin-left: calc((var(--md-comp-slider-handle-height) - var(--md-comp-slider-track-height)) / 2);
   }
-  .range.vertical > [type=range]::-webkit-slider-thumb,
-  .range-field.vertical > [type=range]::-webkit-slider-thumb,
-  label.vertical > [type=range]::-webkit-slider-thumb {
+  :is(.range, .range-field, label:has(> [type=range])).vertical > [type=range]::-webkit-slider-thumb {
     width: var(--md-comp-slider-handle-height);
     height: var(--md-comp-slider-handle-width);
     border-radius: calc(var(--md-comp-slider-handle-width) / 2);
     margin-top: 0;
     margin-left: calc((var(--md-comp-slider-track-height) - var(--md-comp-slider-handle-height)) / 2);
   }
-  .range.vertical > [type=range]:active:not(:disabled)::-webkit-slider-thumb,
-  .range-field.vertical > [type=range]:active:not(:disabled)::-webkit-slider-thumb,
-  label.vertical > [type=range]:active:not(:disabled)::-webkit-slider-thumb {
+  :is(.range, .range-field, label:has(> [type=range])).vertical > [type=range]:active:not(:disabled)::-webkit-slider-thumb {
     width: var(--md-comp-slider-handle-height);
     height: var(--md-comp-slider-handle-width-pressed);
   }
@@ -5136,7 +6446,7 @@
     border: none;
     border-radius: calc(var(--md-comp-slider-track-height) / 2);
     background-color: transparent;
-    background-image: linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-active-track-color) max(0%, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
+    background-image: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end), var(--md-comp-slider-stop-color) 99%, transparent), linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-active-track-color) max(0%, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
   }
   input[type=range]::-moz-range-thumb {
     appearance: none;
@@ -5161,27 +6471,87 @@
   input[type=range]:active:not(:disabled)::-moz-range-thumb {
     width: var(--md-comp-slider-handle-width-pressed);
   }
-  .range.vertical > [type=range]::-moz-range-track,
-  .range-field.vertical > [type=range]::-moz-range-track,
-  label.vertical > [type=range]::-moz-range-track {
+  :is(.range, .range-field, label:has(> [type=range])).centered [type=range]::-moz-range-track {
+    background-image: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-start), var(--md-comp-slider-stop-color) 99%, transparent), radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end), var(--md-comp-slider-stop-color) 99%, transparent), linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-inactive-track-color) max(0%, min(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, min(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, min(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) min(100%, min(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) max(0%, max(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, max(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, max(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, max(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
+  }
+  :is(.range, .range-field, label:has(> [type=range])).vertical > [type=range]::-moz-range-track {
     width: var(--md-comp-slider-track-height);
     height: 100%;
     margin-left: calc((var(--md-comp-slider-handle-height) - var(--md-comp-slider-track-height)) / 2);
   }
-  .range.vertical > [type=range]::-moz-range-thumb,
-  .range-field.vertical > [type=range]::-moz-range-thumb,
-  label.vertical > [type=range]::-moz-range-thumb {
+  :is(.range, .range-field, label:has(> [type=range])).vertical > [type=range]::-moz-range-thumb {
     width: var(--md-comp-slider-handle-height);
     height: var(--md-comp-slider-handle-width);
     border-radius: calc(var(--md-comp-slider-handle-width) / 2);
     margin-left: calc((var(--md-comp-slider-track-height) - var(--md-comp-slider-handle-height)) / 2);
   }
-  .range.vertical > [type=range]:active:not(:disabled)::-moz-range-thumb,
-  .range-field.vertical > [type=range]:active:not(:disabled)::-moz-range-thumb,
-  label.vertical > [type=range]:active:not(:disabled)::-moz-range-thumb {
+  :is(.range, .range-field, label:has(> [type=range])).vertical > [type=range]:active:not(:disabled)::-moz-range-thumb {
     width: var(--md-comp-slider-handle-height);
     height: var(--md-comp-slider-handle-width-pressed);
   }
+  :is(.range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range]) {
+    display: grid;
+    align-items: center;
+    min-height: var(--md-comp-slider-handle-height);
+  }
+  :is(.range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range])::before {
+    content: "";
+    grid-area: 1/1;
+    height: var(--md-comp-slider-track-height);
+    border-radius: calc(var(--md-comp-slider-track-height) / 2);
+    pointer-events: none;
+    background-image: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-start), var(--md-comp-slider-stop-color) 99%, transparent), radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end), var(--md-comp-slider-stop-color) 99%, transparent), linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-inactive-track-color) max(0%, var(--md-comp-slider-start-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, var(--md-comp-slider-start-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, var(--md-comp-slider-start-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) min(100%, var(--md-comp-slider-start-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) max(0%, var(--md-comp-slider-end-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, var(--md-comp-slider-end-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, var(--md-comp-slider-end-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, var(--md-comp-slider-end-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
+  }
+  :is(.range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range]) > [type=range] {
+    grid-area: 1/1;
+    width: 100%;
+    margin: 0;
+    background: none;
+    pointer-events: none;
+  }
+  :is(.range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range]) > [type=range]::-webkit-slider-runnable-track {
+    background-image: none;
+    background-color: transparent;
+  }
+  :is(.range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range]) > [type=range]::-webkit-slider-thumb {
+    pointer-events: auto;
+    position: relative;
+    z-index: 2;
+  }
+  :is(.range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range]) > [type=range]::-moz-range-track {
+    background-image: none;
+    background-color: transparent;
+  }
+  :is(.range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range]) > [type=range]::-moz-range-thumb {
+    pointer-events: auto;
+  }
+  :is(.range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range]) > .thumb {
+    grid-area: 1/1;
+  }
+  :is(.range, .range-field, label:has(> [type=range])).vertical:has(> [type=range] ~ [type=range])::before {
+    width: var(--md-comp-slider-track-height);
+    height: 200px;
+    justify-self: center;
+  }
+  :is(.range, .range-field, label:has(> [type=range])).stops::after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    top: 50%;
+    width: max(0px, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2);
+    height: var(--md-comp-slider-track-height);
+    translate: 0 -50%;
+    pointer-events: none;
+    background-image: radial-gradient(circle var(--md-comp-slider-stop-size), var(--md-sys-color-on-primary) 99%, transparent);
+    background-size: calc(100% / max(1, var(--md-comp-slider-stop-count) - 1)) 100%;
+    background-repeat: repeat-x;
+    background-position: center;
+  }
+  :is(.range, .range-field, label:has(> [type=range])).stops.centered::after {
+    left: min(50%, var(--md-comp-slider-active-fraction));
+    width: max(0%, abs(50% - var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2);
+  }
   input[type=range] + .thumb {
     position: absolute;
     left: 0;
@@ -5191,16 +6561,16 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    min-width: 28px;
-    min-height: 28px;
-    padding: 4px 8px;
+    min-width: 40px;
+    height: 40px;
+    padding: 0 12px;
     border: none;
-    border-radius: 14px;
+    border-radius: 20px;
     background-color: var(--md-sys-color-inverse-surface);
     color: var(--md-sys-color-inverse-on-surface);
     pointer-events: none;
     opacity: 0;
-    transform: translate(-50%, calc(-100% - 12px)) scale(0.9);
+    transform: translate(-50%, calc(-100% - 4px)) scale(0.9);
     transform-origin: center bottom;
     transition: opacity 0.15s ease, transform 0.15s ease;
     font-family: var(--md-sys-typescale-body-small-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
@@ -5216,18 +6586,14 @@
   }
   input[type=range] + .thumb.active {
     opacity: 1;
-    transform: translate(-50%, calc(-100% - 12px)) scale(1);
+    transform: translate(-50%, calc(-100% - 4px)) scale(1);
   }
-  .range.vertical > [type=range] + .thumb,
-  .range-field.vertical > [type=range] + .thumb,
-  label.vertical > [type=range] + .thumb {
-    transform: translate(calc(100% + 12px), -50%) scale(0.9);
+  :is(.range, .range-field, label:has(> [type=range])).vertical > [type=range] + .thumb {
+    transform: translate(calc(100% + 4px), -50%) scale(0.9);
     transform-origin: left center;
   }
-  .range.vertical > [type=range] + .thumb.active,
-  .range-field.vertical > [type=range] + .thumb.active,
-  label.vertical > [type=range] + .thumb.active {
-    transform: translate(calc(100% + 12px), -50%) scale(1);
+  :is(.range, .range-field, label:has(> [type=range])).vertical > [type=range] + .thumb.active {
+    transform: translate(calc(100% + 4px), -50%) scale(1);
   }
   fieldset {
     --md-comp-fieldset-container-color: transparent;
@@ -5294,7 +6660,7 @@
     letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
   }
   fieldset.filled {
-    --md-comp-fieldset-container-color: var(--md-sys-color-surface-variant);
+    --md-comp-fieldset-container-color: var(--md-sys-color-surface-container-highest);
     --md-comp-fieldset-outline-color: transparent;
   }
   fieldset.outlined,
@@ -5411,7 +6777,7 @@
     inset: 0 auto 0 0;
     overflow: hidden;
     color: var(--md-sys-color-on-surface);
-    background-color: var(--md-sys-color-surface);
+    background-color: var(--md-sys-color-surface-container-low);
     outline: none;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
     transform: translateX(calc(-100% + var(--md-comp-nav-drawer-shift)));
@@ -5486,7 +6852,7 @@
     overscroll-behavior: contain;
     user-select: none;
     color: var(--md-sys-color-on-surface);
-    background-color: var(--md-sys-color-surface);
+    background-color: var(--md-sys-color-surface-container-low);
     transform: translateX(-100%);
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
   }
@@ -5494,21 +6860,16 @@
     inset: 0 0 0 auto;
     transform: translateX(100%);
   }
-  .sidenav .collapsible {
-    margin: 0;
-  }
   .sidenav li {
     list-style: none;
     display: grid;
     align-content: center;
   }
   .sidenav li.active > a:not(.button, .circle, .extra) {
-    background-color: color-mix(in oklab, var(--md-sys-color-secondary) 10%, transparent);
-  }
-  .sidenav details > div > ul {
-    padding-left: 10px;
+    background-color: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
   }
-  .sidenav li > a {
+  .sidenav :is(li > a, summary) {
     display: flex;
     align-items: center;
     margin: 0 12px;
@@ -5519,27 +6880,72 @@
     font-size: var(--md-comp-nav-drawer-font-size);
     font-weight: 500;
   }
-  .sidenav li > a:not(.button, .circle, .extra) {
-    color: var(--md-sys-color-on-secondary-container);
+  .sidenav :is(li > a, summary) > :is(.material-symbols,
+  .material-symbols-outlined,
+  .material-symbols-rounded,
+  .material-symbols-sharp,
+  .material-icons) {
+    display: inline-flex;
+    flex-shrink: 0;
+    margin-right: 12px;
+  }
+  .sidenav li > a:not(.button, .circle, .extra),
+  .sidenav summary {
+    color: var(--md-sys-color-on-surface-variant);
   }
-  .sidenav li > a:not(.button, .circle, .extra):hover {
+  .sidenav li > a:not(.button, .circle, .extra):hover,
+  .sidenav summary:hover {
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
   }
-  .sidenav li > a:not(.button, .circle, .extra):focus-visible {
+  .sidenav li > a:not(.button, .circle, .extra):focus-visible,
+  .sidenav summary:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  .sidenav li > a.button, .sidenav li > a.circle, .sidenav li > a.extra {
+  .sidenav li > a.button,
+  .sidenav li > a.circle,
+  .sidenav li > a.extra {
     margin: 10px 15px;
   }
-  .sidenav li > a > :is(.material-symbols,
-  .material-symbols-outlined,
-  .material-symbols-rounded,
-  .material-symbols-sharp,
-  .material-icons) {
-    display: inline-flex;
+  .sidenav summary {
+    box-sizing: border-box;
+    border: 0;
+    background: transparent;
+    font: inherit;
+    text-align: start;
+    list-style: none;
+    cursor: pointer;
+    appearance: none;
+  }
+  .sidenav summary::-webkit-details-marker {
+    display: none;
+  }
+  .sidenav summary::marker {
+    content: none;
+  }
+  .sidenav summary::after {
+    content: "expand_more";
     flex-shrink: 0;
-    margin-right: 12px;
+    margin-inline-start: auto;
+    font-family: var(--md-icon-font);
+    font-size: 24px;
+    font-style: normal;
+    font-variation-settings: "FILL" var(--md-icon-fill), "wght" var(--md-icon-weight), "GRAD" var(--md-icon-grade), "opsz" var(--md-icon-optical-size);
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    transition: transform var(--md-comp-nav-drawer-duration, 250ms) var(--md-comp-nav-drawer-easing, ease);
+  }
+  .sidenav details {
+    margin: 0;
+  }
+  .sidenav details[open] > summary::after {
+    transform: rotate(180deg);
+  }
+  .sidenav details > ul {
+    margin: 0;
+    padding: 0;
+    padding-inline-start: 10px;
+    list-style: none;
   }
   .sidenav .divider {
     margin: calc(var(--md-comp-nav-drawer-padding) * 0.5) 0 0;
@@ -5636,25 +7042,6 @@
       pointer-events: none;
     }
   }
-  .sidenav details > :not(summary) {
-    padding: 0;
-  }
-  .sidenav .collapsible,
-  .sidenav.sidenav-fixed .collapsible {
-    overflow: visible;
-    border: none;
-    border-radius: 0;
-    background: transparent;
-    box-shadow: none;
-  }
-  .sidenav summary,
-  .sidenav.sidenav-fixed summary {
-    border: none;
-  }
-  .sidenav details > :not(summary),
-  .sidenav.sidenav-fixed details > :not(summary) {
-    border: none;
-  }
   .progress,
   .preloader {
     --md-comp-progress-track: var(--md-sys-color-secondary-container);
@@ -6039,156 +7426,6 @@
   .carousel-item:not(.active) .lightboxed {
     pointer-events: none;
   }
-  .tap-target-wrapper {
-    --md-comp-tap-target-size: 480px;
-    --md-comp-tap-target-z: 1000;
-    --md-comp-tap-target-container-color: var(--md-sys-color-primary-container);
-    --md-comp-tap-target-supporting-color: var(--md-sys-color-on-primary-container);
-    --md-comp-tap-target-duration: 300ms;
-    --md-comp-tap-target-easing: cubic-bezier(0.65, 0, 0.35, 1);
-    --md-comp-tap-target-x: 50%;
-    --md-comp-tap-target-y: 50%;
-    --md-comp-tap-target-origin-size: 56px;
-    box-sizing: border-box;
-    position: fixed;
-    inset: auto;
-    left: var(--md-comp-tap-target-x);
-    top: var(--md-comp-tap-target-y);
-    translate: -50% -50%;
-    width: var(--md-comp-tap-target-size);
-    height: var(--md-comp-tap-target-size);
-    margin: 0;
-    padding: 0;
-    overflow: visible;
-    border: 0;
-    background: transparent;
-    color: var(--md-comp-tap-target-supporting-color);
-    visibility: hidden;
-    pointer-events: none;
-    z-index: var(--md-comp-tap-target-z);
-    transition: visibility 0s var(--md-comp-tap-target-duration), overlay var(--md-comp-tap-target-duration) allow-discrete, display var(--md-comp-tap-target-duration) allow-discrete;
-  }
-  .tap-target-wrapper:is(.open, :popover-open) {
-    visibility: visible;
-    pointer-events: none;
-    transition-delay: 0s;
-  }
-  .tap-target-wrapper:is(.open, :popover-open) .tap-target {
-    transform: scale(1);
-    opacity: 1;
-  }
-  .tap-target-wrapper:is(.open, :popover-open) .tap-target-wave::before {
-    transform: scale(1);
-  }
-  .tap-target-wrapper:is(.open, :popover-open) .tap-target-wave::after {
-    visibility: visible;
-    animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
-  }
-  .tap-target {
-    position: absolute;
-    inset: 0;
-    display: grid;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    border-radius: 50%;
-    background-color: var(--md-comp-tap-target-container-color);
-    color: var(--md-comp-tap-target-supporting-color);
-    opacity: 0;
-    transform: scale(0);
-    transition: transform var(--md-comp-tap-target-duration) var(--md-comp-tap-target-easing), opacity var(--md-comp-tap-target-duration) var(--md-comp-tap-target-easing);
-    box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
-    font-family: var(--md-sys-typescale-body-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
-    font-size: var(--md-sys-typescale-body-medium-font-size);
-    font-weight: var(--md-sys-typescale-body-medium-font-weight);
-    line-height: var(--md-sys-typescale-body-medium-line-height);
-    letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
-  }
-  .tap-target-content {
-    position: relative;
-    z-index: 1;
-    display: grid;
-    align-content: start;
-    gap: 8px;
-    box-sizing: border-box;
-    max-width: min(18rem, 52%);
-    padding: calc(var(--md-comp-tap-target-origin-size) * 0.5 + 20px);
-    pointer-events: auto;
-  }
-  .tap-target-content > :is(h1, h2, h3, h4, h5, h6) {
-    margin: 0;
-    color: inherit;
-    font-family: var(--md-sys-typescale-title-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
-    font-size: var(--md-sys-typescale-title-medium-font-size);
-    font-weight: var(--md-sys-typescale-title-medium-font-weight);
-    line-height: var(--md-sys-typescale-title-medium-line-height);
-    letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
-  }
-  .tap-target-content > p {
-    margin: 0;
-    color: inherit;
-  }
-  .tap-target-wrapper[data-edge^=top] .tap-target-content {
-    align-self: end;
-  }
-  .tap-target-wrapper[data-edge^=bottom] .tap-target-content {
-    align-self: start;
-  }
-  .tap-target-wrapper[data-edge$=left] .tap-target-content {
-    justify-self: end;
-  }
-  .tap-target-wrapper[data-edge$=right] .tap-target-content {
-    justify-self: start;
-  }
-  .tap-target-wrapper[data-edge$=center] .tap-target-content {
-    justify-self: center;
-    max-width: min(22rem, 80%);
-    text-align: center;
-  }
-  .tap-target-wave {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: 0;
-    width: calc(var(--md-comp-tap-target-origin-size) * 2);
-    height: calc(var(--md-comp-tap-target-origin-size) * 2);
-    translate: -50% -50%;
-    border-radius: 50%;
-    pointer-events: none;
-  }
-  .tap-target-wave::before, .tap-target-wave::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    display: block;
-    border-radius: 50%;
-    background-color: var(--md-sys-color-surface);
-  }
-  .tap-target-wave::before {
-    transform: scale(0);
-    transition: transform var(--md-comp-tap-target-duration) var(--md-comp-tap-target-easing);
-  }
-  .tap-target-wave::after {
-    visibility: hidden;
-    z-index: -1;
-  }
-  .tap-target-origin {
-    z-index: calc(var(--md-comp-tap-target-z, 1000) + 2);
-  }
-  @media (width < 601px) {
-    .tap-target-wrapper {
-      --md-comp-tap-target-size: 360px;
-    }
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .tap-target-wrapper {
-      --md-comp-tap-target-duration: 0s;
-    }
-    .tap-target-wrapper:is(.open, :popover-open) .tap-target-wave::after {
-      animation: none;
-    }
-  }
   .pulse {
     overflow: visible;
     position: relative;
@@ -6904,6 +8141,30 @@
   .on-primary-container-text {
     color: var(--md-sys-color-on-primary-container);
   }
+  .primary-fixed {
+    background-color: var(--md-sys-color-primary-fixed);
+  }
+  .primary-fixed-text {
+    color: var(--md-sys-color-primary-fixed);
+  }
+  .primary-fixed-dim {
+    background-color: var(--md-sys-color-primary-fixed-dim);
+  }
+  .primary-fixed-dim-text {
+    color: var(--md-sys-color-primary-fixed-dim);
+  }
+  .on-primary-fixed {
+    background-color: var(--md-sys-color-on-primary-fixed);
+  }
+  .on-primary-fixed-text {
+    color: var(--md-sys-color-on-primary-fixed);
+  }
+  .on-primary-fixed-variant {
+    background-color: var(--md-sys-color-on-primary-fixed-variant);
+  }
+  .on-primary-fixed-variant-text {
+    color: var(--md-sys-color-on-primary-fixed-variant);
+  }
   .secondary {
     background-color: var(--md-sys-color-secondary);
   }
@@ -6928,6 +8189,30 @@
   .on-secondary-container-text {
     color: var(--md-sys-color-on-secondary-container);
   }
+  .secondary-fixed {
+    background-color: var(--md-sys-color-secondary-fixed);
+  }
+  .secondary-fixed-text {
+    color: var(--md-sys-color-secondary-fixed);
+  }
+  .secondary-fixed-dim {
+    background-color: var(--md-sys-color-secondary-fixed-dim);
+  }
+  .secondary-fixed-dim-text {
+    color: var(--md-sys-color-secondary-fixed-dim);
+  }
+  .on-secondary-fixed {
+    background-color: var(--md-sys-color-on-secondary-fixed);
+  }
+  .on-secondary-fixed-text {
+    color: var(--md-sys-color-on-secondary-fixed);
+  }
+  .on-secondary-fixed-variant {
+    background-color: var(--md-sys-color-on-secondary-fixed-variant);
+  }
+  .on-secondary-fixed-variant-text {
+    color: var(--md-sys-color-on-secondary-fixed-variant);
+  }
   .tertiary {
     background-color: var(--md-sys-color-tertiary);
   }
@@ -6952,6 +8237,30 @@
   .on-tertiary-container-text {
     color: var(--md-sys-color-on-tertiary-container);
   }
+  .tertiary-fixed {
+    background-color: var(--md-sys-color-tertiary-fixed);
+  }
+  .tertiary-fixed-text {
+    color: var(--md-sys-color-tertiary-fixed);
+  }
+  .tertiary-fixed-dim {
+    background-color: var(--md-sys-color-tertiary-fixed-dim);
+  }
+  .tertiary-fixed-dim-text {
+    color: var(--md-sys-color-tertiary-fixed-dim);
+  }
+  .on-tertiary-fixed {
+    background-color: var(--md-sys-color-on-tertiary-fixed);
+  }
+  .on-tertiary-fixed-text {
+    color: var(--md-sys-color-on-tertiary-fixed);
+  }
+  .on-tertiary-fixed-variant {
+    background-color: var(--md-sys-color-on-tertiary-fixed-variant);
+  }
+  .on-tertiary-fixed-variant-text {
+    color: var(--md-sys-color-on-tertiary-fixed-variant);
+  }
   .error {
     background-color: var(--md-sys-color-error);
   }
@@ -6976,18 +8285,6 @@
   .on-error-container-text {
     color: var(--md-sys-color-on-error-container);
   }
-  .background {
-    background-color: var(--md-sys-color-background);
-  }
-  .background-text {
-    color: var(--md-sys-color-background);
-  }
-  .on-background {
-    background-color: var(--md-sys-color-on-background);
-  }
-  .on-background-text {
-    color: var(--md-sys-color-on-background);
-  }
   .surface {
     background-color: var(--md-sys-color-surface);
   }
@@ -7000,29 +8297,65 @@
   .on-surface-text {
     color: var(--md-sys-color-on-surface);
   }
-  .surface-variant {
-    background-color: var(--md-sys-color-surface-variant);
-  }
-  .surface-variant-text {
-    color: var(--md-sys-color-surface-variant);
-  }
   .on-surface-variant {
     background-color: var(--md-sys-color-on-surface-variant);
   }
   .on-surface-variant-text {
     color: var(--md-sys-color-on-surface-variant);
   }
+  .surface-dim {
+    background-color: var(--md-sys-color-surface-dim);
+  }
+  .surface-dim-text {
+    color: var(--md-sys-color-surface-dim);
+  }
+  .surface-bright {
+    background-color: var(--md-sys-color-surface-bright);
+  }
+  .surface-bright-text {
+    color: var(--md-sys-color-surface-bright);
+  }
+  .surface-container-lowest {
+    background-color: var(--md-sys-color-surface-container-lowest);
+  }
+  .surface-container-lowest-text {
+    color: var(--md-sys-color-surface-container-lowest);
+  }
+  .surface-container-low {
+    background-color: var(--md-sys-color-surface-container-low);
+  }
+  .surface-container-low-text {
+    color: var(--md-sys-color-surface-container-low);
+  }
+  .surface-container {
+    background-color: var(--md-sys-color-surface-container);
+  }
+  .surface-container-text {
+    color: var(--md-sys-color-surface-container);
+  }
+  .surface-container-high {
+    background-color: var(--md-sys-color-surface-container-high);
+  }
+  .surface-container-high-text {
+    color: var(--md-sys-color-surface-container-high);
+  }
+  .surface-container-highest {
+    background-color: var(--md-sys-color-surface-container-highest);
+  }
+  .surface-container-highest-text {
+    color: var(--md-sys-color-surface-container-highest);
+  }
   .outline {
     background-color: var(--md-sys-color-outline);
   }
   .outline-text {
     color: var(--md-sys-color-outline);
   }
-  .inverse-on-surface {
-    background-color: var(--md-sys-color-inverse-on-surface);
+  .outline-variant {
+    background-color: var(--md-sys-color-outline-variant);
   }
-  .inverse-on-surface-text {
-    color: var(--md-sys-color-inverse-on-surface);
+  .outline-variant-text {
+    color: var(--md-sys-color-outline-variant);
   }
   .inverse-surface {
     background-color: var(--md-sys-color-inverse-surface);
@@ -7030,35 +8363,53 @@
   .inverse-surface-text {
     color: var(--md-sys-color-inverse-surface);
   }
+  .inverse-on-surface {
+    background-color: var(--md-sys-color-inverse-on-surface);
+  }
+  .inverse-on-surface-text {
+    color: var(--md-sys-color-inverse-on-surface);
+  }
   .inverse-primary {
     background-color: var(--md-sys-color-inverse-primary);
   }
   .inverse-primary-text {
     color: var(--md-sys-color-inverse-primary);
   }
+  .scrim {
+    background-color: var(--md-sys-color-scrim);
+  }
+  .scrim-text {
+    color: var(--md-sys-color-scrim);
+  }
   .shadow {
     background-color: var(--md-sys-color-shadow);
   }
   .shadow-text {
     color: var(--md-sys-color-shadow);
   }
-  .surface-tint {
-    background-color: var(--md-sys-color-surface-tint);
+  .background {
+    background-color: var(--md-sys-color-background);
   }
-  .surface-tint-text {
-    color: var(--md-sys-color-surface-tint);
+  .background-text {
+    color: var(--md-sys-color-background);
   }
-  .outline-variant {
-    background-color: var(--md-sys-color-outline-variant);
+  .on-background {
+    background-color: var(--md-sys-color-on-background);
   }
-  .outline-variant-text {
-    color: var(--md-sys-color-outline-variant);
+  .on-background-text {
+    color: var(--md-sys-color-on-background);
   }
-  .scrim {
-    background-color: var(--md-sys-color-scrim);
+  .surface-variant {
+    background-color: var(--md-sys-color-surface-variant);
   }
-  .scrim-text {
-    color: var(--md-sys-color-scrim);
+  .surface-variant-text {
+    color: var(--md-sys-color-surface-variant);
+  }
+  .surface-tint {
+    background-color: var(--md-sys-color-surface-tint);
+  }
+  .surface-tint-text {
+    color: var(--md-sys-color-surface-tint);
   }
   .display-large {
     font-family: var(--md-sys-typescale-display-large-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
@@ -7620,11 +8971,21 @@
       display: none !important;
     }
   }
+  @media (width >= 1601px) {
+    .hide-on-xxl-only {
+      display: none !important;
+    }
+  }
   @media (width >= 1201px) {
     .show-on-extra-large {
       display: block !important;
     }
   }
+  @media (width >= 1601px) {
+    .show-on-xxl {
+      display: block !important;
+    }
+  }
   @media (width >= 993px) {
     .show-on-large {
       display: block !important;