@expressivecss/expressive 0.2.0 → 0.4.0

package/dist/css/expressive.css

@@ -1179,7 +1179,7 @@
     --md-comp-filled-button-icon-size: 18px;
     --md-comp-filled-button-icon-label-space: 8px;
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small) {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button) {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
@@ -1204,7 +1204,7 @@
     -webkit-tap-highlight-color: transparent;
     transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small) > i {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button) > i {
     flex: 0 0 auto;
     font-size: var(--md-comp-filled-button-icon-size);
     width: var(--md-comp-filled-button-icon-size);
@@ -1212,119 +1212,100 @@
     line-height: var(--md-comp-filled-button-icon-size);
     overflow: hidden;
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small):has(> i + span) {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button):has(> i + span) {
     padding-inline-start: var(--md-comp-filled-button-with-icon-leading-space);
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small):has(> span + i) {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button):has(> span + i) {
     padding-inline-end: var(--md-comp-filled-button-with-icon-leading-space);
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).circle {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).circle {
     width: var(--md-comp-filled-button-container-height);
     padding: 0;
     border-radius: 50%;
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).circle > i {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).circle > i {
     font-size: 24px;
     width: 24px;
     height: 24px;
     line-height: 24px;
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small):not(.tonal, .outlined, .border, .elevated, .text, .transparent, .btn-flat) {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button):not(.tonal, .outlined, .elevated, .text) {
     color: var(--md-comp-filled-button-label-text-color, var(--md-sys-color-on-primary));
     background-color: var(--md-comp-filled-button-container-color, var(--md-sys-color-primary));
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small):not(.tonal, .outlined, .border, .elevated, .text, .transparent, .btn-flat):hover {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button):not(.tonal, .outlined, .elevated, .text):hover {
     background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary));
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small):not(.tonal, .outlined, .border, .elevated, .text, .transparent, .btn-flat):active, :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small):not(.tonal, .outlined, .border, .elevated, .text, .transparent, .btn-flat):focus {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button):not(.tonal, .outlined, .elevated, .text):active, :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button):not(.tonal, .outlined, .elevated, .text):focus {
     background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 10%, var(--md-sys-color-primary));
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small):not(.tonal, .outlined, .border, .elevated, .text, .transparent, .btn-flat):focus-visible {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button):not(.tonal, .outlined, .elevated, .text):focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).tonal {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).tonal {
     color: var(--md-sys-color-on-secondary-container);
     background-color: var(--md-sys-color-secondary-container);
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).tonal:hover {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).tonal:hover {
     background-color: color-mix(in oklab, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container));
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).tonal:active, :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).tonal:focus {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).tonal:active, :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).tonal:focus {
     background-color: color-mix(in oklab, var(--md-sys-color-on-secondary-container) 10%, var(--md-sys-color-secondary-container));
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).tonal:focus-visible {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).tonal:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).outlined,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).border {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).outlined {
     background-color: transparent;
     color: var(--md-sys-color-primary);
     border: 1px solid var(--md-sys-color-outline);
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).outlined:hover,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).border:hover {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).outlined:hover {
     background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).outlined:active, :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).outlined:focus,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).border:active,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).border:focus {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).outlined:active, :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).outlined:focus {
     background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).outlined:focus-visible,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).border:focus-visible {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).outlined:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).elevated {
+  :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);
     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, .btn, .btn-flat, .btn-large, .btn-small).elevated:hover {
+  :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));
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).elevated:active, :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).elevated:focus {
+  :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));
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).elevated:focus-visible {
+  :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);
     outline-offset: 2px;
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).text,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).transparent,
-  .btn-flat {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).text {
     box-shadow: none !important;
     color: var(--md-sys-color-primary);
     background-color: transparent;
     border-color: transparent;
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).text:hover,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).transparent:hover,
-  .btn-flat:hover {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).text:hover {
     background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).text:active, :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).text:focus,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).transparent:active,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).transparent:focus,
-  .btn-flat:active,
-  .btn-flat:focus {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).text:active, :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).text:focus {
     background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).text:focus-visible,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).transparent:focus-visible,
-  .btn-flat:focus-visible {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).text:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).icon-right {
-    flex-direction: row-reverse;
-  }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).small,
-  .btn-small {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).small {
     --md-comp-filled-button-container-height: 32px;
     --md-comp-filled-button-container-shape: 16px;
     --md-comp-filled-button-leading-space: 16px;
@@ -1334,9 +1315,8 @@
     height: 32px;
     font-size: var(--md-sys-typescale-label-medium-font-size);
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).large,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extra,
-  .btn-large {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).large,
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).extra {
     --md-comp-filled-button-container-height: 56px;
     --md-comp-filled-button-container-shape: 28px;
     --md-comp-filled-button-leading-space: 24px;
@@ -1345,14 +1325,10 @@
     --md-comp-filled-button-icon-size: 24px;
     height: 56px;
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).rounded {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).rounded {
     border-radius: 9999px;
   }
-  .btn-block {
-    display: flex;
-    width: 100%;
-  }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extend {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).extend {
     height: 56px;
     padding-inline: 16px 20px;
     border-radius: 16px;
@@ -1360,27 +1336,25 @@
     background-color: var(--md-sys-color-primary-container);
     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);
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extend:hover {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).extend:hover {
     box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
     background-color: color-mix(in oklab, var(--md-sys-color-on-primary-container) 8%, var(--md-sys-color-primary-container));
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extend:active, :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extend:focus {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).extend:active, :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).extend:focus {
     background-color: color-mix(in oklab, var(--md-sys-color-on-primary-container) 10%, var(--md-sys-color-primary-container));
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extend:focus-visible {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).extend:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extend > i {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).extend > i {
     font-size: 24px;
     width: 24px;
     height: 24px;
     line-height: 24px;
   }
-  .btn-floating,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extra.circle,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).large.circle,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).btn-large.circle {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).extra.circle,
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).large.circle {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -1397,94 +1371,53 @@
     vertical-align: middle;
     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);
   }
-  .btn-floating:focus-visible,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extra.circle:focus-visible,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).large.circle:focus-visible,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).btn-large.circle:focus-visible {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).extra.circle:focus-visible,
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).large.circle:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  .btn-floating,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extra.circle,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).large.circle,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).btn-large.circle {
-    transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
-  }
-  .btn-floating > i,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extra.circle > i,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).large.circle > i,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).btn-large.circle > i {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).extra.circle > i,
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).large.circle > i {
     font-size: 24px;
     width: 24px;
     height: 24px;
     line-height: 24px;
     color: inherit;
   }
-  .btn-floating:hover,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extra.circle:hover,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).large.circle:hover,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).btn-large.circle:hover {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).extra.circle:hover,
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).large.circle:hover {
     box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
     background-color: color-mix(in oklab, var(--md-sys-color-on-primary-container) 8%, var(--md-sys-color-primary-container));
   }
-  .btn-floating:active, .btn-floating:focus,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extra.circle:active,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extra.circle:focus,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).large.circle:active,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).large.circle:focus,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).btn-large.circle:active,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).btn-large.circle:focus {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).extra.circle:active, :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).extra.circle:focus,
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).large.circle:active,
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).large.circle:focus {
     background-color: color-mix(in oklab, var(--md-sys-color-on-primary-container) 10%, var(--md-sys-color-primary-container));
   }
-  .btn-floating.small, .btn-floating.btn-small,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extra.circle.small,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extra.circle.btn-small,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).large.circle.small,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).large.circle.btn-small,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).btn-large.circle.small,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).btn-large.circle.btn-small {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).extra.circle.small,
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).large.circle.small {
     width: 40px;
     height: 40px;
     border-radius: 12px;
   }
-  .btn-floating.small > i, .btn-floating.btn-small > i,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extra.circle.small > i,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extra.circle.btn-small > i,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).large.circle.small > i,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).large.circle.btn-small > i,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).btn-large.circle.small > i,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).btn-large.circle.btn-small > i {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).extra.circle.small > i,
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).large.circle.small > i {
     font-size: 24px;
   }
-  .btn-floating.halfway-fab,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extra.circle.halfway-fab,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).large.circle.halfway-fab,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).btn-large.circle.halfway-fab {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).extra.circle.halfway-fab,
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).large.circle.halfway-fab {
     position: absolute;
-    right: 24px;
+    inset-inline-end: 24px;
     bottom: -28px;
   }
-  .btn-floating.halfway-fab.left,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extra.circle.halfway-fab.left,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).large.circle.halfway-fab.left,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).btn-large.circle.halfway-fab.left {
-    right: auto;
-    left: 24px;
-  }
-  .btn-floating:not(.large, .btn-large, .extra, .small, .btn-small) {
-    width: 40px;
-    height: 40px;
-    border-radius: 12px;
-  }
-  .btn-floating:not(.large, .btn-large, .extra, .small, .btn-small).halfway-fab {
-    bottom: -20px;
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).extra.circle.halfway-fab.left,
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).large.circle.halfway-fab.left {
+    inset-inline-end: auto;
+    inset-inline-start: 24px;
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small):disabled,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small)[disabled],
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).disabled,
-  .btn-floating:disabled,
-  .btn-floating[disabled],
-  .btn-floating.disabled {
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button):disabled,
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button)[disabled],
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button).disabled {
     box-shadow: none !important;
     color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 12%, transparent);
@@ -1494,207 +1427,386 @@
     cursor: default;
   }
   .fixed-action-btn {
+    --md-comp-fab-offset: 16px;
+    --md-comp-fab-z: 997;
+    --md-comp-fab-menu-gap: 16px;
+    --md-comp-fab-duration: 200ms;
+    --md-comp-fab-stagger: 40ms;
+    --md-comp-fab-easing: cubic-bezier(0.65, 0, 0.35, 1);
+    --md-comp-fab-travel: 64px;
+    --md-comp-fab-hidden-transform: scale(0)
+      translateY(calc(var(--md-comp-fab-travel) * (var(--i, 0) + 1)));
     position: fixed;
-    right: 23px;
-    bottom: 23px;
-    padding-top: 15px;
-    margin-bottom: 0;
-    z-index: 997;
+    inset-inline-end: var(--md-comp-fab-offset);
+    bottom: var(--md-comp-fab-offset);
+    z-index: var(--md-comp-fab-z);
+    padding-top: var(--md-comp-fab-menu-gap);
+    margin: 0;
+    overflow: visible;
+  }
+  .fixed-action-btn > :is(a, button) {
+    position: relative;
+    z-index: 1;
+  }
+  .fixed-action-btn :is(ul, menu) {
+    --n: 1;
+    position: absolute;
+    inset-inline: 0;
+    bottom: 64px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--md-comp-fab-menu-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    visibility: hidden;
+    overflow: visible;
+    transition: visibility 0s calc(var(--md-comp-fab-duration) + var(--md-comp-fab-stagger) * (var(--n) - 1));
+  }
+  .fixed-action-btn :is(ul, menu):has(> :nth-child(2)) {
+    --n: 2;
+  }
+  .fixed-action-btn :is(ul, menu):has(> :nth-child(3)) {
+    --n: 3;
+  }
+  .fixed-action-btn :is(ul, menu):has(> :nth-child(4)) {
+    --n: 4;
+  }
+  .fixed-action-btn :is(ul, menu):has(> :nth-child(5)) {
+    --n: 5;
+  }
+  .fixed-action-btn :is(ul, menu):has(> :nth-child(6)) {
+    --n: 6;
+  }
+  .fixed-action-btn :is(ul, menu):has(> :nth-child(7)) {
+    --n: 7;
+  }
+  .fixed-action-btn :is(ul, menu):has(> :nth-child(8)) {
+    --n: 8;
+  }
+  .fixed-action-btn :is(ul, menu) li:nth-last-child(1) {
+    --i: 0;
+  }
+  .fixed-action-btn :is(ul, menu) li:nth-last-child(2) {
+    --i: 1;
+  }
+  .fixed-action-btn :is(ul, menu) li:nth-last-child(3) {
+    --i: 2;
+  }
+  .fixed-action-btn :is(ul, menu) li:nth-last-child(4) {
+    --i: 3;
+  }
+  .fixed-action-btn :is(ul, menu) li:nth-last-child(5) {
+    --i: 4;
+  }
+  .fixed-action-btn :is(ul, menu) li:nth-last-child(6) {
+    --i: 5;
+  }
+  .fixed-action-btn :is(ul, menu) li:nth-last-child(7) {
+    --i: 6;
   }
-  .fixed-action-btn.active ul {
+  .fixed-action-btn :is(ul, menu) li:nth-last-child(8) {
+    --i: 7;
+  }
+  .fixed-action-btn :is(ul, menu) > li > :is(a, button) {
+    opacity: 0;
+    transform: var(--md-comp-fab-hidden-transform);
+    transition: opacity var(--md-comp-fab-duration) var(--md-comp-fab-easing), transform var(--md-comp-fab-duration) var(--md-comp-fab-easing), background-color 0.2s ease-out, box-shadow 0.2s ease-out;
+    transition-delay: calc(var(--md-comp-fab-stagger) * (var(--n) - 1 - var(--i, 0)));
+  }
+  .fixed-action-btn.active :is(ul, menu) {
     visibility: visible;
-    padding-left: 0;
-    list-style-type: none;
+    transition-delay: 0s;
+  }
+  .fixed-action-btn.active :is(ul, menu) > li > :is(a, button) {
+    opacity: 1;
+    transform: none;
+    transition-delay: calc(var(--md-comp-fab-stagger) * var(--i, 0));
+  }
+  .fixed-action-btn.direction-left :is(ul, menu) li:nth-child(1), .fixed-action-btn.direction-right :is(ul, menu) li:nth-child(1), .fixed-action-btn.direction-bottom :is(ul, menu) li:nth-child(1) {
+    --i: 0;
+  }
+  .fixed-action-btn.direction-left :is(ul, menu) li:nth-child(2), .fixed-action-btn.direction-right :is(ul, menu) li:nth-child(2), .fixed-action-btn.direction-bottom :is(ul, menu) li:nth-child(2) {
+    --i: 1;
+  }
+  .fixed-action-btn.direction-left :is(ul, menu) li:nth-child(3), .fixed-action-btn.direction-right :is(ul, menu) li:nth-child(3), .fixed-action-btn.direction-bottom :is(ul, menu) li:nth-child(3) {
+    --i: 2;
+  }
+  .fixed-action-btn.direction-left :is(ul, menu) li:nth-child(4), .fixed-action-btn.direction-right :is(ul, menu) li:nth-child(4), .fixed-action-btn.direction-bottom :is(ul, menu) li:nth-child(4) {
+    --i: 3;
+  }
+  .fixed-action-btn.direction-left :is(ul, menu) li:nth-child(5), .fixed-action-btn.direction-right :is(ul, menu) li:nth-child(5), .fixed-action-btn.direction-bottom :is(ul, menu) li:nth-child(5) {
+    --i: 4;
+  }
+  .fixed-action-btn.direction-left :is(ul, menu) li:nth-child(6), .fixed-action-btn.direction-right :is(ul, menu) li:nth-child(6), .fixed-action-btn.direction-bottom :is(ul, menu) li:nth-child(6) {
+    --i: 5;
+  }
+  .fixed-action-btn.direction-left :is(ul, menu) li:nth-child(7), .fixed-action-btn.direction-right :is(ul, menu) li:nth-child(7), .fixed-action-btn.direction-bottom :is(ul, menu) li:nth-child(7) {
+    --i: 6;
+  }
+  .fixed-action-btn.direction-left :is(ul, menu) li:nth-child(8), .fixed-action-btn.direction-right :is(ul, menu) li:nth-child(8), .fixed-action-btn.direction-bottom :is(ul, menu) li:nth-child(8) {
+    --i: 7;
   }
   .fixed-action-btn.direction-left, .fixed-action-btn.direction-right {
-    padding: 0 0 0 15px;
+    padding: 0;
   }
-  .fixed-action-btn.direction-left ul, .fixed-action-btn.direction-right ul {
-    text-align: right;
-    right: 64px;
+  .fixed-action-btn.direction-left :is(ul, menu), .fixed-action-btn.direction-right :is(ul, menu) {
+    inset: auto;
     top: 50%;
-    transform: translateY(-50%);
-    height: 100%;
-    left: auto;
-    width: 500px;
+    translate: 0 -50%;
+    flex-direction: row;
+    width: max-content;
+    height: auto;
   }
-  .fixed-action-btn.direction-left ul li, .fixed-action-btn.direction-right ul li {
-    display: inline-block;
-    margin: 7.5px 15px 0 0;
+  .fixed-action-btn.direction-left {
+    --md-comp-fab-hidden-transform: scale(0)
+      translateX(calc(var(--md-comp-fab-travel) * (var(--i, 0) + 1)));
+    padding-inline-start: var(--md-comp-fab-menu-gap);
   }
-  .fixed-action-btn.direction-right {
-    padding: 0 15px 0 0;
+  .fixed-action-btn.direction-left :is(ul, menu) {
+    inset-inline-end: 64px;
+    flex-direction: row-reverse;
   }
-  .fixed-action-btn.direction-right ul {
-    text-align: left;
-    direction: rtl;
-    left: 64px;
-    right: auto;
+  .fixed-action-btn.direction-right {
+    --md-comp-fab-hidden-transform: scale(0)
+      translateX(calc(-1 * var(--md-comp-fab-travel) * (var(--i, 0) + 1)));
+    padding-inline-end: var(--md-comp-fab-menu-gap);
   }
-  .fixed-action-btn.direction-right ul li {
-    margin: 7.5px 0 0 15px;
+  .fixed-action-btn.direction-right :is(ul, menu) {
+    inset-inline-start: 64px;
   }
   .fixed-action-btn.direction-bottom {
-    padding: 0 0 15px 0;
+    --md-comp-fab-hidden-transform: scale(0)
+      translateY(calc(-1 * var(--md-comp-fab-travel) * (var(--i, 0) + 1)));
+    padding: 0 0 var(--md-comp-fab-menu-gap);
   }
-  .fixed-action-btn.direction-bottom ul {
+  .fixed-action-btn.direction-bottom :is(ul, menu) {
+    inset: auto;
     top: 64px;
     bottom: auto;
-    display: flex;
-    flex-direction: column-reverse;
-  }
-  .fixed-action-btn.direction-bottom ul li {
-    margin: 15px 0 0 0;
+    inset-inline: 0;
   }
   .fixed-action-btn.toolbar {
     padding: 0;
     height: 56px;
   }
-  .fixed-action-btn.toolbar.active > a i, .fixed-action-btn.toolbar.active > button i {
+  .fixed-action-btn.toolbar :is(ul, menu) > li > :is(a, button) {
+    opacity: 1;
+    transform: none;
+    transition: opacity var(--md-comp-fab-duration);
+  }
+  .fixed-action-btn.toolbar.active {
+    inset-inline: 0;
+    bottom: 0;
+    width: 100%;
+    height: 56px;
+  }
+  .fixed-action-btn.toolbar.active > :is(a, button) > i {
     opacity: 0;
   }
-  .fixed-action-btn.toolbar ul {
+  .fixed-action-btn.toolbar.active :is(ul, menu) {
+    visibility: visible;
+    position: static;
     display: flex;
-    top: 0;
-    bottom: 0;
-    z-index: 1;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+    gap: 0;
   }
-  .fixed-action-btn.toolbar ul li {
+  .fixed-action-btn.toolbar :is(ul, menu) li {
     flex: 1;
-    display: inline-block;
     margin: 0;
     height: 100%;
-    transition: none;
   }
-  .fixed-action-btn.toolbar ul li a,
-  .fixed-action-btn.toolbar ul li button {
-    display: block;
-    overflow: hidden;
-    position: relative;
+  .fixed-action-btn.toolbar :is(ul, menu) li :is(a, button) {
+    display: grid;
+    place-items: center;
     width: 100%;
     height: 100%;
-    background-color: transparent;
+    background: transparent;
     box-shadow: none;
     color: var(--md-sys-color-on-primary-container);
-    line-height: 56px;
-    z-index: 1;
-  }
-  .fixed-action-btn.toolbar ul li a i,
-  .fixed-action-btn.toolbar ul li button i {
-    line-height: inherit;
-  }
-  .fixed-action-btn ul {
-    left: 0;
-    right: 0;
-    text-align: center;
-    position: absolute;
-    bottom: 64px;
-    margin: 0;
-    visibility: hidden;
-  }
-  .fixed-action-btn ul li {
-    margin-bottom: 15px;
-  }
-  .fixed-action-btn ul a.btn-floating,
-  .fixed-action-btn ul button.btn-floating {
-    opacity: 0;
   }
   .fixed-action-btn .fab-backdrop {
     position: absolute;
-    top: 0;
-    left: 0;
+    inset: 0 auto auto 0;
     z-index: -1;
     width: 56px;
     height: 56px;
-    background-color: var(--md-sys-color-primary-container);
     border-radius: 16px;
+    background-color: var(--md-sys-color-primary-container);
     transform: scale(0);
   }
+  @media (hover: hover) {
+    .fixed-action-btn:not(.click-to-toggle):hover :is(ul, menu) {
+      visibility: visible;
+      transition-delay: 0s;
+    }
+    .fixed-action-btn:not(.click-to-toggle):hover :is(ul, menu) > li > :is(a, button) {
+      opacity: 1;
+      transform: none;
+      transition-delay: calc(var(--md-comp-fab-stagger) * var(--i, 0));
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fixed-action-btn {
+      --md-comp-fab-duration: 0s;
+      --md-comp-fab-stagger: 0s;
+    }
+  }
   .collection {
-    padding-left: 0;
-    list-style-type: none;
-    margin: 0.5rem 0 1rem 0;
-    border: 1px solid var(--md-sys-color-outline-variant);
-    border-radius: 2px;
+    --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;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0.5rem 0 1rem;
     overflow: hidden;
-    position: relative;
+    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 .collection-item {
-    background-color: transparent;
-    line-height: 1.5rem;
-    padding: 10px 20px;
-    margin: 0;
-    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  .collection > * + * {
+    border-top: 1px solid var(--md-comp-collection-outline-color);
   }
-  .collection .collection-item.avatar {
-    min-height: 84px;
-    padding-left: 72px;
-    position: relative;
+  .collection > :is(li, a) {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto;
+    align-items: center;
+    column-gap: 16px;
+    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;
   }
-  .collection .collection-item.avatar:not(.circle-clipper) > .circle,
-  .collection .collection-item.avatar :not(.circle-clipper) > .circle {
-    position: absolute;
-    width: 42px;
-    height: 42px;
+  .collection > :is(li, a) > :is(img, i).circle {
+    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;
-    left: 15px;
-    display: inline-block;
-    vertical-align: middle;
+    object-fit: cover;
   }
-  .collection .collection-item.avatar i.circle {
-    font-size: 18px;
-    line-height: 42px;
-    color: #fff;
-    background-color: var(--md-sys-color-shadow);
+  .collection > :is(li, a) > 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;
   }
-  .collection .collection-item.avatar .title {
-    font-size: 16px;
+  .collection > :is(li, a) > .title {
+    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 .collection-item.avatar p {
+  .collection > :is(li, a) > p {
+    grid-column: 2;
+    grid-row: 1;
+    min-width: 0;
     margin: 0;
+    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);
   }
-  .collection .collection-item.avatar .secondary-content {
-    position: absolute;
-    top: 16px;
-    right: 16px;
+  .collection > :is(li, a) > .title ~ p {
+    grid-row: 2;
   }
-  .collection .collection-item:last-child {
-    border-bottom: none;
+  .collection > :is(li, a) > :is(a:last-child, .badge) {
+    grid-column: 3;
+    grid-row: 1/-1;
+    align-self: center;
+    justify-self: end;
   }
-  .collection .collection-item.active {
-    background-color: var(--md-sys-color-primary);
-    color: var(--md-sys-color-on-primary);
+  .collection > :is(li, a) > a:not(.badge) {
+    grid-column: 1/-1;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    min-width: 0;
+    color: inherit;
+    text-decoration: none;
   }
-  .collection .collection-item.active .secondary-content {
-    color: var(--md-sys-color-on-primary);
+  .collection > :is(li, a) > a:not(.badge) > .badge {
+    margin-inline-start: auto;
   }
-  .collection a.collection-item {
-    display: block;
-    transition: 0.25s;
-    color: var(--md-sys-color-primary);
+  .collection > :is(li, a):has(> .circle) {
+    min-height: 72px;
   }
-  .collection a.collection-item:not(.active):hover {
-    background-color: rgba(0, 0, 0, 0.04);
+  .collection > li:has(> :is(h1, h2, h3, h4, h5, h6)) {
+    min-height: 0;
+    padding-block: 12px;
   }
-  .collection.with-header .collection-header {
-    background-color: transparent;
-    border-bottom: 1px solid var(--md-sys-color-outline-variant);
-    padding: 10px 20px;
+  .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);
   }
-  .collection.with-header .collection-item {
-    padding-left: 30px;
+  .collection > a:focus-visible,
+  .collection > li > a:focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
   }
-  .collection.with-header .collection-item.avatar {
-    padding-left: 72px;
+  .collection > a:hover,
+  .collection > li:has(> a:hover) {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
   }
-  .secondary-content {
-    float: right;
-    color: var(--md-sys-color-primary);
+  .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);
+  }
+  .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);
+  }
+  .collection > :is(.disabled, [aria-disabled=true]) {
+    pointer-events: none;
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+  .collection span.badge {
+    float: none;
+    margin-block: 0;
+    margin-inline-start: auto;
+  }
+  .collection.flush {
+    border: 0;
+    border-radius: 0;
   }
   .collapsible .collection {
     margin: 0;
     border: none;
+    border-radius: 0;
   }
   :root {
     --bagde-height: 22px;
@@ -1735,8 +1847,10 @@
     height: var(--bagde-height);
     -webkit-font-smoothing: auto;
   }
-  .collection-item span.badge {
-    margin-top: calc(0.75rem - var(--bagde-height) * 0.5);
+  .collection span.badge {
+    float: none;
+    margin-block: 0;
+    margin-inline-start: auto;
   }
   .collapsible span.badge {
     margin-left: auto;
@@ -1745,22 +1859,81 @@
     margin-right: 7px;
     order: -1;
   }
-  .collapsible .active span.badge:not(.new) {
+  .collapsible :is(.active, [open]) span.badge:not(.new) {
     color: var(--md-sys-color-on-surface-variant);
   }
   .sidenav span.badge {
-    margin-top: calc(var(--sidenav-line-height) * 0.5 - 11px);
+    margin-top: calc(var(--md-comp-nav-drawer-line-height) * 0.5 - 11px);
   }
   table span.badge {
     display: inline-block;
     float: none;
     margin-left: auto;
   }
-  /* This is needed for some mobile phones to display the Google Icon font properly */
-  .material-icons, .material-symbols-outlined,
-  .material-symbols-rounded, .material-symbols-sharp {
+  :root {
+    --md-icon-font-outlined: "Material Symbols Outlined";
+    --md-icon-font-rounded: "Material Symbols Rounded";
+    --md-icon-font-sharp: "Material Symbols Sharp";
+    --md-icon-font: var(--md-icon-font-outlined);
+    --md-icon-fill: 0;
+    --md-icon-weight: 400;
+    --md-icon-grade: 0;
+    --md-icon-optical-size: 24;
+  }
+  [icon-style=outlined] {
+    --md-icon-font: var(--md-icon-font-outlined);
+  }
+  [icon-style=rounded] {
+    --md-icon-font: var(--md-icon-font-rounded);
+  }
+  [icon-style=sharp] {
+    --md-icon-font: var(--md-icon-font-sharp);
+  }
+  .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons {
+    display: inline-block;
+    font-family: var(--md-icon-font);
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    user-select: none;
     text-rendering: optimizeLegibility;
     font-feature-settings: "liga";
+    -webkit-font-smoothing: antialiased;
+    font-variation-settings: "FILL" var(--md-icon-fill), "wght" var(--md-icon-weight), "GRAD" var(--md-icon-grade), "opsz" var(--md-icon-optical-size);
+  }
+  .material-symbols.tiny, .material-symbols-outlined.tiny, .material-symbols-rounded.tiny, .material-symbols-sharp.tiny, .material-icons.tiny {
+    font-size: 1rem;
+    --md-icon-optical-size: 20;
+  }
+  .material-symbols.small, .material-symbols-outlined.small, .material-symbols-rounded.small, .material-symbols-sharp.small, .material-icons.small {
+    font-size: 2rem;
+    --md-icon-optical-size: 24;
+  }
+  .material-symbols.medium, .material-symbols-outlined.medium, .material-symbols-rounded.medium, .material-symbols-sharp.medium, .material-icons.medium {
+    font-size: 4rem;
+    --md-icon-optical-size: 40;
+  }
+  .material-symbols.large, .material-symbols-outlined.large, .material-symbols-rounded.large, .material-symbols-sharp.large, .material-icons.large {
+    font-size: 6rem;
+    --md-icon-optical-size: 48;
+  }
+  .material-symbols-outlined {
+    --md-icon-font: var(--md-icon-font-outlined);
+  }
+  .material-symbols-rounded {
+    --md-icon-font: var(--md-icon-font-rounded);
+  }
+  .material-symbols-sharp {
+    --md-icon-font: var(--md-icon-font-sharp);
+  }
+  .icon-filled {
+    --md-icon-fill: 1;
   }
   header:has(> nav) {
     --md-comp-top-app-bar-container-color: var(--md-sys-color-surface);
@@ -1804,7 +1977,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(.btn):not(.button):not(.btn-floating):not(.btn-large):not(.btn-small):has(> i:only-child) {
+  header:has(> nav) > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child) {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
@@ -1822,21 +1995,21 @@
     font: inherit;
     text-decoration: none;
   }
-  header:has(> nav) > nav:not(.tabs) > :is(a, button):not(.btn):not(.button):not(.btn-floating):not(.btn-large):not(.btn-small):has(> i:only-child):focus-visible {
+  header:has(> nav) > nav:not(.tabs) > :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(.btn):not(.button):not(.btn-floating):not(.btn-large):not(.btn-small):has(> i:only-child) > i {
+  header:has(> nav) > nav:not(.tabs) > :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(.btn):not(.button):not(.btn-floating):not(.btn-large):not(.btn-small):has(> i:only-child):hover {
+  header:has(> nav) > 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);
   }
-  header:has(> nav) > nav:not(.tabs) > :is(a, button):not(.btn):not(.button):not(.btn-floating):not(.btn-large):not(.btn-small):has(> i:only-child):active {
+  header:has(> nav) > 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);
   }
   header:has(> nav) > nav:not(.tabs) > :is(menu, ul) {
@@ -1851,7 +2024,18 @@
     display: flex;
     align-items: stretch;
   }
-  header:has(> nav) > nav:not(.tabs) > form {
+  header:has(> nav) > nav:not(.tabs) > ol {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    align-self: center;
+    flex: 1 1 auto;
+    min-width: 0;
+    list-style: none;
+    margin: 0;
+    padding-inline: 12px;
+  }
+  header:has(> nav) > nav:not(.tabs) > form {
     display: flex;
     flex: 1 1 auto;
     align-items: center;
@@ -1891,7 +2075,7 @@
       padding-inline-start: 12px;
     }
   }
-  header:has(> nav) > nav:not(.tabs) > a:not(:has(> i:only-child)):not(.btn):not(.button):not(.btn-floating):not(.breadcrumb), header:has(> nav) > nav:not(.tabs) > :is(menu, ul) a {
+  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 {
     display: inline-flex;
     align-items: center;
     padding: 0 12px;
@@ -1903,14 +2087,14 @@
     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(.btn):not(.button):not(.btn-floating):not(.breadcrumb), header:has(> nav) > nav:not(.tabs) > :is(menu, ul) a:focus-visible {
+  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 {
     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(.btn):not(.button):not(.btn-floating):not(.breadcrumb), header:has(> nav) > nav:not(.tabs) > :is(menu, ul) a:hover:not(.active) {
+  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) {
     background-color: color-mix(in oklab, currentColor 8%, transparent);
   }
-  header:has(> nav) > nav:not(.tabs) > a.active:not(:has(> i:only-child)):not(.btn):not(.button):not(.btn-floating):not(.breadcrumb), header:has(> nav) > nav:not(.tabs) > :is(menu, ul) a.active {
+  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 {
     background-color: color-mix(in oklab, currentColor 10%, transparent);
   }
   header.center:has(> nav) > nav:not(.tabs) {
@@ -1978,7 +2162,7 @@
       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:not(.page-footer):has(> nav) {
+  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);
@@ -1986,7 +2170,7 @@
     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:not(.page-footer):has(> nav) > nav:not(.tabs) {
+  footer:has(> nav:only-child) > nav:not(.tabs) {
     display: flex;
     align-items: center;
     box-sizing: border-box;
@@ -1995,7 +2179,7 @@
     padding: 12px 4px;
     margin: 0;
   }
-  footer:not(.page-footer):has(> nav) > nav:not(.tabs) > :is(a, button):not(.btn):not(.button):not(.btn-floating):not(.btn-large):not(.btn-small):has(> i:only-child) {
+  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;
     align-items: center;
@@ -2013,27 +2197,27 @@
     font: inherit;
     text-decoration: none;
   }
-  footer:not(.page-footer):has(> nav) > nav:not(.tabs) > :is(a, button):not(.btn):not(.button):not(.btn-floating):not(.btn-large):not(.btn-small):has(> i:only-child):focus-visible {
+  footer:has(> nav:only-child) > nav:not(.tabs) > :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;
   }
-  footer:not(.page-footer):has(> nav) > nav:not(.tabs) > :is(a, button):not(.btn):not(.button):not(.btn-floating):not(.btn-large):not(.btn-small):has(> i:only-child) > i {
+  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;
   }
-  footer:not(.page-footer):has(> nav) > nav:not(.tabs) > :is(a, button):not(.btn):not(.button):not(.btn-floating):not(.btn-large):not(.btn-small):has(> i:only-child):hover {
+  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);
   }
-  footer:not(.page-footer):has(> nav) > nav:not(.tabs) > :is(a, button):not(.btn):not(.button):not(.btn-floating):not(.btn-large):not(.btn-small):has(> i:only-child):active {
+  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);
   }
-  footer:not(.page-footer):has(> nav) > nav:not(.tabs) > :is(.btn, .btn-floating, .btn-large) {
+  footer:has(> nav:only-child) > nav:not(.tabs) > :is(.button, .circle, .extra) {
     margin-inline-start: auto;
   }
-  footer:not(.page-footer):has(> nav).fixed {
+  footer:has(> nav:only-child).fixed {
     position: sticky;
     bottom: 0;
     z-index: 997;
@@ -2063,7 +2247,7 @@
   nav.toolbar + nav.toolbar {
     margin-block-start: 16px;
   }
-  nav.toolbar > :is(a, button):not(.btn-floating, .extra) {
+  nav.toolbar > :is(a, button):not(.extra) {
     box-sizing: border-box;
     display: inline-flex;
     flex: 0 0 auto;
@@ -2090,34 +2274,34 @@
     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(.btn-floating, .extra):focus-visible {
+  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(.btn-floating, .extra) > i {
+  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(.btn-floating, .extra):hover:not(.active) {
+  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(.btn-floating, .extra):active:not(.active) {
+  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(.btn-floating, .extra).active {
+  nav.toolbar > :is(a, button):not(.extra).active {
     background-color: var(--md-sys-color-secondary-container);
     color: var(--md-sys-color-on-secondary-container);
   }
-  nav.toolbar > :is(a, button):not(.btn-floating, .extra):disabled {
+  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(.btn-floating, .extra):is(.circle, :has(> i):not(:has(> span))) {
+  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%;
@@ -2183,13 +2367,6 @@
     inset: 0 0 auto 0;
     transform: none;
   }
-  ul.staggered-list li {
-    opacity: 0;
-  }
-  .fade-in {
-    opacity: 0;
-    transform-origin: 0 50%;
-  }
   .scale-transition {
     transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
   }
@@ -2200,7 +2377,7 @@
   .scale-transition.scale-in {
     transform: scale(1);
   }
-  :where(article, .card, .card-panel) {
+  :where(article) {
     --md-comp-elevated-card-container-color: var(--md-sys-color-surface);
     --md-comp-elevated-card-container-shape: 12px;
     position: relative;
@@ -2211,18 +2388,18 @@
     overflow: hidden;
     transition: box-shadow 0.2s ease-out;
   }
-  :where(article, .card, .card-panel):not(.filled, .outlined, .border) {
+  :where(article):not(.filled, .outlined, .border) {
     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(article, .card, .card-panel):not(.filled, .outlined, .border):hover {
+  :where(article):not(.filled, .outlined, .border):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);
   }
-  :where(article, .card, .card-panel).filled {
+  :where(article).filled {
     box-shadow: none !important;
     background-color: var(--md-sys-color-surface-variant);
   }
-  :where(article, .card, .card-panel).outlined,
-  :where(article, .card, .card-panel).border {
+  :where(article).outlined,
+  :where(article).border {
     box-shadow: none !important;
     border: 1px solid var(--md-sys-color-outline-variant);
   }
@@ -2257,7 +2434,7 @@
     background: none;
     color: inherit;
   }
-  article > nav {
+  article > nav:not(.tabs) {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -2295,8 +2472,7 @@
     font-weight: var(--md-sys-typescale-title-medium-font-weight);
     line-height: var(--md-sys-typescale-title-medium-line-height);
   }
-  article.horizontal,
-  .card.horizontal {
+  article.horizontal {
     display: flex;
     flex-direction: row;
     align-items: stretch;
@@ -2304,12 +2480,7 @@
   }
   article.horizontal > img,
   article.horizontal > picture,
-  article.horizontal > figure,
-  article.horizontal > .card-image,
-  .card.horizontal > img,
-  .card.horizontal > picture,
-  .card.horizontal > figure,
-  .card.horizontal > .card-image {
+  article.horizontal > figure {
     flex: 0 0 40%;
     max-width: 40%;
     width: 40%;
@@ -2317,98 +2488,63 @@
   }
   article.horizontal > img,
   article.horizontal > picture img,
-  article.horizontal > figure img,
-  article.horizontal > .card-image img,
-  .card.horizontal > img,
-  .card.horizontal > picture img,
-  .card.horizontal > figure img,
-  .card.horizontal > .card-image img {
+  article.horizontal > figure img {
     height: 100%;
     object-fit: cover;
   }
-  article.horizontal > div,
-  .card.horizontal > div {
+  article.horizontal > div {
     flex: 1 1 auto;
     min-width: 0;
     display: flex;
     flex-direction: column;
   }
-  article.small, .card.small {
+  article.small {
     height: 300px;
   }
-  article.medium, .card.medium {
+  article.medium {
     height: 400px;
   }
-  article.large, .card.large {
+  article.large {
     height: 500px;
   }
-  article.small, article.medium, article.large,
-  .card.small, .card.medium, .card.large {
+  article.small, article.medium, article.large {
     display: flex;
     flex-direction: column;
   }
-  article.small > img, article.small > picture, article.small > figure, article.small > .card-image, article.medium > img, article.medium > picture, article.medium > figure, article.medium > .card-image, article.large > img, article.large > picture, article.large > figure, article.large > .card-image,
-  .card.small > img,
-  .card.small > picture,
-  .card.small > figure,
-  .card.small > .card-image, .card.medium > img, .card.medium > picture, .card.medium > figure, .card.medium > .card-image, .card.large > img, .card.large > picture, .card.large > figure, .card.large > .card-image {
+  article.small > img, article.small > picture, article.small > figure, article.medium > img, article.medium > picture, article.medium > figure, article.large > img, article.large > picture, article.large > figure {
     flex: 0 1 60%;
     min-height: 0;
     overflow: hidden;
   }
-  article.small > img, article.small > figure img, article.small > .card-image img, article.medium > img, article.medium > figure img, article.medium > .card-image img, article.large > img, article.large > figure img, article.large > .card-image img,
-  .card.small > img,
-  .card.small > figure img,
-  .card.small > .card-image img, .card.medium > img, .card.medium > figure img, .card.medium > .card-image img, .card.large > img, .card.large > figure img, .card.large > .card-image img {
+  article.small > img, article.small > figure img, article.medium > img, article.medium > figure img, article.large > img, article.large > figure img {
     height: 100%;
   }
-  article.small > p, article.small > .card-content, article.medium > p, article.medium > .card-content, article.large > p, article.large > .card-content,
-  .card.small > p,
-  .card.small > .card-content, .card.medium > p, .card.medium > .card-content, .card.large > p, .card.large > .card-content {
+  article.small > p, article.medium > p, article.large > p {
     flex: 1 1 auto;
     min-height: 0;
     overflow: hidden;
   }
-  article.small > nav, article.small > .card-action, article.medium > nav, article.medium > .card-action, article.large > nav, article.large > .card-action,
-  .card.small > nav,
-  .card.small > .card-action, .card.medium > nav, .card.medium > .card-action, .card.large > nav, .card.large > .card-action {
+  article.small > nav:not(.tabs), article.medium > nav:not(.tabs), article.large > nav:not(.tabs) {
     margin-top: auto;
   }
   article.horizontal.small,
   article.horizontal.medium,
-  article.horizontal.large,
-  .card.horizontal.small,
-  .card.horizontal.medium,
-  .card.horizontal.large {
+  article.horizontal.large {
     flex-direction: row;
   }
-  article.horizontal.small > img, article.horizontal.small > picture, article.horizontal.small > figure, article.horizontal.small > .card-image,
+  article.horizontal.small > img, article.horizontal.small > picture, article.horizontal.small > figure,
   article.horizontal.medium > img,
   article.horizontal.medium > picture,
   article.horizontal.medium > figure,
-  article.horizontal.medium > .card-image,
   article.horizontal.large > img,
   article.horizontal.large > picture,
-  article.horizontal.large > figure,
-  article.horizontal.large > .card-image,
-  .card.horizontal.small > img,
-  .card.horizontal.small > picture,
-  .card.horizontal.small > figure,
-  .card.horizontal.small > .card-image,
-  .card.horizontal.medium > img,
-  .card.horizontal.medium > picture,
-  .card.horizontal.medium > figure,
-  .card.horizontal.medium > .card-image,
-  .card.horizontal.large > img,
-  .card.horizontal.large > picture,
-  .card.horizontal.large > figure,
-  .card.horizontal.large > .card-image {
+  article.horizontal.large > figure {
     flex: 0 0 40%;
     max-height: none;
   }
-  article > aside,
-  .card-reveal {
-    display: none;
+  article > aside {
+    --md-comp-card-reveal-duration: 300ms;
+    --md-comp-card-reveal-easing: ease;
     position: absolute;
     inset: 0;
     z-index: 3;
@@ -2417,111 +2553,31 @@
     overflow-y: auto;
     background-color: var(--md-sys-color-surface);
     color: var(--md-sys-color-on-surface);
+    transform: translateY(100%);
+    visibility: hidden;
+    pointer-events: none;
+    transition: transform var(--md-comp-card-reveal-duration) var(--md-comp-card-reveal-easing), visibility 0s var(--md-comp-card-reveal-duration);
+  }
+  article > aside[aria-expanded=true] {
+    transform: translateY(0);
+    visibility: visible;
+    pointer-events: auto;
+    transition: transform var(--md-comp-card-reveal-duration) var(--md-comp-card-reveal-easing);
   }
-  article.sticky > nav,
-  .card.sticky-action > .card-action {
+  @media (prefers-reduced-motion: reduce) {
+    article > aside {
+      transition: none;
+    }
+  }
+  article.sticky > nav {
     position: relative;
     z-index: 4;
     background-color: inherit;
   }
-  article.sticky > aside,
-  .card.sticky-action > .card-reveal {
+  article.sticky > aside {
     bottom: auto;
     height: calc(100% - 52px);
   }
-  .card-panel {
-    padding: 16px;
-    margin: 0.5rem 0 1rem 0;
-  }
-  .card-title {
-    font-family: var(--md-sys-typescale-title-medium-font-family-name);
-    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);
-  }
-  .card .card-image {
-    position: relative;
-  }
-  .card .card-image img {
-    display: block;
-    width: 100%;
-    object-fit: cover;
-  }
-  .card .card-image .card-title {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    max-width: 100%;
-    padding: 16px;
-    color: var(--md-sys-color-on-surface);
-    background: color-mix(in oklab, var(--md-sys-color-surface) 72%, transparent);
-  }
-  .card .card-image .activator {
-    position: absolute;
-    inset: 0;
-    cursor: pointer;
-  }
-  .card .card-image img.activator {
-    position: relative;
-  }
-  .card .card-content {
-    padding: 16px;
-    border-radius: 0;
-  }
-  .card .card-content p {
-    margin: 0;
-  }
-  .card .card-content .card-title {
-    display: block;
-    margin-bottom: 8px;
-  }
-  .card .card-content .card-title.activator {
-    cursor: pointer;
-  }
-  .card .card-action {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 8px;
-    padding: 4px 8px 8px;
-  }
-  .card .card-action a:not(.button):not(.btn):not(.btn-floating) {
-    box-shadow: none !important;
-    color: var(--md-sys-color-primary);
-    background-color: transparent;
-    border-color: transparent;
-  }
-  .card .card-action a:not(.button):not(.btn):not(.btn-floating):hover {
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
-  }
-  .card .card-action a:not(.button):not(.btn):not(.btn-floating):active, .card .card-action a:not(.button):not(.btn):not(.btn-floating):focus {
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
-  }
-  .card .card-action a:not(.button):not(.btn):not(.btn-floating):focus-visible {
-    outline: 3px solid var(--md-sys-color-secondary);
-    outline-offset: 2px;
-  }
-  .card .card-action a:not(.button):not(.btn):not(.btn-floating) {
-    height: auto;
-    padding: 8px 12px;
-    min-height: 40px;
-  }
-  .card .card-stacked {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-width: 0;
-  }
-  .card .card-stacked .card-content {
-    flex-grow: 1;
-  }
-  .card .card-image .activator {
-    cursor: pointer;
-  }
-  .no-padding {
-    padding: 0 !important;
-  }
   #toast-container {
     --md-comp-snackbar-container-margin-leading: 8px;
     --md-comp-snackbar-container-margin-trailing: 8px;
@@ -2561,7 +2617,7 @@
     right: auto;
     transform: translateX(-50%);
   }
-  :is(.toast, .snackbar) {
+  .snackbar {
     --md-comp-snackbar-container-color: var(--md-sys-color-inverse-surface);
     --md-comp-snackbar-container-shape: 4px;
     --md-comp-snackbar-supporting-text-color: var(--md-sys-color-inverse-on-surface);
@@ -2590,13 +2646,13 @@
     cursor: default;
   }
   @media (width >= 601px) {
-    :is(.toast, .snackbar) {
+    .snackbar {
       width: max-content;
       min-width: min(344px, 100%);
     }
   }
-  :is(.toast, .snackbar) > p,
-  :is(.toast, .snackbar) > span {
+  .snackbar > p,
+  .snackbar > span {
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;
@@ -2612,7 +2668,7 @@
     -webkit-line-clamp: 2;
     overflow: hidden;
   }
-  :is(.toast, .snackbar) > i:first-child {
+  .snackbar > i:first-child {
     flex: 0 0 auto;
     font-size: 24px;
     width: 24px;
@@ -2620,10 +2676,10 @@
     line-height: 24px;
     color: var(--md-comp-snackbar-icon-color);
   }
-  :is(.toast, .snackbar) a:not(.button, .toast-action) {
+  .snackbar a:not(.button) {
     color: var(--md-comp-snackbar-action-label-text-color);
   }
-  :is(.toast, .snackbar) > nav {
+  .snackbar > nav {
     display: flex;
     flex: 0 0 auto;
     align-items: center;
@@ -2635,8 +2691,8 @@
     background: none;
     box-shadow: none;
   }
-  :is(.toast, .snackbar) > :is(button, a.button, a.toast-action, .toast-action):not(.circle),
-  :is(.toast, .snackbar) > nav > :is(button, a.button, a.toast-action, .toast-action):not(.circle) {
+  .snackbar > :is(button, a.button):not(.circle),
+  .snackbar > nav > :is(button, a.button):not(.circle) {
     flex: 0 0 auto;
     height: 40px;
     min-width: 48px;
@@ -2652,22 +2708,22 @@
     line-height: var(--md-sys-typescale-label-large-line-height);
     letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
   }
-  :is(.toast, .snackbar) > :is(button, a.button, a.toast-action, .toast-action):not(.circle):hover,
-  :is(.toast, .snackbar) > nav > :is(button, a.button, a.toast-action, .toast-action):not(.circle):hover {
+  .snackbar > :is(button, a.button):not(.circle):hover,
+  .snackbar > nav > :is(button, a.button):not(.circle):hover {
     background-color: color-mix(in oklab, var(--md-sys-color-inverse-primary) 8%, transparent);
   }
-  :is(.toast, .snackbar) > :is(button, a.button, a.toast-action, .toast-action):not(.circle):active, :is(.toast, .snackbar) > :is(button, a.button, a.toast-action, .toast-action):not(.circle):focus,
-  :is(.toast, .snackbar) > nav > :is(button, a.button, a.toast-action, .toast-action):not(.circle):active,
-  :is(.toast, .snackbar) > nav > :is(button, a.button, a.toast-action, .toast-action):not(.circle):focus {
+  .snackbar > :is(button, a.button):not(.circle):active, .snackbar > :is(button, a.button):not(.circle):focus,
+  .snackbar > nav > :is(button, a.button):not(.circle):active,
+  .snackbar > nav > :is(button, a.button):not(.circle):focus {
     background-color: color-mix(in oklab, var(--md-sys-color-inverse-primary) 10%, transparent);
   }
-  :is(.toast, .snackbar) > :is(button, a.button, a.toast-action, .toast-action):not(.circle):focus-visible,
-  :is(.toast, .snackbar) > nav > :is(button, a.button, a.toast-action, .toast-action):not(.circle):focus-visible {
+  .snackbar > :is(button, a.button):not(.circle):focus-visible,
+  .snackbar > nav > :is(button, a.button):not(.circle):focus-visible {
     outline: 3px solid var(--md-sys-color-inverse-primary);
     outline-offset: 2px;
   }
-  :is(.toast, .snackbar) > :is(button, a).circle,
-  :is(.toast, .snackbar) > nav > :is(button, a).circle {
+  .snackbar > :is(button, a).circle,
+  .snackbar > nav > :is(button, a).circle {
     flex: 0 0 auto;
     width: 40px;
     height: 40px;
@@ -2678,39 +2734,39 @@
     color: var(--md-comp-snackbar-icon-color);
     box-shadow: none;
   }
-  :is(.toast, .snackbar) > :is(button, a).circle > i,
-  :is(.toast, .snackbar) > nav > :is(button, a).circle > i {
+  .snackbar > :is(button, a).circle > i,
+  .snackbar > nav > :is(button, a).circle > i {
     font-size: 24px;
     width: 24px;
     height: 24px;
     line-height: 24px;
   }
-  :is(.toast, .snackbar) > :is(button, a).circle:hover,
-  :is(.toast, .snackbar) > nav > :is(button, a).circle:hover {
+  .snackbar > :is(button, a).circle:hover,
+  .snackbar > nav > :is(button, a).circle:hover {
     background-color: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) 8%, transparent);
   }
-  :is(.toast, .snackbar) > :is(button, a).circle:active, :is(.toast, .snackbar) > :is(button, a).circle:focus,
-  :is(.toast, .snackbar) > nav > :is(button, a).circle:active,
-  :is(.toast, .snackbar) > nav > :is(button, a).circle:focus {
+  .snackbar > :is(button, a).circle:active, .snackbar > :is(button, a).circle:focus,
+  .snackbar > nav > :is(button, a).circle:active,
+  .snackbar > nav > :is(button, a).circle:focus {
     background-color: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) 10%, transparent);
   }
-  :is(.toast, .snackbar) > :is(button, a).circle:focus-visible,
-  :is(.toast, .snackbar) > nav > :is(button, a).circle:focus-visible {
+  .snackbar > :is(button, a).circle:focus-visible,
+  .snackbar > nav > :is(button, a).circle:focus-visible {
     outline: 3px solid var(--md-sys-color-inverse-on-surface);
     outline-offset: 2px;
   }
-  :is(.toast, .snackbar).rounded {
+  .snackbar.rounded {
     border-radius: 24px;
   }
-  :is(.toast, .snackbar) + :is(.toast, .snackbar) {
+  .snackbar + .snackbar {
     margin-top: 8px;
   }
-  #toast-container :is(.toast, .snackbar) {
+  #toast-container .snackbar {
     position: relative;
     top: 35px;
     margin-top: 0;
   }
-  :is(.toast, .snackbar).active {
+  .snackbar.active {
     position: fixed;
     z-index: 10000;
     inset: auto auto 16px 16px;
@@ -2719,21 +2775,21 @@
     max-width: min(672px, 100% - 32px);
   }
   @media (width < 601px) {
-    :is(.toast, .snackbar).active {
+    .snackbar.active {
       inset: auto 8px 8px 8px;
       width: auto;
       max-width: none;
     }
   }
-  :is(.toast, .snackbar).active.top {
+  .snackbar.active.top {
     inset: 16px auto auto 16px;
   }
   @media (width < 601px) {
-    :is(.toast, .snackbar).active.top {
+    .snackbar.active.top {
       inset: 8px 8px auto 8px;
     }
   }
-  :is(.toast, .snackbar).active.center {
+  .snackbar.active.center {
     left: 50%;
     right: auto;
     transform: translateX(-50%);
@@ -2765,14 +2821,14 @@
   .tabs::-webkit-scrollbar {
     display: none;
   }
-  .tabs > :is(.tab, li.tab) {
+  .tabs > .tab {
     display: flex;
     flex: 0 0 auto;
     list-style: none;
     margin: 0;
     padding: 0;
   }
-  .tabs > :is(a, .tab > a, li.tab > a) {
+  .tabs > a, .tabs > .tab > a {
     box-sizing: border-box;
     position: relative;
     display: inline-flex;
@@ -2800,7 +2856,7 @@
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     transition: color 0.2s ease, background-color 0.2s ease;
   }
-  .tabs > :is(a, .tab > a, li.tab > a) > i {
+  .tabs > a > i, .tabs > .tab > a > i {
     flex: 0 0 auto;
     font-size: var(--md-comp-primary-tab-icon-size);
     width: var(--md-comp-primary-tab-icon-size);
@@ -2808,30 +2864,36 @@
     line-height: var(--md-comp-primary-tab-icon-size);
     color: inherit;
   }
-  .tabs > :is(a, .tab > a, li.tab > a):hover {
+  .tabs > a:hover, .tabs > .tab > a:hover {
     color: var(--md-sys-color-on-surface);
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
   }
-  .tabs > :is(a, .tab > a, li.tab > a):focus-visible, .tabs > :is(a, .tab > a, li.tab > a):focus {
+  .tabs > a:focus-visible, .tabs > a:focus, .tabs > .tab > a:focus-visible, .tabs > .tab > a:focus {
     color: var(--md-sys-color-on-surface);
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
     outline: none;
   }
-  .tabs > :is(a, .tab > a, li.tab > a).active {
+  .tabs > a.active, .tabs > .tab > a.active {
     color: var(--md-comp-primary-tab-active-label-text-color);
     background-color: transparent;
   }
-  .tabs > :is(a, .tab > a, li.tab > a).active:hover {
+  .tabs > a.active:hover, .tabs > .tab > a.active:hover {
     background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
   }
-  .tabs > :is(a, .tab > a, li.tab > a).active:focus-visible, .tabs > :is(a, .tab > a, li.tab > a).active:focus {
+  .tabs > a.active:focus-visible, .tabs > a.active:focus, .tabs > .tab > a.active:focus-visible, .tabs > .tab > a.active:focus {
     background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
   }
-  .tabs:not(.horizontal, .tabs-horizontal) > :is(a, .tab > a, li.tab > a):has(> i) {
+  .tabs > a.disabled, .tabs > a[aria-disabled=true], .tabs > .tab > a.disabled, .tabs > .tab > a[aria-disabled=true] {
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+    background-color: transparent;
+    cursor: default;
+    pointer-events: none;
+  }
+  .tabs:not(.horizontal) > a:has(> i), .tabs:not(.horizontal) > .tab > a:has(> i) {
     min-height: var(--md-comp-primary-tab-with-icon-container-height);
     padding-block: 8px;
   }
-  .tabs:not(:has(> .indicator)) > :is(a, .tab > a, li.tab > a).active::after {
+  .tabs:not(:has(> .indicator)) > a.active::after, .tabs:not(:has(> .indicator)) > .tab > a.active::after {
     content: "";
     position: absolute;
     inset: auto 0 0 0;
@@ -2850,9 +2912,7 @@
     padding: 0;
     margin: 0;
   }
-  .tabs > :is(a, .tab > a, li.tab > a).disabled,
-  .tabs > :is(a, .tab > a, li.tab > a)[aria-disabled=true],
-  .tabs > :is(.tab, li.tab).disabled > a {
+  .tabs > .tab.disabled > a {
     color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
     background-color: transparent;
     cursor: default;
@@ -2862,38 +2922,34 @@
     --md-comp-primary-tab-active-indicator-height: 2px;
     --md-comp-primary-tab-with-icon-container-height: 48px;
   }
-  .tabs.tabs-secondary > :is(a, .tab > a, li.tab > a) {
+  .tabs.tabs-secondary > a, .tabs.tabs-secondary > .tab > a {
     flex-direction: row;
     gap: 8px;
   }
-  .tabs.horizontal > :is(a, .tab > a, li.tab > a),
-  .tabs.tabs-horizontal > :is(a, .tab > a, li.tab > a) {
+  .tabs.horizontal > a, .tabs.horizontal > .tab > a {
     flex-direction: row;
     gap: 8px;
     min-height: var(--md-comp-primary-tab-container-height);
     padding-block: 0;
   }
-  .tabs.max > :is(a, .tab, li.tab),
-  .tabs.tabs-fixed-width > :is(a, .tab, li.tab) {
+  .tabs.max > :is(a, .tab) {
     flex: 1 1 0;
     min-width: 0;
   }
-  .tabs.max > :is(a, .tab > a, li.tab > a),
-  .tabs.tabs-fixed-width > :is(a, .tab > a, li.tab > a) {
+  .tabs.max > a, .tabs.max > .tab > a {
     width: 100%;
   }
   @media (width < 993px) {
-    .tabs > :is(a, .tab, li.tab) {
+    .tabs > :is(a, .tab) {
       flex: 1 1 0;
       min-width: 0;
     }
-    .tabs > :is(a, .tab > a, li.tab > a) {
+    .tabs > a, .tabs > .tab > a {
       width: 100%;
       padding-inline: 12px;
     }
   }
-  .tabs.transparent,
-  .tabs.tabs-transparent {
+  .tabs.transparent {
     --md-comp-primary-tab-container-color: transparent;
     --md-comp-primary-tab-label-text-color: color-mix(
       in oklab,
@@ -2904,21 +2960,14 @@
     --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 > :is(a, .tab > a, li.tab > a):hover,
-  .tabs.transparent > :is(a, .tab > a, li.tab > a):focus,
-  .tabs.tabs-transparent > :is(a, .tab > a, li.tab > a):hover,
-  .tabs.tabs-transparent > :is(a, .tab > a, li.tab > a):focus {
+  .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 > :is(a, .tab > a, li.tab > a).active:hover,
-  .tabs.transparent > :is(a, .tab > a, li.tab > a).active:focus,
-  .tabs.tabs-transparent > :is(a, .tab > a, li.tab > a).active:hover,
-  .tabs.tabs-transparent > :is(a, .tab > a, li.tab > a).active:focus {
+  .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,
-  .material-tooltip {
+  .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);
     --md-comp-plain-tooltip-container-shape: 4px;
@@ -2994,8 +3043,7 @@
   :not(body) > .tooltip.right:hover {
     transform: translate(calc(100% + var(--md-comp-tooltip-anchor-gap)), -50%) scale(1);
   }
-  body > .tooltip,
-  .material-tooltip {
+  body > .tooltip {
     position: absolute;
     left: 0;
     top: 0;
@@ -3004,9 +3052,7 @@
     overflow: hidden;
   }
   .tooltip.rich,
-  .tooltip.max,
-  .material-tooltip.rich,
-  .material-tooltip.max {
+  .tooltip.max {
     --md-comp-rich-tooltip-container-color: var(--md-sys-color-surface);
     --md-comp-rich-tooltip-container-shape: 12px;
     display: flex;
@@ -3025,9 +3071,7 @@
     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);
   }
   .tooltip.rich > :is(h1, h2, h3, h4, h5, h6),
-  .tooltip.max > :is(h1, h2, h3, h4, h5, h6),
-  .material-tooltip.rich > :is(h1, h2, h3, h4, h5, h6),
-  .material-tooltip.max > :is(h1, h2, h3, h4, h5, h6) {
+  .tooltip.max > :is(h1, h2, h3, h4, h5, h6) {
     margin: 0;
     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;
@@ -3037,9 +3081,7 @@
     letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
   }
   .tooltip.rich > p,
-  .tooltip.max > p,
-  .material-tooltip.rich > p,
-  .material-tooltip.max > p {
+  .tooltip.max > p {
     margin: 0;
     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;
@@ -3049,9 +3091,7 @@
     letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
   }
   .tooltip.rich > :is(nav, form),
-  .tooltip.max > :is(nav, form),
-  .material-tooltip.rich > :is(nav, form),
-  .material-tooltip.max > :is(nav, form) {
+  .tooltip.max > :is(nav, form) {
     display: flex;
     justify-content: flex-end;
     gap: 8px;
@@ -3065,10 +3105,9 @@
     padding: 0;
     border: none;
   }
-  .dropdown-content,
   menu[id] {
     --md-comp-menu-container-color: var(--md-sys-color-surface);
-    --md-comp-menu-container-shape: 4px;
+    --md-comp-menu-container-shape: 1rem;
     --md-comp-menu-item-container-height: 48px;
     box-sizing: border-box;
     display: none;
@@ -3089,8 +3128,8 @@
     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);
   }
-  .dropdown-content > li,
   menu[id] > li {
+    box-sizing: border-box;
     margin: 0;
     padding: 0;
     width: 100%;
@@ -3098,9 +3137,6 @@
     cursor: pointer;
     text-align: left;
   }
-  .dropdown-content > li > a,
-  .dropdown-content > li > button,
-  .dropdown-content > li > span,
   menu[id] > li > a,
   menu[id] > li > button,
   menu[id] > li > span {
@@ -3117,6 +3153,17 @@
     color: var(--md-sys-color-on-surface);
     text-decoration: none;
     cursor: pointer;
+  }
+  menu[id] > li > a:hover, menu[id] > li > a:focus,
+  menu[id] > li > button:hover,
+  menu[id] > li > button:focus,
+  menu[id] > li > span:hover,
+  menu[id] > li > span:focus {
+    background: none;
+  }
+  menu[id] > li > a,
+  menu[id] > li > button,
+  menu[id] > 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);
@@ -3124,9 +3171,6 @@
     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;
   }
-  .dropdown-content > li > a > i,
-  .dropdown-content > li > button > i,
-  .dropdown-content > li > i,
   menu[id] > li > a > i,
   menu[id] > li > button > i,
   menu[id] > li > i {
@@ -3137,19 +3181,19 @@
     line-height: 24px;
     color: var(--md-sys-color-on-surface-variant);
   }
-  .dropdown-content > li:not(.disabled, .divider):hover,
-  .dropdown-content > li.active,
+  menu[id] > li:not(.disabled, .divider, .optgroup) {
+    width: calc(100% - 16px);
+    margin-inline: 8px;
+    border-radius: 2rem;
+  }
   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);
   }
-  .dropdown-content > li.disabled,
   menu[id] > li.disabled {
     pointer-events: none;
     opacity: 0.38;
   }
-  .dropdown-content > hr,
-  .dropdown-content > li.divider,
   menu[id] > hr,
   menu[id] > li.divider {
     display: block;
@@ -3162,21 +3206,92 @@
     background-color: var(--md-sys-color-outline-variant);
     cursor: default;
   }
-  body.keyboard-focused .dropdown-content > li:focus,
-  body.keyboard-focused menu[id] > li:focus {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
+  menu[id]:has(> li > menu) {
+    overflow: visible;
   }
-  .input-field.col .dropdown-content [type=checkbox] + label {
-    top: 1px;
-    left: 0;
-    height: 18px;
+  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;
+    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;
+  }
+  menu[id] li > menu {
+    --md-comp-menu-container-color: var(--md-sys-color-surface);
+    --md-comp-menu-container-shape: 1rem;
+    --md-comp-menu-item-container-height: 48px;
+    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;
+    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);
+    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);
+  }
+  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);
+  }
+  menu[id] li > menu > li > :is(a, button, 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);
+    text-decoration: 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;
+  }
+  @media (hover: hover) and (pointer: fine) {
+    menu[id] li:is(:hover, :focus-within) > menu {
+      display: block;
+    }
+  }
+  menu[id] li.open > menu {
+    display: block;
+  }
+  menu[id] li.submenu-start > menu {
+    inset-inline-start: auto;
+    inset-inline-end: 100%;
+  }
+  body.keyboard-focused menu[id] > li:focus {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
   }
   .dropdown-trigger {
     cursor: pointer;
   }
-  dialog,
-  .modal {
+  dialog {
     --md-comp-basic-dialog-container-color: var(--md-sys-color-surface);
     --md-comp-basic-dialog-container-shape: 28px;
     --md-comp-basic-dialog-container-min-width: 280px;
@@ -3196,16 +3311,14 @@
     outline: none;
     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);
   }
-  dialog::backdrop,
-  .modal::backdrop {
+  dialog::backdrop {
     background-color: color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
     backdrop-filter: blur(var(--md-comp-basic-dialog-scrim-blur));
   }
   html:has(dialog:modal) {
     overflow: hidden;
   }
-  dialog[open],
-  .modal[open] {
+  dialog[open] {
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -3221,8 +3334,7 @@
     line-height: 24px;
     color: var(--md-sys-color-secondary);
   }
-  dialog > :is(h1, h2, h3, h4, h5, h6),
-  .modal-header {
+  dialog > :is(h1, h2, h3, h4, h5, h6) {
     flex: 0 0 auto;
     margin: 0;
     padding: 24px 24px 16px;
@@ -3238,8 +3350,7 @@
     text-align: center;
   }
   dialog > p,
-  dialog > div,
-  .modal-content {
+  dialog > div {
     flex: 1 1 auto;
     min-height: 0;
     overflow: auto;
@@ -3253,12 +3364,10 @@
     letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
     color: color-mix(in oklab, currentColor 72%, transparent);
   }
-  dialog > :is(h1, h2, h3, h4, h5, h6) + p,
-  .modal-header + .modal-content {
+  dialog > :is(h1, h2, h3, h4, h5, h6) + p {
     padding-top: 0;
   }
-  dialog > :is(form, nav):last-child,
-  .modal-footer {
+  dialog > :is(form, nav):last-child {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-end;
@@ -3270,11 +3379,7 @@
     border: 0;
     background: none;
   }
-  .modal-close {
-    cursor: pointer;
-  }
-  dialog.max,
-  .modal.max {
+  dialog.max {
     width: 100%;
     max-width: none;
     height: 100%;
@@ -3284,8 +3389,7 @@
     border-radius: 0;
   }
   dialog.bottom,
-  dialog.bottom-sheet,
-  .modal.bottom-sheet {
+  dialog.bottom-sheet {
     width: 100%;
     min-width: 0;
     max-width: none;
@@ -3294,8 +3398,7 @@
     border-radius: var(--md-comp-basic-dialog-container-shape) var(--md-comp-basic-dialog-container-shape) 0 0;
   }
   dialog.top,
-  dialog.top-sheet,
-  .modal.top-sheet {
+  dialog.top-sheet {
     width: 100%;
     min-width: 0;
     max-width: none;
@@ -3305,10 +3408,8 @@
   }
   dialog.left,
   dialog.left-sheet,
-  .modal.left-sheet,
   dialog.right,
-  dialog.right-sheet,
-  .modal.right-sheet {
+  dialog.right-sheet {
     float: none !important;
     width: min(var(--md-comp-basic-dialog-sheet-width), 85%);
     max-width: none;
@@ -3320,82 +3421,143 @@
     inset-block: 0;
   }
   dialog.left,
-  dialog.left-sheet,
-  .modal.left-sheet {
+  dialog.left-sheet {
     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,
-  .modal.right-sheet {
+  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 {
-    padding-left: 0;
-    list-style-type: none;
-    border-top: 1px solid var(--md-sys-color-outline-variant);
-    border-right: 1px solid var(--md-sys-color-outline-variant);
-    border-left: 1px solid var(--md-sys-color-outline-variant);
-    margin: 0.5rem 0 1rem 0;
+    --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);
   }
-  .collapsible-header {
+  .collapsible > details + details {
+    border-top: 1px solid var(--md-comp-collapsible-outline-color);
+  }
+  .collapsible summary {
     display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    padding: var(--md-comp-collapsible-header-padding);
+    border: 0;
+    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;
-    line-height: 1.5;
-    padding: 1rem;
-    border-bottom: 1px solid var(--md-sys-color-outline-variant);
   }
-  .collapsible-header:focus {
-    outline: 0;
+  .collapsible summary::-webkit-details-marker {
+    display: none;
+  }
+  .collapsible summary:focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
   }
-  .collapsible-header i {
+  .collapsible summary > i {
     width: 2rem;
+    margin-right: 1rem;
     font-size: 1.6rem;
-    display: inline-block;
+    line-height: 1;
     text-align: center;
-    margin-right: 1rem;
   }
-  .collapsible-header::after {
-    content: "\e5cf";
-    margin-left: 0.5rem;
-    font-family: "Material Symbols Outlined", "Material Symbols Rounded", "Material Symbols Sharp", "Material Icons";
-    font-size: 25px;
-    line-height: 0.9;
+  .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);
   }
-  .active .collapsible-header::after {
-    content: "\e5ce";
+  .collapsible details[open] > summary::after {
+    transform: rotate(180deg);
+    transition-timing-function: var(--md-comp-collapsible-easing-open);
   }
-  .keyboard-focused .collapsible-header:focus {
-    background-color: rgba(0, 0, 0, 0.12);
-  }
-  .collapsible-header-content {
+  .collapsible .collapsible-header-content {
     flex-grow: 1;
   }
-  .collapsible-body {
-    max-height: 0;
-    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  .collapsible details > :not(summary) {
+    display: grid;
+    grid-template-rows: 0fr;
     box-sizing: border-box;
-    padding: 0 2rem;
+    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;
   }
+  .collapsible details[open] > :not(summary) {
+    grid-template-rows: 1fr;
+    transition-timing-function: var(--md-comp-collapsible-easing-open);
+  }
+  .collapsible details:not([open]) > :not(summary) {
+    display: grid;
+  }
+  .collapsible.no-icon summary::after {
+    content: none;
+  }
   .collapsible.popout {
-    border: none;
-    box-shadow: none;
+    overflow: visible;
+    border: 0;
+    background: transparent;
+    box-shadow: none !important;
   }
-  .collapsible.popout > li {
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-    margin: 0 24px;
-    transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  .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);
+  }
+  .collapsible.popout > details + details {
+    border-top: 0;
+  }
+  .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);
   }
-  .collapsible.popout > li.active {
-    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
-    margin: 16px 0;
+  @media (prefers-reduced-motion: reduce) {
+    .collapsible {
+      --md-comp-collapsible-duration: 0s;
+    }
   }
   .chip {
     --font-size: 14px;
@@ -3435,7 +3597,7 @@
     object-fit: cover;
     border-radius: 12px;
   }
-  .chip > .material-icons {
+  .chip > :is(.material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
     font-size: var(--font-size-icon);
     color: var(--md-sys-color-on-surface-variant);
   }
@@ -3517,6 +3679,9 @@
     transition: opacity 0.4s;
     backface-visibility: hidden;
   }
+  .lightboxed:not(.circle) {
+    border-radius: 12px;
+  }
   .lightboxed:hover:not(.active) {
     opacity: 0.8;
   }
@@ -3547,64 +3712,232 @@
     z-index: 1000;
     -webkit-font-smoothing: antialiased;
   }
-  .parallax-container {
+  .parallax {
+    --md-comp-parallax-height: 500px;
+    --md-comp-parallax-travel: 120px;
+    --md-comp-parallax-shape: 12px;
     position: relative;
+    isolation: isolate;
     overflow: hidden;
-    height: 500px;
-  }
-  .parallax-container .parallax {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: -1;
+    box-sizing: border-box;
+    height: var(--md-comp-parallax-height);
+    margin: 0;
+    border-radius: var(--md-comp-parallax-shape);
+    view-timeline-name: --parallax;
+    view-timeline-axis: block;
   }
-  .parallax-container .parallax img {
-    opacity: 0;
+  .parallax > :is(img, video),
+  .parallax > picture {
     position: absolute;
-    left: 50%;
-    bottom: 0;
-    min-width: 100%;
-    min-height: 100%;
-    transform: translate3d(0, 0, 0);
-    transform: translateX(-50%);
+    inset: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
   }
-  .pin-top, .pin-bottom {
-    position: relative;
+  .parallax > picture img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
   }
-  .pinned {
-    position: fixed !important;
+  .parallax > :is(img, video),
+  .parallax > picture img {
+    object-fit: cover;
+    object-position: center;
   }
-  .display-docked {
+  .parallax > :is(h1, h2, h3, h4, h5, h6),
+  .parallax > p {
     position: absolute;
-    opacity: 0;
+    inset: 0;
+    z-index: 1;
+    display: grid;
+    place-items: center;
+    margin: 0;
+    padding: 24px;
+    color: var(--md-sys-color-on-surface);
+    text-align: center;
+  }
+  .parallax > figcaption {
+    position: absolute;
+    inset: auto 0 0;
+    z-index: 1;
+    margin: 0;
+    padding: 16px 24px;
+    color: var(--md-sys-color-on-surface);
+    background: color-mix(in oklab, var(--md-sys-color-surface) 72%, transparent);
+  }
+  .parallax.max {
+    height: 100vh;
+    height: 100dvh;
+    border-radius: 0;
+  }
+  @supports (animation-timeline: view()) {
+    @media (prefers-reduced-motion: no-preference) {
+      .parallax > :is(img, video),
+      .parallax > picture img {
+        height: calc(100% + 2 * var(--md-comp-parallax-travel));
+        inset: calc(-1 * var(--md-comp-parallax-travel)) 0 auto;
+        animation: parallax-shift linear both;
+        animation-timeline: --parallax;
+        animation-range: cover;
+      }
+    }
+  }
+  @keyframes parallax-shift {
+    from {
+      transform: translateY(var(--md-comp-parallax-travel));
+    }
+    to {
+      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;
   }
-  .page-footer {
+  footer:not(:has(> nav:only-child)) {
+    --md-comp-footer-padding-block: 3rem;
+    --md-comp-footer-padding-inline: 1rem;
+    --md-comp-footer-gap: 2rem;
+    --md-comp-footer-legal-height: 48px;
+    box-sizing: border-box;
     margin-top: 5rem;
-    padding-top: 3rem;
+    padding: var(--md-comp-footer-padding-block) var(--md-comp-footer-padding-inline) 1rem;
     border-top: 1px dashed var(--md-sys-color-outline-variant);
+    color: var(--md-sys-color-on-surface);
   }
-  .page-footer p {
-    color: var(--md-sys-color-outline);
+  footer:not(:has(> nav: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;
+    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);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   }
-  .page-footer a {
+  footer:not(:has(> nav:only-child)) a:not(.button, .circle, .extra) {
     color: var(--md-sys-color-primary);
+    text-decoration: none;
   }
-  .page-footer .footer-copyright,
-  .page-footer .footer-copyright a {
-    overflow: hidden;
-    min-height: 50px;
+  footer:not(:has(> nav: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) {
+    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;
+    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);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  }
+  footer:not(:has(> nav:only-child)) ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  footer:not(:has(> nav:only-child)).filled,
+  footer:not(:has(> nav:only-child)).surface {
+    background-color: var(--md-sys-color-surface-container);
+    border-top: 1px solid var(--md-sys-color-outline-variant);
+  }
+  footer:not(:has(> nav:only-child)) > .container,
+  footer:not(:has(> nav:only-child)):not(:has(> .container)) {
+    display: grid;
+    gap: var(--md-comp-footer-gap);
+    grid-template-columns: 1fr;
+  }
+  @media (width >= 601px) {
+    footer:not(:has(> nav:only-child)) > .container,
+    footer:not(:has(> nav:only-child)):not(:has(> .container)) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+  @media (width >= 993px) {
+    footer:not(:has(> nav:only-child)) > .container,
+    footer:not(:has(> nav:only-child)):not(:has(> .container)) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+  @media (width >= 1201px) {
+    footer:not(:has(> nav:only-child)) > .container,
+    footer:not(:has(> nav:only-child)):not(:has(> .container)) {
+      grid-template-columns: repeat(5, 1fr);
+    }
+  }
+  footer:not(:has(> nav:only-child)) > .container > .row,
+  footer:not(:has(> nav:only-child)) > .row {
+    grid-column: 1/-1;
+  }
+  footer:not(:has(> nav:only-child)) nav {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
+    min-width: 0;
+  }
+  footer:not(:has(> nav:only-child)) nav > a:not(.button, .circle, .extra),
+  footer:not(:has(> nav:only-child)) ul a:not(.button, .circle, .extra) {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: 48px;
+    padding: 0 12px;
+    margin-inline-start: -12px;
+    border-radius: 2rem;
+    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;
+  }
+  footer:not(:has(> nav:only-child)) nav > a:not(.button, .circle, .extra):hover,
+  footer:not(:has(> nav:only-child)) ul a:not(.button, .circle, .extra):hover {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+  }
+  footer:not(:has(> nav:only-child)) > small:last-child {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
-    padding: 10px 0px;
+    gap: 8px 16px;
+    box-sizing: border-box;
+    min-height: var(--md-comp-footer-legal-height);
+    margin: 0;
+    padding-block: 12px;
+    grid-column: 1/-1;
+    border-top: 1px solid var(--md-sys-color-outline-variant);
+    color: var(--md-sys-color-on-surface-variant);
+    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;
+    font-size: var(--md-sys-typescale-body-small-font-size);
+    font-weight: var(--md-sys-typescale-body-small-font-weight);
+    line-height: var(--md-sys-typescale-body-small-line-height);
+    letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   }
-  .page-footer ul {
-    padding-left: 0;
-    list-style-type: none;
+  footer:not(:has(> nav:only-child)) > small:last-child a:not(.button) {
+    color: var(--md-sys-color-primary);
+  }
+  body:has(> footer:not(:has(> nav:only-child))) {
+    min-height: 100dvh;
+    display: flex;
+    flex-direction: column;
+  }
+  body:has(> footer:not(:has(> nav:only-child))) > main {
+    flex: 1 0 auto;
   }
   ::placeholder {
     color: var(--md-sys-color-on-surface-variant);
@@ -3622,146 +3955,89 @@
     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;
   }
-  .field,
-  .input-field {
+  .field {
     --md-comp-filled-text-field-container-color: var(--md-sys-color-surface-variant);
+    --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);
     position: relative;
     clear: both;
   }
-  .field input:not([type=range]),
-  .field textarea,
-  .input-field input:not([type=range]),
-  .input-field textarea {
+  .field input:not([type=range], [type=checkbox], [type=radio], [type=file]),
+  .field textarea {
     box-sizing: border-box;
     padding: 20px 16px 8px;
     border: none;
-    border-radius: 4px 4px 0 0;
+    border-radius: var(--md-comp-filled-text-field-container-shape);
     border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
     background-color: var(--md-comp-filled-text-field-container-color);
     caret-color: var(--input-color);
   }
-  .field input:not([type=range]):focus:not([readonly]),
-  .field textarea:focus:not([readonly]),
-  .input-field input:not([type=range]):focus:not([readonly]),
-  .input-field textarea:focus:not([readonly]) {
+  .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):focus:not([readonly]),
+  .field textarea:focus:not([readonly]) {
     border-bottom-width: 2px;
     border-bottom-color: var(--input-color);
     padding-bottom: 7px;
   }
-  .field input:not([type=range]):disabled, .field input:not([type=range])[readonly=readonly],
+  .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):disabled, .field input:not([type=range], [type=checkbox], [type=radio], [type=file])[readonly=readonly],
   .field textarea:disabled,
-  .field textarea[readonly=readonly],
-  .input-field input:not([type=range]):disabled,
-  .input-field input:not([type=range])[readonly=readonly],
-  .input-field textarea:disabled,
-  .input-field textarea[readonly=readonly] {
+  .field textarea[readonly=readonly] {
     color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
     border-color: color-mix(in oklab, var(--md-sys-color-on-surface) 12%, transparent);
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 4%, transparent);
   }
-  .field input:not([type=range]):focus:not([readonly]) + label, .field input:not([type=range]):focus:not([readonly]) + span:not(.supporting-text, .character-counter),
+  .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):focus:not([readonly]) + label, .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):focus:not([readonly]) + span:not(.supporting-text, .character-counter, .caret),
   .field textarea:focus:not([readonly]) + label,
-  .field textarea:focus:not([readonly]) + span:not(.supporting-text, .character-counter),
-  .input-field input:not([type=range]):focus:not([readonly]) + label,
-  .input-field input:not([type=range]):focus:not([readonly]) + span:not(.supporting-text, .character-counter),
-  .input-field textarea:focus:not([readonly]) + label,
-  .input-field textarea:focus:not([readonly]) + span:not(.supporting-text, .character-counter) {
+  .field textarea:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .caret) {
     color: var(--input-color);
   }
-  .field input:not([type=range]):focus:not([readonly]) + label, .field input:not([type=range]):not([placeholder=" "]) + label, .field input:not([type=range]):not(:placeholder-shown) + label, .field input:not([type=range]):focus:not([readonly]) + span:not(.supporting-text, .character-counter), .field input:not([type=range]):not([placeholder=" "]) + span:not(.supporting-text, .character-counter), .field input:not([type=range]):not(:placeholder-shown) + span:not(.supporting-text, .character-counter),
+  .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):focus:not([readonly]) + label, .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):not([placeholder=" "]) + label, .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):not(:placeholder-shown) + label, .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):focus:not([readonly]) + span:not(.supporting-text, .character-counter, .caret), .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):not([placeholder=" "]) + span:not(.supporting-text, .character-counter, .caret), .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):not(:placeholder-shown) + span:not(.supporting-text, .character-counter, .caret),
   .field textarea:focus:not([readonly]) + label,
   .field textarea:not([placeholder=" "]) + label,
   .field textarea:not(:placeholder-shown) + label,
-  .field textarea:focus:not([readonly]) + span:not(.supporting-text, .character-counter),
-  .field textarea:not([placeholder=" "]) + span:not(.supporting-text, .character-counter),
-  .field textarea:not(:placeholder-shown) + span:not(.supporting-text, .character-counter),
-  .input-field input:not([type=range]):focus:not([readonly]) + label,
-  .input-field input:not([type=range]):not([placeholder=" "]) + label,
-  .input-field input:not([type=range]):not(:placeholder-shown) + label,
-  .input-field input:not([type=range]):focus:not([readonly]) + span:not(.supporting-text, .character-counter),
-  .input-field input:not([type=range]):not([placeholder=" "]) + span:not(.supporting-text, .character-counter),
-  .input-field input:not([type=range]):not(:placeholder-shown) + span:not(.supporting-text, .character-counter),
-  .input-field textarea:focus:not([readonly]) + label,
-  .input-field textarea:not([placeholder=" "]) + label,
-  .input-field textarea:not(:placeholder-shown) + label,
-  .input-field textarea:focus:not([readonly]) + span:not(.supporting-text, .character-counter),
-  .input-field textarea:not([placeholder=" "]) + span:not(.supporting-text, .character-counter),
-  .input-field textarea:not(:placeholder-shown) + span:not(.supporting-text, .character-counter) {
+  .field textarea:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .caret),
+  .field textarea:not([placeholder=" "]) + span:not(.supporting-text, .character-counter, .caret),
+  .field textarea:not(:placeholder-shown) + span:not(.supporting-text, .character-counter, .caret) {
     transform: scale(0.75);
     top: 8px;
   }
-  .field input:not([type=range]):disabled + label, .field input:not([type=range])[readonly=readonly] + label,
+  .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):disabled + label, .field input:not([type=range], [type=checkbox], [type=radio], [type=file])[readonly=readonly] + label,
   .field textarea:disabled + label,
-  .field textarea[readonly=readonly] + label,
-  .input-field input:not([type=range]):disabled + label,
-  .input-field input:not([type=range])[readonly=readonly] + label,
-  .input-field textarea:disabled + label,
-  .input-field textarea[readonly=readonly] + label {
+  .field textarea[readonly=readonly] + label {
     color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
   }
-  .field input:not([type=range]).invalid ~ .supporting-text[data-error] > span, .field input:not([type=range])[aria-invalid=true] ~ .supporting-text[data-error] > span, .field input:not([type=range]).invalid ~ small[data-error] > span, .field input:not([type=range])[aria-invalid=true] ~ small[data-error] > span,
+  .field input:not([type=range], [type=checkbox], [type=radio], [type=file]).invalid ~ .supporting-text[data-error] > span, .field input:not([type=range], [type=checkbox], [type=radio], [type=file])[aria-invalid=true] ~ .supporting-text[data-error] > span, .field input:not([type=range], [type=checkbox], [type=radio], [type=file]).invalid ~ small[data-error] > span, .field input:not([type=range], [type=checkbox], [type=radio], [type=file])[aria-invalid=true] ~ small[data-error] > span,
   .field textarea.invalid ~ .supporting-text[data-error] > span,
   .field textarea[aria-invalid=true] ~ .supporting-text[data-error] > span,
   .field textarea.invalid ~ small[data-error] > span,
-  .field textarea[aria-invalid=true] ~ small[data-error] > span,
-  .input-field input:not([type=range]).invalid ~ .supporting-text[data-error] > span,
-  .input-field input:not([type=range])[aria-invalid=true] ~ .supporting-text[data-error] > span,
-  .input-field input:not([type=range]).invalid ~ small[data-error] > span,
-  .input-field input:not([type=range])[aria-invalid=true] ~ small[data-error] > span,
-  .input-field textarea.invalid ~ .supporting-text[data-error] > span,
-  .input-field textarea[aria-invalid=true] ~ .supporting-text[data-error] > span,
-  .input-field textarea.invalid ~ small[data-error] > span,
-  .input-field textarea[aria-invalid=true] ~ small[data-error] > span {
+  .field textarea[aria-invalid=true] ~ small[data-error] > span {
     display: none;
   }
-  .field input:not([type=range]).invalid, .field input:not([type=range])[aria-invalid=true],
+  .field input:not([type=range], [type=checkbox], [type=radio], [type=file]).invalid, .field input:not([type=range], [type=checkbox], [type=radio], [type=file])[aria-invalid=true],
   .field textarea.invalid,
-  .field textarea[aria-invalid=true],
-  .input-field input:not([type=range]).invalid,
-  .input-field input:not([type=range])[aria-invalid=true],
-  .input-field textarea.invalid,
-  .input-field textarea[aria-invalid=true] {
+  .field textarea[aria-invalid=true] {
     border-bottom-color: var(--md-sys-color-error);
     box-shadow: 0 1px 0 0 var(--md-sys-color-error);
   }
-  .field input:not([type=range]).invalid ~ .supporting-text::after, .field input:not([type=range])[aria-invalid=true] ~ .supporting-text::after, .field input:not([type=range]).invalid ~ small::after, .field input:not([type=range])[aria-invalid=true] ~ small::after,
+  .field input:not([type=range], [type=checkbox], [type=radio], [type=file]).invalid ~ .supporting-text::after, .field input:not([type=range], [type=checkbox], [type=radio], [type=file])[aria-invalid=true] ~ .supporting-text::after, .field input:not([type=range], [type=checkbox], [type=radio], [type=file]).invalid ~ small::after, .field input:not([type=range], [type=checkbox], [type=radio], [type=file])[aria-invalid=true] ~ small::after,
   .field textarea.invalid ~ .supporting-text::after,
   .field textarea[aria-invalid=true] ~ .supporting-text::after,
   .field textarea.invalid ~ small::after,
-  .field textarea[aria-invalid=true] ~ small::after,
-  .input-field input:not([type=range]).invalid ~ .supporting-text::after,
-  .input-field input:not([type=range])[aria-invalid=true] ~ .supporting-text::after,
-  .input-field input:not([type=range]).invalid ~ small::after,
-  .input-field input:not([type=range])[aria-invalid=true] ~ small::after,
-  .input-field textarea.invalid ~ .supporting-text::after,
-  .input-field textarea[aria-invalid=true] ~ .supporting-text::after,
-  .input-field textarea.invalid ~ small::after,
-  .input-field textarea[aria-invalid=true] ~ small::after {
+  .field textarea[aria-invalid=true] ~ small::after {
     content: attr(data-error);
     color: var(--md-sys-color-error);
   }
-  .field input:not([type=range]).invalid ~ label, .field input:not([type=range]):focus.invalid ~ label, .field input:not([type=range])[aria-invalid=true] ~ label,
+  .field input:not([type=range], [type=checkbox], [type=radio], [type=file]).invalid ~ label, .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):focus.invalid ~ label, .field input:not([type=range], [type=checkbox], [type=radio], [type=file])[aria-invalid=true] ~ label,
   .field textarea.invalid ~ label,
   .field textarea:focus.invalid ~ label,
-  .field textarea[aria-invalid=true] ~ label,
-  .input-field input:not([type=range]).invalid ~ label,
-  .input-field input:not([type=range]):focus.invalid ~ label,
-  .input-field input:not([type=range])[aria-invalid=true] ~ label,
-  .input-field textarea.invalid ~ label,
-  .input-field textarea:focus.invalid ~ label,
-  .input-field textarea[aria-invalid=true] ~ label {
+  .field textarea[aria-invalid=true] ~ label {
     color: var(--md-sys-color-error);
   }
-  .field input::placeholder,
-  .input-field input::placeholder {
+  .field input::placeholder {
     user-select: none;
   }
   .field > label,
-  .field > span:not(.supporting-text, .character-counter, .file-path),
-  .input-field > label,
-  .input-field > span:not(.supporting-text, .character-counter, .file-path) {
+  .field > span:not(.supporting-text, .character-counter, .file-path, .caret) {
     color: var(--md-sys-color-on-surface-variant);
     user-select: none;
     position: absolute;
@@ -3779,9 +4055,7 @@
     transition: left 0.2s ease-out, top 0.2s ease-out, transform 0.2s ease-out, color 0.2s ease-out;
   }
   .field > small,
-  .field > .supporting-text,
-  .input-field > small,
-  .input-field > .supporting-text {
+  .field > .supporting-text {
     display: block;
     margin-top: 4px;
     padding: 0 16px;
@@ -3793,8 +4067,7 @@
     letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   }
-  .field > .character-counter,
-  .input-field > .character-counter {
+  .field > .character-counter {
     float: right;
     margin-top: 4px;
     padding: 0 16px;
@@ -3806,12 +4079,8 @@
     letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   }
-  .field > i:first-child:not(.suffix),
-  .field > .prefix,
-  .input-field > i:first-child:not(.suffix),
-  .input-field > .prefix {
+  .field > i:is(.prefix, .suffix, :first-of-type, :last-of-type, :last-child) {
     position: absolute;
-    left: 12px;
     top: 16px;
     display: flex;
     align-items: center;
@@ -3821,114 +4090,48 @@
     line-height: 24px;
     color: var(--md-sys-color-on-surface-variant);
     user-select: none;
+  }
+  .field > i:first-of-type:not(.suffix):not(:last-child),
+  .field > i.prefix {
+    left: 12px;
     pointer-events: none;
   }
-  .field > .suffix,
   .field > i.suffix,
-  .input-field > .suffix,
-  .input-field > i.suffix {
-    position: absolute;
+  .field > i:last-of-type:not(:first-of-type),
+  .field > i:last-child:not(:first-child):not(.prefix) {
     right: 12px;
-    top: 16px;
-    display: flex;
-    align-items: center;
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
-    color: var(--md-sys-color-on-surface-variant);
-    user-select: none;
   }
-  .field > i:first-child:not(.suffix) ~ input,
-  .field > i:first-child:not(.suffix) ~ textarea,
-  .field > .prefix ~ input,
-  .field > .prefix ~ textarea,
-  .input-field > i:first-child:not(.suffix) ~ input,
-  .input-field > i:first-child:not(.suffix) ~ textarea,
-  .input-field > .prefix ~ input,
-  .input-field > .prefix ~ textarea {
+  .field:has(> i:first-of-type:not(.suffix):not(:last-child), > i.prefix) > :is(input, textarea) {
     padding-left: 52px;
   }
-  .field > .suffix ~ input,
-  .field > .suffix ~ textarea,
-  .field > i.suffix ~ input,
-  .field > i.suffix ~ textarea,
-  .input-field > .suffix ~ input,
-  .input-field > .suffix ~ textarea,
-  .input-field > i.suffix ~ input,
-  .input-field > i.suffix ~ textarea {
-    padding-right: 52px;
-  }
-  .field > i:first-child:not(.suffix) ~ label,
-  .field > i:first-child:not(.suffix) ~ span:not(.supporting-text, .character-counter),
-  .field > .prefix ~ label,
-  .input-field > i:first-child:not(.suffix) ~ label,
-  .input-field > i:first-child:not(.suffix) ~ span:not(.supporting-text, .character-counter),
-  .input-field > .prefix ~ label {
+  .field:has(> i:first-of-type:not(.suffix):not(:last-child), > i.prefix) > :is(label, span:not(.supporting-text, .character-counter, .file-path, .caret)) {
     left: 52px;
   }
+  .field:has(> i.suffix, > i:last-of-type:not(:first-of-type), > i:last-child:not(:first-child):not(.prefix)) > :is(input, textarea) {
+    padding-right: 52px;
+  }
   .field.outlined > input,
-  .field.outlined > textarea, .field.border > input,
-  .field.border > textarea,
-  .input-field.outlined > input,
-  .input-field.outlined > textarea,
-  .input-field.border > input,
-  .input-field.border > textarea {
+  .field.outlined > textarea {
     padding-top: 8px;
     padding-bottom: 8px;
     background-color: transparent;
     border: 1px solid var(--md-sys-color-outline);
-    border-radius: 4px;
+    border-radius: var(--md-comp-filled-text-field-container-shape);
   }
   .field.outlined > input:focus:not([readonly]),
-  .field.outlined > textarea:focus:not([readonly]), .field.border > input:focus:not([readonly]),
-  .field.border > textarea:focus:not([readonly]),
-  .input-field.outlined > input:focus:not([readonly]),
-  .input-field.outlined > textarea:focus:not([readonly]),
-  .input-field.border > input:focus:not([readonly]),
-  .input-field.border > textarea:focus:not([readonly]) {
+  .field.outlined > textarea:focus:not([readonly]) {
     border-width: 2px;
     border-color: var(--input-color);
     padding-top: 7px;
     padding-bottom: 7px;
   }
-  .field.outlined > input:focus:not([readonly]) + label, .field.outlined > input:not([placeholder=" "]) + label, .field.outlined > input:not(:placeholder-shown) + label, .field.outlined > input:focus:not([readonly]) + span:not(.supporting-text, .character-counter), .field.outlined > input:not([placeholder=" "]) + span:not(.supporting-text, .character-counter), .field.outlined > input:not(:placeholder-shown) + span:not(.supporting-text, .character-counter),
+  .field.outlined > input:focus:not([readonly]) + label, .field.outlined > input:not([placeholder=" "]) + label, .field.outlined > input:not(:placeholder-shown) + label, .field.outlined > input:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .caret), .field.outlined > input:not([placeholder=" "]) + span:not(.supporting-text, .character-counter, .caret), .field.outlined > input:not(:placeholder-shown) + span:not(.supporting-text, .character-counter, .caret),
   .field.outlined > textarea:focus:not([readonly]) + label,
   .field.outlined > textarea:not([placeholder=" "]) + label,
   .field.outlined > textarea:not(:placeholder-shown) + label,
-  .field.outlined > textarea:focus:not([readonly]) + span:not(.supporting-text, .character-counter),
-  .field.outlined > textarea:not([placeholder=" "]) + span:not(.supporting-text, .character-counter),
-  .field.outlined > textarea:not(:placeholder-shown) + span:not(.supporting-text, .character-counter), .field.border > input:focus:not([readonly]) + label, .field.border > input:not([placeholder=" "]) + label, .field.border > input:not(:placeholder-shown) + label, .field.border > input:focus:not([readonly]) + span:not(.supporting-text, .character-counter), .field.border > input:not([placeholder=" "]) + span:not(.supporting-text, .character-counter), .field.border > input:not(:placeholder-shown) + span:not(.supporting-text, .character-counter),
-  .field.border > textarea:focus:not([readonly]) + label,
-  .field.border > textarea:not([placeholder=" "]) + label,
-  .field.border > textarea:not(:placeholder-shown) + label,
-  .field.border > textarea:focus:not([readonly]) + span:not(.supporting-text, .character-counter),
-  .field.border > textarea:not([placeholder=" "]) + span:not(.supporting-text, .character-counter),
-  .field.border > textarea:not(:placeholder-shown) + span:not(.supporting-text, .character-counter),
-  .input-field.outlined > input:focus:not([readonly]) + label,
-  .input-field.outlined > input:not([placeholder=" "]) + label,
-  .input-field.outlined > input:not(:placeholder-shown) + label,
-  .input-field.outlined > input:focus:not([readonly]) + span:not(.supporting-text, .character-counter),
-  .input-field.outlined > input:not([placeholder=" "]) + span:not(.supporting-text, .character-counter),
-  .input-field.outlined > input:not(:placeholder-shown) + span:not(.supporting-text, .character-counter),
-  .input-field.outlined > textarea:focus:not([readonly]) + label,
-  .input-field.outlined > textarea:not([placeholder=" "]) + label,
-  .input-field.outlined > textarea:not(:placeholder-shown) + label,
-  .input-field.outlined > textarea:focus:not([readonly]) + span:not(.supporting-text, .character-counter),
-  .input-field.outlined > textarea:not([placeholder=" "]) + span:not(.supporting-text, .character-counter),
-  .input-field.outlined > textarea:not(:placeholder-shown) + span:not(.supporting-text, .character-counter),
-  .input-field.border > input:focus:not([readonly]) + label,
-  .input-field.border > input:not([placeholder=" "]) + label,
-  .input-field.border > input:not(:placeholder-shown) + label,
-  .input-field.border > input:focus:not([readonly]) + span:not(.supporting-text, .character-counter),
-  .input-field.border > input:not([placeholder=" "]) + span:not(.supporting-text, .character-counter),
-  .input-field.border > input:not(:placeholder-shown) + span:not(.supporting-text, .character-counter),
-  .input-field.border > textarea:focus:not([readonly]) + label,
-  .input-field.border > textarea:not([placeholder=" "]) + label,
-  .input-field.border > textarea:not(:placeholder-shown) + label,
-  .input-field.border > textarea:focus:not([readonly]) + span:not(.supporting-text, .character-counter),
-  .input-field.border > textarea:not([placeholder=" "]) + span:not(.supporting-text, .character-counter),
-  .input-field.border > textarea:not(:placeholder-shown) + span:not(.supporting-text, .character-counter) {
+  .field.outlined > textarea:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .caret),
+  .field.outlined > textarea:not([placeholder=" "]) + span:not(.supporting-text, .character-counter, .caret),
+  .field.outlined > textarea:not(:placeholder-shown) + span:not(.supporting-text, .character-counter, .caret) {
     top: -8px;
     left: 16px;
     margin-left: -4px;
@@ -3937,40 +4140,20 @@
   }
   .field.outlined > input:disabled, .field.outlined > input[readonly=readonly],
   .field.outlined > textarea:disabled,
-  .field.outlined > textarea[readonly=readonly], .field.border > input:disabled, .field.border > input[readonly=readonly],
-  .field.border > textarea:disabled,
-  .field.border > textarea[readonly=readonly],
-  .input-field.outlined > input:disabled,
-  .input-field.outlined > input[readonly=readonly],
-  .input-field.outlined > textarea:disabled,
-  .input-field.outlined > textarea[readonly=readonly],
-  .input-field.border > input:disabled,
-  .input-field.border > input[readonly=readonly],
-  .input-field.border > textarea:disabled,
-  .input-field.border > textarea[readonly=readonly] {
+  .field.outlined > textarea[readonly=readonly] {
     border-color: color-mix(in oklab, var(--md-sys-color-on-surface) 12%, transparent);
     background-color: transparent;
   }
   .field.outlined > input.invalid, .field.outlined > input[aria-invalid=true],
   .field.outlined > textarea.invalid,
-  .field.outlined > textarea[aria-invalid=true], .field.border > input.invalid, .field.border > input[aria-invalid=true],
-  .field.border > textarea.invalid,
-  .field.border > textarea[aria-invalid=true],
-  .input-field.outlined > input.invalid,
-  .input-field.outlined > input[aria-invalid=true],
-  .input-field.outlined > textarea.invalid,
-  .input-field.outlined > textarea[aria-invalid=true],
-  .input-field.border > input.invalid,
-  .input-field.border > input[aria-invalid=true],
-  .input-field.border > textarea.invalid,
-  .input-field.border > textarea[aria-invalid=true] {
+  .field.outlined > textarea[aria-invalid=true] {
     border-color: var(--md-sys-color-error);
     box-shadow: none;
   }
   .inline {
     display: inline-block;
   }
-  .searchbar .prefix {
+  .searchbar > i:first-child {
     position: absolute;
     padding-left: 1rem;
     top: 0;
@@ -4460,17 +4643,20 @@
     border: 2px solid var(--md-sys-color-outline);
     border-radius: 16px;
     background-color: var(--md-sys-color-surface-variant);
-    background-image: radial-gradient(circle, var(--md-sys-color-outline) 0 8px, transparent 8.5px);
+    background-image: radial-gradient(circle closest-side, var(--md-sys-color-outline) 100%, transparent 101%);
     background-repeat: no-repeat;
-    background-position: 8px center;
+    background-origin: padding-box;
+    background-size: var(--md-comp-switch-handle-unselected) var(--md-comp-switch-handle-unselected);
+    background-position: 6px 50%;
     cursor: pointer;
     transition: background-color 0.2s ease, background-position 0.2s ease, background-size 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
   }
   .switch [type=checkbox]:not(:has(+ .lever)):not(:has(+ span)):checked {
     border-color: var(--md-sys-color-primary);
     background-color: var(--md-sys-color-primary);
-    background-image: radial-gradient(circle, var(--md-sys-color-on-primary) 0 12px, transparent 12.5px);
-    background-position: calc(100% - 14px) center;
+    background-image: radial-gradient(circle closest-side, var(--md-sys-color-on-primary) 100%, transparent 101%);
+    background-size: var(--md-comp-switch-handle-selected) var(--md-comp-switch-handle-selected);
+    background-position: calc(var(--md-comp-switch-track-width) - 4px - 2px - var(--md-comp-switch-handle-selected)) 50%;
   }
   .switch [type=checkbox]:not(:has(+ .lever)):not(:has(+ span)):hover {
     box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
@@ -4598,82 +4784,166 @@
     top: 4px;
     left: 24px;
   }
-  select.browser-default {
-    opacity: 1;
-    color: var(--md-sys-color-on-background);
-  }
   select {
-    background-color: var(--md-sys-color-surface);
+    --md-comp-filled-select-container-color: var(--md-sys-color-surface-variant);
+    --md-comp-filled-select-container-shape: 1rem;
+    --md-comp-filled-select-input-text-color: var(--md-sys-color-on-surface);
+    box-sizing: border-box;
     width: 100%;
-    padding: 5px;
-    border: 1px solid var(--md-sys-color-outline-variant);
-    border-radius: 2px;
-    height: 3rem;
+    height: 56px;
+    margin: 0;
+    padding: 16px 12px;
+    border: 1px solid var(--md-sys-color-outline);
+    border-radius: var(--md-comp-filled-select-container-shape);
+    background-color: var(--md-comp-filled-select-container-color);
+    color: var(--md-comp-filled-select-input-text-color);
+    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);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   }
-  .select-wrapper:focus-within {
+  select:focus {
     outline: 2px solid var(--md-sys-color-primary);
-    border-radius: 4px;
+    outline-offset: 2px;
+    border-color: var(--md-sys-color-primary);
+  }
+  select:disabled {
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+    border-color: color-mix(in oklab, var(--md-sys-color-on-surface) 12%, transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 4%, transparent);
+  }
+  select.browser-default {
+    opacity: 1;
+  }
+  @supports (appearance: base-select) {
+    select.browser-default,
+    select.browser-default::picker(select) {
+      appearance: base-select;
+    }
+    select.browser-default::picker(select) {
+      border: none;
+      border-radius: var(--md-comp-menu-container-shape, 1rem);
+      background-color: var(--md-sys-color-surface);
+      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);
+    }
   }
-  .select-wrapper {
+  .field:has(> .hide-select) {
+    --md-comp-filled-select-container-shape: 1rem;
+    --md-comp-menu-container-shape: 1rem;
+    --md-comp-filled-select-trailing-icon-size: 24px;
+    --md-comp-filled-select-trailing-icon-color: var(--md-sys-color-on-surface-variant);
+    --md-comp-menu-item-leading-image-size: 40px;
     position: relative;
+    border-radius: var(--md-comp-filled-select-container-shape);
+  }
+  .field:has(> .hide-select) > input.dropdown-trigger {
+    border-radius: inherit;
   }
-  .select-wrapper .caret {
+  .field:has(> .hide-select) > input.dropdown-trigger {
+    padding-inline-end: 52px;
+  }
+  .field:has(> .hide-select) .caret {
     position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    margin: auto 0;
-    z-index: 0;
-    fill: var(--md-sys-color-on-background);
+    inset-block-start: 16px;
+    inset-inline-start: auto;
+    left: auto;
+    inset-inline-end: 12px;
+    z-index: 1;
+    width: var(--md-comp-filled-select-trailing-icon-size);
+    height: var(--md-comp-filled-select-trailing-icon-size);
+    margin: 0;
     pointer-events: none;
+    background-color: var(--md-comp-filled-select-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='M7 10l5 5 5-5z'/%3E%3C/svg%3E") center/24px no-repeat;
+    transition: transform 0.2s ease;
   }
-  .select-wrapper .hide-select {
-    width: 0;
-    height: 0;
-    overflow: hidden;
+  .field:has(> .hide-select):has(> input[aria-expanded=true]) .caret, .field:has(> .hide-select):has(> menu:popover-open) .caret {
+    transform: rotate(180deg);
+  }
+  .field:has(> .hide-select) .hide-select {
     position: absolute;
-    top: 0;
+    inset: 0;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
     z-index: -1;
   }
-  select:disabled {
-    color: var(--md-sys-color-on-surface);
+  .field:has(> .hide-select) .hide-select select {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    border: 0;
   }
-  .select-wrapper.disabled + label {
-    color: var(--md-sys-color-on-surface);
+  .field:has(> .hide-select).disabled .caret {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
   }
-  .select-wrapper.disabled .caret {
-    fill: var(--md-sys-color-on-surface);
+  .field:has(> .hide-select).disabled + label,
+  .field:has(> .hide-select).disabled > label {
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
   }
-  .select-wrapper input.select-dropdown:disabled {
-    color: var(--md-sys-color-on-surface);
+  .field:has(> .hide-select) > input.dropdown-trigger:disabled {
     cursor: default;
     user-select: none;
   }
-  .select-wrapper i {
-    color: var(--md-sys-color-on-surface);
+  menu[role=listbox] > li.disabled,
+  menu[role=listbox] > li.disabled > span,
+  menu[role=listbox] > li.optgroup {
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
   }
-  .select-dropdown li.disabled,
-  .select-dropdown li.disabled > span,
-  .select-dropdown li.optgroup {
-    color: var(--md-sys-color-on-surface);
+  menu[role=listbox] > li:not(.optgroup, .divider) {
+    display: flex;
+    align-items: center;
   }
-  .select-dropdown li img {
-    height: 40px;
-    width: 40px;
-    margin: 5px 15px;
-    float: right;
+  menu[role=listbox] > li.selected:not(.disabled, .optgroup) {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
+  }
+  menu[role=listbox]:not(.multiple-select-dropdown) > li.selected:not(.disabled, .optgroup)::after {
+    content: "";
+    flex: 0 0 24px;
+    width: 24px;
+    height: 24px;
+    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;
+  }
+  menu[role=listbox] li img {
+    box-sizing: border-box;
+    flex: 0 0 var(--md-comp-menu-item-leading-image-size);
+    width: var(--md-comp-menu-item-leading-image-size);
+    height: var(--md-comp-menu-item-leading-image-size);
+    margin: 4px 12px;
+    object-fit: cover;
+    border-radius: 4px;
+    order: 1;
+    margin-inline-start: auto;
   }
-  .select-dropdown li.optgroup {
-    border-top: 1px solid rgba(0, 0, 0, 0.04);
+  menu[role=listbox] li img.left {
+    order: 0;
+    margin-inline-start: 12px;
+    margin-inline-end: 0;
   }
-  .select-dropdown li.optgroup.selected > span {
-    color: var(--md-sys-color-on-background);
+  menu[role=listbox] li.optgroup {
+    cursor: default;
+    pointer-events: none;
   }
-  .select-dropdown li.optgroup > span {
+  menu[role=listbox] li.optgroup:not(:first-child) {
+    border-top: 1px solid var(--md-sys-color-outline-variant);
+  }
+  menu[role=listbox] li.optgroup > span {
     color: var(--md-sys-color-on-surface-variant);
   }
-  .select-dropdown li.optgroup ~ li.optgroup-option {
-    padding-left: 1rem;
+  menu[role=listbox] li.optgroup-option {
+    padding-inline-start: 1rem;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .field:has(> .hide-select) .caret {
+      transition: none;
+    }
   }
   .file-field {
     display: grid;
@@ -5061,15 +5331,17 @@
       transparent
     );
   }
-  select:focus {
-    outline: 1px solid var(--md-ref-palette-primary80);
-  }
   label {
     font-size: 0.8rem;
     color: var(--md-sys-color-on-surface-variant);
   }
   .table-of-contents {
+    --md-comp-toc-label-color: var(--md-sys-color-on-surface-variant);
+    --md-comp-toc-active-color: var(--md-sys-color-primary);
+    --md-comp-toc-indicator: 2px;
     list-style: none;
+    margin: 0;
+    padding: 0;
   }
   .table-of-contents.fixed {
     position: fixed;
@@ -5078,129 +5350,212 @@
     padding: 0;
   }
   .table-of-contents a {
-    display: inline-block;
-    font-weight: 400;
-    color: var(--md-sys-color-secondary);
-    padding-left: 16px;
-    height: 2rem;
-    line-height: 2rem;
-    border-left: 1px solid var(--md-sys-color-outline-variant);
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: 2rem;
+    padding-inline-start: 16px;
+    border-inline-start: var(--md-comp-toc-indicator) solid transparent;
+    color: var(--md-comp-toc-label-color);
+    text-decoration: 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);
+  }
+  .table-of-contents a:focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
   }
   .table-of-contents a:hover {
-    color: var(--md-sys-color-on-background);
-    padding-left: 15px;
+    color: var(--md-comp-toc-active-color);
   }
-  .table-of-contents a.active {
-    color: var(--md-sys-color-primary);
+  .table-of-contents a:is(.active, [aria-current=true]) {
+    color: var(--md-comp-toc-active-color);
     font-weight: 500;
-    padding-left: 14px;
-    border-left: 2px solid var(--md-sys-color-primary);
+    border-inline-start-color: var(--md-comp-toc-active-color);
   }
-  .sidenav {
-    --sidenav-width: 300px;
-    --sidenav-font-size: 14px;
-    --sidenav-padding: 16px;
-    --sidenav-item-height: 48px;
-    --sidenav-line-height: var(--sidenav-item-height);
-    position: fixed;
-    width: var(--sidenav-width);
-    left: 0;
-    top: 0;
-    margin: 0;
-    transform: translateX(-100%);
-    height: 100vh;
-    padding: 0;
-    z-index: 999;
+  .scrollspy {
+    --md-comp-scrollspy-offset: 200px;
+    scroll-margin-block-start: var(--md-comp-scrollspy-offset);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    html:has(.scrollspy) {
+      scroll-behavior: smooth;
+    }
+  }
+  :root {
+    --md-comp-nav-drawer-width: 300px;
+  }
+  dialog.sidenav-overlay,
+  dialog.sidenav {
+    --md-comp-nav-drawer-item-height: 48px;
+    --md-comp-nav-drawer-duration: 250ms;
+    --md-comp-nav-drawer-easing: ease;
+    --md-comp-nav-drawer-shift: 0px;
+    --md-comp-nav-drawer-open: 1;
+    --md-comp-nav-drawer-font-size: 14px;
+    --md-comp-nav-drawer-padding: 16px;
+    --md-comp-nav-drawer-line-height: var(--md-comp-nav-drawer-item-height);
+    box-sizing: border-box;
+    width: var(--md-comp-nav-drawer-width);
+    min-width: 0;
+    max-width: none;
+    max-height: none;
+    height: 100dvh;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    inset: 0 auto 0 0;
+    overflow: hidden;
+    color: var(--md-sys-color-on-surface);
+    background-color: var(--md-sys-color-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);
+    transform: translateX(calc(-100% + var(--md-comp-nav-drawer-shift)));
+    transition: transform var(--md-comp-nav-drawer-duration) var(--md-comp-nav-drawer-easing), display var(--md-comp-nav-drawer-duration) allow-discrete, overlay var(--md-comp-nav-drawer-duration) allow-discrete;
+  }
+  dialog.sidenav-overlay:modal,
+  dialog.sidenav:modal {
+    display: flex;
+    flex-direction: column;
+    transform: translateX(var(--md-comp-nav-drawer-shift));
+  }
+  dialog.sidenav-overlay.right-aligned,
+  dialog.sidenav.right-aligned {
+    inset: 0 0 0 auto;
+    transform: translateX(calc(100% - var(--md-comp-nav-drawer-shift)));
+  }
+  dialog.sidenav-overlay.right-aligned:modal,
+  dialog.sidenav.right-aligned:modal {
+    transform: translateX(calc(-1 * var(--md-comp-nav-drawer-shift)));
+  }
+  dialog.sidenav-overlay.dragging,
+  dialog.sidenav.dragging {
+    transition: none;
+  }
+  dialog.sidenav-overlay::backdrop,
+  dialog.sidenav::backdrop {
+    background-color: color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
+    opacity: var(--md-comp-nav-drawer-open, 1);
+    backdrop-filter: none;
+    transition: opacity var(--md-comp-nav-drawer-duration) var(--md-comp-nav-drawer-easing), display var(--md-comp-nav-drawer-duration) allow-discrete, overlay var(--md-comp-nav-drawer-duration) allow-discrete;
+  }
+  @starting-style {
+    :is(dialog.sidenav-overlay, dialog.sidenav):modal {
+      transform: translateX(-100%);
+    }
+    :is(dialog.sidenav-overlay, dialog.sidenav).right-aligned:modal {
+      transform: translateX(100%);
+    }
+    :is(dialog.sidenav-overlay, dialog.sidenav):modal::backdrop {
+      opacity: 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    dialog.sidenav-overlay,
+    dialog.sidenav {
+      transition: none;
+    }
+    dialog.sidenav-overlay::backdrop,
+    dialog.sidenav::backdrop {
+      transition: none;
+    }
+  }
+  @media (width >= 993px) {
+    dialog.sidenav-overlay:has(> .sidenav-fixed):not(:modal) {
+      display: contents;
+    }
+  }
+  .sidenav {
+    --md-comp-nav-drawer-item-height: 48px;
+    --md-comp-nav-drawer-font-size: 14px;
+    --md-comp-nav-drawer-padding: 16px;
+    --md-comp-nav-drawer-line-height: var(--md-comp-nav-drawer-item-height);
+    box-sizing: border-box;
+    position: fixed;
+    width: var(--md-comp-nav-drawer-width);
+    inset: 0 auto 0 0;
+    margin: 0;
+    padding: 0;
+    height: 100dvh;
+    z-index: 999;
     overflow-y: auto;
-    will-change: transform;
-    backface-visibility: hidden;
-    transform: translateX(-105%);
+    overscroll-behavior: contain;
     user-select: none;
-    color: var(--md-sys-color-on-secondary-container);
+    color: var(--md-sys-color-on-surface);
     background-color: var(--md-sys-color-surface);
+    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);
   }
   .sidenav.right-aligned {
-    right: 0;
-    transform: translateX(105%);
-    left: auto;
+    inset: 0 0 0 auto;
     transform: translateX(100%);
   }
   .sidenav .collapsible {
     margin: 0;
   }
-  .sidenav {
-    /* Hover only on top row */
-    /*a:hover {
-      //color: red;
-      //background-color: var(--md-sys-color-on-secondary-container);
-      //md.sys.color.on-secondary-container
-    }*/
-  }
-  .sidenav a:focus {
-    background-color: rgba(0, 0, 0, 0.12);
-  }
-  .sidenav li.active > a:not(.collapsible-header):not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating) {
-    background-color: color-mix(in oklab, var(--md-sys-color-secondary) 10%, transparent);
-  }
-  .sidenav .collapsible-body > ul {
-    padding-left: 10px;
-  }
   .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;
+  }
   .sidenav li > a {
-    /* https://stackoverflow.com/questions/5848090/full-width-hover-background-for-nested-lists */
-    margin: 0 12px;
-    padding: 0 var(--sidenav-padding);
-    /*
-    min-width: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    */
     display: flex;
-    height: var(--sidenav-item-height);
-    font-size: var(--sidenav-font-size);
-    font-weight: 500;
     align-items: center;
+    margin: 0 12px;
+    padding: 0 var(--md-comp-nav-drawer-padding);
+    height: var(--md-comp-nav-drawer-item-height);
     overflow: hidden;
     border-radius: 100px;
+    font-size: var(--md-comp-nav-drawer-font-size);
+    font-weight: 500;
   }
-  .sidenav li > a:not(.btn):not(.button):not(.btn-flat):not(.btn-large):not(.btn-floating) {
+  .sidenav li > a:not(.button, .circle, .extra) {
     color: var(--md-sys-color-on-secondary-container);
   }
-  .sidenav li > a:not(.btn):not(.button):not(.btn-flat):not(.btn-large):not(.btn-floating):hover {
+  .sidenav li > a:not(.button, .circle, .extra):hover {
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
   }
-  .sidenav li > a.btn, .sidenav li > a.button, .sidenav li > a.btn-large, .sidenav li > a.btn-flat, .sidenav li > a.btn-floating {
-    margin: 10px 15px;
+  .sidenav li > a:not(.button, .circle, .extra):focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
   }
-  .sidenav li > a {
-    /* TODO: Use special class in future like "mw-icon" */
+  .sidenav li > a.button, .sidenav li > a.circle, .sidenav li > a.extra {
+    margin: 10px 15px;
   }
-  .sidenav li > a > .material-icons, .sidenav li > a > .material-symbols-outlined, .sidenav li > a > .material-symbols-rounded, .sidenav li > a > .material-symbols-sharp {
+  .sidenav li > a > :is(.material-symbols,
+  .material-symbols-outlined,
+  .material-symbols-rounded,
+  .material-symbols-sharp,
+  .material-icons) {
     display: inline-flex;
-    vertical-align: middle;
+    flex-shrink: 0;
     margin-right: 12px;
   }
   .sidenav .divider {
-    margin: calc(var(--sidenav-padding) * 0.5) 0 0 0;
+    margin: calc(var(--md-comp-nav-drawer-padding) * 0.5) 0 0;
   }
   .sidenav .subheader {
     cursor: initial;
     pointer-events: none;
-    color: red;
-    font-size: var(--sidenav-font-size);
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: var(--md-comp-nav-drawer-font-size);
     font-weight: 500;
-    line-height: var(--sidenav-line-height);
+    line-height: var(--md-comp-nav-drawer-line-height);
   }
   .sidenav .user-view {
     position: relative;
-    padding: calc(var(--sidenav-padding) * 2) calc(var(--sidenav-padding) * 2) 0;
-    margin-bottom: calc(var(--sidenav-padding) * 0.5);
+    padding: calc(var(--md-comp-nav-drawer-padding) * 2) calc(var(--md-comp-nav-drawer-padding) * 2) 0;
+    margin-bottom: calc(var(--md-comp-nav-drawer-padding) * 0.5);
   }
   .sidenav .user-view > a {
     height: auto;
@@ -5212,13 +5567,12 @@
   .sidenav .user-view .background {
     overflow: hidden;
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     z-index: -1;
   }
-  .sidenav .user-view .circle, .sidenav .user-view .name, .sidenav .user-view .email {
+  .sidenav .user-view .circle,
+  .sidenav .user-view .name,
+  .sidenav .user-view .email {
     display: block;
   }
   .sidenav .user-view .circle {
@@ -5227,8 +5581,8 @@
   }
   .sidenav .user-view .name,
   .sidenav .user-view .email {
-    font-size: var(--sidenav-font-size);
-    line-height: calc(var(--sidenav-line-height) * 0.5);
+    font-size: var(--md-comp-nav-drawer-font-size);
+    line-height: calc(var(--md-comp-nav-drawer-line-height) * 0.5);
   }
   .sidenav .user-view .name {
     margin-top: 16px;
@@ -5238,110 +5592,151 @@
     padding-bottom: 16px;
     font-weight: 400;
   }
-  .drag-target {
+  dialog.sidenav-overlay:modal > .sidenav {
+    position: static;
+    inset: auto;
+    width: 100%;
     height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 998;
-  }
-  .drag-target.right-aligned {
-    right: 0;
+    transform: none;
+    box-shadow: none;
+    background-color: transparent;
+    z-index: auto;
   }
   .sidenav.sidenav-fixed {
-    left: 0;
-    transform: translateX(0);
-    position: fixed;
+    transform: none;
   }
   .sidenav.sidenav-fixed.right-aligned {
-    right: 0;
-    left: auto;
+    transform: none;
   }
   @media (width < 993px) {
     .sidenav.sidenav-fixed {
-      transform: translateX(-105%);
+      transform: translateX(-100%);
     }
     .sidenav.sidenav-fixed.right-aligned {
-      transform: translateX(105%);
-    }
-    .sidenav > a {
-      padding: 0 var(--sidenav-padding);
+      transform: translateX(100%);
     }
     .sidenav .user-view {
-      padding: var(--sidenav-padding) var(--sidenav-padding) 0;
+      padding: var(--md-comp-nav-drawer-padding) var(--md-comp-nav-drawer-padding) 0;
     }
   }
-  .sidenav .collapsible-body {
-    padding: 0;
-  }
-  .sidenav-overlay {
+  .drag-target {
     position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    opacity: 0;
-    height: 120vh;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 997;
-    display: none;
+    inset: 0 auto 0 0;
+    width: var(--md-comp-nav-drawer-drag-width, 10px);
+    height: 100%;
+    z-index: 998;
+    touch-action: pan-y;
+  }
+  .drag-target.right-aligned {
+    inset: 0 0 0 auto;
+  }
+  @media (width >= 993px) {
+    .drag-target[data-fixed] {
+      display: none;
+      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 .collapsible-header,
-  .sidenav.sidenav-fixed .collapsible-header {
+  .sidenav summary,
+  .sidenav.sidenav-fixed summary {
     border: none;
   }
-  .sidenav .collapsible-body,
-  .sidenav.sidenav-fixed .collapsible-body {
+  .sidenav details > :not(summary),
+  .sidenav.sidenav-fixed details > :not(summary) {
     border: none;
   }
+  .progress,
+  .preloader {
+    --md-comp-progress-track: var(--md-sys-color-secondary-container);
+    --md-comp-progress-indicator: var(--md-sys-color-primary);
+    --md-comp-progress-thickness: 4px;
+    --md-comp-progress-shape: 4px;
+    --md-comp-progress-circular-size: 48px;
+    --md-comp-progress-circular-thickness: 4px;
+  }
   .progress {
+    box-sizing: border-box;
     position: relative;
-    height: 4px;
     display: block;
     width: 100%;
-    background-color: var(--md-sys-color-surface-variant);
-    border-radius: 4px;
-    margin: 0.5rem 0 1rem 0;
+    height: var(--md-comp-progress-thickness);
+    margin: 0.5rem 0 1rem;
     overflow: hidden;
-    background-color: var(--md-sys-color-secondary-container);
+    border: 0;
+    border-radius: var(--md-comp-progress-shape);
+    background-color: var(--md-comp-progress-track);
+    appearance: none;
+    -webkit-appearance: none;
+  }
+  progress.progress {
+    vertical-align: baseline;
+  }
+  progress.progress::-webkit-progress-bar {
+    background-color: var(--md-comp-progress-track);
+    border-radius: var(--md-comp-progress-shape);
+  }
+  progress.progress::-webkit-progress-value {
+    background-color: var(--md-comp-progress-indicator);
+    border-radius: var(--md-comp-progress-shape);
   }
-  .progress .determinate {
+  progress.progress::-moz-progress-bar {
+    background-color: var(--md-comp-progress-indicator);
+    border-radius: var(--md-comp-progress-shape);
+  }
+  progress.progress:indeterminate::-webkit-progress-value, progress.progress:indeterminate::-moz-progress-bar {
+    background-color: transparent;
+  }
+  .progress > .determinate {
     position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    background-color: var(--md-sys-color-primary);
+    inset: 0 auto 0 0;
+    width: var(--md-comp-progress-value, 0%);
+    background-color: var(--md-comp-progress-indicator);
     transition: width 0.3s linear;
   }
-  .progress .indeterminate {
-    background-color: var(--md-sys-color-primary);
-  }
-  .progress .indeterminate:before {
+  .progress:not(:is(progress)):not(:has(> .determinate, > .indeterminate))::after {
     content: "";
     position: absolute;
-    background-color: inherit;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    will-change: left, right;
-    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    inset: 0 auto 0 0;
+    width: var(--md-comp-progress-value, 0%);
+    background-color: var(--md-comp-progress-indicator);
+    transition: width 0.3s linear;
+  }
+  .progress:not(:is(progress)):not(:has(> .determinate, > .indeterminate)):not([style*="--md-comp-progress-value"])::after {
+    width: auto;
+    animation: preloader-indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
   }
-  .progress .indeterminate:after {
+  .progress > .indeterminate,
+  progress.progress:indeterminate {
+    background-color: transparent;
+  }
+  .progress > .indeterminate::before, .progress > .indeterminate::after,
+  progress.progress:indeterminate::before,
+  progress.progress:indeterminate::after {
     content: "";
     position: absolute;
-    background-color: inherit;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    will-change: left, right;
-    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    inset: 0 auto 0 0;
+    background-color: var(--md-comp-progress-indicator);
+  }
+  .progress > .indeterminate::before,
+  progress.progress:indeterminate::before {
+    animation: preloader-indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  }
+  .progress > .indeterminate::after,
+  progress.progress:indeterminate::after {
+    animation: preloader-indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
     animation-delay: 1.15s;
   }
-  @keyframes indeterminate {
+  @keyframes preloader-indeterminate {
     0% {
       left: -35%;
       right: 100%;
@@ -5355,7 +5750,7 @@
       right: -90%;
     }
   }
-  @keyframes indeterminate-short {
+  @keyframes preloader-indeterminate-short {
     0% {
       left: -200%;
       right: 100%;
@@ -5369,303 +5764,42 @@
       right: -8%;
     }
   }
-  /*
-      @license
-      Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-      This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-      The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-      The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-      Code distributed by Google as part of the polymer project is also
-      subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-   */
-  /**************************/
-  /* STYLES FOR THE SPINNER */
-  /**************************/
-  /*
-   * Constants:
-   *      STROKEWIDTH = 3px
-   *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
-   *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
-   *      ARCSTARTROT = 216 degrees (how much the start location of the arc
-   *                                should rotate each time, 216 gives us a
-   *                                5 pointed star shape (it's 360/5 * 3).
-   *                                For a 7 pointed star, we might do
-   *                                360/7 * 3 = 154.286)
-   *      CONTAINERWIDTH = 28px
-   *      SHRINK_TIME = 400ms
-   */
-  .preloader-wrapper {
-    display: inline-block;
-    position: relative;
-    width: 50px;
-    height: 50px;
-  }
-  .preloader-wrapper.small {
-    width: 36px;
-    height: 36px;
-  }
-  .preloader-wrapper.big {
-    width: 64px;
-    height: 64px;
-  }
-  .preloader-wrapper.active {
-    /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
-    animation: container-rotate 1568ms linear infinite;
-  }
-  @keyframes container-rotate {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-  .spinner-layer {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    border-color: var(--md-sys-color-primary);
-  }
-  .spinner-blue,
-  .spinner-blue-only {
-    border-color: #4285f4;
-  }
-  .spinner-red,
-  .spinner-red-only {
-    border-color: #db4437;
-  }
-  .spinner-yellow,
-  .spinner-yellow-only {
-    border-color: #f4b400;
-  }
-  .spinner-green,
-  .spinner-green-only {
-    border-color: #0f9d58;
-  }
-  /**
-   * NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
-   *
-   * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
-   * guarantee that the animation will start _exactly_ after that value. So we avoid using
-   * animation-delay and instead set custom keyframes for each color (as redundant as it
-   * seems).
-   *
-   * The second half of this note explained why each animation is written as the
-   * `animation` shorthand rather than as separate animation-name/-duration
-   * longhands: the Web Animations polyfill on old Safari mistook the longhands
-   * for -webkit-animation. That polyfill is long gone, and the prefixed
-   * declarations it was about have been removed - the shorthand is kept only
-   * because it is shorter here. See github.com/Polymer/platform/issues/53.
-   */
-  .active .spinner-layer.spinner-blue {
-    /* durations: 4 * ARCTIME */
-    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-  }
-  .active .spinner-layer.spinner-red {
-    /* durations: 4 * ARCTIME */
-    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-  }
-  .active .spinner-layer.spinner-yellow {
-    /* durations: 4 * ARCTIME */
-    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-  }
-  .active .spinner-layer.spinner-green {
-    /* durations: 4 * ARCTIME */
-    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-  }
-  .active .spinner-layer,
-  .active .spinner-layer.spinner-blue-only,
-  .active .spinner-layer.spinner-red-only,
-  .active .spinner-layer.spinner-yellow-only,
-  .active .spinner-layer.spinner-green-only {
-    /* durations: 4 * ARCTIME */
-    opacity: 1;
-    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-  }
-  @keyframes fill-unfill-rotate {
-    12.5% {
-      transform: rotate(135deg);
-    } /* 0.5 * ARCSIZE */
-    25% {
-      transform: rotate(270deg);
-    } /* 1   * ARCSIZE */
-    37.5% {
-      transform: rotate(405deg);
-    } /* 1.5 * ARCSIZE */
-    50% {
-      transform: rotate(540deg);
-    } /* 2   * ARCSIZE */
-    62.5% {
-      transform: rotate(675deg);
-    } /* 2.5 * ARCSIZE */
-    75% {
-      transform: rotate(810deg);
-    } /* 3   * ARCSIZE */
-    87.5% {
-      transform: rotate(945deg);
-    } /* 3.5 * ARCSIZE */
-    to {
-      transform: rotate(1080deg);
-    } /* 4   * ARCSIZE */
-  }
-  @keyframes blue-fade-in-out {
-    from {
-      opacity: 1;
-    }
-    25% {
-      opacity: 1;
-    }
-    26% {
-      opacity: 0;
-    }
-    89% {
-      opacity: 0;
-    }
-    90% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-  @keyframes red-fade-in-out {
-    from {
-      opacity: 0;
-    }
-    15% {
-      opacity: 0;
-    }
-    25% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 1;
-    }
-    51% {
-      opacity: 0;
-    }
-  }
-  @keyframes yellow-fade-in-out {
-    from {
-      opacity: 0;
-    }
-    40% {
-      opacity: 0;
-    }
-    50% {
-      opacity: 1;
-    }
-    75% {
-      opacity: 1;
-    }
-    76% {
-      opacity: 0;
-    }
-  }
-  @keyframes green-fade-in-out {
-    from {
-      opacity: 0;
-    }
-    65% {
-      opacity: 0;
-    }
-    75% {
-      opacity: 1;
-    }
-    90% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-  /**
-   * Patch the gap that appear between the two adjacent div.circle-clipper while the
-   * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
-   */
-  .gap-patch {
-    position: absolute;
-    top: 0;
-    left: 45%;
-    width: 10%;
-    height: 100%;
-    overflow: hidden;
-    border-color: inherit;
-  }
-  .gap-patch .circle {
-    width: 1000%;
-    left: -450%;
-  }
-  .circle-clipper {
+  .preloader {
+    box-sizing: border-box;
     display: inline-block;
-    position: relative;
-    width: 50%;
-    height: 100%;
-    overflow: hidden;
-    border-color: inherit;
-  }
-  .circle-clipper .circle {
-    width: 200%;
-    height: 100%;
-    border-width: 3px; /* STROKEWIDTH */
-    border-style: solid;
-    border-color: inherit;
-    border-bottom-color: transparent !important;
+    width: var(--md-comp-progress-circular-size);
+    height: var(--md-comp-progress-circular-size);
     border-radius: 50%;
-    animation: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-  }
-  .circle-clipper.left .circle {
-    left: 0;
-    border-right-color: transparent !important;
-    transform: rotate(129deg);
-  }
-  .circle-clipper.right .circle {
-    left: -100%;
-    border-left-color: transparent !important;
-    transform: rotate(-129deg);
+    background: conic-gradient(from 0turn, var(--md-comp-progress-indicator) 0 90deg, transparent 90deg 360deg);
+    mask: radial-gradient(farthest-side, transparent calc(100% - var(--md-comp-progress-circular-thickness)), #000 0);
+    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--md-comp-progress-circular-thickness)), #000 0);
+    animation: preloader-rotate 1.4s linear infinite;
+    vertical-align: middle;
   }
-  .active .circle-clipper.left .circle {
-    /* duration: ARCTIME */
-    animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  .preloader.small {
+    --md-comp-progress-circular-size: 36px;
   }
-  .active .circle-clipper.right .circle {
-    /* duration: ARCTIME */
-    animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  .preloader.big {
+    --md-comp-progress-circular-size: 64px;
   }
-  @keyframes left-spin {
-    from {
-      transform: rotate(130deg);
-    }
-    50% {
-      transform: rotate(-5deg);
-    }
-    to {
-      transform: rotate(130deg);
-    }
+  .preloader.determinate {
+    animation: none;
+    background: conic-gradient(from 0turn, var(--md-comp-progress-indicator) 0 var(--md-comp-progress-value, 0%), color-mix(in oklab, var(--md-comp-progress-indicator) 20%, transparent) var(--md-comp-progress-value, 0%));
   }
-  @keyframes right-spin {
-    from {
-      transform: rotate(-130deg);
-    }
-    50% {
-      transform: rotate(5deg);
-    }
+  @keyframes preloader-rotate {
     to {
-      transform: rotate(-130deg);
+      transform: rotate(1turn);
     }
   }
-  #spinnerContainer.cooldown {
-    /* duration: SHRINK_TIME */
-    animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  @keyframes fade-out {
-    from {
-      opacity: 1;
+  @media (prefers-reduced-motion: reduce) {
+    .progress > .indeterminate,
+    progress.progress:indeterminate,
+    .progress:not(:is(progress)):not(:has(> .determinate, > .indeterminate)):not([style*="--md-comp-progress-value"]),
+    .preloader {
+      animation: none;
     }
-    to {
-      opacity: 0;
+    .preloader {
+      transform: none;
     }
   }
   .slider {
@@ -5673,6 +5807,9 @@
     height: 400px;
     width: 100%;
   }
+  .slider:not(.fullscreen) .slides, .slider:not(.fullscreen) .slides li {
+    border-radius: 12px;
+  }
   .slider.fullscreen {
     height: 100%;
     width: 100%;
@@ -5771,163 +5908,285 @@
     background-color: var(--md-sys-color-primary);
   }
   .carousel {
-    --carousel-height: 400px;
+    --md-comp-carousel-height: 400px;
+    --md-comp-carousel-shape: 12px;
+    --md-comp-carousel-gap: 0px;
     overflow: hidden;
     position: relative;
     width: 100%;
-    height: var(--carousel-height);
-    perspective: 500px;
-    transform-style: preserve-3d;
-    transform-origin: 0% 50%;
+    height: var(--carousel-height, var(--md-comp-carousel-height));
+    border-radius: var(--md-comp-carousel-shape);
   }
-  .carousel.carousel-slider {
-    top: 0;
-    left: 0;
+  .carousel .carousel-item > img,
+  .carousel .carousel-item > video {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
-  .carousel.carousel-slider .carousel-fixed-item {
+  .carousel .indicators {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    list-style: none;
     position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 20px;
-    z-index: 1;
+    inset: auto 0 0;
+    z-index: 2;
+    margin: 0;
+    padding: 16px 0;
+    border: 0;
+    background: none;
   }
-  .carousel.carousel-slider .carousel-fixed-item.with-indicators {
-    bottom: 68px;
+  .carousel .indicators .indicator-item {
+    appearance: none;
+    box-sizing: border-box;
+    display: block;
+    width: 8px;
+    height: 8px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 45%, transparent);
+    cursor: pointer;
+    transition: background-color 0.2s ease-out;
   }
-  .carousel.carousel-slider .carousel-item {
-    width: 100%;
-    height: 100%;
-    min-height: var(--carousel-height);
-    position: absolute;
-    top: 0;
-    left: 0;
+  .carousel .indicators .indicator-item:is(.active, [aria-current=true]) {
+    background-color: var(--md-sys-color-primary);
   }
-  .carousel.carousel-slider .carousel-item h2 {
-    font-size: 24px;
-    font-weight: 500;
-    line-height: 32px;
+  .carousel .indicators .indicator-item:focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
   }
-  .carousel.carousel-slider .carousel-item p {
-    font-size: 15px;
+  .carousel:not(.flat) {
+    perspective: 500px;
+    transform-style: preserve-3d;
+    transform-origin: 0% 50%;
+    touch-action: pan-y;
   }
-  .carousel .carousel-item {
+  .carousel:not(.flat) > .carousel-item {
     visibility: hidden;
-    width: calc(var(--carousel-height) * 0.5);
-    height: calc(var(--carousel-height) * 0.5);
     position: absolute;
     top: 0;
     left: 0;
+    width: calc(var(--carousel-height, var(--md-comp-carousel-height)) * 0.5);
+    height: calc(var(--carousel-height, var(--md-comp-carousel-height)) * 0.5);
+    overflow: hidden;
+    border-radius: var(--md-comp-carousel-shape);
+  }
+  .carousel.flat {
+    overflow: hidden;
+    perspective: none;
+    transform: none;
   }
-  .carousel .carousel-item > img {
+  .carousel.flat > .carousel-track {
+    display: flex;
+    gap: var(--md-comp-carousel-gap);
+    box-sizing: border-box;
     width: 100%;
+    height: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    touch-action: pan-x;
+    scrollbar-width: none;
   }
-  .carousel .indicators {
-    padding-left: 0;
-    list-style-type: none;
-    position: absolute;
-    text-align: center;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: 0;
+  .carousel.flat > .carousel-track::-webkit-scrollbar {
+    display: none;
   }
-  .carousel .indicators .indicator-item {
-    display: inline-block;
+  .carousel.flat .carousel-track > .carousel-item {
+    flex: 0 0 100%;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
     position: relative;
-    cursor: pointer;
-    height: 8px;
-    width: 8px;
-    margin: 24px 4px;
-    background-color: rgba(255, 255, 255, 0.45);
-    transition: background-color 0.3s;
-    border-radius: 50%;
+    visibility: visible;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
   }
-  .carousel .indicators .indicator-item.active {
-    background-color: var(--md-ref-palette-primary100);
+  .carousel.flat .carousel-fixed-item {
+    position: absolute;
+    inset: auto 0 20px;
+    z-index: 1;
+  }
+  .carousel.flat .carousel-fixed-item.with-indicators {
+    bottom: 68px;
+  }
+  .carousel.flat .carousel-item h2 {
+    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);
+    margin: 0 0 8px;
+  }
+  .carousel.flat .carousel-item p {
+    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);
+    margin: 0;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .carousel.flat > .carousel-track {
+      scroll-behavior: auto;
+    }
   }
   .carousel.scrolling .carousel-item .lightboxed,
-  .carousel .carousel-item:not(.active) .lightboxed {
+  .carousel-item:not(.active) .lightboxed {
     pointer-events: none;
   }
   .tap-target-wrapper {
-    width: 800px;
-    height: 800px;
+    --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;
-    z-index: 1000;
+    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;
-    transition: visibility 0s 0.3s;
+    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.open {
+  .tap-target-wrapper:is(.open, :popover-open) {
     visibility: visible;
-    transition: visibility 0s;
+    pointer-events: none;
+    transition-delay: 0s;
   }
-  .tap-target-wrapper.open .tap-target {
+  .tap-target-wrapper:is(.open, :popover-open) .tap-target {
     transform: scale(1);
-    opacity: 0.95;
-    transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
+    opacity: 1;
   }
-  .tap-target-wrapper.open .tap-target-wave::before {
+  .tap-target-wrapper:is(.open, :popover-open) .tap-target-wave::before {
     transform: scale(1);
   }
-  .tap-target-wrapper.open .tap-target-wave::after {
+  .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;
-    transition: opacity 0.3s, transform 0.3s, visibility 0s 1s;
   }
   .tap-target {
     position: absolute;
-    font-size: 1rem;
-    border-radius: 50%;
-    background-color: var(--md-sys-color-primary-container);
-    color: var(--md-sys-color-primary);
-    box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2);
+    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 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
+    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;
-    display: table-cell;
+    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%;
-    z-index: 10001;
+    pointer-events: none;
   }
   .tap-target-wave::before, .tap-target-wave::after {
     content: "";
-    display: block;
     position: absolute;
-    width: 100%;
-    height: 100%;
+    inset: 0;
+    display: block;
     border-radius: 50%;
     background-color: var(--md-sys-color-surface);
   }
   .tap-target-wave::before {
     transform: scale(0);
-    transition: transform 0.3s;
+    transition: transform var(--md-comp-tap-target-duration) var(--md-comp-tap-target-easing);
   }
   .tap-target-wave::after {
     visibility: hidden;
-    transition: opacity 0.3s, transform 0.3s, visibility 0s;
     z-index: -1;
   }
   .tap-target-origin {
-    top: 50%;
-    left: 50%;
-    z-index: 10002;
-    position: absolute !important;
-    transform: translate(-50%, -50%);
-  }
-  .tap-target-origin:not(.btn), .tap-target-origin:not(.btn):hover {
-    background: none;
+    z-index: calc(var(--md-comp-tap-target-z, 1000) + 2);
   }
   @media (width < 601px) {
-    .tap-target, .tap-target-wrapper {
-      width: 600px;
-      height: 600px;
+    .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 {
@@ -5963,13 +6222,6 @@
       transform: scale(1.5);
     }
   }
-  /* Modal */
-  /*.datepicker-modal {
-    max-width: 325px;
-    // @removed since v2.2.1-dev regarding Material M3 standards
-    min-width: 300px;
-    max-height: none;
-  }*/
   .datepicker-container {
     display: flex;
     flex-direction: column;
@@ -5986,27 +6238,23 @@
   .datepicker-controls .selects-container {
     display: flex;
   }
-  .datepicker-controls .select-wrapper input {
+  .datepicker-controls .field:has(> .hide-select) input {
     height: 49px;
     margin: 4px 0 0 0;
     border-bottom: none;
     border-radius: 4px;
     text-align: center;
   }
-  .datepicker-controls .select-wrapper input:focus {
+  .datepicker-controls .field:has(> .hide-select) input:focus {
     border-bottom: none;
     background-color: var(--md-sys-color-primary-container);
   }
-  .datepicker-controls .select-wrapper input::selection {
+  .datepicker-controls .field:has(> .hide-select) input::selection {
     background-color: transparent;
   }
-  .datepicker-controls .select-wrapper .caret {
+  .datepicker-controls .field:has(> .hide-select) .caret {
     display: none;
   }
-  .datepicker-controls .select-dropdown {
-    padding: 0;
-    vertical-align: middle;
-  }
   .datepicker-controls .select-year input,
   .datepicker-controls .select-month input {
     background-color: transparent;
@@ -6410,100 +6658,225 @@
       margin-top: 1.6rem;
     }
   }
+  nav:has(> ol):not(.pagination),
+  nav:has(> .breadcrumb),
   .breadcrumb-wrapper {
+    --md-comp-breadcrumb-label-color: var(--md-sys-color-on-surface-variant);
+    --md-comp-breadcrumb-current-color: var(--md-sys-color-on-surface);
+    --md-comp-breadcrumb-separator: "/";
+    --md-comp-breadcrumb-gap: 8px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    color: var(--md-comp-breadcrumb-label-color);
+    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;
+    font-size: var(--md-sys-typescale-body-small-font-size);
+    font-weight: var(--md-sys-typescale-body-small-font-weight);
+    line-height: var(--md-sys-typescale-body-small-line-height);
+    letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
+  }
+  nav:has(> ol):not(.pagination).nowrap,
+  nav:has(> .breadcrumb).nowrap,
+  .breadcrumb-wrapper.nowrap {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  nav:has(> ol):not(.pagination).nowrap::-webkit-scrollbar,
+  nav:has(> .breadcrumb).nowrap::-webkit-scrollbar,
+  .breadcrumb-wrapper.nowrap::-webkit-scrollbar {
+    display: none;
+  }
+  nav:has(> ol):not(.pagination) > ol,
+  nav:has(> .breadcrumb) > ol,
+  .breadcrumb-wrapper > ol {
     display: flex;
+    flex-wrap: inherit;
     align-items: center;
+    list-style: none;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
   }
-  .breadcrumb {
+  nav:has(> ol):not(.pagination) > ol > li,
+  nav:has(> .breadcrumb) > ol > li,
+  .breadcrumb-wrapper > ol > li {
     display: inline-flex;
     align-items: center;
+    min-width: 0;
   }
-  .breadcrumb i,
-  .breadcrumb i.material-icons, .breadcrumb i.material-symbols-outlined,
-  .breadcrumb i.material-symbols-rounded, .breadcrumb i.material-symbols-sharp, .breadcrumb:before {
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
+  nav:has(> ol):not(.pagination) > ol > li:has(> [aria-current=page]),
+  nav:has(> .breadcrumb) > ol > li:has(> [aria-current=page]),
+  .breadcrumb-wrapper > ol > li:has(> [aria-current=page]) {
+    flex-shrink: 0;
+  }
+  nav:has(> ol):not(.pagination) > ol > li + li::before,
+  nav:has(> .breadcrumb) > ol > li + li::before,
+  .breadcrumb-wrapper > ol > li + li::before {
+    content: var(--md-comp-breadcrumb-separator);
+    margin-inline: var(--md-comp-breadcrumb-gap);
+    color: var(--md-comp-breadcrumb-label-color);
+  }
+  nav:has(> ol):not(.pagination) > .breadcrumb + .breadcrumb::before,
+  nav:has(> .breadcrumb) > .breadcrumb + .breadcrumb::before,
+  .breadcrumb-wrapper > .breadcrumb + .breadcrumb::before {
+    content: var(--md-comp-breadcrumb-separator);
+    margin-inline: var(--md-comp-breadcrumb-gap);
+    color: var(--md-comp-breadcrumb-label-color);
+  }
+  nav:has(> ol):not(.pagination) :is(a, .breadcrumb),
+  nav:has(> .breadcrumb) :is(a, .breadcrumb),
+  .breadcrumb-wrapper :is(a, .breadcrumb) {
+    display: inline-flex;
+    align-items: center;
+    min-height: 32px;
+    color: var(--md-comp-breadcrumb-label-color);
+    text-decoration: none;
   }
-  .breadcrumb:before {
-    content: "\e5cc";
-    font-family: "Material Symbols Outlined", "Material Symbols Rounded", "Material Symbols Sharp", "Material Icons";
+  nav:has(> ol):not(.pagination) :is(a, .breadcrumb):focus-visible,
+  nav:has(> .breadcrumb) :is(a, .breadcrumb):focus-visible,
+  .breadcrumb-wrapper :is(a, .breadcrumb):focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
   }
-  .breadcrumb:first-child:before {
-    visibility: hidden;
+  nav:has(> ol):not(.pagination) :is(a, .breadcrumb):hover,
+  nav:has(> .breadcrumb) :is(a, .breadcrumb):hover,
+  .breadcrumb-wrapper :is(a, .breadcrumb):hover {
+    color: var(--md-comp-breadcrumb-current-color);
+  }
+  nav:has(> ol):not(.pagination) [aria-current=page],
+  nav:has(> .breadcrumb) [aria-current=page],
+  .breadcrumb-wrapper [aria-current=page] {
+    color: var(--md-comp-breadcrumb-current-color);
+  }
+  nav:has(> ol):not(.pagination) i,
+  nav:has(> .breadcrumb) i,
+  .breadcrumb-wrapper i {
+    font-size: 1.125em;
+    margin-inline-end: 4px;
+  }
+  header:has(> nav) > nav:has(> ol):not(.pagination),
+  header:has(> nav) > nav:has(> .breadcrumb) {
+    --md-comp-breadcrumb-label-color: inherit;
+    --md-comp-breadcrumb-current-color: inherit;
+  }
+  .pagination {
+    --md-comp-pagination-size: 2rem;
+    --md-comp-pagination-shape: 2rem;
+    --md-comp-pagination-gap: 0px;
+    --md-comp-pagination-padding: 0.66rem;
+    --md-comp-pagination-icon-size: 2rem;
+    --md-comp-pagination-selected-color: var(--md-sys-color-primary);
+    --md-comp-pagination-selected-on-color: var(--md-sys-color-on-primary);
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: var(--md-sys-color-on-surface);
+    font-size: 1.2rem;
+    line-height: 1;
+  }
+  .pagination,
+  .pagination > :is(ul, ol) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--md-comp-pagination-gap);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .pagination.nowrap, .pagination.nowrap > :is(ul, ol) {
+    flex-wrap: nowrap;
+    min-width: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .pagination.nowrap::-webkit-scrollbar, .pagination.nowrap > :is(ul, ol)::-webkit-scrollbar {
+    display: none;
   }
   .pagination li {
-    display: inline-block;
-    vertical-align: top;
+    display: flex;
+    flex-shrink: 0;
+    margin: 0;
+    padding: 0;
   }
-  .pagination li a {
+  .pagination :is(a, button) {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--md-comp-filled-button-icon-label-space, 8px);
-    height: 2rem;
-    padding-left: 0.66rem;
-    padding-right: 0.66rem;
-    border: none;
-    border-radius: var(--md-comp-filled-button-container-shape, 20px);
-    font-family: var(--md-sys-typescale-label-large-font-family-name);
-    font-size: 1.2rem;
-    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);
+    gap: 4px;
+    min-width: var(--md-comp-pagination-size);
+    height: var(--md-comp-pagination-size);
+    padding: 0 var(--md-comp-pagination-padding);
+    border: 0;
+    border-radius: var(--md-comp-pagination-shape);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    line-height: inherit;
     text-decoration: none;
-    white-space: nowrap;
     cursor: pointer;
-    outline: 0;
-    user-select: none;
-    appearance: none;
     -webkit-tap-highlight-color: transparent;
-    transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
-  }
-  .pagination li.active a {
-    color: var(--md-comp-filled-button-label-text-color, var(--md-sys-color-on-primary));
-    background-color: var(--md-comp-filled-button-container-color, var(--md-sys-color-primary));
-  }
-  .pagination li.active a:hover {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary));
+    transition: background-color 0.2s ease-out;
   }
-  .pagination li.active a:active, .pagination li.active a:focus {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 10%, var(--md-sys-color-primary));
-  }
-  .pagination li.active a:focus-visible {
+  .pagination :is(a, button):focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  .pagination li.disabled a {
-    box-shadow: none !important;
+  .pagination :is(a, button):hover {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+  }
+  .pagination :is(a, button):has(> span) {
+    width: auto;
+  }
+  .pagination :is(a, button) > i {
+    font-size: var(--md-comp-pagination-icon-size);
+    width: var(--md-comp-pagination-icon-size);
+    height: var(--md-comp-pagination-icon-size);
+    line-height: 1;
+  }
+  .pagination :is(a, button)[aria-current=page],
+  .pagination .active > :is(a, button),
+  .pagination li:has(> [aria-current=page]) > :is(a, button) {
+    background-color: var(--md-comp-pagination-selected-color);
+    color: var(--md-comp-pagination-selected-on-color);
+  }
+  .pagination :is(a, button)[aria-current=page]:hover,
+  .pagination .active > :is(a, button):hover,
+  .pagination li:has(> [aria-current=page]) > :is(a, button):hover {
+    background-color: color-mix(in oklab, var(--md-comp-pagination-selected-on-color) 8%, var(--md-comp-pagination-selected-color));
+  }
+  .pagination :is(a, button)[aria-disabled=true],
+  .pagination .disabled > :is(a, button) {
     color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 12%, transparent);
-    border-color: transparent;
+    background-color: transparent;
     pointer-events: none;
-    box-shadow: none;
     cursor: default;
   }
-  .pagination li i {
-    font-size: 2rem;
+  .pagination li > span {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--md-comp-pagination-size);
+    height: var(--md-comp-pagination-size);
+    color: var(--md-sys-color-on-surface-variant);
   }
-  .pagination li.pages ul li {
-    display: inline-block;
-    float: none;
+  .pagination .pages {
+    min-width: 0;
   }
-  @media (width < 993px) {
-    .pagination {
-      width: 100%;
-    }
-    .pagination li.prev,
-    .pagination li.next {
-      width: 10%;
-    }
-    .pagination li.pages {
-      width: 80%;
-      overflow: hidden;
-      white-space: nowrap;
-    }
+  .pagination .pages > :is(ul, ol) {
+    display: flex;
+    flex-wrap: inherit;
+    align-items: center;
+    gap: var(--md-comp-pagination-gap);
+    list-style: none;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
   }
 }
 @layer utilities {
@@ -6819,27 +7192,6 @@
   .capitalize {
     text-transform: capitalize;
   }
-  .large-text {
-    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);
-  }
-  .medium-text {
-    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);
-  }
-  .small-text {
-    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;
-    font-size: var(--md-sys-typescale-body-small-font-size);
-    font-weight: var(--md-sys-typescale-body-small-font-weight);
-    line-height: var(--md-sys-typescale-body-small-line-height);
-    letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
-  }
   .z-depth-0 {
     box-shadow: none !important;
   }
@@ -7239,7 +7591,7 @@
     display: none !important;
   }
   @media (width < 601px) {
-    .hide-on-small-only, .hide-on-small-and-down {
+    .hide-on-small-only {
       display: none !important;
     }
   }
@@ -7307,16 +7659,13 @@
     display: flex;
     align-items: center;
   }
-  .clearfix {
-    clear: both;
-  }
   .left-align {
     text-align: left;
   }
   .right-align {
     text-align: right;
   }
-  .center, .center-align {
+  .center-align {
     text-align: center;
   }
   .left {