rei-kit 1.0.2 → 2.0.0

package/dist/styles.css

@@ -1,31 +1,31 @@
 
-.sheet-enter-active[data-v-ab6c6ace],
-.sheet-leave-active[data-v-ab6c6ace] {
-  transition: opacity 200ms ease;
+.sheet-enter-active[data-v-6194b8f4],
+.sheet-leave-active[data-v-6194b8f4] {
+  transition: opacity var(--duration-base) ease;
 }
-.sheet-enter-from[data-v-ab6c6ace],
-.sheet-leave-to[data-v-ab6c6ace] {
+.sheet-enter-from[data-v-6194b8f4],
+.sheet-leave-to[data-v-6194b8f4] {
   opacity: 0;
 }
 
 /* The panel travels further than the scrim fades, which is what makes the
    sheet read as rising rather than appearing. */
-.sheet-enter-active .sheet-panel[data-v-ab6c6ace],
-.sheet-leave-active .sheet-panel[data-v-ab6c6ace] {
-  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
+.sheet-enter-active .sheet-panel[data-v-6194b8f4],
+.sheet-leave-active .sheet-panel[data-v-6194b8f4] {
+  transition: transform var(--duration-slow) var(--ease-sheet);
 }
-.sheet-enter-from .sheet-panel[data-v-ab6c6ace],
-.sheet-leave-to .sheet-panel[data-v-ab6c6ace] {
+.sheet-enter-from .sheet-panel[data-v-6194b8f4],
+.sheet-leave-to .sheet-panel[data-v-6194b8f4] {
   transform: translateY(6%);
 }
 @media (prefers-reduced-motion: reduce) {
-.sheet-enter-from .sheet-panel[data-v-ab6c6ace],
-  .sheet-leave-to .sheet-panel[data-v-ab6c6ace] {
+.sheet-enter-from .sheet-panel[data-v-6194b8f4],
+  .sheet-leave-to .sheet-panel[data-v-6194b8f4] {
     transform: none;
 }
 }
 
-.rk-fab-slot[data-v-7e2bbe71] {
+.rk-fab-slot[data-v-3bd0d80a] {
   position: absolute;
   bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
   left: 50%;
@@ -40,7 +40,7 @@
      must not swallow taps meant for the page underneath it. */
   pointer-events: none;
 }
-.rk-fab[data-v-7e2bbe71] {
+.rk-fab[data-v-3bd0d80a] {
   pointer-events: auto;
   display: flex;
   height: 3rem;
@@ -49,48 +49,50 @@
   border-radius: 9999px;
   padding-left: 1rem;
   padding-right: 1.25rem;
-  color: #fff;
+  color: var(--color-on-primary);
   background: var(--color-primary);
-  transition: transform 150ms;
-  /* A ring in the canvas colour separates it from whatever scrolls behind. */
+  transition: transform var(--duration-fast);
+  /* A ring in the canvas colour separates it from whatever scrolls behind; the
+     depth under it is the material's, so a brutalist app gets a hard offset
+     and a soft one gets a puff without this file knowing either. */
   box-shadow:
     0 0 0 4px var(--color-canvas),
-    0 10px 24px -8px color-mix(in srgb, var(--color-primary) 60%, transparent);
+    var(--shadow-raised);
 }
-.rk-fab[data-v-7e2bbe71]:active {
-  transform: scale(0.95);
+.rk-fab[data-v-3bd0d80a]:active {
+  transform: translate(var(--press-offset), var(--press-offset)) scale(var(--press-scale));
 }
 
 /* The ring is not decoration. This button was a `BaseButton variant="unstyled"`
    in the app it came from, which meant it inherited a focus ring for free; a
    bare <button> here would have dropped it, and a keyboard user would have had
    no way to see where they were. */
-.rk-fab[data-v-7e2bbe71]:focus-visible {
+.rk-fab[data-v-3bd0d80a]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-fab-icon[data-v-7e2bbe71] {
+.rk-fab-icon[data-v-3bd0d80a] {
   display: grid;
   place-items: center;
   flex-shrink: 0;
 }
-.rk-fab-icon[data-v-7e2bbe71] svg {
+.rk-fab-icon[data-v-3bd0d80a] svg {
   width: 1.25rem;
   height: 1.25rem;
   stroke-width: 2.5px;
 }
-.rk-fab-label[data-v-7e2bbe71] {
+.rk-fab-label[data-v-3bd0d80a] {
   font-size: 0.875rem;
   font-weight: 600;
   white-space: nowrap;
 }
 @media (prefers-reduced-motion: reduce) {
-.rk-fab[data-v-7e2bbe71] {
+.rk-fab[data-v-3bd0d80a] {
     transition: none;
 }
 }
 
-.rk-offline-banner[data-v-0781b5b6] {
+.rk-offline-banner[data-v-0f6db9dc] {
   position: absolute;
   top: 4.75rem;
   left: 50%;
@@ -105,25 +107,25 @@
   font-weight: 500;
   color: var(--color-ink);
   background: color-mix(in srgb, var(--color-warning) 90%, transparent);
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  box-shadow: var(--shadow-raised);
   backdrop-filter: blur(4px);
 }
-.rk-offline-enter-active[data-v-0781b5b6],
-.rk-offline-leave-active[data-v-0781b5b6] {
+.rk-offline-enter-active[data-v-0f6db9dc],
+.rk-offline-leave-active[data-v-0f6db9dc] {
   transition:
-    opacity 200ms ease,
-    transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
+    opacity var(--duration-base) ease,
+    transform var(--duration-base) var(--ease-sheet);
 }
-.rk-offline-enter-from[data-v-0781b5b6],
-.rk-offline-leave-to[data-v-0781b5b6] {
+.rk-offline-enter-from[data-v-0f6db9dc],
+.rk-offline-leave-to[data-v-0f6db9dc] {
   opacity: 0;
   transform: translate(-50%, -0.5rem);
 }
 
 /* The travel is the part that causes trouble; the fade is not. */
 @media (prefers-reduced-motion: reduce) {
-.rk-offline-enter-from[data-v-0781b5b6],
-  .rk-offline-leave-to[data-v-0781b5b6] {
+.rk-offline-enter-from[data-v-0f6db9dc],
+  .rk-offline-leave-to[data-v-0f6db9dc] {
     transform: translate(-50%, 0);
 }
 }
@@ -135,13 +137,15 @@
    The colour is a custom property because it is the one thing each app wants
    different: set `--rk-lattice` on any ancestor. It defaults to the ink colour,
    which is legible against every theme the tokens can produce. */
-.rk-screen[data-v-f19fd72a] {
+.rk-screen[data-v-211d6411] {
   position: fixed;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: var(--color-canvas);
+  /* The lattice sits on top of whatever the material puts behind the page —
+     glass needs colour to blur, and it is this layer that supplies it. */
   background-image:
     repeating-linear-gradient(
       45deg,
@@ -162,9 +166,10 @@
         )
         0 1px,
       transparent 1px 56px
-    );
+    ),
+    var(--canvas-backdrop);
 }
-.rk-screen-aside[data-v-f19fd72a] {
+.rk-screen-aside[data-v-211d6411] {
   position: absolute;
   bottom: 1.5rem;
   left: 1.5rem;
@@ -175,28 +180,28 @@
   color: var(--color-ink-soft);
 }
 @media (min-width: 48rem) {
-.rk-screen-aside[data-v-f19fd72a] {
+.rk-screen-aside[data-v-211d6411] {
     display: flex;
 }
 }
 
 /* `shell-frame` from `rei-kit/shell/mobile.css` supplies the geometry — the
    430px column and the desktop height. This adds only the surface. */
-.rk-shell[data-v-f19fd72a] {
+.rk-shell[data-v-211d6411] {
   position: relative;
   margin: auto;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: var(--color-surface);
+  background: color-mix(in oklab, var(--color-surface) var(--surface-opacity), transparent);
+  backdrop-filter: var(--surface-backdrop);
+  -webkit-backdrop-filter: var(--surface-backdrop);
 }
 @media (min-width: 48rem) {
-.rk-shell[data-v-f19fd72a] {
-    border: 1px solid var(--color-hair);
+.rk-shell[data-v-211d6411] {
+    border: var(--surface-border-width) solid var(--surface-border-color);
     border-radius: var(--radius-shell);
-    box-shadow:
-      0 20px 25px -5px rgb(0 0 0 / 0.1),
-      0 8px 10px -6px rgb(0 0 0 / 0.1);
+    box-shadow: var(--shadow-overlay);
 }
 }
 
@@ -204,12 +209,12 @@
    cannot reach slot content, which belongs to the caller's scope, so
    `.tour-forward-*` and `.tour-backward-*` ship unscoped in
    `rei-kit/shell/mobile.css` where the caller's slide can actually see them. */
-.tour-enter-active[data-v-1b9e7f4d],
-.tour-leave-active[data-v-1b9e7f4d] {
-  transition: opacity 220ms ease;
+.tour-enter-active[data-v-3bbf95fc],
+.tour-leave-active[data-v-3bbf95fc] {
+  transition: opacity var(--duration-base) ease;
 }
-.tour-enter-from[data-v-1b9e7f4d],
-.tour-leave-to[data-v-1b9e7f4d] {
+.tour-enter-from[data-v-3bbf95fc],
+.tour-leave-to[data-v-3bbf95fc] {
   opacity: 0;
 }
 
@@ -254,40 +259,37 @@
   height: 65%;
 }
 
-.rk-menu[data-v-8ad05b3d] {
+.rk-menu[data-v-e57ec901] {
   position: relative;
   display: inline-flex;
 }
-.rk-menu-trigger[data-v-8ad05b3d] {
+.rk-menu-trigger[data-v-e57ec901] {
   display: inline-flex;
   border-radius: var(--radius-cell);
 }
-.rk-menu-trigger[data-v-8ad05b3d]:focus-visible {
+.rk-menu-trigger[data-v-e57ec901]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-menu-panel[data-v-8ad05b3d] {
+.rk-menu-panel[data-v-e57ec901] {
   position: absolute;
   top: calc(100% + 0.5rem);
   z-index: 50;
   min-width: 12rem;
   overflow: hidden;
   border-radius: var(--radius-card);
-  border: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);
-  background: var(--color-surface);
   padding: 0.375rem;
-  box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.25);
 }
-.rk-menu-panel.is-end[data-v-8ad05b3d] {
+.rk-menu-panel.is-end[data-v-e57ec901] {
   right: 0;
 }
-.rk-menu-panel.is-start[data-v-8ad05b3d] {
+.rk-menu-panel.is-start[data-v-e57ec901] {
   left: 0;
 }
 
 /* The items belong to the caller, so this styles them by role rather than by
    class: whatever they render, it lines up. */
-.rk-menu-panel[data-v-8ad05b3d] [role='menuitem'] {
+.rk-menu-panel[data-v-e57ec901] [role='menuitem'] {
   display: block;
   width: 100%;
   border-radius: var(--radius-cell);
@@ -295,34 +297,34 @@
   text-align: left;
   font-size: 0.875rem;
   color: var(--color-ink);
-  transition: background-color 150ms;
+  transition: background-color var(--duration-fast);
 }
-.rk-menu-panel[data-v-8ad05b3d] [role='menuitem']:hover {
+.rk-menu-panel[data-v-e57ec901] [role='menuitem']:hover {
   background: var(--color-muted);
 }
-.rk-menu-panel[data-v-8ad05b3d] [role='menuitem']:focus-visible {
+.rk-menu-panel[data-v-e57ec901] [role='menuitem']:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: -2px;
 }
-.rk-menu-panel[data-v-8ad05b3d] hr {
+.rk-menu-panel[data-v-e57ec901] hr {
   margin: 0.375rem 0;
   height: 1px;
   border: 0;
   background: color-mix(in srgb, var(--color-hair) 70%, transparent);
 }
 
-.rk-combo[data-v-52b21155] {
+.rk-combo[data-v-ce4c503f] {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 0.375rem;
 }
-.rk-combo-label[data-v-52b21155] {
+.rk-combo-label[data-v-ce4c503f] {
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--color-ink);
 }
-.rk-combo-field[data-v-52b21155] {
+.rk-combo-field[data-v-ce4c503f] {
   position: relative;
   display: flex;
   align-items: center;
@@ -330,30 +332,28 @@
 
 /* 16px, like every other text control here: iOS zooms the viewport when it
    focuses a field under 16px and never zooms back. */
-.rk-combo-input[data-v-52b21155] {
+.rk-combo-input[data-v-ce4c503f] {
   width: 100%;
   height: 2.75rem;
   border-radius: var(--radius-card);
-  border: 1px solid var(--color-hair);
-  background: var(--color-surface);
   padding: 0 2rem 0 0.75rem;
   font-size: 1rem;
   color: var(--color-ink);
 }
-.rk-combo-input[data-v-52b21155]:focus-visible {
+.rk-combo-input[data-v-ce4c503f]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: -1px;
 }
-.rk-combo-input[data-v-52b21155]:disabled {
+.rk-combo-input[data-v-ce4c503f]:disabled {
   opacity: 0.5;
 }
-.rk-combo-toggle[data-v-52b21155] {
+.rk-combo-toggle[data-v-ce4c503f] {
   position: absolute;
   right: 0.5rem;
   color: var(--color-ink-soft);
   font-size: 0.75rem;
 }
-.rk-combo-list[data-v-52b21155] {
+.rk-combo-list[data-v-ce4c503f] {
   position: absolute;
   top: calc(100% - 1.25rem);
   z-index: 50;
@@ -361,74 +361,71 @@
   width: 100%;
   overflow-y: auto;
   border-radius: var(--radius-card);
-  border: 1px solid var(--color-hair);
-  background: var(--color-surface);
   padding: 0.25rem;
-  box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.25);
 }
-.rk-combo-option[data-v-52b21155] {
+.rk-combo-option[data-v-ce4c503f] {
   cursor: pointer;
   border-radius: var(--radius-cell);
   padding: 0.5rem 0.625rem;
   font-size: 0.875rem;
   color: var(--color-ink);
 }
-.rk-combo-option.is-highlighted[data-v-52b21155] {
+.rk-combo-option.is-highlighted[data-v-ce4c503f] {
   background: var(--color-muted);
 }
-.rk-combo-option.is-selected[data-v-52b21155] {
+.rk-combo-option.is-selected[data-v-ce4c503f] {
   font-weight: 600;
 }
-.rk-combo-empty[data-v-52b21155] {
+.rk-combo-empty[data-v-ce4c503f] {
   padding: 0.75rem 0.625rem;
   font-size: 0.875rem;
   color: var(--color-ink-soft);
 }
-.rk-combo-error[data-v-52b21155] {
+.rk-combo-error[data-v-ce4c503f] {
   font-size: 0.75rem;
   color: var(--color-negative);
 }
-.rk-combo-hint[data-v-52b21155] {
+.rk-combo-hint[data-v-ce4c503f] {
   font-size: 0.75rem;
   color: var(--color-ink-soft);
 }
 
-.rk-slider[data-v-0a408519] {
+.rk-slider[data-v-7fa2769b] {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
-.rk-slider-head[data-v-0a408519] {
+.rk-slider-head[data-v-7fa2769b] {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 1rem;
 }
-.rk-slider-label[data-v-0a408519] {
+.rk-slider-label[data-v-7fa2769b] {
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--color-ink);
 }
-.rk-slider-value[data-v-0a408519] {
+.rk-slider-value[data-v-7fa2769b] {
   font-size: 0.875rem;
   color: var(--color-ink-soft);
   font-variant-numeric: tabular-nums;
 }
-.rk-slider-input[data-v-0a408519] {
+.rk-slider-input[data-v-7fa2769b] {
   width: 100%;
   height: 1.25rem;
   appearance: none;
   background: transparent;
   cursor: pointer;
 }
-.rk-slider-input[data-v-0a408519]:disabled {
+.rk-slider-input[data-v-7fa2769b]:disabled {
   opacity: 0.5;
   cursor: default;
 }
 
 /* The two engines will not accept these in one rule: an unknown pseudo-element
    invalidates the whole selector, so WebKit and Firefox are written twice. */
-.rk-slider-input[data-v-0a408519]::-webkit-slider-runnable-track {
+.rk-slider-input[data-v-7fa2769b]::-webkit-slider-runnable-track {
   height: 0.375rem;
   border-radius: 9999px;
   background: linear-gradient(
@@ -437,43 +434,43 @@
     var(--color-hair) var(--rk-slider-filled, 0%)
   );
 }
-.rk-slider-input[data-v-0a408519]::-moz-range-track {
+.rk-slider-input[data-v-7fa2769b]::-moz-range-track {
   height: 0.375rem;
   border-radius: 9999px;
   background: var(--color-hair);
 }
-.rk-slider-input[data-v-0a408519]::-moz-range-progress {
+.rk-slider-input[data-v-7fa2769b]::-moz-range-progress {
   height: 0.375rem;
   border-radius: 9999px;
   background: var(--color-primary);
 }
-.rk-slider-input[data-v-0a408519]::-webkit-slider-thumb {
+.rk-slider-input[data-v-7fa2769b]::-webkit-slider-thumb {
   appearance: none;
   margin-top: -0.4375rem;
   width: 1.25rem;
   height: 1.25rem;
   border-radius: 9999px;
-  background: #fff;
+  background: var(--color-surface);
   border: 2px solid var(--color-primary);
-  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
+  box-shadow: var(--shadow-control);
 }
-.rk-slider-input[data-v-0a408519]::-moz-range-thumb {
+.rk-slider-input[data-v-7fa2769b]::-moz-range-thumb {
   width: 1.25rem;
   height: 1.25rem;
   border: 2px solid var(--color-primary);
   border-radius: 9999px;
-  background: #fff;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-control);
 }
-.rk-slider-input[data-v-0a408519]:focus-visible::-webkit-slider-thumb {
+.rk-slider-input[data-v-7fa2769b]:focus-visible::-webkit-slider-thumb {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-slider-input[data-v-0a408519]:focus-visible::-moz-range-thumb {
+.rk-slider-input[data-v-7fa2769b]:focus-visible::-moz-range-thumb {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-slider-hint[data-v-0a408519] {
+.rk-slider-hint[data-v-7fa2769b] {
   font-size: 0.75rem;
   color: var(--color-ink-soft);
 }
@@ -516,7 +513,7 @@ to {
 }
 }
 
-.rk-switch[data-v-a9f65b91] {
+.rk-switch[data-v-3f4400a0] {
   position: relative;
   display: inline-flex;
   flex-shrink: 0;
@@ -525,35 +522,37 @@ to {
   height: 1.625rem;
   border-radius: 9999px;
   background: var(--color-hair);
-  transition: background-color 180ms ease;
+  transition: background-color var(--duration-base) ease;
 }
-.rk-switch.is-on[data-v-a9f65b91] {
+.rk-switch.is-on[data-v-3f4400a0] {
   background: var(--color-primary);
 }
-.rk-switch[data-v-a9f65b91]:focus-visible {
+.rk-switch[data-v-3f4400a0]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-switch[data-v-a9f65b91]:disabled {
+.rk-switch[data-v-3f4400a0]:disabled {
   opacity: 0.5;
   pointer-events: none;
 }
-.rk-switch-knob[data-v-a9f65b91] {
+.rk-switch-knob[data-v-3f4400a0] {
   position: absolute;
   left: 0.1875rem;
   width: 1.25rem;
   height: 1.25rem;
   border-radius: 9999px;
-  background: #fff;
-  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
-  transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1);
+  /* The on-colour, because the knob sits on the primary track when it is on,
+     and that is exactly the pairing `on-primary` is tuned for. */
+  background: var(--color-on-primary);
+  box-shadow: var(--shadow-control);
+  transition: transform var(--duration-base) var(--ease-sheet);
 }
-.rk-switch.is-on .rk-switch-knob[data-v-a9f65b91] {
+.rk-switch.is-on .rk-switch-knob[data-v-3f4400a0] {
   transform: translateX(1.125rem);
 }
 @media (prefers-reduced-motion: reduce) {
-.rk-switch[data-v-a9f65b91],
-  .rk-switch-knob[data-v-a9f65b91] {
+.rk-switch[data-v-3f4400a0],
+  .rk-switch-knob[data-v-3f4400a0] {
     transition: none;
 }
 }
@@ -621,64 +620,40 @@ to {
 
 /* Movement is small and downward from the top, upward from the bottom — the
    direction it came from either way. */
-.toast-enter-active[data-v-f1a3439c],
-.toast-leave-active[data-v-f1a3439c] {
+.toast-enter-active[data-v-b336935c],
+.toast-leave-active[data-v-b336935c] {
   transition:
-    opacity 200ms ease-out,
-    transform 200ms ease-out;
+    opacity var(--duration-base) ease-out,
+    transform var(--duration-base) ease-out;
 }
-.toast-enter-from[data-v-f1a3439c],
-.toast-leave-to[data-v-f1a3439c] {
+.toast-enter-from[data-v-b336935c],
+.toast-leave-to[data-v-b336935c] {
   opacity: 0;
   transform: translateY(-0.5rem);
 }
 
 /* Leaving is taken out of flow so the ones below close the gap smoothly
    instead of jumping when it unmounts. */
-.toast-leave-active[data-v-f1a3439c] {
+.toast-leave-active[data-v-b336935c] {
   position: absolute;
 }
 @media (prefers-reduced-motion: reduce) {
-.toast-enter-active[data-v-f1a3439c],
-  .toast-leave-active[data-v-f1a3439c] {
+.toast-enter-active[data-v-b336935c],
+  .toast-leave-active[data-v-b336935c] {
     transition-duration: 1ms;
 }
-.toast-enter-from[data-v-f1a3439c],
-  .toast-leave-to[data-v-f1a3439c] {
+.toast-enter-from[data-v-b336935c],
+  .toast-leave-to[data-v-b336935c] {
     transform: none;
 }
 }
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 @layer properties {
 @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-[data-v-d3cd9a8a],[data-v-d3cd9a8a]:before,[data-v-d3cd9a8a]:after,[data-v-d3cd9a8a]::backdrop {
+[data-v-e9bd0632],[data-v-e9bd0632]:before,[data-v-e9bd0632]:after,[data-v-e9bd0632]::backdrop {
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
-      --tw-border-style: solid;
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-color: initial;
-      --tw-shadow-alpha: 100%;
-      --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-inset-shadow-alpha: 100%;
-      --tw-ring-color: initial;
-      --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: initial;
-      --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: initial;
-      --tw-ring-offset-width: 0px;
-      --tw-ring-offset-color: #fff;
-      --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-backdrop-blur: initial;
-      --tw-backdrop-brightness: initial;
-      --tw-backdrop-contrast: initial;
-      --tw-backdrop-grayscale: initial;
-      --tw-backdrop-hue-rotate: initial;
-      --tw-backdrop-invert: initial;
-      --tw-backdrop-opacity: initial;
-      --tw-backdrop-saturate: initial;
-      --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-scale-x: 1;
@@ -689,7 +664,7 @@ to {
 }
 }
 }
-.tab-bar[data-v-d3cd9a8a] {
+.tab-bar[data-v-e9bd0632] {
   z-index: 40;
   --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
   width: 100%;
@@ -700,31 +675,34 @@ to {
   bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
   position: absolute;
 }
-.tab-bar-inner[data-v-d3cd9a8a] {
+.tab-bar-inner[data-v-e9bd0632] {
   justify-content: space-between;
   align-items: center;
   gap: var(--spacing, .25rem);
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: var(--color-hair, #e1edea);
-  background-color: #ffffffd9;
   display: flex;
 }
 @supports (color: color-mix(in lab, red, red)) {
-.tab-bar-inner[data-v-d3cd9a8a] {
-    background-color: color-mix(in oklab, var(--color-surface, #fff) 85%, transparent);
+.tab-bar-inner[data-v-e9bd0632] {
+    background-color: color-mix(in oklab, var(--color-surface) var(--surface-opacity), transparent);
 }
 }
-.tab-bar-inner[data-v-d3cd9a8a] {
+.tab-bar-inner[data-v-e9bd0632] {
+  border: var(--surface-border-width) solid var(--surface-border-color);
+  box-shadow: var(--shadow-raised);
+  -webkit-backdrop-filter: var(--surface-backdrop);
   padding: calc(var(--spacing, .25rem) * 1.5);
-  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  --tw-backdrop-blur: blur(var(--blur-md, 12px));
-  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  background-color: #fff;
+}
+@supports (color: color-mix(in lab, red, red)) {
+.tab-bar-inner[data-v-e9bd0632] {
+    background-color: color-mix(in oklab, var(--color-surface) min(var(--surface-opacity), 88%), transparent);
+}
+}
+.tab-bar-inner[data-v-e9bd0632] {
+  -webkit-backdrop-filter: var(--surface-backdrop, blur(12px));
   border-radius: var(--radius-shell);
 }
-.tab-link[data-v-d3cd9a8a] {
+.tab-link[data-v-e9bd0632] {
   cursor: pointer;
   justify-content: center;
   align-items: center;
@@ -733,71 +711,71 @@ to {
   padding-block: calc(var(--spacing, .25rem) * 1.5);
   color: var(--color-ink-soft, #5c7480);
   border-radius: calc(var(--radius-shell) - 6px);
+  transition: color var(--duration-base) ease;
   flex-direction: column;
   flex: 1;
-  transition: color .2s;
   display: flex;
 }
-.tab-link[data-v-d3cd9a8a]:hover {
+.tab-link[data-v-e9bd0632]:hover {
   color: var(--color-ink, #0f2229);
 }
-.tab-icon-slot[data-v-d3cd9a8a] {
+.tab-icon-slot[data-v-e9bd0632] {
   height: calc(var(--spacing, .25rem) * 7);
   width: calc(var(--spacing, .25rem) * 12);
   transition-property: all;
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
   transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
-  --tw-duration: .2s;
+  --tw-duration: var(--duration-base);
+  transition-duration: var(--duration-base);
   --tw-ease: var(--ease-out, cubic-bezier(0, 0, .2, 1));
-  transition-duration: .2s;
   transition-timing-function: var(--ease-out, cubic-bezier(0, 0, .2, 1));
   border-radius: 3.40282e38px;
   justify-content: center;
   align-items: center;
   display: flex;
 }
-.tab-link:active .tab-icon-slot[data-v-d3cd9a8a] {
+.tab-link:active .tab-icon-slot[data-v-e9bd0632] {
   transform: scale(.88);
 }
-.is-active[data-v-d3cd9a8a] {
+.is-active[data-v-e9bd0632] {
   color: var(--color-primary, #26667f);
 }
-.is-active .tab-icon-slot[data-v-d3cd9a8a] {
+.is-active .tab-icon-slot[data-v-e9bd0632] {
   background-color: var(--color-muted, #ddf4e7);
 }
-.tab-icon[data-v-d3cd9a8a] {
+.tab-icon[data-v-e9bd0632] {
   stroke-width: 2px;
   width: 18px;
   height: 18px;
   transition-property: transform, translate, scale, rotate;
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
   transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
-  --tw-duration: .2s;
-  transition-duration: .2s;
+  --tw-duration: var(--duration-base);
+  transition-duration: var(--duration-base);
 }
-.is-active .tab-icon[data-v-d3cd9a8a] {
+.is-active .tab-icon[data-v-e9bd0632] {
   --tw-scale-x: 110%;
   --tw-scale-y: 110%;
   --tw-scale-z: 110%;
   scale: var(--tw-scale-x) var(--tw-scale-y);
   stroke-width: 2.5px;
 }
-.tab-label[data-v-d3cd9a8a] {
+.tab-label[data-v-e9bd0632] {
   --tw-leading: 1;
   --tw-font-weight: var(--font-weight-medium, 500);
   font-size: 10px;
   line-height: 1;
   font-weight: var(--font-weight-medium, 500);
 }
-.is-active .tab-label[data-v-d3cd9a8a] {
+.is-active .tab-label[data-v-e9bd0632] {
   --tw-font-weight: var(--font-weight-semibold, 600);
   font-weight: var(--font-weight-semibold, 600);
 }
 @media (prefers-reduced-motion: reduce) {
-.tab-icon-slot[data-v-d3cd9a8a], .tab-icon[data-v-d3cd9a8a] {
+.tab-icon-slot[data-v-e9bd0632], .tab-icon[data-v-e9bd0632] {
     transition: none;
 }
-.tab-link:active .tab-icon-slot[data-v-d3cd9a8a] {
+.tab-link:active .tab-icon-slot[data-v-e9bd0632] {
     transform: none;
 }
 }
@@ -816,112 +794,6 @@ to {
   inherits: false;
   initial-value: 0;
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-shadow-color {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-inset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-shadow-color {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-inset-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-ring-color {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-ring-color {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-inset-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-ring-inset {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-ring-offset-width {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-ring-offset-color {
-  syntax: "*";
-  inherits: false;
-  initial-value: #fff;
-}
-@property --tw-ring-offset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-backdrop-blur {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-brightness {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-contrast {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-grayscale {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-hue-rotate {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-invert {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-opacity {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-saturate {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-sepia {
-  syntax: "*";
-  inherits: false
-}
 @property --tw-duration {
   syntax: "*";
   inherits: false
@@ -954,20 +826,20 @@ to {
   inherits: false
 }
 
-.install-enter-active[data-v-34c86300],
-.install-leave-active[data-v-34c86300] {
+.install-enter-active[data-v-552a4ac9],
+.install-leave-active[data-v-552a4ac9] {
   transition:
-    opacity 200ms ease,
-    transform 200ms ease;
+    opacity var(--duration-base) ease,
+    transform var(--duration-base) ease;
 }
-.install-enter-from[data-v-34c86300],
-.install-leave-to[data-v-34c86300] {
+.install-enter-from[data-v-552a4ac9],
+.install-leave-to[data-v-552a4ac9] {
   opacity: 0;
   transform: translateY(-4px);
 }
 @media (prefers-reduced-motion: reduce) {
-.install-enter-from[data-v-34c86300],
-  .install-leave-to[data-v-34c86300] {
+.install-enter-from[data-v-552a4ac9],
+  .install-leave-to[data-v-552a4ac9] {
     transform: none;
 }
 }
@@ -975,7 +847,7 @@ to {
 /* Sits above the tab bar and the action button, because it outranks both — but
    absolutely inside its container, so on a desktop-sized shell it does not
    float off into the page. Give the shell `relative`. */
-.update-card[data-v-7cf60526] {
+.update-card[data-v-ac5bec25] {
   border-color: var(--color-hair);
   background: color-mix(in srgb, var(--color-surface) 95%, transparent);
   border-radius: var(--radius-card);
@@ -990,11 +862,11 @@ to {
   border-width: 1px;
   padding: 0.75rem;
   backdrop-filter: blur(12px);
-  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+  box-shadow: var(--shadow-overlay);
   transform: translateX(-50%);
   bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
 }
-.update-icon[data-v-7cf60526] {
+.update-icon[data-v-ac5bec25] {
   background: color-mix(in srgb, var(--color-primary) 15%, transparent);
   color: var(--color-primary);
   display: flex;
@@ -1005,31 +877,31 @@ to {
   justify-content: center;
   border-radius: 0.75rem;
 }
-.update-enter-active[data-v-7cf60526],
-.update-leave-active[data-v-7cf60526] {
+.update-enter-active[data-v-ac5bec25],
+.update-leave-active[data-v-ac5bec25] {
   transition:
-    opacity 250ms ease,
-    transform 250ms cubic-bezier(0.32, 0.72, 0, 1);
+    opacity var(--duration-slow) ease,
+    transform var(--duration-slow) var(--ease-sheet);
 }
-.update-enter-from[data-v-7cf60526],
-.update-leave-to[data-v-7cf60526] {
+.update-enter-from[data-v-ac5bec25],
+.update-leave-to[data-v-ac5bec25] {
   opacity: 0;
   transform: translate(-50%, 1rem);
 }
 @media (prefers-reduced-motion: reduce) {
-.update-enter-from[data-v-7cf60526],
-  .update-leave-to[data-v-7cf60526] {
+.update-enter-from[data-v-ac5bec25],
+  .update-leave-to[data-v-ac5bec25] {
     transform: translate(-50%, 0);
 }
 }
 
-.rk-accordion[data-v-d7bddb65] {
+.rk-accordion[data-v-03e2e1d0] {
   border-top: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);
 }
-.rk-accordion-item[data-v-d7bddb65] {
+.rk-accordion-item[data-v-03e2e1d0] {
   border-bottom: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);
 }
-.rk-accordion-control[data-v-d7bddb65] {
+.rk-accordion-control[data-v-03e2e1d0] {
   display: flex;
   width: 100%;
   cursor: pointer;
@@ -1038,21 +910,21 @@ to {
   gap: 1.5rem;
   padding: 1.25rem 0;
   text-align: left;
-  transition: color 150ms;
+  transition: color var(--duration-fast);
 }
-.rk-accordion-control[data-v-d7bddb65]:hover {
+.rk-accordion-control[data-v-03e2e1d0]:hover {
   color: var(--color-primary);
 }
-.rk-accordion-control[data-v-d7bddb65]:focus-visible {
+.rk-accordion-control[data-v-03e2e1d0]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-accordion-title[data-v-d7bddb65] {
+.rk-accordion-title[data-v-03e2e1d0] {
   color: var(--color-ink);
   font-size: 1rem;
   font-weight: 500;
 }
-.rk-accordion-mark[data-v-d7bddb65] {
+.rk-accordion-mark[data-v-03e2e1d0] {
   position: relative;
   display: grid;
   place-items: center;
@@ -1060,85 +932,85 @@ to {
   width: 1.5rem;
   height: 1.5rem;
 }
-.rk-accordion-bar[data-v-d7bddb65] {
+.rk-accordion-bar[data-v-03e2e1d0] {
   position: absolute;
   height: 1px;
   width: 0.875rem;
   background: var(--color-ink-soft);
 }
-.rk-accordion-bar-turn[data-v-d7bddb65] {
+.rk-accordion-bar-turn[data-v-03e2e1d0] {
   transform: rotate(90deg);
-  transition: transform 420ms ease-out;
+  transition: transform var(--duration-slower) ease-out;
 }
-.rk-accordion-bar-turn.is-open[data-v-d7bddb65] {
+.rk-accordion-bar-turn.is-open[data-v-03e2e1d0] {
   transform: rotate(0deg);
 }
 
 /* 0fr to 1fr is the whole trick: a grid row can be animated to a height that
    was never measured, which is what `height: auto` cannot do. */
-.rk-accordion-panel[data-v-d7bddb65] {
+.rk-accordion-panel[data-v-03e2e1d0] {
   display: grid;
   grid-template-rows: 0fr;
-  transition: grid-template-rows 420ms ease-out;
+  transition: grid-template-rows var(--duration-slower) ease-out;
 }
-.rk-accordion-panel.is-open[data-v-d7bddb65] {
+.rk-accordion-panel.is-open[data-v-03e2e1d0] {
   grid-template-rows: 1fr;
 }
-.rk-accordion-clip[data-v-d7bddb65] {
+.rk-accordion-clip[data-v-03e2e1d0] {
   overflow: hidden;
 }
-.rk-accordion-body[data-v-d7bddb65] {
+.rk-accordion-body[data-v-03e2e1d0] {
   max-width: 68ch;
   padding-bottom: 1.5rem;
   color: var(--color-ink-soft);
   line-height: 1.625;
   opacity: 0;
-  transition: opacity 300ms;
+  transition: opacity var(--duration-slow);
 }
-.rk-accordion-body.is-open[data-v-d7bddb65] {
+.rk-accordion-body.is-open[data-v-03e2e1d0] {
   opacity: 1;
 }
 @media (prefers-reduced-motion: reduce) {
-.rk-accordion-panel[data-v-d7bddb65],
-  .rk-accordion-bar-turn[data-v-d7bddb65],
-  .rk-accordion-body[data-v-d7bddb65] {
+.rk-accordion-panel[data-v-03e2e1d0],
+  .rk-accordion-bar-turn[data-v-03e2e1d0],
+  .rk-accordion-body[data-v-03e2e1d0] {
     transition: none;
 }
 }
 
-.rk-crumbs[data-v-85ee4b4e] {
+.rk-crumbs[data-v-dcc01b03] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.8125rem;
 }
-.rk-crumb[data-v-85ee4b4e] {
+.rk-crumb[data-v-dcc01b03] {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
-.rk-crumb-link[data-v-85ee4b4e] {
+.rk-crumb-link[data-v-dcc01b03] {
   color: var(--color-ink-soft);
-  transition: color 150ms;
+  transition: color var(--duration-fast);
 }
-.rk-crumb-link[data-v-85ee4b4e]:hover {
+.rk-crumb-link[data-v-dcc01b03]:hover {
   color: var(--color-ink);
 }
-.rk-crumb-link[data-v-85ee4b4e]:focus-visible {
+.rk-crumb-link[data-v-dcc01b03]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
   border-radius: 2px;
 }
-.rk-crumb-current[data-v-85ee4b4e] {
+.rk-crumb-current[data-v-dcc01b03] {
   color: var(--color-ink);
   font-weight: 500;
 }
-.rk-crumb-sep[data-v-85ee4b4e] {
+.rk-crumb-sep[data-v-dcc01b03] {
   color: var(--color-hair);
 }
 
-.rk-disclosure-control[data-v-e09c1481] {
+.rk-disclosure-control[data-v-ad5c09f5] {
   display: flex;
   width: 100%;
   cursor: pointer;
@@ -1147,21 +1019,21 @@ to {
   gap: 1.5rem;
   padding: 1.25rem 0;
   text-align: left;
-  transition: color 150ms;
+  transition: color var(--duration-fast);
 }
-.rk-disclosure-control[data-v-e09c1481]:hover {
+.rk-disclosure-control[data-v-ad5c09f5]:hover {
   color: var(--color-primary);
 }
-.rk-disclosure-control[data-v-e09c1481]:focus-visible {
+.rk-disclosure-control[data-v-ad5c09f5]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-disclosure-title[data-v-e09c1481] {
+.rk-disclosure-title[data-v-ad5c09f5] {
   color: var(--color-ink);
   font-size: 1rem;
   font-weight: 500;
 }
-.rk-disclosure-mark[data-v-e09c1481] {
+.rk-disclosure-mark[data-v-ad5c09f5] {
   position: relative;
   display: grid;
   place-items: center;
@@ -1169,53 +1041,53 @@ to {
   width: 1.5rem;
   height: 1.5rem;
 }
-.rk-disclosure-bar[data-v-e09c1481] {
+.rk-disclosure-bar[data-v-ad5c09f5] {
   position: absolute;
   height: 1px;
   width: 0.875rem;
   background: var(--color-ink-soft);
 }
-.rk-disclosure-turn[data-v-e09c1481] {
+.rk-disclosure-turn[data-v-ad5c09f5] {
   transform: rotate(90deg);
-  transition: transform 420ms ease-out;
+  transition: transform var(--duration-slower) ease-out;
 }
-.rk-disclosure-turn.is-open[data-v-e09c1481] {
+.rk-disclosure-turn.is-open[data-v-ad5c09f5] {
   transform: rotate(0deg);
 }
 
 /* 0fr to 1fr is the whole trick: a grid row can be animated to a height that
    was never measured, which `height: auto` cannot do. */
-.rk-disclosure-panel[data-v-e09c1481] {
+.rk-disclosure-panel[data-v-ad5c09f5] {
   display: grid;
   grid-template-rows: 0fr;
-  transition: grid-template-rows 420ms ease-out;
+  transition: grid-template-rows var(--duration-slower) ease-out;
 }
-.rk-disclosure-panel.is-open[data-v-e09c1481] {
+.rk-disclosure-panel.is-open[data-v-ad5c09f5] {
   grid-template-rows: 1fr;
 }
-.rk-disclosure-clip[data-v-e09c1481] {
+.rk-disclosure-clip[data-v-ad5c09f5] {
   overflow: hidden;
 }
-.rk-disclosure-body[data-v-e09c1481] {
+.rk-disclosure-body[data-v-ad5c09f5] {
   max-width: 68ch;
   padding-bottom: 1.5rem;
   color: var(--color-ink-soft);
   line-height: 1.625;
   opacity: 0;
-  transition: opacity 300ms;
+  transition: opacity var(--duration-slow);
 }
-.rk-disclosure-body.is-open[data-v-e09c1481] {
+.rk-disclosure-body.is-open[data-v-ad5c09f5] {
   opacity: 1;
 }
 @media (prefers-reduced-motion: reduce) {
-.rk-disclosure-panel[data-v-e09c1481],
-  .rk-disclosure-turn[data-v-e09c1481],
-  .rk-disclosure-body[data-v-e09c1481] {
+.rk-disclosure-panel[data-v-ad5c09f5],
+  .rk-disclosure-turn[data-v-ad5c09f5],
+  .rk-disclosure-body[data-v-ad5c09f5] {
     transition: none;
 }
 }
 
-.rk-modal-scrim[data-v-e092f731] {
+.rk-modal-scrim[data-v-c6537cc8] {
   position: fixed;
   inset: 0;
   z-index: 50;
@@ -1225,31 +1097,29 @@ to {
   background: color-mix(in srgb, var(--color-ink) 70%, transparent);
   backdrop-filter: blur(4px);
 }
-.rk-modal-panel[data-v-e092f731] {
+.rk-modal-panel[data-v-c6537cc8] {
   width: 100%;
   max-width: 28rem;
   max-height: 85vh;
   overflow-y: auto;
   border-radius: var(--radius-card);
-  background: var(--color-surface);
   padding: 1.5rem;
-  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.2);
 }
-.rk-modal-panel[data-v-e092f731]:focus {
+.rk-modal-panel[data-v-c6537cc8]:focus {
   outline: none;
 }
-.rk-modal-head[data-v-e092f731] {
+.rk-modal-head[data-v-c6537cc8] {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 1rem;
 }
-.rk-modal-title[data-v-e092f731] {
+.rk-modal-title[data-v-c6537cc8] {
   font-size: 1.0625rem;
   font-weight: 600;
   color: var(--color-ink);
 }
-.rk-modal-close[data-v-e092f731] {
+.rk-modal-close[data-v-c6537cc8] {
   display: grid;
   place-items: center;
   flex-shrink: 0;
@@ -1257,71 +1127,71 @@ to {
   height: 2rem;
   border-radius: 9999px;
   color: var(--color-ink-soft);
-  transition: background-color 150ms;
+  transition: background-color var(--duration-fast);
 }
-.rk-modal-close[data-v-e092f731]:hover {
+.rk-modal-close[data-v-c6537cc8]:hover {
   background: var(--color-muted);
 }
-.rk-modal-close[data-v-e092f731]:focus-visible {
+.rk-modal-close[data-v-c6537cc8]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-modal-close svg[data-v-e092f731] {
+.rk-modal-close svg[data-v-c6537cc8] {
   width: 1rem;
   height: 1rem;
 }
-.rk-modal-body[data-v-e092f731] {
+.rk-modal-body[data-v-c6537cc8] {
   margin-top: 0.75rem;
   color: var(--color-ink-soft);
   font-size: 0.875rem;
   line-height: 1.625;
 }
-.rk-modal-actions[data-v-e092f731] {
+.rk-modal-actions[data-v-c6537cc8] {
   margin-top: 1.5rem;
   display: flex;
   justify-content: flex-end;
   gap: 0.5rem;
 }
-.rk-modal-enter-active[data-v-e092f731],
-.rk-modal-leave-active[data-v-e092f731] {
-  transition: opacity 180ms ease;
+.rk-modal-enter-active[data-v-c6537cc8],
+.rk-modal-leave-active[data-v-c6537cc8] {
+  transition: opacity var(--duration-base) ease;
 }
-.rk-modal-enter-active .rk-modal-panel[data-v-e092f731],
-.rk-modal-leave-active .rk-modal-panel[data-v-e092f731] {
+.rk-modal-enter-active .rk-modal-panel[data-v-c6537cc8],
+.rk-modal-leave-active .rk-modal-panel[data-v-c6537cc8] {
   transition:
-    transform 180ms cubic-bezier(0.32, 0.72, 0, 1),
-    opacity 180ms ease;
+    transform var(--duration-base) var(--ease-sheet),
+    opacity var(--duration-base) ease;
 }
-.rk-modal-enter-from[data-v-e092f731],
-.rk-modal-leave-to[data-v-e092f731] {
+.rk-modal-enter-from[data-v-c6537cc8],
+.rk-modal-leave-to[data-v-c6537cc8] {
   opacity: 0;
 }
 
 /* From nowhere, not from an edge: a scale is what separates this from a sheet. */
-.rk-modal-enter-from .rk-modal-panel[data-v-e092f731],
-.rk-modal-leave-to .rk-modal-panel[data-v-e092f731] {
+.rk-modal-enter-from .rk-modal-panel[data-v-c6537cc8],
+.rk-modal-leave-to .rk-modal-panel[data-v-c6537cc8] {
   transform: scale(0.96);
   opacity: 0;
 }
 @media (prefers-reduced-motion: reduce) {
-.rk-modal-enter-active .rk-modal-panel[data-v-e092f731],
-  .rk-modal-leave-active .rk-modal-panel[data-v-e092f731] {
-    transition: opacity 180ms ease;
+.rk-modal-enter-active .rk-modal-panel[data-v-c6537cc8],
+  .rk-modal-leave-active .rk-modal-panel[data-v-c6537cc8] {
+    transition: opacity var(--duration-base) ease;
     transform: none;
 }
-.rk-modal-enter-from .rk-modal-panel[data-v-e092f731],
-  .rk-modal-leave-to .rk-modal-panel[data-v-e092f731] {
+.rk-modal-enter-from .rk-modal-panel[data-v-c6537cc8],
+  .rk-modal-leave-to .rk-modal-panel[data-v-c6537cc8] {
     transform: none;
 }
 }
 
-.rk-pager[data-v-cc4bbb58] {
+.rk-pager[data-v-29950578] {
   display: flex;
   align-items: center;
   gap: 0.25rem;
 }
-.rk-pager-step[data-v-cc4bbb58],
-.rk-pager-page[data-v-cc4bbb58] {
+.rk-pager-step[data-v-29950578],
+.rk-pager-page[data-v-29950578] {
   display: grid;
   place-items: center;
   min-width: 2rem;
@@ -1331,29 +1201,29 @@ to {
   font-size: 0.875rem;
   color: var(--color-ink-soft);
   transition:
-    background-color 150ms,
-    color 150ms;
+    background-color var(--duration-fast),
+    color var(--duration-fast);
 }
-.rk-pager-step[data-v-cc4bbb58]:hover:not(:disabled),
-.rk-pager-page[data-v-cc4bbb58]:hover {
+.rk-pager-step[data-v-29950578]:hover:not(:disabled),
+.rk-pager-page[data-v-29950578]:hover {
   background: var(--color-muted);
   color: var(--color-ink);
 }
-.rk-pager-step[data-v-cc4bbb58]:focus-visible,
-.rk-pager-page[data-v-cc4bbb58]:focus-visible {
+.rk-pager-step[data-v-29950578]:focus-visible,
+.rk-pager-page[data-v-29950578]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-pager-step[data-v-cc4bbb58]:disabled {
+.rk-pager-step[data-v-29950578]:disabled {
   opacity: 0.4;
   pointer-events: none;
 }
-.rk-pager-page.is-active[data-v-cc4bbb58] {
+.rk-pager-page.is-active[data-v-29950578] {
   background: var(--color-primary);
-  color: #fff;
+  color: var(--color-on-primary);
   font-weight: 500;
 }
-.rk-pager-gap[data-v-cc4bbb58] {
+.rk-pager-gap[data-v-29950578] {
   display: grid;
   place-items: center;
   min-width: 2rem;
@@ -1361,32 +1231,32 @@ to {
   color: var(--color-ink-soft);
 }
 
-.rk-tabs[data-v-b854e7f5] {
+.rk-tabs[data-v-2a18b30e] {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   border-bottom: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);
 }
-.rk-tab[data-v-b854e7f5] {
+.rk-tab[data-v-2a18b30e] {
   position: relative;
   padding: 0.625rem 0.875rem;
   font-size: 0.875rem;
   color: var(--color-ink-soft);
-  transition: color 150ms;
+  transition: color var(--duration-fast);
 }
-.rk-tab[data-v-b854e7f5]:hover {
+.rk-tab[data-v-2a18b30e]:hover {
   color: var(--color-ink);
 }
-.rk-tab[data-v-b854e7f5]:focus-visible {
+.rk-tab[data-v-2a18b30e]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: -2px;
   border-radius: var(--radius-cell);
 }
-.rk-tab.is-active[data-v-b854e7f5] {
+.rk-tab.is-active[data-v-2a18b30e] {
   color: var(--color-ink);
   font-weight: 500;
 }
-.rk-tab.is-active[data-v-b854e7f5]::after {
+.rk-tab.is-active[data-v-2a18b30e]::after {
   content: '';
   position: absolute;
   inset-inline: 0.5rem;
@@ -1395,19 +1265,19 @@ to {
   border-radius: 9999px;
   background: var(--color-primary);
 }
-.rk-tabpanel[data-v-b854e7f5] {
+.rk-tabpanel[data-v-2a18b30e] {
   padding-top: 1rem;
 }
-.rk-tabpanel[data-v-b854e7f5]:focus-visible {
+.rk-tabpanel[data-v-2a18b30e]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
 
-.rk-tip[data-v-3ed61bd4] {
+.rk-tip[data-v-3a572640] {
   position: relative;
   display: inline-flex;
 }
-.rk-tip-bubble[data-v-3ed61bd4] {
+.rk-tip-bubble[data-v-3a572640] {
   position: absolute;
   left: 50%;
   z-index: 60;
@@ -1424,20 +1294,20 @@ to {
   /* Out of the hit area while hidden, or it would swallow the pointer on its
      way to the control it describes. */
   pointer-events: none;
-  transition: opacity 150ms ease;
+  transition: opacity var(--duration-fast) ease;
 }
-.rk-tip-bubble.is-top[data-v-3ed61bd4] {
+.rk-tip-bubble.is-top[data-v-3a572640] {
   bottom: calc(100% + 0.375rem);
 }
-.rk-tip-bubble.is-bottom[data-v-3ed61bd4] {
+.rk-tip-bubble.is-bottom[data-v-3a572640] {
   top: calc(100% + 0.375rem);
 }
-.rk-tip:hover .rk-tip-bubble[data-v-3ed61bd4],
-.rk-tip:focus-within .rk-tip-bubble[data-v-3ed61bd4] {
+.rk-tip:hover .rk-tip-bubble[data-v-3a572640],
+.rk-tip:focus-within .rk-tip-bubble[data-v-3a572640] {
   opacity: 1;
 }
 @media (prefers-reduced-motion: reduce) {
-.rk-tip-bubble[data-v-3ed61bd4] {
+.rk-tip-bubble[data-v-3a572640] {
     transition: none;
 }
 }
@@ -1453,31 +1323,31 @@ to {
 
    So the flex row lives on an element the caller does not own, and the root is
    left for them to style. `TabBar` is built the same way for the same reason. */
-.rk-nav-inner[data-v-5e640548] {
+.rk-nav-inner[data-v-52e5d553] {
   display: flex;
   align-items: center;
   gap: 0.25rem;
 }
-.rk-nav-link[data-v-5e640548] {
+.rk-nav-link[data-v-52e5d553] {
   position: relative;
   border-radius: var(--radius-cell);
   padding: 0.5rem 0.75rem;
   font-size: 0.875rem;
   color: var(--color-ink-soft);
-  transition: color 150ms;
+  transition: color var(--duration-fast);
 }
-.rk-nav-link[data-v-5e640548]:hover {
+.rk-nav-link[data-v-52e5d553]:hover {
   color: var(--color-ink);
 }
-.rk-nav-link[data-v-5e640548]:focus-visible {
+.rk-nav-link[data-v-52e5d553]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-nav-link.is-active[data-v-5e640548] {
+.rk-nav-link.is-active[data-v-52e5d553] {
   color: var(--color-ink);
   font-weight: 500;
 }
-.rk-nav-rule[data-v-5e640548] {
+.rk-nav-rule[data-v-52e5d553] {
   position: absolute;
   inset-inline: 0.75rem;
   bottom: -1px;
@@ -1486,13 +1356,13 @@ to {
   background: var(--color-primary);
   transform: scaleX(0);
   transform-origin: left;
-  transition: transform 300ms;
+  transition: transform var(--duration-slow);
 }
-.rk-nav-link.is-active .rk-nav-rule[data-v-5e640548] {
+.rk-nav-link.is-active .rk-nav-rule[data-v-52e5d553] {
   transform: scaleX(1);
 }
 @media (prefers-reduced-motion: reduce) {
-.rk-nav-rule[data-v-5e640548] {
+.rk-nav-rule[data-v-52e5d553] {
     transition: none;
 }
 }