@yewdiel21/motion-kit 0.9.1 → 0.14.0

package/src/core/virtual.ts

@@ -0,0 +1,79 @@
+/*
+ * Windowing (virtual-list), the pure part: the top of each row from their
+ * heights (one fixed height, or measured ones with an estimate for the rest),
+ * the total height, and which rows a scroll position shows. The running sums
+ * are filled lazily from the first changed row, and finding the row at a
+ * position is a binary search over them (about 17 steps for 100 000 rows).
+ */
+
+export interface VirtualRange {
+  /** First row drawn. */
+  start: number;
+  /** One past the last row drawn. */
+  end: number;
+}
+
+export interface VirtualSizes {
+  readonly count: number;
+  get(index: number): number;
+  /** A row's height; true when it changed. */
+  set(index: number, height: number): boolean;
+  /** The top of a row (the sum of the heights before it). */
+  offset(index: number): number;
+  total(): number;
+  /** The row at a vertical position (clamped to the list). */
+  indexAt(y: number): number;
+  /** The rows that cover y … y + height, with `overscan` more on each side. */
+  range(y: number, height: number, overscan?: number): VirtualRange;
+}
+
+export function createSizes(heights: number[]): VirtualSizes {
+  const sizes = heights.map((height) => (Number.isFinite(height) && height > 0 ? height : 0));
+  const count = sizes.length;
+  const sums = new Float64Array(count + 1);
+  // sums[0..valid] are right.
+  let valid = 0;
+  const ensure = (index: number) => {
+    for (let i = valid; i < index; i++) sums[i + 1] = sums[i]! + sizes[i]!;
+    if (index > valid) valid = index;
+  };
+  const indexAt = (y: number) => {
+    if (!count) return 0;
+    ensure(count);
+    let low = 0;
+    let high = count - 1;
+    // The last row whose top is at or above y.
+    while (low < high) {
+      const middle = (low + high + 1) >> 1;
+      if (sums[middle]! <= y) low = middle;
+      else high = middle - 1;
+    }
+    return low;
+  };
+  return {
+    count,
+    get: (index) => sizes[index] ?? 0,
+    set(index, height) {
+      if (index < 0 || index >= count || !Number.isFinite(height) || height < 0 || sizes[index] === height) return false;
+      sizes[index] = height;
+      if (valid > index) valid = index;
+      return true;
+    },
+    offset(index) {
+      const at = Math.max(0, Math.min(count, index));
+      ensure(at);
+      return sums[at]!;
+    },
+    total() {
+      ensure(count);
+      return sums[count]!;
+    },
+    indexAt,
+    range(y, height, overscan = 0) {
+      if (!count) return { start: 0, end: 0 };
+      const start = indexAt(Math.max(0, y));
+      const last = indexAt(Math.max(0, y + Math.max(0, height) - 0.5));
+      return { start: Math.max(0, start - overscan), end: Math.min(count, last + 1 + overscan) };
+    },
+  };
+}

package/src/css/controls/README.md

@@ -104,6 +104,20 @@ Tres líneas que se pliegan en una X cuando `aria-expanded="true"`: las de fuera
 
 Al pasar el ratón, el texto sube (−150 %) y entra su copia (`data-text`), la flecha sale por la derecha y entra su copia (`data-icon`), y el botón se rellena con el color del texto (0.8 s, `--mk-ease-quint`, el texto 0.1 s después). En pantallas táctiles no cambia. Con movimiento reducido solo cambia el color.
 
+## Estado
+
+```html
+<a class="mk-status" href="#contacto">
+  <span class="mk-status__dot"></span>
+  <span>Disponible para proyectos</span>
+  <span class="mk-status__sep" aria-hidden="true"></span>
+  <span class="mk-status__muted">Agenda una llamada</span>
+  <span class="mk-icon" aria-hidden="true">arrow_forward</span>
+</a>
+```
+
+La píldora de DOVV Studio: superficie, borde suave y sombra. Si es enlace o botón, al pasar el ratón sube 1 px, crece su sombra y la flecha avanza 2 px (0.3 s). El punto verde tiene un halo que late (opacidad .6 → 0 y escala 1 → 2.6, 1.6 s `ease-out`, sin fin). Variantes `.mk-status__dot--busy` (ámbar) y `--off` (sin pulso); color propio con `--mk-status-color`. El punto funciona solo, fuera de la píldora. La píldora no parte líneas; en pantallas de 480 px o menos oculta `__sep` y `__muted`, así que pon lo esencial fuera de `__muted`.
+
 ## Squash y vibración
 
 - `.mk-button` se aplasta un instante al recibir el foco por puntero (`scaleX(.95) scaleY(.9)`, 0.5 s `cubic-bezier(.37,1.42,.37,1)`). El foco de teclado no produce rebote.

package/src/css/controls/status.css

@@ -0,0 +1,63 @@
+/* status — "Available for new projects" pill and a live dot whose halo pulses (DOVV Studio: 1.6 s ease-out, scale 1 → 2.6). */
+.mk-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  height: 40px;
+  padding: 0 16px 0 14px;
+  border-radius: 100px;
+  background: var(--mk-surface);
+  color: var(--mk-text);
+  font: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  text-decoration: none;
+  box-shadow: 0 0 0 1px var(--mk-outline-soft), 0 6px 20px -8px rgb(0 0 0 / 0.18);
+  transition: box-shadow 0.3s, transform 0.3s;
+}
+/* One line always: on phones the secondary half goes. */
+@media (max-width: 480px) {
+  .mk-status > :is(.mk-status__sep, .mk-status__muted) { display: none; }
+}
+a.mk-status:hover,
+button.mk-status:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 0 0 1px var(--mk-outline), 0 10px 24px -8px rgb(0 0 0 / 0.22);
+}
+.mk-status__sep { width: 1px; height: 14px; background: var(--mk-outline-soft); }
+.mk-status__muted { color: var(--mk-muted); }
+.mk-status > svg,
+.mk-status > .mk-icon { color: var(--mk-muted); transition: transform 0.3s; }
+.mk-status:hover > svg,
+.mk-status:hover > .mk-icon { transform: translateX(2px); }
+.mk-status__dot {
+  --mk-status-color: #16c847;
+  position: relative;
+  display: inline-block;
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--mk-status-color);
+}
+.mk-status__dot::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: inherit;
+  animation: mk-status-pulse 1.6s ease-out infinite;
+}
+.mk-status__dot--busy { --mk-status-color: #f59e0b; }
+.mk-status__dot--off { --mk-status-color: var(--mk-muted); }
+.mk-status__dot--off::after { animation: none; }
+@keyframes mk-status-pulse {
+  0% { opacity: 0.6; transform: scale(1); }
+  100% { opacity: 0; transform: scale(2.6); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mk-status { transition: none; }
+  .mk-status__dot::after { animation: none; }
+}

package/src/css/tokens.css

@@ -1,182 +1,186 @@
-/* motion-kit tokens — override any of them on :root, on a [data-mk-theme] or on a component. */
-:root {
-  /* Elastic curves */
-  --mk-ease-elastic: linear(0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1);
-  --mk-ease-elastic-hover: linear(0, 0.2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, 0.941 24.01%, 0.8912 25.91%, 0.8694 27.84%, 0.8698 29.21%, 0.8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, 0.9961 53.26%, 0.9839 57.54%, 0.9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, 0.9981 86.66%, 1);
-
-  /* Motion curves. The signature is a multi-point path sampled as CSS linear(). */
-  --mk-ease-signature: linear(0 0%, .017 2.5%, .037 5%, .061 7.5%, .091 10%, .13 12.5%, .184 15%, .275 17.5%, .562 20%, .733 22.5%, .803 25%, .848 27.5%, .88 30%, .902 32.5%, .942 40%, .97 50%, .985 60%, .993 70%, .998 80%, 1 90%, 1 100%);
-  /* backdrop tint uses the same curve. */
-  --mk-ease-tint: var(--mk-ease-signature);
-  --mk-ease-flow: cubic-bezier(0.25, 0.1, 0.25, 1);
-  --mk-ease-close: cubic-bezier(0.56, 0.27, 0, 1);
-  --mk-ease-blur-away: cubic-bezier(0.37, 0.35, 0, 1);
-  --mk-ease-nav-radius: cubic-bezier(0.38, 0.49, 0, 2);
-  --mk-ease-nav-move: cubic-bezier(0.38, 0.49, 0, 1.2);
-  --mk-ease-swatch: cubic-bezier(0.38, 0.49, 0, 1.5);
-  --mk-ease-swatch-light: cubic-bezier(0.11, 1, 0, 1);
-  --mk-ease-slot: cubic-bezier(0.34, 1.56, 0.64, 1);
-  /* Glass, sheet and control curves */
-  --mk-ease-glass: cubic-bezier(0.25, 1, 0.5, 1);
-  --mk-ease-sheet: cubic-bezier(0.16, 1, 0.3, 1);
-  --mk-ease-siena: cubic-bezier(0.19, 1, 0.22, 1);
-  --mk-ease-quint: cubic-bezier(0.23, 1, 0.32, 1);
-  /* springs (Motion 400/10 press, 260/18 success), sampled by springLinear(); a test keeps them in sync. */
-  --mk-ease-press: linear(0, 0.1957, 0.6333, 1.0817, 1.3717, 1.4412, 1.3274, 1.1249, 0.934, 0.8221, 0.808, 0.8691, 0.9612, 1.0413, 1.0833, 1.0824, 1.0513, 1.01, 0.9769, 0.9618, 0.9651, 0.9804, 0.9986, 1.0121, 1.0173, 1.0146, 1.0072, 0.9993, 0.9939, 0.9923, 0.994, 0.9974, 1.0008, 1.003, 1.0034, 1.0024, 1.0008, 0.9994, 0.9986, 0.9985, 1);
-  --mk-dur-press: 1.346s;
-  --mk-ease-success: linear(0, 0.0437, 0.1533, 0.3004, 0.4617, 0.6197, 0.7624, 0.8825, 0.9767, 1.0451, 1.0895, 1.1133, 1.1208, 1.1161, 1.1032, 1.0856, 1.0662, 1.047, 1.0296, 1.0149, 1.0034, 0.9949, 0.9894, 0.9864, 0.9854, 0.9859, 0.9874, 0.9895, 0.9919, 0.9942, 0.9963, 0.9981, 0.9995, 1.0006, 1.0012, 1.0016, 1.0018, 1.0017, 1.0015, 1.0013, 1);
-  --mk-dur-success: 0.779s;
-  --mk-dur-fast: 0.25s;
-  --mk-dur: 0.45s;
-  --mk-dur-slow: 0.7s;
-
-  /* Layered shadow */
-  --mk-shadow: 0 9px 21px rgb(0 0 0 / 0.1), 0 38px 38px rgb(0 0 0 / 0.09), 0 85px 51px rgb(0 0 0 / 0.05);
-  --mk-shadow-soft: 0 9px 21px rgb(0 0 0 / 0.05), 0 38px 38px rgb(0 0 0 / 0.045), 0 85px 51px rgb(0 0 0 / 0.025);
-
-  /* Shape: large capsules */
-  --mk-radius-card: 1rem;
-  --mk-radius-xs: 8px;
-  --mk-radius-sm: 12px;
-  --mk-radius-md: 16px;
-  --mk-radius-lg: 24px;
-  --mk-radius-xl: 32px;
-  --mk-radius-2xl: 40px;
-  --mk-radius-3xl: 48px;
-  --mk-radius-4xl: 64px;
-  --mk-radius-full: 999px;
-  --mk-radius-bubble: var(--mk-radius-xl);
-  --mk-radius-dialog: var(--mk-radius-2xl);
-  --mk-radius-chat: var(--mk-radius-3xl);
-  --mk-radius-dock: var(--mk-radius-4xl);
-
-  /* Spacing, 4 px steps. navigation breakpoint is 680px (media queries use it literally). */
-  --mk-space-1: 4px;
-  --mk-space-2: 8px;
-  --mk-space-3: 12px;
-  --mk-space-4: 16px;
-  --mk-space-5: 20px;
-  --mk-space-6: 24px;
-  --mk-space-7: 28px;
-  --mk-space-8: 32px;
-  --mk-space-9: 36px;
-  --mk-space-10: 40px;
-  --mk-space-11: 44px;
-  --mk-space-12: 48px;
-  --mk-space-13: 52px;
-  --mk-space-14: 56px;
-  --mk-space-15: 60px;
-  --mk-space-16: 64px;
-  --mk-breakpoint: 680px;
-
-  /* Type: DM Sans, Geist Mono, Material Symbols Rounded (css/fonts.css loads them). */
-  --mk-font: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
-  --mk-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
-  /* Material 3 type scale; font weights are unitless. */
-  --md-sys-typescale-display-large-font: var(--mk-font);
-  --md-sys-typescale-display-large-size: 57px;
-  --md-sys-typescale-display-large-line-height: 64px;
-  --md-sys-typescale-display-large-weight: 400;
-  --md-sys-typescale-display-large-tracking: -0.25px;
-  --md-sys-typescale-display-medium-font: var(--mk-font);
-  --md-sys-typescale-display-medium-size: 45px;
-  --md-sys-typescale-display-medium-line-height: 52px;
-  --md-sys-typescale-display-medium-weight: 400;
-  --md-sys-typescale-display-medium-tracking: 0px;
-  --md-sys-typescale-display-small-font: var(--mk-font);
-  --md-sys-typescale-display-small-size: 36px;
-  --md-sys-typescale-display-small-line-height: 44px;
-  --md-sys-typescale-display-small-weight: 400;
-  --md-sys-typescale-display-small-tracking: 0px;
-  --md-sys-typescale-headline-large-font: var(--mk-font);
-  --md-sys-typescale-headline-large-size: 32px;
-  --md-sys-typescale-headline-large-line-height: 40px;
-  --md-sys-typescale-headline-large-weight: 400;
-  --md-sys-typescale-headline-large-tracking: 0px;
-  --md-sys-typescale-headline-medium-font: var(--mk-font);
-  --md-sys-typescale-headline-medium-size: 28px;
-  --md-sys-typescale-headline-medium-line-height: 36px;
-  --md-sys-typescale-headline-medium-weight: 400;
-  --md-sys-typescale-headline-medium-tracking: 0px;
-  --md-sys-typescale-headline-small-font: var(--mk-font);
-  --md-sys-typescale-headline-small-size: 24px;
-  --md-sys-typescale-headline-small-line-height: 32px;
-  --md-sys-typescale-headline-small-weight: 400;
-  --md-sys-typescale-headline-small-tracking: 0px;
-  --md-sys-typescale-title-large-font: var(--mk-font);
-  --md-sys-typescale-title-large-size: 22px;
-  --md-sys-typescale-title-large-line-height: 28px;
-  --md-sys-typescale-title-large-weight: 400;
-  --md-sys-typescale-title-large-tracking: 0px;
-  --md-sys-typescale-title-medium-font: var(--mk-font);
-  --md-sys-typescale-title-medium-size: 16px;
-  --md-sys-typescale-title-medium-line-height: 24px;
-  --md-sys-typescale-title-medium-weight: 500;
-  --md-sys-typescale-title-medium-tracking: 0.15px;
-  --md-sys-typescale-title-small-font: var(--mk-font);
-  --md-sys-typescale-title-small-size: 14px;
-  --md-sys-typescale-title-small-line-height: 20px;
-  --md-sys-typescale-title-small-weight: 500;
-  --md-sys-typescale-title-small-tracking: 0.1px;
-  --md-sys-typescale-body-large-font: var(--mk-font);
-  --md-sys-typescale-body-large-size: 16px;
-  --md-sys-typescale-body-large-line-height: 24px;
-  --md-sys-typescale-body-large-weight: 400;
-  --md-sys-typescale-body-large-tracking: 0.5px;
-  --md-sys-typescale-body-medium-font: var(--mk-font);
-  --md-sys-typescale-body-medium-size: 14px;
-  --md-sys-typescale-body-medium-line-height: 20px;
-  --md-sys-typescale-body-medium-weight: 400;
-  --md-sys-typescale-body-medium-tracking: 0.25px;
-  --md-sys-typescale-body-small-font: var(--mk-font);
-  --md-sys-typescale-body-small-size: 12px;
-  --md-sys-typescale-body-small-line-height: 16px;
-  --md-sys-typescale-body-small-weight: 400;
-  --md-sys-typescale-body-small-tracking: 0.4px;
-  --md-sys-typescale-label-large-font: var(--mk-font);
-  --md-sys-typescale-label-large-size: 14px;
-  --md-sys-typescale-label-large-line-height: 20px;
-  --md-sys-typescale-label-large-weight: 500;
-  --md-sys-typescale-label-large-tracking: 0.1px;
-  --md-sys-typescale-label-medium-font: var(--mk-font);
-  --md-sys-typescale-label-medium-size: 12px;
-  --md-sys-typescale-label-medium-line-height: 16px;
-  --md-sys-typescale-label-medium-weight: 500;
-  --md-sys-typescale-label-medium-tracking: 0.5px;
-  --md-sys-typescale-label-small-font: var(--mk-font);
-  --md-sys-typescale-label-small-size: 11px;
-  --md-sys-typescale-label-small-line-height: 16px;
-  --md-sys-typescale-label-small-weight: 500;
-  --md-sys-typescale-label-small-tracking: 0.5px;
-}
-
-/*
- * Semantic colour layer over the Material 3 roles. Declared on every themed
- * element too, so a nested [data-mk-theme] recomputes it from its own roles.
- */
-:root,
-[data-mk-theme] {
-  --mk-bg: var(--md-sys-color-background);
-  --mk-surface: var(--md-sys-color-surface);
-  --mk-surface-1: var(--md-sys-color-surface-container-lowest);
-  --mk-surface-2: var(--md-sys-color-surface-container-low);
-  --mk-surface-3: var(--md-sys-color-surface-container);
-  --mk-surface-4: var(--md-sys-color-surface-container-high);
-  --mk-surface-5: var(--md-sys-color-surface-container-highest);
-  --mk-text: var(--md-sys-color-on-surface);
-  --mk-muted: var(--md-sys-color-on-surface-variant);
-  --mk-accent: var(--md-sys-color-primary);
-  --mk-on-accent: var(--md-sys-color-on-primary);
-  --mk-accent-soft: var(--md-sys-color-primary-container);
-  --mk-on-accent-soft: var(--md-sys-color-on-primary-container);
-  --mk-secondary-soft: var(--md-sys-color-secondary-container);
-  --mk-on-secondary-soft: var(--md-sys-color-on-secondary-container);
-  --mk-outline: var(--md-sys-color-outline);
-  --mk-outline-soft: var(--md-sys-color-outline-variant);
-  --mk-error: var(--md-sys-color-error);
-  --mk-on-error: var(--md-sys-color-on-error);
-  --mk-error-soft: var(--md-sys-color-error-container);
-  --mk-on-error-soft: var(--md-sys-color-on-error-container);
-  --mk-scrim: var(--md-sys-color-scrim);
-  --mk-shadow-color: var(--md-sys-color-shadow);
-}
+/* motion-kit tokens — override any of them on :root, on a [data-mk-theme] or on a component. */
+:root {
+  /* Elastic curves */
+  --mk-ease-elastic: linear(0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1);
+  --mk-ease-elastic-hover: linear(0, 0.2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, 0.941 24.01%, 0.8912 25.91%, 0.8694 27.84%, 0.8698 29.21%, 0.8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, 0.9961 53.26%, 0.9839 57.54%, 0.9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, 0.9981 86.66%, 1);
+
+  /* Motion curves. The signature is a multi-point path sampled as CSS linear(). */
+  --mk-ease-signature: linear(0 0%, .017 2.5%, .037 5%, .061 7.5%, .091 10%, .13 12.5%, .184 15%, .275 17.5%, .562 20%, .733 22.5%, .803 25%, .848 27.5%, .88 30%, .902 32.5%, .942 40%, .97 50%, .985 60%, .993 70%, .998 80%, 1 90%, 1 100%);
+  /* backdrop tint uses the same curve. */
+  --mk-ease-tint: var(--mk-ease-signature);
+  --mk-ease-flow: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --mk-ease-close: cubic-bezier(0.56, 0.27, 0, 1);
+  --mk-ease-blur-away: cubic-bezier(0.37, 0.35, 0, 1);
+  --mk-ease-nav-radius: cubic-bezier(0.38, 0.49, 0, 2);
+  --mk-ease-nav-move: cubic-bezier(0.38, 0.49, 0, 1.2);
+  --mk-ease-swatch: cubic-bezier(0.38, 0.49, 0, 1.5);
+  --mk-ease-swatch-light: cubic-bezier(0.11, 1, 0, 1);
+  --mk-ease-slot: cubic-bezier(0.34, 1.56, 0.64, 1);
+  /* Glass, sheet and control curves */
+  --mk-ease-glass: cubic-bezier(0.25, 1, 0.5, 1);
+  --mk-ease-sheet: cubic-bezier(0.16, 1, 0.3, 1);
+  --mk-ease-siena: cubic-bezier(0.19, 1, 0.22, 1);
+  --mk-ease-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  /* springs (Motion 400/10 press, 260/18 success), sampled by springLinear(); a test keeps them in sync. */
+  --mk-ease-press: linear(0, 0.1957, 0.6333, 1.0817, 1.3717, 1.4412, 1.3274, 1.1249, 0.934, 0.8221, 0.808, 0.8691, 0.9612, 1.0413, 1.0833, 1.0824, 1.0513, 1.01, 0.9769, 0.9618, 0.9651, 0.9804, 0.9986, 1.0121, 1.0173, 1.0146, 1.0072, 0.9993, 0.9939, 0.9923, 0.994, 0.9974, 1.0008, 1.003, 1.0034, 1.0024, 1.0008, 0.9994, 0.9986, 0.9985, 1);
+  --mk-dur-press: 1.346s;
+  --mk-ease-success: linear(0, 0.0437, 0.1533, 0.3004, 0.4617, 0.6197, 0.7624, 0.8825, 0.9767, 1.0451, 1.0895, 1.1133, 1.1208, 1.1161, 1.1032, 1.0856, 1.0662, 1.047, 1.0296, 1.0149, 1.0034, 0.9949, 0.9894, 0.9864, 0.9854, 0.9859, 0.9874, 0.9895, 0.9919, 0.9942, 0.9963, 0.9981, 0.9995, 1.0006, 1.0012, 1.0016, 1.0018, 1.0017, 1.0015, 1.0013, 1);
+  --mk-dur-success: 0.779s;
+  --mk-dur-fast: 0.25s;
+  --mk-dur: 0.45s;
+  --mk-dur-slow: 0.7s;
+
+  /* Layered shadow */
+  --mk-shadow: 0 9px 21px rgb(0 0 0 / 0.1), 0 38px 38px rgb(0 0 0 / 0.09), 0 85px 51px rgb(0 0 0 / 0.05);
+  --mk-shadow-soft: 0 9px 21px rgb(0 0 0 / 0.05), 0 38px 38px rgb(0 0 0 / 0.045), 0 85px 51px rgb(0 0 0 / 0.025);
+
+  /* Shape: large capsules */
+  --mk-radius-card: 1rem;
+  --mk-radius-xs: 8px;
+  --mk-radius-sm: 12px;
+  --mk-radius-md: 16px;
+  --mk-radius-lg: 24px;
+  --mk-radius-xl: 32px;
+  --mk-radius-2xl: 40px;
+  --mk-radius-3xl: 48px;
+  --mk-radius-4xl: 64px;
+  --mk-radius-full: 999px;
+  --mk-radius-bubble: var(--mk-radius-xl);
+  --mk-radius-dialog: var(--mk-radius-2xl);
+  --mk-radius-chat: var(--mk-radius-3xl);
+  --mk-radius-dock: var(--mk-radius-4xl);
+
+  /* Spacing, 4 px steps. navigation breakpoint is 680px (media queries use it literally). */
+  --mk-space-1: 4px;
+  --mk-space-2: 8px;
+  --mk-space-3: 12px;
+  --mk-space-4: 16px;
+  --mk-space-5: 20px;
+  --mk-space-6: 24px;
+  --mk-space-7: 28px;
+  --mk-space-8: 32px;
+  --mk-space-9: 36px;
+  --mk-space-10: 40px;
+  --mk-space-11: 44px;
+  --mk-space-12: 48px;
+  --mk-space-13: 52px;
+  --mk-space-14: 56px;
+  --mk-space-15: 60px;
+  --mk-space-16: 64px;
+  --mk-breakpoint: 680px;
+
+  /* Type: DM Sans, Geist Mono, Material Symbols Rounded (css/fonts.css loads them). */
+  --mk-font: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
+  --mk-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  /* Material 3 type scale; font weights are unitless. */
+  --md-sys-typescale-display-large-font: var(--mk-font);
+  --md-sys-typescale-display-large-size: 57px;
+  --md-sys-typescale-display-large-line-height: 64px;
+  --md-sys-typescale-display-large-weight: 400;
+  --md-sys-typescale-display-large-tracking: -0.25px;
+  --md-sys-typescale-display-medium-font: var(--mk-font);
+  --md-sys-typescale-display-medium-size: 45px;
+  --md-sys-typescale-display-medium-line-height: 52px;
+  --md-sys-typescale-display-medium-weight: 400;
+  --md-sys-typescale-display-medium-tracking: 0px;
+  --md-sys-typescale-display-small-font: var(--mk-font);
+  --md-sys-typescale-display-small-size: 36px;
+  --md-sys-typescale-display-small-line-height: 44px;
+  --md-sys-typescale-display-small-weight: 400;
+  --md-sys-typescale-display-small-tracking: 0px;
+  --md-sys-typescale-headline-large-font: var(--mk-font);
+  --md-sys-typescale-headline-large-size: 32px;
+  --md-sys-typescale-headline-large-line-height: 40px;
+  --md-sys-typescale-headline-large-weight: 400;
+  --md-sys-typescale-headline-large-tracking: 0px;
+  --md-sys-typescale-headline-medium-font: var(--mk-font);
+  --md-sys-typescale-headline-medium-size: 28px;
+  --md-sys-typescale-headline-medium-line-height: 36px;
+  --md-sys-typescale-headline-medium-weight: 400;
+  --md-sys-typescale-headline-medium-tracking: 0px;
+  --md-sys-typescale-headline-small-font: var(--mk-font);
+  --md-sys-typescale-headline-small-size: 24px;
+  --md-sys-typescale-headline-small-line-height: 32px;
+  --md-sys-typescale-headline-small-weight: 400;
+  --md-sys-typescale-headline-small-tracking: 0px;
+  --md-sys-typescale-title-large-font: var(--mk-font);
+  --md-sys-typescale-title-large-size: 22px;
+  --md-sys-typescale-title-large-line-height: 28px;
+  --md-sys-typescale-title-large-weight: 400;
+  --md-sys-typescale-title-large-tracking: 0px;
+  --md-sys-typescale-title-medium-font: var(--mk-font);
+  --md-sys-typescale-title-medium-size: 16px;
+  --md-sys-typescale-title-medium-line-height: 24px;
+  --md-sys-typescale-title-medium-weight: 500;
+  --md-sys-typescale-title-medium-tracking: 0.15px;
+  --md-sys-typescale-title-small-font: var(--mk-font);
+  --md-sys-typescale-title-small-size: 14px;
+  --md-sys-typescale-title-small-line-height: 20px;
+  --md-sys-typescale-title-small-weight: 500;
+  --md-sys-typescale-title-small-tracking: 0.1px;
+  --md-sys-typescale-body-large-font: var(--mk-font);
+  --md-sys-typescale-body-large-size: 16px;
+  --md-sys-typescale-body-large-line-height: 24px;
+  --md-sys-typescale-body-large-weight: 400;
+  --md-sys-typescale-body-large-tracking: 0.5px;
+  --md-sys-typescale-body-medium-font: var(--mk-font);
+  --md-sys-typescale-body-medium-size: 14px;
+  --md-sys-typescale-body-medium-line-height: 20px;
+  --md-sys-typescale-body-medium-weight: 400;
+  --md-sys-typescale-body-medium-tracking: 0.25px;
+  --md-sys-typescale-body-small-font: var(--mk-font);
+  --md-sys-typescale-body-small-size: 12px;
+  --md-sys-typescale-body-small-line-height: 16px;
+  --md-sys-typescale-body-small-weight: 400;
+  --md-sys-typescale-body-small-tracking: 0.4px;
+  --md-sys-typescale-label-large-font: var(--mk-font);
+  --md-sys-typescale-label-large-size: 14px;
+  --md-sys-typescale-label-large-line-height: 20px;
+  --md-sys-typescale-label-large-weight: 500;
+  --md-sys-typescale-label-large-tracking: 0.1px;
+  --md-sys-typescale-label-medium-font: var(--mk-font);
+  --md-sys-typescale-label-medium-size: 12px;
+  --md-sys-typescale-label-medium-line-height: 16px;
+  --md-sys-typescale-label-medium-weight: 500;
+  --md-sys-typescale-label-medium-tracking: 0.5px;
+  --md-sys-typescale-label-small-font: var(--mk-font);
+  --md-sys-typescale-label-small-size: 11px;
+  --md-sys-typescale-label-small-line-height: 16px;
+  --md-sys-typescale-label-small-weight: 500;
+  --md-sys-typescale-label-small-tracking: 0.5px;
+}
+
+/*
+ * Semantic colour layer over the Material 3 roles. Declared on every themed
+ * element too, so a nested [data-mk-theme] recomputes it from its own roles.
+ */
+:root,
+[data-mk-theme] {
+  --mk-bg: var(--md-sys-color-background);
+  --mk-surface: var(--md-sys-color-surface);
+  --mk-surface-1: var(--md-sys-color-surface-container-lowest);
+  --mk-surface-2: var(--md-sys-color-surface-container-low);
+  --mk-surface-3: var(--md-sys-color-surface-container);
+  --mk-surface-4: var(--md-sys-color-surface-container-high);
+  --mk-surface-5: var(--md-sys-color-surface-container-highest);
+  --mk-text: var(--md-sys-color-on-surface);
+  --mk-muted: var(--md-sys-color-on-surface-variant);
+  --mk-accent: var(--md-sys-color-primary);
+  --mk-on-accent: var(--md-sys-color-on-primary);
+  --mk-accent-soft: var(--md-sys-color-primary-container);
+  --mk-on-accent-soft: var(--md-sys-color-on-primary-container);
+  --mk-secondary-soft: var(--md-sys-color-secondary-container);
+  --mk-on-secondary-soft: var(--md-sys-color-on-secondary-container);
+  --mk-outline: var(--md-sys-color-outline);
+  --mk-outline-soft: var(--md-sys-color-outline-variant);
+  --mk-error: var(--md-sys-color-error);
+  --mk-on-error: var(--md-sys-color-on-error);
+  --mk-error-soft: var(--md-sys-color-error-container);
+  --mk-on-error-soft: var(--md-sys-color-on-error-container);
+  --mk-scrim: var(--md-sys-color-scrim);
+  --mk-shadow-color: var(--md-sys-color-shadow);
+  /* Melonmind's inverse glass (popovers, command search, chart tooltips): the text colour at 86 %, blurred, bevelled. */
+  --mk-glass-inverse: color-mix(in srgb, var(--mk-text) 86%, transparent);
+  --mk-on-glass-inverse: var(--mk-bg);
+  --mk-glass-bevel: inset 1px 1px 1px 0 color-mix(in srgb, var(--mk-bg) 30%, transparent), inset -1px -1px 1px 0 color-mix(in srgb, var(--mk-bg) 30%, transparent), 0 12px 32px -12px color-mix(in srgb, var(--mk-shadow-color) 40%, transparent);
+}