@yewdiel21/motion-kit 0.14.0 → 0.15.0

package/dist/index.css

@@ -1234,21 +1234,6 @@
 .mk-shader__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
 .mk-shader__canvas[hidden] { display: none; }
 
-/* gl/shared/shader.css */
-.mk-shader { position: relative; isolation: isolate; overflow: hidden; }
-.mk-shader__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
-.mk-shader__canvas[hidden] { display: none; }
-
-/* gl/shared/shader.css */
-.mk-shader { position: relative; isolation: isolate; overflow: hidden; }
-.mk-shader__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
-.mk-shader__canvas[hidden] { display: none; }
-
-/* gl/shared/shader.css */
-.mk-shader { position: relative; isolation: isolate; overflow: hidden; }
-.mk-shader__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
-.mk-shader__canvas[hidden] { display: none; }
-
 /* recipes/joined-cta/joined-cta.css */
 .mk-joined-cta { --mk-joined-duration: .5s; --mk-joined-bg: var(--mk-text); --mk-joined-color: var(--mk-bg); position: relative; display: inline-flex; align-items: center; justify-content: center; width: 17.7rem; height: 5.9rem; max-width: 100%; border: 0; padding: 0; background: transparent; text-decoration: none; color: var(--mk-joined-color); cursor: pointer; font: inherit; isolation: isolate; border-radius: var(--mk-radius-full); }
 .mk-joined-cta::before { content: ''; position: absolute; left: 0; width: 7.3rem; height: 5.9rem; border-radius: 100px; background: var(--mk-joined-bg); z-index: -1; transition: width var(--mk-joined-duration) ease-in-out; }
@@ -4447,12 +4432,12 @@ mk-chat > mk-chat-background {
     order: -1;
   }
 
-  /* 1 · Clásica: a bordered sidebar, a filled pill for the current page. */
-  .mk-shell:has(> .mk-nav--clasica) > .mk-shell__view {
+  /* 1 · sidebar: a bordered sidebar, a filled pill for the current page. */
+  .mk-shell:has(> .mk-nav--sidebar) > .mk-shell__view {
     border-right: 1px solid var(--md-sys-color-surface-container);
   }
 
-  .mk-nav--clasica {
+  .mk-nav--sidebar {
     display: flex;
     flex-direction: column;
     min-width: 270px;
@@ -4461,26 +4446,26 @@ mk-chat > mk-chat-background {
     z-index: 1;
   }
 
-  .mk-nav--clasica .mk-nav__buttons {
+  .mk-nav--sidebar .mk-nav__buttons {
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
 
-  .mk-nav--clasica .mk-nav__actions {
+  .mk-nav--sidebar .mk-nav__actions {
     margin-top: auto;
     display: flex;
     flex-direction: column;
   }
 
-  .mk-nav--clasica .mk-nav__options {
+  .mk-nav--sidebar .mk-nav__options {
     display: flex;
     flex-direction: column;
     gap: 4px;
     margin-top: 24px;
   }
 
-  .mk-nav--clasica .mk-nav__label {
+  .mk-nav--sidebar .mk-nav__label {
     display: flex;
     align-items: center;
     height: 40px;
@@ -4491,7 +4476,7 @@ mk-chat > mk-chat-background {
     font-weight: 500;
   }
 
-  .mk-nav--clasica .mk-nav__button {
+  .mk-nav--sidebar .mk-nav__button {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -4508,34 +4493,34 @@ mk-chat > mk-chat-background {
       0.15s background;
   }
 
-  .mk-nav--clasica .mk-nav__button:hover {
+  .mk-nav--sidebar .mk-nav__button:hover {
     color: var(--md-sys-color-primary);
   }
 
-  .mk-nav--clasica .mk-nav__button[aria-current='page'] {
+  .mk-nav--sidebar .mk-nav__button[aria-current='page'] {
     background: var(--md-sys-color-surface-container-high);
     color: var(--md-sys-color-primary);
     animation: mk-nav-icon 125ms cubic-bezier(0.48, 0, 0, 1);
     font-variation-settings: 'FILL' 1;
   }
 
-  .mk-nav--clasica.mk-nav--accent .mk-nav__button[aria-current='page'] {
+  .mk-nav--sidebar.mk-nav--accent .mk-nav__button[aria-current='page'] {
     background: var(--md-sys-color-primary-container);
     color: var(--md-sys-color-on-primary-container);
     box-shadow: 0 0 32px -10px var(--md-sys-color-primary-container);
   }
 
-  .mk-nav--clasica .mk-nav__button.mk-nav__button--first {
+  .mk-nav--sidebar .mk-nav__button.mk-nav__button--first {
     color: var(--md-sys-color-on-background);
     margin-bottom: 32px;
   }
 
-  .mk-nav--clasica .mk-nav__button--first .mk-nav__name {
+  .mk-nav--sidebar .mk-nav__button--first .mk-nav__name {
     display: flex;
     flex-grow: 1;
   }
 
-  .mk-nav--clasica .mk-nav__button--first::after {
+  .mk-nav--sidebar .mk-nav__button--first::after {
     content: '';
     position: absolute;
     left: -16px;
@@ -4545,8 +4530,8 @@ mk-chat > mk-chat-background {
     background: var(--md-sys-color-surface-container);
   }
 
-  /* 2 · Bonita: centred text pills that widen on hover and when current (spring padding). */
-  .mk-nav--bonita {
+  /* 2 · pills: centred text pills that widen on hover and when current (spring padding). */
+  .mk-nav--pills {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -4555,20 +4540,20 @@ mk-chat > mk-chat-background {
     z-index: 1;
   }
 
-  .mk-nav--bonita .mk-nav__buttons {
+  .mk-nav--pills .mk-nav__buttons {
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
 
-  .mk-nav--bonita .mk-nav__actions {
+  .mk-nav--pills .mk-nav__actions {
     position: absolute;
     bottom: 16px;
     display: flex;
     gap: 8px;
   }
 
-  .mk-nav--bonita .mk-nav__button {
+  .mk-nav--pills .mk-nav__button {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -4588,16 +4573,16 @@ mk-chat > mk-chat-background {
       0.3s padding var(--mk-ease-swatch);
   }
 
-  .mk-nav--bonita .mk-nav__icon {
+  .mk-nav--pills .mk-nav__icon {
     display: none;
   }
 
-  .mk-nav--bonita .mk-nav__button:hover {
+  .mk-nav--pills .mk-nav__button:hover {
     color: var(--md-sys-color-primary);
     padding: 0 26px;
   }
 
-  .mk-nav--bonita .mk-nav__button[aria-current='page'] {
+  .mk-nav--pills .mk-nav__button[aria-current='page'] {
     background: var(--md-sys-color-surface-container-highest);
     color: var(--md-sys-color-on-background);
     animation: mk-nav-icon 125ms cubic-bezier(0.48, 0, 0, 1);
@@ -4605,22 +4590,22 @@ mk-chat > mk-chat-background {
     padding: 0 32px;
   }
 
-  .mk-nav--bonita.mk-nav--accent .mk-nav__button[aria-current='page'] {
+  .mk-nav--pills.mk-nav--accent .mk-nav__button[aria-current='page'] {
     background: var(--md-sys-color-primary-container);
     color: var(--md-sys-color-on-primary-container);
     box-shadow: 0 0 32px -10px var(--md-sys-color-primary-container);
   }
 
-  .mk-nav--bonita .mk-nav__name {
+  .mk-nav--pills .mk-nav__name {
     display: flex;
     flex-grow: 1;
   }
 
-  .mk-nav--bonita .mk-nav__button.mk-nav__button--first {
+  .mk-nav--pills .mk-nav__button.mk-nav__button--first {
     display: none;
   }
 
-  /* 3 · Dock: a floating glass bar centred at the bottom. */
+  /* 3 · dock: a floating glass bar centred at the bottom. */
   .mk-shell:has(> .mk-nav--dock) {
     flex-direction: column;
     overflow: auto;
@@ -4725,23 +4710,23 @@ mk-chat > mk-chat-background {
     color: var(--md-sys-color-on-primary-container);
   }
 
-  /* 4 · Guapa: the view is a raised card on a tinted shell; the current page is a white chip. */
-  .mk-shell:has(> .mk-nav--guapa) {
+  /* 4 · card: the view is a raised card on a tinted shell; the current page is a white chip. */
+  .mk-shell:has(> .mk-nav--card) {
     background: var(--md-sys-color-surface-container-low);
     padding: 8px 8px 8px 0;
   }
 
-  .mk-shell:has(> .mk-nav--guapa) > .mk-shell__view {
+  .mk-shell:has(> .mk-nav--card) > .mk-shell__view {
     background: var(--md-sys-color-background);
     border-radius: 24px;
     box-shadow: 0 0.5px 2.5px #0000001f;
   }
 
-  .mk-shell:has(> .mk-nav--guapa) > .mk-shell__view:not(:last-of-type) {
+  .mk-shell:has(> .mk-nav--card) > .mk-shell__view:not(:last-of-type) {
     margin-right: 8px;
   }
 
-  .mk-nav--guapa {
+  .mk-nav--card {
     display: flex;
     flex-direction: column;
     min-width: 270px;
@@ -4749,24 +4734,24 @@ mk-chat > mk-chat-background {
     z-index: 1;
   }
 
-  .mk-nav--guapa .mk-nav__buttons {
+  .mk-nav--card .mk-nav__buttons {
     display: flex;
     flex-direction: column;
   }
 
-  .mk-nav--guapa .mk-nav__actions {
+  .mk-nav--card .mk-nav__actions {
     margin-top: auto;
     display: flex;
     flex-direction: column;
   }
 
-  .mk-nav--guapa .mk-nav__options {
+  .mk-nav--card .mk-nav__options {
     display: flex;
     flex-direction: column;
     margin-top: 24px;
   }
 
-  .mk-nav--guapa .mk-nav__label {
+  .mk-nav--card .mk-nav__label {
     display: flex;
     align-items: center;
     height: 40px;
@@ -4777,7 +4762,7 @@ mk-chat > mk-chat-background {
     font-weight: 500;
   }
 
-  .mk-nav--guapa .mk-nav__button {
+  .mk-nav--card .mk-nav__button {
     --mk-nav-icon-size: 16px;
     display: flex;
     align-items: center;
@@ -4795,11 +4780,11 @@ mk-chat > mk-chat-background {
       0.15s background;
   }
 
-  .mk-nav--guapa .mk-nav__button:hover {
+  .mk-nav--card .mk-nav__button:hover {
     color: var(--md-sys-color-primary);
   }
 
-  .mk-nav--guapa .mk-nav__button[aria-current='page'] {
+  .mk-nav--card .mk-nav__button[aria-current='page'] {
     background: var(--md-sys-color-background);
     color: color-mix(in srgb, var(--md-sys-color-primary) 80%, var(--md-sys-color-primary-container) 90%);
     box-shadow:
@@ -4809,7 +4794,7 @@ mk-chat > mk-chat-background {
     font-variation-settings: 'FILL' 1;
   }
 
-  .mk-nav--guapa.mk-nav--accent .mk-nav__button[aria-current='page'] {
+  .mk-nav--card.mk-nav--accent .mk-nav__button[aria-current='page'] {
     background: linear-gradient(
       color-mix(in srgb, var(--md-sys-color-primary-container) 100%, var(--md-sys-color-background) 40%),
       var(--md-sys-color-primary-container)
@@ -4821,30 +4806,30 @@ mk-chat > mk-chat-background {
       inset 0 1.8px #ffffff4d;
   }
 
-  .mk-nav--guapa .mk-nav__button.mk-nav__button--first {
+  .mk-nav--card .mk-nav__button.mk-nav__button--first {
     color: var(--md-sys-color-on-background);
     margin-bottom: 16px;
   }
 
-  .mk-nav--guapa .mk-nav__button--first .mk-nav__name {
+  .mk-nav--card .mk-nav__button--first .mk-nav__name {
     display: flex;
     flex-grow: 1;
   }
 
-  /* 5 · Tasks: a rail of round 56 px buttons; the current one squares off (springy radius). */
-  .mk-shell:has(> .mk-nav--tasks) {
+  /* 5 · rail: a rail of round 56 px buttons; the current one squares off (springy radius). */
+  .mk-shell:has(> .mk-nav--rail) {
     padding: 8px;
   }
 
-  .mk-shell:has(> .mk-nav--tasks) > .mk-shell__view {
+  .mk-shell:has(> .mk-nav--rail) > .mk-shell__view {
     background: var(--md-sys-color-background);
   }
 
-  .mk-shell:has(> .mk-nav--tasks) > .mk-shell__view:not(:last-of-type) .mk-shell__content {
+  .mk-shell:has(> .mk-nav--rail) > .mk-shell__view:not(:last-of-type) .mk-shell__content {
     padding-right: 0 !important;
   }
 
-  .mk-nav--tasks {
+  .mk-nav--rail {
     display: flex;
     flex-direction: column;
     width: auto;
@@ -4852,19 +4837,19 @@ mk-chat > mk-chat-background {
     z-index: 1;
   }
 
-  .mk-nav--tasks .mk-nav__buttons {
+  .mk-nav--rail .mk-nav__buttons {
     display: flex;
     flex-direction: column;
     gap: 0;
   }
 
-  .mk-nav--tasks .mk-nav__actions {
+  .mk-nav--rail .mk-nav__actions {
     margin-top: auto;
     display: flex;
     flex-direction: column;
   }
 
-  .mk-nav--tasks .mk-nav__button {
+  .mk-nav--rail .mk-nav__button {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -4883,7 +4868,7 @@ mk-chat > mk-chat-background {
       background 0.25s;
   }
 
-  .mk-nav--tasks .mk-nav__name {
+  .mk-nav--rail .mk-nav__name {
     /* Hidden from sight, not from screen readers: the button keeps its name. */
     position: absolute;
     width: 1px;
@@ -4893,11 +4878,11 @@ mk-chat > mk-chat-background {
     white-space: nowrap;
   }
 
-  .mk-nav--tasks .mk-nav__button:hover {
+  .mk-nav--rail .mk-nav__button:hover {
     color: var(--md-sys-color-primary);
   }
 
-  .mk-nav--tasks .mk-nav__button[aria-current='page'] {
+  .mk-nav--rail .mk-nav__button[aria-current='page'] {
     background: var(--md-sys-color-surface-container-highest);
     color: var(--md-sys-color-primary);
     animation: mk-nav-icon 125ms cubic-bezier(0.48, 0, 0, 1);
@@ -4905,26 +4890,26 @@ mk-chat > mk-chat-background {
     border-radius: 12px;
   }
 
-  .mk-nav--tasks.mk-nav--accent .mk-nav__button[aria-current='page'] {
+  .mk-nav--rail.mk-nav--accent .mk-nav__button[aria-current='page'] {
     background: var(--md-sys-color-primary-container);
     color: var(--md-sys-color-on-primary-container);
   }
 
-  .mk-nav--tasks .mk-nav__button.mk-nav__button--first {
+  .mk-nav--rail .mk-nav__button.mk-nav__button--first {
     color: var(--md-sys-color-on-background);
     margin-bottom: 8px;
   }
 
-  .mk-nav--tasks .mk-nav__button--first .mk-nav__icon {
+  .mk-nav--rail .mk-nav__button--first .mk-nav__icon {
     display: none;
   }
 
-  /* 6 · Melon: a soft sidebar with a faint primary wash on the current page. */
-  .mk-shell:has(> .mk-nav--melon) > .mk-shell__view {
+  /* 6 · wash: a soft sidebar with a faint primary wash on the current page. */
+  .mk-shell:has(> .mk-nav--wash) > .mk-shell__view {
     border-right: 1px solid var(--md-sys-color-surface-container);
   }
 
-  .mk-nav--melon {
+  .mk-nav--wash {
     display: flex;
     flex-direction: column;
     min-width: 270px;
@@ -4932,24 +4917,24 @@ mk-chat > mk-chat-background {
     z-index: 1;
   }
 
-  .mk-nav--melon .mk-nav__buttons {
+  .mk-nav--wash .mk-nav__buttons {
     display: flex;
     flex-direction: column;
   }
 
-  .mk-nav--melon .mk-nav__actions {
+  .mk-nav--wash .mk-nav__actions {
     margin-top: auto;
     display: flex;
     flex-direction: column;
   }
 
-  .mk-nav--melon .mk-nav__options {
+  .mk-nav--wash .mk-nav__options {
     display: flex;
     flex-direction: column;
     margin-top: 24px;
   }
 
-  .mk-nav--melon .mk-nav__label {
+  .mk-nav--wash .mk-nav__label {
     display: flex;
     align-items: center;
     height: 40px;
@@ -4960,7 +4945,7 @@ mk-chat > mk-chat-background {
     font-weight: 500;
   }
 
-  .mk-nav--melon .mk-nav__button {
+  .mk-nav--wash .mk-nav__button {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -4977,18 +4962,18 @@ mk-chat > mk-chat-background {
       0.15s background;
   }
 
-  .mk-nav--melon .mk-nav__button:hover {
+  .mk-nav--wash .mk-nav__button:hover {
     color: var(--md-sys-color-primary);
   }
 
-  .mk-nav--melon .mk-nav__button[aria-current='page'] {
+  .mk-nav--wash .mk-nav__button[aria-current='page'] {
     background: color-mix(in srgb, var(--md-sys-color-primary-container) 10%, var(--md-sys-color-background) 90%);
     color: var(--md-sys-color-primary);
     animation: mk-nav-icon 125ms cubic-bezier(0.48, 0, 0, 1);
     font-variation-settings: 'FILL' 1;
   }
 
-  .mk-nav--melon.mk-nav--accent .mk-nav__button {
+  .mk-nav--wash.mk-nav--accent .mk-nav__button {
     --mk-nav-icon-size: 16px;
     padding: 8px 12px;
     transition:
@@ -4996,11 +4981,11 @@ mk-chat > mk-chat-background {
       0.15s background;
   }
 
-  .mk-nav--melon.mk-nav--accent .mk-nav__label {
+  .mk-nav--wash.mk-nav--accent .mk-nav__label {
     padding: 0 12px;
   }
 
-  .mk-nav--melon.mk-nav--accent .mk-nav__button[aria-current='page'] {
+  .mk-nav--wash.mk-nav--accent .mk-nav__button[aria-current='page'] {
     background: var(--md-sys-color-background);
     color: color-mix(in srgb, var(--md-sys-color-primary) 80%, var(--md-sys-color-primary-container) 90%);
     box-shadow:
@@ -5008,22 +4993,22 @@ mk-chat > mk-chat-background {
       0 0.5px 2.5px #00000014;
   }
 
-  .mk-nav--melon .mk-nav__button.mk-nav__button--first {
+  .mk-nav--wash .mk-nav__button.mk-nav__button--first {
     color: var(--md-sys-color-on-background);
     margin-bottom: 16px;
   }
 
-  .mk-nav--melon .mk-nav__button--first .mk-nav__name {
+  .mk-nav--wash .mk-nav__button--first .mk-nav__name {
     display: flex;
     flex-grow: 1;
   }
 
-  /* 7 · Tunnel: big words; the hovered one and its neighbours grow like a dock. */
-  .mk-shell:has(> .mk-nav--tunnel) > .mk-shell__view {
+  /* 7 · magnify: big words; the hovered one and its neighbours grow like a dock. */
+  .mk-shell:has(> .mk-nav--magnify) > .mk-shell__view {
     border-right: 1px solid var(--md-sys-color-surface-container);
   }
 
-  .mk-nav--tunnel {
+  .mk-nav--magnify {
     display: flex;
     flex-direction: column;
     min-width: 270px;
@@ -5032,25 +5017,25 @@ mk-chat > mk-chat-background {
     z-index: 1;
   }
 
-  .mk-nav--tunnel .mk-nav__buttons {
+  .mk-nav--magnify .mk-nav__buttons {
     display: flex;
     flex-direction: column;
   }
 
-  .mk-nav--tunnel .mk-nav__actions {
+  .mk-nav--magnify .mk-nav__actions {
     margin-top: auto;
     display: flex;
     flex-direction: column;
   }
 
-  .mk-nav--tunnel .mk-nav__options {
+  .mk-nav--magnify .mk-nav__options {
     display: flex;
     flex-direction: column;
     gap: 4px;
     margin-top: 24px;
   }
 
-  .mk-nav--tunnel .mk-nav__label {
+  .mk-nav--magnify .mk-nav__label {
     display: flex;
     align-items: center;
     height: 40px;
@@ -5060,7 +5045,7 @@ mk-chat > mk-chat-background {
     font-weight: 500;
   }
 
-  .mk-nav--tunnel .mk-nav__button {
+  .mk-nav--magnify .mk-nav__button {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -5080,35 +5065,35 @@ mk-chat > mk-chat-background {
     transform-origin: left;
   }
 
-  .mk-nav--tunnel .mk-nav__icon {
+  .mk-nav--magnify .mk-nav__icon {
     display: none;
   }
 
-  .mk-nav--tunnel .mk-nav__button:hover {
+  .mk-nav--magnify .mk-nav__button:hover {
     color: var(--md-sys-color-primary-container);
   }
 
-  .mk-nav--tunnel .mk-nav__button:not(.mk-nav__button--first):has(+ * + *:hover) {
+  .mk-nav--magnify .mk-nav__button:not(.mk-nav__button--first):has(+ * + *:hover) {
     transform: scale(1.03);
   }
 
-  .mk-nav--tunnel .mk-nav__button:not(.mk-nav__button--first):has(+ *:hover) {
+  .mk-nav--magnify .mk-nav__button:not(.mk-nav__button--first):has(+ *:hover) {
     transform: scale(1.09);
   }
 
-  .mk-nav--tunnel .mk-nav__button:hover {
+  .mk-nav--magnify .mk-nav__button:hover {
     transform: scale(1.2);
   }
 
-  .mk-nav--tunnel .mk-nav__button:not(.mk-nav__button--first):hover + * {
+  .mk-nav--magnify .mk-nav__button:not(.mk-nav__button--first):hover + * {
     transform: scale(1.09);
   }
 
-  .mk-nav--tunnel .mk-nav__button:not(.mk-nav__button--first):hover + * + * {
+  .mk-nav--magnify .mk-nav__button:not(.mk-nav__button--first):hover + * + * {
     transform: scale(1.03);
   }
 
-  .mk-nav--tunnel .mk-nav__button[aria-current='page'] {
+  .mk-nav--magnify .mk-nav__button[aria-current='page'] {
     color: var(--md-sys-color-primary);
     font-size: 28px;
     font-weight: 600;
@@ -5116,13 +5101,13 @@ mk-chat > mk-chat-background {
     font-variation-settings: 'FILL' 1;
   }
 
-  .mk-nav--tunnel.mk-nav--accent .mk-nav__button[aria-current='page'] {
+  .mk-nav--magnify.mk-nav--accent .mk-nav__button[aria-current='page'] {
     background: var(--md-sys-color-primary-container);
     color: var(--md-sys-color-on-primary-container);
     box-shadow: 0 0 32px -10px var(--md-sys-color-primary-container);
   }
 
-  .mk-nav--tunnel .mk-nav__button.mk-nav__button--first {
+  .mk-nav--magnify .mk-nav__button.mk-nav__button--first {
     color: var(--md-sys-color-on-background);
     width: 40px;
     padding: 0;
@@ -5134,7 +5119,7 @@ mk-chat > mk-chat-background {
     margin: 8px;
   }
 
-  .mk-nav--tunnel .mk-nav__button--first .mk-nav__name {
+  .mk-nav--magnify .mk-nav__button--first .mk-nav__name {
     /* Hidden from sight, not from screen readers: the button keeps its name. */
     position: absolute;
     width: 1px;
@@ -5144,7 +5129,7 @@ mk-chat > mk-chat-background {
     white-space: nowrap;
   }
 
-  .mk-nav--tunnel .mk-nav__button--first .mk-nav__icon {
+  .mk-nav--magnify .mk-nav__button--first .mk-nav__icon {
     display: none;
   }
 }
@@ -5270,11 +5255,11 @@ mk-chat > mk-chat-background {
 }
 
 /* Each style's view header. */
-.mk-shell:has(> .mk-nav--clasica) .mk-shell__title {
+.mk-shell:has(> .mk-nav--sidebar) .mk-shell__title {
   font-size: var(--md-sys-typescale-headline-small-size);
 }
 
-.mk-shell:has(> .mk-nav--clasica) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
+.mk-shell:has(> .mk-nav--sidebar) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
   position: sticky;
   top: 0;
   z-index: 1;
@@ -5285,13 +5270,13 @@ mk-chat > mk-chat-background {
   padding-top: max(16px, env(safe-area-inset-top));
 }
 
-.mk-shell:has(> .mk-nav--bonita) .mk-shell__title,
-.mk-shell:has(> .mk-nav--tasks) .mk-shell__title {
+.mk-shell:has(> .mk-nav--pills) .mk-shell__title,
+.mk-shell:has(> .mk-nav--rail) .mk-shell__title {
   font-size: var(--md-sys-typescale-title-small-size);
 }
 
-.mk-shell:has(> .mk-nav--bonita) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header,
-.mk-shell:has(> .mk-nav--tasks) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
+.mk-shell:has(> .mk-nav--pills) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header,
+.mk-shell:has(> .mk-nav--rail) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
   display: flex;
   align-items: center;
   margin: 16px 16px -8px;
@@ -5306,7 +5291,7 @@ mk-chat > mk-chat-background {
   padding: 0;
 }
 
-.mk-shell:has(> .mk-nav--bonita) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
+.mk-shell:has(> .mk-nav--pills) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
   padding-top: env(safe-area-inset-top);
 }
 
@@ -5314,11 +5299,11 @@ mk-chat > mk-chat-background {
   margin-bottom: -24px;
 }
 
-.mk-shell:has(> .mk-nav--guapa) .mk-shell__title {
+.mk-shell:has(> .mk-nav--card) .mk-shell__title {
   font-size: var(--md-sys-typescale-title-large-size);
 }
 
-.mk-shell:has(> .mk-nav--guapa) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
+.mk-shell:has(> .mk-nav--card) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
   position: sticky;
   top: 0;
   z-index: 1;
@@ -5332,11 +5317,11 @@ mk-chat > mk-chat-background {
   padding-top: max(12px, env(safe-area-inset-top));
 }
 
-.mk-shell:has(> .mk-nav--melon) .mk-shell__title {
+.mk-shell:has(> .mk-nav--wash) .mk-shell__title {
   font-size: var(--md-sys-typescale-headline-small-size);
 }
 
-.mk-shell:has(> .mk-nav--melon) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
+.mk-shell:has(> .mk-nav--wash) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
   position: sticky;
   top: 0;
   z-index: 1;
@@ -5347,7 +5332,7 @@ mk-chat > mk-chat-background {
 }
 
 @media only screen and (max-width: 679.98px) {
-  .mk-shell:has(> .mk-nav--tasks) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
+  .mk-shell:has(> .mk-nav--rail) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
     margin: 0;
     border-radius: 0;
     background: none;
@@ -5914,21 +5899,27 @@ mk-cursor {
 @media (prefers-reduced-motion: reduce) { .mk-quantity button, mk-quantity button { transition: none; transform: none !important; } }
 
 /* components/pagination/pagination.css */
+/* pagination — round page buttons on surface-2; a pill (accent) glides under the current page; numbers that stay slide
+   when the window moves and new ones pop in; hover lifts, press squeezes. */
 .mk-pagination, mk-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem; }
-.mk-pagination [data-mk-pagination-pages], mk-pagination [data-mk-pagination-pages] { display: flex; align-items: center; gap: .25rem; }
-.mk-pagination button, mk-pagination button { min-width: 2.5rem; height: 2.5rem; border: 0; border-radius: var(--mk-radius-full); background: var(--mk-surface-2); color: var(--mk-text); font: inherit; cursor: pointer; transition: transform .3s, background .3s, color .3s; }
+.mk-pagination [data-mk-pagination-pages], mk-pagination [data-mk-pagination-pages] { position: relative; display: flex; align-items: center; gap: .25rem; isolation: isolate; }
+.mk-pagination button, mk-pagination button { position: relative; min-width: 2.5rem; height: 2.5rem; border: 0; border-radius: var(--mk-radius-full); background: var(--mk-surface-2); color: var(--mk-text); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; transition: translate .3s cubic-bezier(.38,.49,0,1.5), background-color .25s, color .25s; }
 .mk-pagination button[aria-current], mk-pagination button[aria-current] { background: var(--mk-accent); color: var(--mk-on-accent); }
-.mk-pagination button:hover:not(:disabled), mk-pagination button:hover:not(:disabled) { transform: translateY(-3px); }
-.mk-pagination button:active:not(:disabled), mk-pagination button:active:not(:disabled) { transform: scale(.9); }
+/* With the engine, the pill paints the current page and its button stays clear. */
+:is(.mk-pagination, mk-pagination)[data-mk-glide] button[aria-current] { background: transparent; }
+:is(.mk-pagination, mk-pagination) [data-mk-pagination-indicator] { position: absolute; top: 0; left: 0; z-index: -1; border-radius: var(--mk-radius-full); background: var(--mk-accent); pointer-events: none; }
+.mk-pagination button:hover:not(:disabled), mk-pagination button:hover:not(:disabled) { translate: 0 -3px; }
+.mk-pagination button:hover:not(:disabled):not([aria-current]), mk-pagination button:hover:not(:disabled):not([aria-current]) { background: var(--mk-surface-3); }
 .mk-pagination button:focus-visible, mk-pagination button:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 3px; }
 .mk-pagination button:disabled, mk-pagination button:disabled { opacity: .35; cursor: default; }
 .mk-pagination__gap { padding: 0 .15rem; color: var(--mk-muted); }
-@media (prefers-reduced-motion: reduce) { .mk-pagination button, mk-pagination button { transition: none; transform: none !important; } }
+@media (prefers-reduced-motion: reduce) { .mk-pagination button, mk-pagination button { transition: none; translate: none !important; } }
 
 /* components/hover-card/hover-card.css */
 .mk-hover-card, mk-hover-card { position: relative; display: inline-flex; }
 .mk-hover-card [data-mk-hover-panel], mk-hover-card [data-mk-hover-panel] {
-  transform-origin: 50% 100%;
+  /* It grows from, and folds back into, the trigger's centre (the engine measures it). */
+  transform-origin: var(--mk-hover-origin-x, 50%) 100%;
   position: absolute; z-index: 10; bottom: calc(100% + .75rem); left: var(--mk-hover-shift, 0);
   width: min(19rem, calc(100vw - 1.5rem)); padding: 1.25rem; border-radius: var(--mk-radius-lg);
   color: var(--mk-on-glass-inverse); background: var(--mk-glass-inverse); border: 0; border-radius: var(--mk-radius-lg, 24px);
@@ -5938,11 +5929,16 @@ mk-cursor {
 }
 /* Bridge over the gap so the pointer can travel into the panel. */
 .mk-hover-card [data-mk-hover-panel]::after, mk-hover-card [data-mk-hover-panel]::after { content: ''; position: absolute; inset: -1rem 0; z-index: -1; }
-:is(.mk-hover-card, mk-hover-card)[data-mk-side=bottom] [data-mk-hover-panel] { top: calc(100% + .75rem); bottom: auto; transform-origin: 50% 0; animation-name: mk-hover-card-down; }
+:is(.mk-hover-card, mk-hover-card)[data-mk-side=bottom] [data-mk-hover-panel] { top: calc(100% + .75rem); bottom: auto; transform-origin: var(--mk-hover-origin-x, 50%) 0; animation-name: mk-hover-card-down; }
+/* Leaving: it shrinks back into the trigger out of a blur, then the engine hides it. */
+:is(.mk-hover-card, mk-hover-card)[data-mk-closing] [data-mk-hover-panel] { pointer-events: none; animation: mk-hover-card-out .22s cubic-bezier(.4,0,1,1) both; }
+:is(.mk-hover-card, mk-hover-card)[data-mk-closing][data-mk-side=bottom] [data-mk-hover-panel] { animation-name: mk-hover-card-out-up; }
 /* Opened from the keyboard: no entrance. */
 :is(.mk-hover-card, mk-hover-card)[data-mk-input=keyboard] [data-mk-hover-panel] { animation: none; }
 .mk-hover-card [hidden], mk-hover-card [hidden] { display: none !important; }
 @keyframes mk-hover-card-in { from { opacity: 0; filter: blur(32px); transform: translateY(8px) scale(.7); } to { opacity: 1; filter: none; transform: none; } }
+@keyframes mk-hover-card-out { to { opacity: 0; filter: blur(12px); transform: translateY(10px) scale(.3); } }
+@keyframes mk-hover-card-out-up { to { opacity: 0; filter: blur(12px); transform: translateY(-10px) scale(.3); } }
 @keyframes mk-hover-card-down { from { opacity: 0; filter: blur(32px); transform: translateY(-8px) scale(.7); } to { opacity: 1; filter: none; transform: none; } }
 @media (prefers-reduced-motion: reduce) { .mk-hover-card [data-mk-hover-panel], mk-hover-card [data-mk-hover-panel] { animation: none; } }
 
@@ -8799,7 +8795,8 @@ mk-hold-confirm {
 
 /* components/image-preview/image-preview.css */
 /* image-preview — thumbnails in Melonmind cards (16 px radius) and a full-screen dialog: a blurred dark backdrop, the
-   picture at 16 px radius, round glass buttons and a counter pill. */
+   picture at 16 px radius, round glass buttons, a counter pill and a glass strip of 8 px thumbnails with a ring that
+   glides to the current one. */
 .mk-image-preview,
 mk-image-preview {
   display: grid;
@@ -8888,6 +8885,83 @@ mk-image-preview {
   user-select: none;
 }
 
+/* The picture that leaves while the next one comes in (the engine places it over the old one). */
+[data-mk-lightbox='ghost'] {
+  border-radius: 16px;
+  object-fit: contain;
+  pointer-events: none;
+}
+
+[data-mk-lightbox-dialog][data-mk-strip] [data-mk-lightbox='image'] {
+  max-height: min(78dvh, calc(100dvh - 11rem));
+}
+
+[data-mk-lightbox='strip'] {
+  position: absolute;
+  bottom: 1rem;
+  left: 50%;
+  display: flex;
+  gap: 0.375rem;
+  max-width: calc(100vw - 2rem);
+  padding: 0.375rem;
+  overflow-x: auto;
+  border-radius: 14px;
+  background: rgb(255 255 255 / 0.08);
+  box-shadow:
+    inset 1px 1px 1px rgb(255 255 255 / 0.12),
+    inset -1px -1px 1px rgb(255 255 255 / 0.05);
+  backdrop-filter: blur(16px);
+  scrollbar-width: none;
+  translate: -50% 0;
+}
+
+[data-mk-lightbox='strip'][hidden] {
+  display: none;
+}
+
+[data-mk-lightbox-thumb] {
+  position: relative;
+  z-index: 1;
+  flex: none;
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: 8px;
+  background: rgb(255 255 255 / 0.06);
+  opacity: 0.5;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+[data-mk-lightbox-thumb]:hover,
+[data-mk-lightbox-thumb][aria-current='true'] {
+  opacity: 1;
+}
+
+[data-mk-lightbox-thumb]:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+[data-mk-lightbox-thumb] img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+[data-mk-lightbox-ring] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  border-radius: 9px;
+  box-shadow: 0 0 0 2px #fff;
+  pointer-events: none;
+}
+
 [data-mk-lightbox-dialog][data-mk-zoomed] [data-mk-lightbox='image'] {
   cursor: move;
 }
@@ -8977,6 +9051,15 @@ mk-image-preview {
 }
 
 @media (max-width: 680px) {
+  /* Phones swipe; the arrows take the bottom. */
+  [data-mk-lightbox='strip'] {
+    display: none;
+  }
+
+  [data-mk-lightbox-dialog][data-mk-strip] [data-mk-lightbox='image'] {
+    max-height: 78dvh;
+  }
+
   [data-mk-lightbox='prev'],
   [data-mk-lightbox='next'] {
     top: auto;
@@ -8987,7 +9070,8 @@ mk-image-preview {
 
 @media (prefers-reduced-motion: reduce) {
   :is(.mk-image-preview, mk-image-preview) [data-mk-image],
-  [data-mk-lightbox-dialog] button[data-mk-lightbox] {
+  [data-mk-lightbox-dialog] button[data-mk-lightbox],
+  [data-mk-lightbox-thumb] {
     transition: none;
     scale: none !important;
   }
@@ -11963,7 +12047,13 @@ mk-filter-builder {
   min-width: 0;
 }
 
-[data-mk-fb-rule] :is(select, input) {
+/* Choices are the kit's select (select.css draws the button); inputs share its look. */
+[data-mk-fb-rule] .mk-select {
+  min-width: 8rem;
+  max-width: 100%;
+}
+
+[data-mk-fb-rule] input {
   box-sizing: border-box;
   min-width: 0;
   height: 2.5rem;
@@ -11978,22 +12068,11 @@ mk-filter-builder {
   transition: box-shadow 0.2s ease;
 }
 
-[data-mk-fb-rule] select {
-  max-width: 100%;
-  padding-right: 1.9rem;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-position: right 0.55rem center;
-  background-repeat: no-repeat;
-  background-size: 1rem;
-  cursor: pointer;
-}
-
 [data-mk-fb-rule] input {
   width: 9rem;
 }
 
-[data-mk-fb-rule] :is(select, input):focus-visible {
+[data-mk-fb-rule] input:focus-visible {
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 35%, transparent);
 }
 
@@ -12092,7 +12171,7 @@ mk-filter-builder {
 }
 
 @media (max-width: 480px) {
-  [data-mk-fb-rule] :is(select, input) {
+  [data-mk-fb-rule] :is(.mk-select, input) {
     flex: 1 1 8rem;
   }
 }
@@ -12100,7 +12179,7 @@ mk-filter-builder {
 @media (prefers-reduced-motion: reduce) {
   [data-mk-fb-combinator] [role='radio'],
   [data-mk-fb-actions] button,
-  [data-mk-fb-rule] :is(select, input) {
+  [data-mk-fb-rule] input {
     transition: none;
   }
 }
@@ -12777,6 +12856,85 @@ mk-tree-view {
   }
 }
 
+/* Folder and page icons (icons option): the folder's front opens like a lid with its branch, or under a dragged card. */
+:is([data-mk-tree-folder], [data-mk-tree-page]) {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 1.15rem;
+  height: 1.15rem;
+}
+
+:is([data-mk-tree-folder], [data-mk-tree-page]) svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+[data-mk-tree-folder-back] {
+  fill: color-mix(in srgb, var(--mk-accent) 70%, var(--mk-surface-1));
+}
+
+[data-mk-tree-folder-front] {
+  fill: var(--mk-accent);
+  transform-box: fill-box;
+  transform-origin: 50% 100%;
+  transition: transform 0.35s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+[role='treeitem'][aria-expanded='true'] > [data-mk-tree-row] [data-mk-tree-folder-front],
+[role='treeitem'][data-mk-tree-over] > [data-mk-tree-row] [data-mk-tree-folder-front] {
+  transform: skewX(-14deg) scaleY(0.78);
+}
+
+[data-mk-tree-sheet] {
+  fill: var(--mk-surface-3);
+  stroke: var(--mk-outline);
+  stroke-width: 2;
+}
+
+[data-mk-tree-fold] {
+  fill: var(--mk-outline);
+}
+
+/* Dragging: the source row fades, the branch under the card lights up, the card floats with a shadow. */
+[role='treeitem'][data-mk-tree-dragging] > [data-mk-tree-row] {
+  opacity: 0.4;
+}
+
+[role='treeitem'][data-mk-tree-over] > [data-mk-tree-row] {
+  background: color-mix(in srgb, var(--mk-accent) 14%, transparent);
+  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mk-accent) 55%, transparent);
+}
+
+[data-mk-tree-drag] {
+  position: fixed;
+  z-index: 2147483646;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  max-width: 16rem;
+  padding: 0.45rem 0.75rem;
+  overflow: hidden;
+  border-radius: 10px;
+  background: var(--mk-surface-1);
+  box-shadow:
+    0 0 0 1px var(--mk-outline-soft),
+    0 14px 30px -10px color-mix(in srgb, var(--mk-shadow-color, #000) 45%, transparent);
+  color: var(--mk-text);
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-tree-folder-front] {
+    transition: none;
+  }
+}
+
 /* components/file-explorer/file-explorer.css */
 /* file-explorer — a 20 px panel on surface-1: a bar (the breadcrumb, 8 px tools, a list/grid switch whose pill slides),
    the folder tree on the side (gone under 560 px), the folder's content as 8 px rows or 12 px tiles, and a status line.
@@ -13493,7 +13651,8 @@ mk-json-viewer {
   transition:
     background-color 0.15s,
     color 0.15s,
-    opacity 0.15s;
+    opacity 0.15s,
+    translate 0.2s ease;
 }
 
 [data-mk-jv-tool]:hover,
@@ -13603,6 +13762,27 @@ mk-json-viewer {
   color: var(--mk-muted);
   font-size: 0.75rem;
   text-overflow: ellipsis;
+  transition:
+    opacity 0.25s ease,
+    translate 0.3s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+/* An open branch shows its content: the count steps back. */
+[role='treeitem'][aria-expanded='true'] > [data-mk-tree-row] [data-mk-jv-summary] {
+  opacity: 0.45;
+  translate: -3px 0;
+}
+
+/* Hovered values sit on a faint pill of their own colour. */
+[data-mk-jv-value] {
+  margin: 0 -0.2rem;
+  padding: 0 0.2rem;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+[data-mk-tree-row]:hover [data-mk-jv-value] {
+  background: color-mix(in srgb, currentColor 12%, transparent);
 }
 
 [data-mk-jv-copy] {
@@ -13611,11 +13791,14 @@ mk-json-viewer {
   margin-left: auto;
   border-radius: 6px;
   opacity: 0;
+  translate: 4px 0;
 }
 
+/* The copy button slides in on hover (or focus). */
 [data-mk-tree-row]:hover [data-mk-jv-copy],
 [role='treeitem']:focus-visible > [data-mk-tree-row] [data-mk-jv-copy] {
   opacity: 1;
+  translate: 0 0;
 }
 
 @media (hover: none) {
@@ -13682,6 +13865,13 @@ mk-json-viewer {
   [data-mk-jv-added] {
     animation: none;
   }
+
+  [data-mk-jv-copy],
+  [data-mk-jv-summary],
+  [data-mk-jv-value] {
+    transition: none;
+    translate: none;
+  }
 }
 
 /* components/virtual-list/virtual-list.css */
@@ -14147,10 +14337,12 @@ mk-split-view {
 /* components/data-table/data-table.css */
 /* data-table — a toolbar (a 12 px search on surface-3, 12 px tool buttons with an accent count), the filter sentence
    on accent-soft, then the table on a 20 px panel: a sticky muted header with sort buttons whose arrow turns, 3rem
-   rows on hairlines, chosen rows tinted, 18 px checks that draw themselves, an 8 px row menu button and shimmering
-   bones while loading; the foot with the range, rows per page and the pager; the bar of the chosen rows on inverse
-   glass. Panels (columns, filters) are anchored .mk-dialog (dialog.css) surfaces with 20 px corners. The table
-   scrolls sideways inside its panel when it is wider; --mk-dt-max-height lets it scroll down too. */
+   rows on hairlines, chosen rows softly tinted with an accent edge (their data stays readable), 18 px checks that
+   draw themselves, an 8 px row menu button and shimmering bones while loading; the foot with the range, the rows
+   per page menu and the pager; the bar of the chosen rows takes the toolbar's place, so it never covers a row.
+   Panels and menus (columns, filters, rows per page, row actions) are anchored .mk-dialog (dialog.css) surfaces with
+   20 px corners and 8 px items. The table scrolls sideways inside its panel when it is wider; --mk-dt-max-height
+   lets it scroll down too. */
 .mk-data-table,
 mk-data-table {
   --mk-dt-max-height: none;
@@ -14164,6 +14356,8 @@ mk-data-table {
 
 /* ── The toolbar ─────────────────────────────────────────────────────────── */
 [data-mk-dt-bar] {
+  grid-row: 1;
+  grid-column: 1;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -14233,6 +14427,7 @@ mk-data-table {
 }
 
 [data-mk-dt-tool]:focus-visible,
+[data-mk-dt-size-button]:focus-visible,
 [data-mk-dt-sort]:focus-visible,
 [data-mk-dt-row-menu]:focus-visible,
 [data-mk-dt-pager] button:focus-visible,
@@ -14370,8 +14565,17 @@ mk-data-table {
   background: color-mix(in srgb, var(--mk-text) 3%, transparent);
 }
 
+/* A chosen row: a light tint and an accent edge, never a fill that hides the data (on OLED the accent is white). */
 [data-mk-dt-table] tbody tr[data-selected] {
-  background: color-mix(in srgb, var(--mk-accent-soft) 60%, transparent);
+  background: color-mix(in srgb, var(--mk-accent) 7%, transparent);
+}
+
+[data-mk-dt-table] tbody tr[data-selected]:hover {
+  background: color-mix(in srgb, var(--mk-accent) 11%, transparent);
+}
+
+[data-mk-dt-table] tbody tr[data-selected] > :first-child {
+  box-shadow: inset 3px 0 0 var(--mk-accent);
 }
 
 [data-mk-dt-table] td mark {
@@ -14443,7 +14647,7 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
   width: 1.125rem;
   height: 1.125rem;
   box-sizing: border-box;
-  border: 1.5px solid var(--mk-outline);
+  border: 2px solid var(--mk-outline);
   border-radius: 5px;
   color: transparent;
   vertical-align: middle;
@@ -14464,6 +14668,9 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
 }
 
 [data-mk-dt-check] svg {
+  display: block;
+  width: 100%;
+  height: 100%;
   pointer-events: none;
 }
 
@@ -14569,14 +14776,35 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
   margin-left: auto;
 }
 
-[data-mk-dt-size] select {
+[data-mk-dt-size-button] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
   height: 2rem;
-  padding: 0 0.5rem;
+  padding: 0 0.375rem 0 0.75rem;
   border: 1px solid var(--mk-outline-soft);
   border-radius: 8px;
   background: var(--mk-surface-1);
   color: var(--mk-text);
   font: inherit;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+[data-mk-dt-size-button]:hover,
+[data-mk-dt-size-button][aria-expanded='true'] {
+  background: var(--mk-surface-2);
+}
+
+[data-mk-dt-size-button] svg {
+  flex: none;
+  color: var(--mk-muted);
+  transition: transform 0.3s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+[data-mk-dt-size-button][aria-expanded='true'] svg {
+  transform: rotate(180deg);
 }
 
 [data-mk-dt-pager] {
@@ -14610,24 +14838,28 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
 }
 
 /* ── The bar of the chosen rows ──────────────────────────────────────────── */
+/* It shares the toolbar's grid cell and covers it while rows are chosen: the rows stay in view. */
 [data-mk-dt-bulk] {
-  position: absolute;
-  right: 0;
-  bottom: 3.25rem;
-  left: 0;
-  z-index: 3;
+  position: relative;
+  z-index: 2;
+  grid-row: 1;
+  grid-column: 1;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  align-self: stretch;
   gap: 0.25rem 0.5rem;
-  width: max-content;
-  max-width: calc(100% - 1rem);
-  margin-inline: auto;
-  padding: 0.375rem 0.375rem 0.375rem 1rem;
-  border-radius: 20px;
-  background: var(--mk-glass-inverse, var(--mk-text));
-  box-shadow: 0 14px 32px -12px color-mix(in srgb, var(--mk-shadow-color, #000) 45%, transparent);
-  color: var(--mk-on-glass-inverse, var(--mk-surface-1));
+  min-width: 0;
+  min-height: 2.5rem;
+  padding: 0.25rem 0.25rem 0.25rem 1rem;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+}
+
+.mk-data-table:has(> [data-mk-dt-bulk]:not([hidden])) > [data-mk-dt-bar],
+mk-data-table:has(> [data-mk-dt-bulk]:not([hidden])) > [data-mk-dt-bar] {
+  visibility: hidden;
 }
 
 [data-mk-dt-bulk-label] {
@@ -14651,12 +14883,17 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
   height: 2rem;
   padding: 0 0.75rem;
   border: 0;
-  border-radius: 12px;
-  background: color-mix(in srgb, currentColor 14%, transparent);
+  border-radius: 8px;
+  background: var(--mk-surface-1);
   color: inherit;
   font: inherit;
   font-weight: 500;
   cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+[data-mk-dt-bulk] button:hover {
+  background: var(--mk-surface-2);
 }
 
 [data-mk-dt-bulk] button[data-danger] {
@@ -14664,23 +14901,31 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
   color: var(--mk-on-error, #fff);
 }
 
-[data-mk-dt-select-all] {
+[data-mk-dt-bulk] [data-mk-dt-select-all] {
+  background: none;
   text-decoration: underline;
   text-underline-offset: 3px;
 }
 
-[data-mk-dt-bulk-close] {
+/* The close button is a square with its cross in the middle (the bar's button padding must not reach it). */
+[data-mk-dt-bulk] [data-mk-dt-bulk-close] {
   display: inline-grid;
   place-items: center;
   width: 2rem;
+  margin-left: auto;
   padding: 0;
 }
 
+[data-mk-dt-bulk-close] svg {
+  display: block;
+}
+
 /* ── Panels and the row menu ─────────────────────────────────────────────── */
 .mk-dialog.mk-dt-panel {
   --mk-dialog-radius: 20px;
   --mk-dialog-bg: var(--mk-surface-1);
-  --mk-dialog-shadow: 0 16px 48px -12px color-mix(in srgb, var(--mk-shadow-color, #000) 35%, transparent);
+  /* A hairline keeps the panel apart from the table under it (on OLED both are near black). */
+  --mk-dialog-shadow: 0 0 0 1px var(--mk-outline-soft), 0 16px 48px -12px color-mix(in srgb, var(--mk-shadow-color, #000) 35%, transparent);
   gap: 0.5rem;
   width: max-content;
   min-width: min(14rem, calc(100vw - 32px));
@@ -14721,6 +14966,45 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
   background: var(--mk-surface-2);
 }
 
+/* The row menu and the rows per page menu look like the panels: 20 px surface, 8 px items, the same hover. */
+.mk-dialog.mk-dt-panel.mk-dt-menu {
+  gap: 0.125rem;
+  min-width: 9rem;
+  padding: 0.375rem;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item] {
+  gap: 0.625rem;
+  min-height: 2.25rem;
+  padding: 0 0.625rem;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: normal;
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item]:hover,
+.mk-dialog.mk-dt-menu [data-mk-item]:focus-visible {
+  background: var(--mk-surface-2);
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item] svg {
+  flex: none;
+  margin-left: auto;
+  opacity: 0;
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item][aria-checked='true'] {
+  font-weight: 600;
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item][aria-checked='true'] svg {
+  opacity: 1;
+}
+
 .mk-dialog.mk-dt-menu [data-mk-item][data-danger] {
   color: var(--mk-error);
 }
@@ -14731,6 +15015,7 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
   }
 
   [data-mk-dt-sort] svg,
+  [data-mk-dt-size-button] svg,
   [data-mk-dt-check] {
     transition: none;
   }
@@ -15222,3 +15507,1382 @@ mk-rich-text-editor {
     animation: none;
   }
 }
+
+/* components/select/select.css */
+/* select — a 12 px field button (surface-3) with the chosen label and a chevron that turns, opening the kit's menu:
+   a 16 px surface-1 panel with 8 px items, group headings and a check on the chosen one. The label slides in out of a
+   blur when it changes. The <select> it keeps in step is hidden. */
+.mk-select,
+mk-select {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+:is(.mk-select, mk-select) > select[hidden] {
+  display: none;
+}
+
+[data-mk-select-trigger] {
+  display: inline-flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  min-width: 0;
+  height: 2.5rem;
+  padding: 0 0.55rem 0 0.8rem;
+  border: 0;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  font: inherit;
+  font-size: 0.875rem;
+  text-align: start;
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    box-shadow 0.2s;
+}
+
+[data-mk-select-trigger]:hover:not(:disabled),
+[data-mk-select-trigger][aria-expanded='true'] {
+  background: color-mix(in srgb, var(--mk-surface-3) 80%, var(--mk-text) 8%);
+}
+
+[data-mk-select-trigger]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 35%, transparent);
+}
+
+[data-mk-select-trigger]:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+[data-mk-select-value] {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:is(.mk-select, mk-select)[data-mk-placeholder] [data-mk-select-value] {
+  color: var(--mk-muted);
+}
+
+[data-mk-select-chevron] {
+  flex: none;
+  color: var(--mk-muted);
+  transition: transform 0.3s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+[data-mk-select-trigger][aria-expanded='true'] [data-mk-select-chevron] {
+  transform: rotate(180deg);
+}
+
+/* The menu: like the panels of the data table (surface-1, a hairline, 8 px items). */
+.mk-dialog.mk-select-menu {
+  --mk-dialog-bg: var(--mk-surface-1);
+  --mk-dialog-radius: 16px;
+  --mk-dialog-shadow: 0 0 0 1px var(--mk-outline-soft), 0 16px 48px -12px color-mix(in srgb, var(--mk-shadow-color, #000) 35%, transparent);
+  gap: 0.125rem;
+  min-width: max(10rem, var(--mk-select-width, 0px));
+  max-height: min(20rem, 60dvh);
+  padding: 0.375rem;
+  overflow-y: auto;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+.mk-dialog.mk-select-menu [data-mk-item] {
+  flex: none;
+  gap: 0.625rem;
+  min-height: 2.25rem;
+  padding: 0 0.625rem;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: normal;
+}
+
+.mk-dialog.mk-select-menu [data-mk-item]:hover,
+.mk-dialog.mk-select-menu [data-mk-item]:focus-visible {
+  background: var(--mk-surface-2);
+}
+
+.mk-dialog.mk-select-menu [data-mk-item] svg {
+  flex: none;
+  margin-left: auto;
+  opacity: 0;
+}
+
+.mk-dialog.mk-select-menu [data-mk-item][aria-checked='true'] {
+  font-weight: 600;
+}
+
+.mk-dialog.mk-select-menu [data-mk-item][aria-checked='true'] svg {
+  opacity: 1;
+}
+
+[data-mk-select-group] {
+  flex: none;
+  margin: 0.375rem 0.625rem 0.125rem;
+  color: var(--mk-muted);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-select-trigger],
+  [data-mk-select-chevron] {
+    transition: none;
+  }
+}
+
+/* components/add-to-cart/add-to-cart.css */
+/* add-to-cart — the little box that carries the product to the cart: a kraft front with a tape stripe in the accent,
+   two flaps that close over the picture, a soft shadow; it flies above everything and never takes the pointer. */
+.mk-add-to-cart,
+mk-add-to-cart {
+  display: inline-flex;
+}
+
+[data-mk-cart-box] {
+  --mk-cart-box: #c99a62;
+  --mk-cart-box-shade: #b0824d;
+  --mk-cart-tape: var(--mk-accent);
+  position: fixed;
+  z-index: 2147483646;
+  pointer-events: none;
+  filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.28));
+}
+
+[data-mk-cart-thumb] {
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  width: 40px;
+  height: 40px;
+  margin-left: -20px;
+  border-radius: 8px;
+  object-fit: cover;
+}
+
+[data-mk-cart-front] {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 70%;
+  border-radius: 4px 4px 8px 8px;
+  background: linear-gradient(180deg, var(--mk-cart-box), var(--mk-cart-box-shade));
+  transform-origin: 50% 100%;
+}
+
+[data-mk-cart-tape] {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 10px;
+  height: 100%;
+  margin-left: -5px;
+  border-radius: 0 0 2px 2px;
+  background: var(--mk-cart-tape);
+  opacity: 0.9;
+  transform-origin: 50% 0;
+}
+
+[data-mk-cart-flap] {
+  position: absolute;
+  top: 18%;
+  width: 50%;
+  height: 14%;
+  background: var(--mk-cart-box-shade);
+}
+
+[data-mk-cart-flap='left'] {
+  left: 0;
+  border-radius: 4px 0 0 2px;
+  transform-origin: 0 100%;
+}
+
+[data-mk-cart-flap='right'] {
+  right: 0;
+  border-radius: 0 4px 2px 0;
+  transform-origin: 100% 100%;
+}
+
+/* components/scroll-island/scroll-island.css */
+/* scroll-island — the scroller's bar hides and a thin pill takes its place while scrolling; near the edge it swells
+   into a dark capsule (iOS-island style) with the percentage and the current section, which can be dragged. */
+.mk-scroll-island,
+mk-scroll-island {
+  display: block;
+}
+
+[data-mk-scroll-island-host] {
+  scrollbar-width: none;
+}
+
+[data-mk-scroll-island-host]::-webkit-scrollbar {
+  display: none;
+}
+
+[data-mk-scroll-island] {
+  position: fixed;
+  z-index: 2147483640;
+  pointer-events: none;
+}
+
+[data-mk-island-rail] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 1.5rem;
+  cursor: pointer;
+  pointer-events: none;
+}
+
+[data-mk-island-thumb] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 4px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--mk-text) 42%, transparent);
+  color: #fff;
+  opacity: 0;
+  transition:
+    opacity 0.25s ease,
+    background-color 0.3s ease,
+    box-shadow 0.3s ease;
+}
+
+[data-mk-scroll-island][data-mk-state='bar'] [data-mk-island-thumb] {
+  opacity: 1;
+}
+
+[data-mk-scroll-island][data-mk-state='island'] [data-mk-island-rail],
+[data-mk-scroll-island][data-mk-state='island'] [data-mk-island-thumb] {
+  pointer-events: auto;
+}
+
+[data-mk-scroll-island][data-mk-state='island'] [data-mk-island-thumb] {
+  background: #0c0c0e;
+  box-shadow:
+    inset 0 0 0 1px rgb(255 255 255 / 0.08),
+    0 12px 30px -8px rgb(0 0 0 / 0.45);
+  opacity: 1;
+  cursor: grab;
+}
+
+[data-mk-scroll-island][data-mk-dragging] [data-mk-island-thumb] {
+  cursor: grabbing;
+}
+
+[data-mk-island-content] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 14px;
+  font-family: var(--mk-font);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 0.18s ease;
+}
+
+[data-mk-scroll-island][data-mk-state='island'] [data-mk-island-content] {
+  opacity: 1;
+  transition-delay: 0.1s;
+}
+
+[data-mk-island-section] {
+  max-width: 12rem;
+  overflow: hidden;
+  color: rgb(255 255 255 / 0.68);
+  font-weight: 500;
+  text-overflow: ellipsis;
+}
+
+[data-mk-island-section][hidden] {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-island-thumb],
+  [data-mk-island-content] {
+    transition: none;
+  }
+}
+
+/* components/pill-button/pill-button.css */
+/* pill-button — a dark pill whose fill gathers into a circle around the icon on hover (and spreads back on leave).
+   The fill is one layer clipped with inset(); the label and icon sit above it. `expand` starts as the circle. */
+.mk-pill-button:is(button, a),
+[data-mk-pill] {
+  --mk-pill-height: 3rem;
+  --mk-pill-dot: 2.25rem;
+  --mk-pill-ink: var(--mk-text);
+  --mk-pill-on-ink: var(--mk-bg);
+  --mk-pill-gap: calc((var(--mk-pill-height) - var(--mk-pill-dot)) / 2);
+  --mk-pill-gathered: inset(var(--mk-pill-gap) var(--mk-pill-gap) var(--mk-pill-gap) calc(100% - var(--mk-pill-gap) - var(--mk-pill-dot)) round var(--mk-radius-full));
+  --mk-pill-spread: inset(0 0 0 0 round var(--mk-radius-full));
+  position: relative;
+  isolation: isolate;
+  display: inline-flex;
+  align-items: center;
+  gap: 1.25rem;
+  height: var(--mk-pill-height);
+  padding: 0 calc(var(--mk-pill-gap) + (var(--mk-pill-dot) - 1.125rem) / 2) 0 1.5rem;
+  border: 0;
+  border-radius: var(--mk-radius-full);
+  background: transparent;
+  color: var(--mk-pill-on-ink);
+  font: 500 1rem/1 var(--mk-font);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+mk-pill-button {
+  display: inline-flex;
+}
+
+[data-mk-pill-fill] {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--mk-pill-ink);
+  clip-path: var(--mk-pill-spread);
+  transition: clip-path 0.5s var(--mk-ease-swatch);
+}
+
+[data-mk-pill-label] {
+  display: inline-block;
+  color: var(--mk-pill-on-ink);
+  transition:
+    transform 0.45s var(--mk-ease-swatch),
+    color 0.2s ease 0.05s;
+}
+
+[data-mk-pill-icon] {
+  display: inline-grid;
+  place-items: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  color: var(--mk-pill-on-ink);
+  transition: transform 0.45s var(--mk-ease-swatch);
+}
+
+[data-mk-pill-icon] svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* Gathered: on hover, keyboard focus or a tap. */
+@media (hover: hover) {
+  :is([data-mk-pill=''], .mk-pill-button:is(button, a):not([data-mk-pill])):hover [data-mk-pill-fill] {
+    clip-path: var(--mk-pill-gathered);
+  }
+  :is([data-mk-pill=''], .mk-pill-button:is(button, a):not([data-mk-pill])):hover [data-mk-pill-label] {
+    color: var(--mk-pill-ink);
+    transform: translateX(-0.5rem);
+  }
+  :is([data-mk-pill], .mk-pill-button:is(button, a)):hover [data-mk-pill-icon] {
+    transform: translateX(2px);
+  }
+}
+[data-mk-pill='']:is(:focus-visible, [data-mk-active]) [data-mk-pill-fill] {
+  clip-path: var(--mk-pill-gathered);
+}
+[data-mk-pill='']:is(:focus-visible, [data-mk-active]) [data-mk-pill-label] {
+  color: var(--mk-pill-ink);
+  transform: translateX(-0.5rem);
+}
+
+/* expand: the circle spreads into the pill. */
+[data-mk-pill='expand'] [data-mk-pill-fill] {
+  clip-path: var(--mk-pill-gathered);
+}
+[data-mk-pill='expand'] [data-mk-pill-label] {
+  color: var(--mk-pill-ink);
+}
+@media (hover: hover) {
+  [data-mk-pill='expand']:hover [data-mk-pill-fill] {
+    clip-path: var(--mk-pill-spread);
+  }
+  [data-mk-pill='expand']:hover [data-mk-pill-label] {
+    color: var(--mk-pill-on-ink);
+    transform: translateX(0.25rem);
+  }
+}
+[data-mk-pill='expand']:is(:focus-visible, [data-mk-active]) [data-mk-pill-fill] {
+  clip-path: var(--mk-pill-spread);
+}
+[data-mk-pill='expand']:is(:focus-visible, [data-mk-active]) [data-mk-pill-label] {
+  color: var(--mk-pill-on-ink);
+  transform: translateX(0.25rem);
+}
+
+:is([data-mk-pill], .mk-pill-button:is(button, a)):focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+:is([data-mk-pill], .mk-pill-button:is(button, a)):is(:disabled, [aria-disabled='true']) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-pill-fill],
+  [data-mk-pill-label],
+  [data-mk-pill-icon] {
+    transition-duration: 0.01s;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-mk-pill] {
+    border: 1px solid ButtonText;
+  }
+}
+
+/* components/toolbar/toolbar.css */
+/* toolbar — a dark rail of round tools; a light blob sits under the chosen one and stretches like slime to the next.
+   The label beside a tool is a small dark pill. In the dark theme the rail turns light and the blob dark. */
+.mk-toolbar,
+mk-toolbar {
+  --mk-toolbar-rail: color-mix(in srgb, var(--mk-text) 86%, var(--mk-bg));
+  --mk-toolbar-on-rail: var(--mk-bg);
+  --mk-toolbar-blob: var(--mk-bg);
+  --mk-toolbar-on-blob: var(--mk-text);
+  --mk-toolbar-tool: 3.5rem;
+  position: relative;
+  display: inline-flex;
+  width: max-content;
+  max-width: 100%;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-toolbar-rail);
+  box-shadow: 0 10px 30px -12px var(--mk-shadow-color, rgb(0 0 0 / 0.35));
+}
+
+:is(.mk-toolbar, mk-toolbar)[data-mk-orientation='horizontal'] {
+  flex-direction: row;
+}
+
+:is(.mk-toolbar, mk-toolbar) > button {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: var(--mk-toolbar-tool);
+  height: var(--mk-toolbar-tool);
+  padding: 0;
+  border: 0;
+  border-radius: var(--mk-radius-full);
+  background: transparent;
+  color: var(--mk-toolbar-on-rail);
+  cursor: pointer;
+  transition: color 0.2s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:is(.mk-toolbar, mk-toolbar) > button svg {
+  width: 1.5rem;
+  height: 1.5rem;
+  transition: transform 0.35s var(--mk-ease-swatch);
+}
+
+/* The chosen tool's icon turns dark as the blob arrives under it. */
+:is(.mk-toolbar, mk-toolbar) > button[aria-pressed='true'] {
+  color: var(--mk-toolbar-on-blob);
+  transition-delay: 0.12s;
+}
+
+@media (hover: hover) {
+  :is(.mk-toolbar, mk-toolbar) > button:hover svg {
+    transform: scale(1.1);
+  }
+}
+
+:is(.mk-toolbar, mk-toolbar) > button:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+:is(.mk-toolbar, mk-toolbar) > button:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+[data-mk-toolbar-blob] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--mk-toolbar-tool);
+  height: var(--mk-toolbar-tool);
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-toolbar-blob);
+  pointer-events: none;
+  will-change: transform, height, width;
+}
+
+[data-mk-toolbar-tip] {
+  position: absolute;
+  top: 0;
+  left: calc(100% + 0.75rem);
+  z-index: 2;
+  padding: 0.4rem 0.9rem;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-toolbar-rail);
+  color: var(--mk-toolbar-on-rail);
+  font: 500 0.875rem/1.2 var(--mk-font);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+:is(.mk-toolbar, mk-toolbar)[data-mk-orientation='horizontal'] [data-mk-toolbar-tip] {
+  top: auto;
+  bottom: calc(100% + 0.75rem);
+  left: 0;
+}
+
+[data-mk-toolbar-tip][hidden] {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-toolbar, mk-toolbar) > button,
+  :is(.mk-toolbar, mk-toolbar) > button svg {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-mk-toolbar-blob] {
+    background: Highlight;
+  }
+  :is(.mk-toolbar, mk-toolbar) > button[aria-pressed='true'] {
+    color: HighlightText;
+  }
+}
+
+/* components/bidirectional-slider/bidirectional-slider.css */
+/* bidirectional-slider — a chunky 12 px track whose fill grows from the origin notch towards the thumb:
+   "more" in the accent, "less" in a tint of it. − and + sit at the ends; the bubble shows the signed value while held. */
+.mk-bidirectional-slider,
+mk-bidirectional-slider {
+  --mk-bislider-height: 2.75rem;
+  --mk-bislider-track: var(--mk-surface-2);
+  --mk-bislider-more: var(--mk-accent);
+  --mk-bislider-less: color-mix(in srgb, var(--mk-accent) 45%, var(--mk-surface-2));
+  display: grid;
+  grid-template-columns: auto minmax(6rem, 1fr) auto;
+  align-items: center;
+  gap: 0.375rem;
+  width: 100%;
+  max-width: 26rem;
+  color: var(--mk-text);
+}
+
+[data-mk-bislider-track] {
+  position: relative;
+  height: var(--mk-bislider-height);
+  border-radius: 12px;
+  background: var(--mk-bislider-track);
+  touch-action: none;
+}
+
+[data-mk-bislider-track]:has(input:focus-visible) {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+[data-mk-bislider-clip] {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+[data-mk-bislider-fill] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: var(--mk-bislider-more);
+  transition: background-color 0.2s ease;
+}
+
+:is(.mk-bidirectional-slider, mk-bidirectional-slider)[data-mk-side='less'] [data-mk-bislider-fill] {
+  background: var(--mk-bislider-less);
+}
+
+[data-mk-bislider-notch] {
+  position: absolute;
+  top: 30%;
+  bottom: 30%;
+  width: 2px;
+  margin-left: -1px;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--mk-text) 30%, transparent);
+}
+
+[data-mk-bislider-thumb] {
+  position: absolute;
+  top: 20%;
+  bottom: 20%;
+  width: 4px;
+  margin-left: -2px;
+  border-radius: 4px;
+  background: var(--mk-text);
+  pointer-events: none;
+  transition: transform 0.35s var(--mk-ease-swatch);
+}
+
+:is(.mk-bidirectional-slider, mk-bidirectional-slider)[data-mk-held] [data-mk-bislider-thumb] {
+  transform: scale(1.5, 1.2);
+}
+
+[data-mk-bislider-bubble] {
+  position: absolute;
+  bottom: calc(100% + 0.5rem);
+  padding: 0.2rem 0.55rem;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-glass-inverse);
+  box-shadow: var(--mk-glass-bevel);
+  color: var(--mk-on-glass-inverse);
+  font: 600 0.75rem/1.2 var(--mk-font);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transform: translate(-50%, 4px) scale(0.85);
+  transform-origin: 50% 100%;
+  transition:
+    opacity 0.15s ease,
+    transform 0.3s var(--mk-ease-swatch);
+}
+
+:is(.mk-bidirectional-slider, mk-bidirectional-slider):is([data-mk-held], :has(input:focus-visible)) [data-mk-bislider-bubble] {
+  opacity: 1;
+  transform: translate(-50%, 0) scale(1);
+}
+
+[data-mk-bislider-input] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: grab;
+  appearance: none;
+}
+
+:is(.mk-bidirectional-slider, mk-bidirectional-slider)[data-mk-held] [data-mk-bislider-input] {
+  cursor: grabbing;
+}
+
+:is([data-mk-bislider-less], [data-mk-bislider-more]) {
+  display: grid;
+  place-items: center;
+  width: var(--mk-bislider-height);
+  height: var(--mk-bislider-height);
+  padding: 0;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:is([data-mk-bislider-less], [data-mk-bislider-more]) svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+@media (hover: hover) {
+  :is([data-mk-bislider-less], [data-mk-bislider-more]):hover {
+    background: var(--mk-surface-2);
+  }
+}
+
+:is(.mk-bidirectional-slider, mk-bidirectional-slider):has(input:disabled) {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-bislider-thumb],
+  [data-mk-bislider-bubble] {
+    transition: opacity 0.15s ease;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-mk-bislider-fill] {
+    background: Highlight !important;
+  }
+  [data-mk-bislider-track] {
+    border: 1px solid CanvasText;
+  }
+}
+
+/* components/voice-dots/voice-dots.css */
+/* voice-dots — round dots in the text colour (or the chart colours) that stretch into pills with the voice.
+   The row is tall enough for the tallest pill, so the layout around it never moves. */
+.mk-voice-dots,
+mk-voice-dots {
+  --mk-voice-size: 12px;
+  --mk-voice-dot: var(--mk-text);
+  display: inline-grid;
+  place-items: center;
+  min-width: calc(var(--mk-voice-size) * 8);
+  height: calc(var(--mk-voice-size) * 4.6);
+}
+
+[data-mk-voice-row] {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--mk-voice-size) * 0.9);
+  height: 100%;
+}
+
+[data-mk-voice-dot] {
+  display: block;
+  width: var(--mk-voice-size);
+  height: var(--mk-voice-size);
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-voice-dot);
+  transition:
+    background-color 0.3s ease,
+    opacity 0.3s ease;
+  will-change: transform, height;
+}
+
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-state='idle'] [data-mk-voice-dot] {
+  opacity: 0.55;
+}
+
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-colorful] [data-mk-voice-dot='1'] {
+  --mk-voice-dot: var(--mk-chart-1, #2a78d6);
+}
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-colorful] [data-mk-voice-dot='2'] {
+  --mk-voice-dot: var(--mk-chart-8, #e34948);
+}
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-colorful] [data-mk-voice-dot='3'] {
+  --mk-voice-dot: var(--mk-chart-4, #eda100);
+}
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-colorful] [data-mk-voice-dot='4'] {
+  --mk-voice-dot: var(--mk-chart-3, #1baf7a);
+}
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-colorful] [data-mk-voice-dot='5'] {
+  --mk-voice-dot: var(--mk-chart-7, #6250d6);
+}
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-colorful] [data-mk-voice-dot='6'] {
+  --mk-voice-dot: var(--mk-chart-2, #eb6834);
+}
+
+/* Without motion the state shows in the dots' colour. */
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-voice-dots, mk-voice-dots)[data-mk-state='listening'] [data-mk-voice-dot] {
+    --mk-voice-dot: var(--mk-accent);
+  }
+  :is(.mk-voice-dots, mk-voice-dots)[data-mk-state='thinking'] [data-mk-voice-dot] {
+    opacity: 0.75;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-mk-voice-dot] {
+    background: CanvasText;
+  }
+}
+
+/* components/pie-chart/pie-chart.css */
+/* pie-chart — a donut (or pie) in chart's family: it needs chart.css for the colours, tooltip, legend and table.
+   Slices are parted by the surface; the chosen one slides out, the others dim; the donut's middle names it. */
+.mk-pie-chart,
+mk-pie-chart {
+  display: grid;
+  justify-items: center;
+  gap: 1rem;
+}
+
+[data-mk-chart-type='pie'] [data-mk-chart-plot] {
+  width: 100%;
+}
+
+[data-mk-chart-type='pie'] [data-mk-chart-svg] {
+  width: var(--mk-pie-size, 240px);
+  max-width: 100%;
+  margin-inline: auto;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+[data-mk-chart-type='pie'] [data-mk-part='series'] path {
+  stroke: var(--mk-chart-surface);
+  stroke-width: 1;
+  stroke-linejoin: round;
+  transition:
+    transform 0.45s var(--mk-ease-swatch),
+    opacity 0.2s ease;
+}
+
+[data-mk-chart-type='pie'] [data-mk-part='series'] path[data-mk-dim] {
+  opacity: 0.4;
+}
+
+[data-mk-pie-center] {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: grid;
+  justify-items: center;
+  gap: 0.15rem;
+  max-width: calc(var(--mk-pie-size, 240px) * 0.5);
+  transform: translate(-50%, -50%);
+  text-align: center;
+  pointer-events: none;
+}
+
+[data-mk-pie-center][hidden] {
+  display: none;
+}
+
+[data-mk-pie-center] strong {
+  color: var(--mk-text);
+  font-size: clamp(1.1rem, calc(var(--mk-pie-size, 240px) * 0.11), 2rem);
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+[data-mk-pie-center] span {
+  overflow: hidden;
+  max-width: 100%;
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+[data-mk-chart-type='pie'] [data-mk-chart-legend] {
+  justify-content: center;
+}
+
+[data-mk-chart-type='pie'] [data-mk-chart-legend] li {
+  transition: opacity 0.2s ease;
+}
+
+[data-mk-chart-type='pie'] [data-mk-chart-legend] li[data-mk-dim] {
+  opacity: 0.45;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-chart-type='pie'] [data-mk-part='series'] path {
+    transition: opacity 0.2s ease;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-mk-chart-type='pie'] [data-mk-part='series'] path {
+    stroke: Canvas;
+  }
+}
+
+/* components/radar-chart/radar-chart.css */
+/* radar-chart — hairline rings and spokes, filled shapes (18 %) with a 2 px edge; needs chart.css for the family.
+   The axis under the pointer gets chart's dotted guide and a bolder name. */
+.mk-radar-chart,
+mk-radar-chart {
+  display: grid;
+  justify-items: center;
+  gap: 1rem;
+}
+
+[data-mk-chart-type='radar'] [data-mk-chart-plot] {
+  width: 100%;
+}
+
+[data-mk-chart-type='radar'] [data-mk-chart-svg] {
+  width: var(--mk-radar-size, 300px);
+  max-width: 100%;
+  margin-inline: auto;
+  cursor: crosshair;
+}
+
+[data-mk-chart-type='radar'] [data-mk-part='grid'] :is(polygon, circle) {
+  fill: none;
+  stroke: var(--mk-chart-grid);
+  stroke-width: 1;
+}
+
+[data-mk-chart-type='radar'] [data-mk-part='grid'] line {
+  shape-rendering: auto;
+}
+
+[data-mk-chart-type='radar'] [data-mk-part='axes'] text {
+  font-size: 11px;
+  transition: fill 0.2s ease;
+}
+
+[data-mk-chart-type='radar'] [data-mk-part='axes'] text[data-mk-on] {
+  fill: var(--mk-text);
+  font-weight: 600;
+}
+
+[data-mk-chart-type='radar'] [data-mk-part='area'] {
+  fill-opacity: 0.18;
+}
+
+[data-mk-chart-type='radar'] [data-mk-part='edge'] {
+  fill: none;
+  stroke-width: 2;
+  stroke-linejoin: round;
+}
+
+[data-mk-chart-type='radar'] [data-mk-part='dot'] {
+  stroke: var(--mk-chart-surface);
+  stroke-width: 1.5;
+}
+
+[data-mk-chart-type='radar'] [data-mk-series] {
+  transition: opacity 0.2s ease;
+}
+
+[data-mk-chart-type='radar'] [data-mk-series][data-mk-dim] {
+  opacity: 0.2;
+}
+
+[data-mk-chart-type='radar'] [data-mk-chart-legend] {
+  justify-content: center;
+}
+
+@media (forced-colors: active) {
+  [data-mk-chart-type='radar'] [data-mk-part='edge'] {
+    stroke: CanvasText !important;
+  }
+}
+
+/* components/radial-chart/radial-chart.css */
+/* radial-chart — rings with round ends over soft tracks; needs chart.css for the family.
+   The chosen ring thickens, the others dim, and the middle names it. */
+.mk-radial-chart,
+mk-radial-chart {
+  display: grid;
+  justify-items: center;
+  gap: 1rem;
+}
+
+[data-mk-chart-type='radial'] [data-mk-chart-plot] {
+  width: 100%;
+}
+
+[data-mk-chart-type='radial'] [data-mk-chart-svg] {
+  width: var(--mk-radial-size, 240px);
+  max-width: 100%;
+  margin-inline: auto;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+[data-mk-chart-type='radial'] :is([data-mk-part='tracks'], [data-mk-part='series']) path {
+  fill: none;
+  stroke-linecap: round;
+  stroke-width: var(--mk-radial-thickness, 12px);
+  transition:
+    stroke-width 0.35s var(--mk-ease-swatch),
+    opacity 0.2s ease;
+}
+
+[data-mk-chart-type='radial'] [data-mk-part='tracks'] path {
+  stroke: var(--mk-chart-grid);
+}
+
+[data-mk-chart-type='radial'] :is([data-mk-part='tracks'], [data-mk-part='series']) path[data-mk-on] {
+  stroke-width: calc(var(--mk-radial-thickness, 12px) + 4px);
+}
+
+[data-mk-chart-type='radial'] :is([data-mk-part='tracks'], [data-mk-part='series']) path[data-mk-dim] {
+  opacity: 0.35;
+}
+
+[data-mk-radial-center] {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: grid;
+  justify-items: center;
+  gap: 0.15rem;
+  max-width: calc(var(--mk-radial-size, 240px) * 0.36);
+  transform: translate(-50%, -50%);
+  text-align: center;
+  pointer-events: none;
+}
+
+[data-mk-radial-center][hidden] {
+  display: none;
+}
+
+[data-mk-radial-center] strong {
+  color: var(--mk-text);
+  font-size: clamp(1rem, calc(var(--mk-radial-size, 240px) * 0.1), 1.75rem);
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+[data-mk-radial-center] span {
+  overflow: hidden;
+  max-width: 100%;
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+[data-mk-chart-type='radial'] [data-mk-chart-legend] {
+  justify-content: center;
+}
+
+[data-mk-chart-type='radial'] [data-mk-chart-legend] li {
+  transition: opacity 0.2s ease;
+}
+
+[data-mk-chart-type='radial'] [data-mk-chart-legend] li[data-mk-dim] {
+  opacity: 0.45;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-chart-type='radial'] :is([data-mk-part='tracks'], [data-mk-part='series']) path {
+    transition: opacity 0.2s ease;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-mk-chart-type='radial'] [data-mk-part='series'] path {
+    stroke: Highlight !important;
+  }
+}
+
+/* components/sankey-chart/sankey-chart.css */
+/* sankey-chart — bands that fade from their source's colour to their target's (35 %), nodes with 3 px corners;
+   needs chart.css for the family. The flow under the pointer lights up, the rest step back. */
+.mk-sankey-chart,
+mk-sankey-chart {
+  display: grid;
+  gap: 1rem;
+}
+
+[data-mk-chart-type='sankey'] [data-mk-chart-svg] {
+  cursor: pointer;
+}
+
+[data-mk-chart-type='sankey'] [data-mk-part='links'] path {
+  opacity: 0.35;
+  transition: opacity 0.2s ease;
+}
+
+[data-mk-chart-type='sankey'] [data-mk-part='links'] path[data-mk-on] {
+  opacity: 0.7;
+}
+
+[data-mk-chart-type='sankey'] [data-mk-part='links'] path[data-mk-dim] {
+  opacity: 0.1;
+}
+
+[data-mk-chart-type='sankey'] [data-mk-part='nodes'] rect {
+  transition: opacity 0.2s ease;
+}
+
+[data-mk-chart-type='sankey'] [data-mk-part='nodes'] rect[data-mk-dim] {
+  opacity: 0.45;
+}
+
+[data-mk-chart-type='sankey'] [data-mk-part='labels'] text {
+  fill: var(--mk-text);
+  font-size: 12px;
+  font-weight: 500;
+  paint-order: stroke;
+  stroke: var(--mk-chart-surface);
+  stroke-width: 3px;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+
+[data-mk-chart-type='sankey'] [data-mk-part='amount'] {
+  fill: var(--mk-muted);
+  font-weight: 400;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-chart-type='sankey'] :is([data-mk-part='links'] path, [data-mk-part='nodes'] rect) {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-mk-chart-type='sankey'] [data-mk-part='nodes'] rect {
+    fill: CanvasText !important;
+  }
+}
+
+/* components/heatmap-chart/heatmap-chart.css */
+/* heatmap-chart — a week per column of 3 px rounded days, deepening from the track to the accent; needs chart.css.
+   The day under the pointer lifts with a ring; the "less … more" scale sits under it, to the right. */
+.mk-heatmap-chart,
+mk-heatmap-chart {
+  --mk-heatmap-color: var(--mk-accent);
+  --mk-heatmap-empty: var(--mk-surface-2);
+  display: grid;
+  gap: 0.6rem;
+  min-width: 0;
+}
+
+[data-mk-heatmap-scroll] {
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-block: 4px;
+  scrollbar-width: thin;
+}
+
+[data-mk-chart-type='heatmap'] [data-mk-chart-svg] {
+  width: var(--mk-heatmap-width, auto);
+  max-width: none;
+  overflow: visible;
+  cursor: pointer;
+}
+
+[data-mk-chart-type='heatmap'] [data-mk-part='cells'] rect {
+  transform-box: fill-box;
+  transform-origin: center;
+  transition:
+    fill 0.35s ease,
+    opacity 0.2s ease,
+    transform 0.3s var(--mk-ease-swatch);
+}
+
+[data-mk-chart-type='heatmap'] [data-mk-part='cells'] rect[data-mk-on] {
+  stroke: var(--mk-text);
+  stroke-width: 1.5;
+  transform: scale(1.3);
+}
+
+[data-mk-chart-type='heatmap'] [data-mk-part='cells'] rect[data-mk-dim] {
+  opacity: 0.25;
+}
+
+[data-mk-chart-type='heatmap'] [data-mk-part='months'] text,
+[data-mk-chart-type='heatmap'] [data-mk-part='weekdays'] text {
+  font-size: 10px;
+}
+
+[data-mk-heatmap-scale] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 3px;
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+}
+
+[data-mk-heatmap-scale][hidden] {
+  display: none;
+}
+
+[data-mk-heatmap-scale] span {
+  margin-inline: 0.35rem;
+}
+
+[data-mk-heatmap-scale] i {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+  cursor: pointer;
+  transition: transform 0.25s var(--mk-ease-swatch);
+}
+
+@media (hover: hover) {
+  [data-mk-heatmap-scale] i:hover {
+    transform: scale(1.25);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-chart-type='heatmap'] [data-mk-part='cells'] rect,
+  [data-mk-heatmap-scale] i {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-mk-chart-type='heatmap'] [data-mk-part='cells'] rect {
+    stroke: CanvasText;
+    stroke-width: 0.5;
+  }
+}
+
+/* components/orbit-menu/orbit-menu.css */
+/* orbit-menu — soft white squares (16 px corners, a wide low shadow) around a middle button whose lines turn into an ×.
+   The options sit on the middle and the engine moves them out; give the menu room around it. */
+.mk-orbit-menu,
+mk-orbit-menu {
+  --mk-orbit-size: 4rem;
+  --mk-orbit-face: var(--mk-surface-3);
+  --mk-orbit-ink: var(--mk-text);
+  --mk-orbit-shadow: 0 18px 36px -14px rgb(0 0 0 / 0.22), 0 2px 6px -2px rgb(0 0 0 / 0.08);
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  width: var(--mk-orbit-size);
+  height: var(--mk-orbit-size);
+}
+
+:is(.mk-orbit-menu, mk-orbit-menu) :is([data-mk-orbit-toggle], [data-mk-orbit-item]) {
+  display: grid;
+  place-items: center;
+  width: var(--mk-orbit-size);
+  height: var(--mk-orbit-size);
+  padding: 0;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: var(--mk-radius-md);
+  background: var(--mk-orbit-face);
+  box-shadow: var(--mk-orbit-shadow);
+  color: var(--mk-orbit-ink);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:is(.mk-orbit-menu, mk-orbit-menu) [data-mk-orbit-toggle] {
+  position: relative;
+  z-index: 2;
+  transition:
+    background-color 0.3s ease,
+    box-shadow 0.3s ease;
+}
+
+/* Open: the middle goes glassy, the options are the faces now. */
+:is(.mk-orbit-menu, mk-orbit-menu)[data-mk-state='open'] [data-mk-orbit-toggle] {
+  background: color-mix(in srgb, var(--mk-orbit-face) 55%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mk-orbit-ink) 8%, transparent);
+  backdrop-filter: blur(8px);
+}
+
+:is(.mk-orbit-menu, mk-orbit-menu) [data-mk-orbit-item] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+:is(.mk-orbit-menu, mk-orbit-menu) :is([data-mk-orbit-toggle], [data-mk-orbit-item]) svg {
+  width: 1.75rem;
+  height: 1.75rem;
+  transition: transform 0.35s var(--mk-ease-swatch);
+}
+
+@media (hover: hover) {
+  :is(.mk-orbit-menu, mk-orbit-menu) [data-mk-orbit-item]:hover svg {
+    transform: scale(1.12);
+  }
+  :is(.mk-orbit-menu, mk-orbit-menu) [data-mk-orbit-item]:hover {
+    box-shadow: 0 22px 40px -14px rgb(0 0 0 / 0.28), 0 2px 6px -2px rgb(0 0 0 / 0.1);
+  }
+}
+
+:is(.mk-orbit-menu, mk-orbit-menu) :is([data-mk-orbit-toggle], [data-mk-orbit-item]):focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+/* The three lines and their × . */
+[data-mk-orbit-burger] {
+  position: relative;
+  width: 1.5rem;
+  height: 1rem;
+}
+
+[data-mk-orbit-burger] i {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  border-radius: 2px;
+  background: currentColor;
+  transition:
+    transform 0.4s var(--mk-ease-swatch),
+    opacity 0.2s ease;
+}
+
+[data-mk-orbit-burger] i:nth-child(1) {
+  top: 0;
+}
+
+[data-mk-orbit-burger] i:nth-child(2) {
+  top: calc(50% - 1px);
+}
+
+[data-mk-orbit-burger] i:nth-child(3) {
+  bottom: 0;
+}
+
+:is(.mk-orbit-menu, mk-orbit-menu)[data-mk-state='open'] [data-mk-orbit-burger] i:nth-child(1) {
+  transform: translateY(calc(0.5rem - 1px)) rotate(45deg);
+}
+
+:is(.mk-orbit-menu, mk-orbit-menu)[data-mk-state='open'] [data-mk-orbit-burger] i:nth-child(2) {
+  opacity: 0;
+  transform: scaleX(0.2);
+}
+
+:is(.mk-orbit-menu, mk-orbit-menu)[data-mk-state='open'] [data-mk-orbit-burger] i:nth-child(3) {
+  transform: translateY(calc(-0.5rem + 1px)) rotate(-45deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-orbit-burger] i,
+  :is(.mk-orbit-menu, mk-orbit-menu) [data-mk-orbit-toggle],
+  :is(.mk-orbit-menu, mk-orbit-menu) svg {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :is(.mk-orbit-menu, mk-orbit-menu) :is([data-mk-orbit-toggle], [data-mk-orbit-item]) {
+    border: 1px solid ButtonText;
+  }
+}