From aa2938cb342d16c648a55f943dda237cb3d5e860 Mon Sep 17 00:00:00 2001
From: robonen <robonenandrew@gmail.com>
Date: Mon, 15 Jun 2026 16:55:07 +0700
Subject: [PATCH] refactor(toolkit): type source any with proper types

Genuinely type composable any usages (useStepper/useStorage/useForm/
createEventHook/useSorted/etc.) as proper generics/unknown; keep idiomatic
any-function and overload-impl signatures with comments; skipped test -> .todo.
---
 vue/toolkit/docs/intro.vue                    | 34 +++++------
 vue/toolkit/eslint.config.ts                  |  4 +-
 .../composables/animation/useAnimate/demo.vue | 36 +++++------
 .../animation/useCountdown/demo.vue           | 24 ++++----
 .../animation/useDateFormat/demo.vue          | 26 ++++----
 .../animation/useDateFormat/index.ts          |  3 +-
 .../animation/useInterval/demo.vue            | 24 ++++----
 .../animation/useIntervalFn/demo.vue          | 36 +++++------
 .../src/composables/animation/useNow/demo.vue | 28 ++++-----
 .../composables/animation/useRafFn/demo.vue   | 42 ++++++-------
 .../composables/animation/useTimeAgo/demo.vue | 22 +++----
 .../composables/animation/useTimeAgo/index.ts |  6 +-
 .../composables/animation/useTimeout/demo.vue | 22 +++----
 .../animation/useTimeoutFn/demo.vue           | 12 ++--
 .../animation/useTimeoutFn/index.ts           |  2 +-
 .../animation/useTimestamp/demo.vue           | 28 ++++-----
 .../animation/useTransition/demo.vue          | 34 +++++------
 .../animation/useTransition/index.ts          |  6 ++
 .../array/useArrayDifference/demo.vue         | 22 +++----
 .../array/useArrayDifference/index.ts         |  8 +--
 .../composables/array/useArrayEvery/demo.vue  | 20 +++---
 .../composables/array/useArrayFilter/demo.vue | 28 ++++-----
 .../composables/array/useArrayFind/demo.vue   | 28 ++++-----
 .../array/useArrayFindIndex/demo.vue          | 18 +++---
 .../array/useArrayFindLast/demo.vue           | 24 ++++----
 .../array/useArrayIncludes/demo.vue           | 30 ++++-----
 .../array/useArrayIncludes/index.ts           |  6 +-
 .../composables/array/useArrayJoin/demo.vue   | 26 ++++----
 .../composables/array/useArrayJoin/index.ts   |  3 +-
 .../composables/array/useArrayMap/demo.vue    | 26 ++++----
 .../composables/array/useArrayReduce/demo.vue | 22 +++----
 .../composables/array/useArraySome/demo.vue   | 22 +++----
 .../composables/array/useArrayUnique/demo.vue | 24 ++++----
 .../composables/array/useArrayUnique/index.ts |  6 +-
 .../src/composables/array/useSorted/demo.vue  | 22 +++----
 .../src/composables/array/useSorted/index.ts  | 20 +++---
 .../browser/broadcastedRef/demo.vue           | 26 ++++----
 .../browser/useBreakpoints/demo.vue           | 26 ++++----
 .../browser/useBreakpoints/index.ts           | 17 +-----
 .../composables/browser/useClipboard/demo.vue | 22 +++----
 .../browser/useClipboardItems/demo.vue        | 24 ++++----
 .../browser/useCloseWatcher/demo.vue          | 24 ++++----
 .../composables/browser/useColorMode/demo.vue | 30 ++++-----
 .../composables/browser/useCssVar/demo.vue    | 28 ++++-----
 .../src/composables/browser/useDark/demo.vue  | 26 ++++----
 .../browser/useDocumentPiP/demo.vue           | 24 ++++----
 .../browser/useEventListener/demo.vue         | 30 ++++-----
 .../browser/useEventListener/index.ts         | 13 ++--
 .../browser/useEyeDropper/demo.vue            | 14 ++---
 .../composables/browser/useFavicon/demo.vue   | 20 +++---
 .../browser/useFileDialog/demo.vue            | 28 ++++-----
 .../browser/useFileSystemAccess/demo.vue      | 26 ++++----
 .../browser/useFullscreen/demo.vue            | 20 +++---
 .../browser/useFullscreen/index.ts            | 25 ++++----
 .../src/composables/browser/useImage/demo.vue | 16 ++---
 .../src/composables/browser/useImage/index.ts |  2 +-
 .../browser/useLocalFonts/demo.vue            | 20 +++---
 .../browser/useMediaQuery/demo.vue            | 18 +++---
 .../browser/useMediaQuery/index.ts            | 17 +-----
 .../composables/browser/useObjectUrl/demo.vue | 26 ++++----
 .../browser/useOtpCredentials/demo.vue        | 16 ++---
 .../browser/usePermission/demo.vue            | 22 +++----
 .../browser/usePreferredColorScheme/demo.vue  | 18 +++---
 .../browser/usePreferredContrast/demo.vue     | 28 ++++-----
 .../browser/usePreferredDark/demo.vue         | 12 ++--
 .../browser/usePreferredLanguages/demo.vue    | 26 ++++----
 .../usePreferredReducedMotion/demo.vue        | 22 +++----
 .../usePreferredReducedTransparency/demo.vue  | 22 +++----
 .../composables/browser/useScriptTag/demo.vue | 28 ++++-----
 .../src/composables/browser/useShare/demo.vue | 28 ++++-----
 .../composables/browser/useStyleTag/demo.vue  | 22 +++----
 .../composables/browser/useTabLeader/demo.vue | 28 ++++-----
 .../browser/useTextareaAutosize/demo.vue      | 26 ++++----
 .../src/composables/browser/useTitle/demo.vue | 26 ++++----
 .../browser/useUrlSearchParams/demo.vue       | 24 ++++----
 .../browser/useUrlSearchParams/index.ts       | 11 +++-
 .../composables/browser/useVibrate/demo.vue   | 22 +++----
 .../composables/browser/useWakeLock/demo.vue  | 20 +++---
 .../browser/useWebNotification/demo.vue       | 32 +++++-----
 .../component/createReusableTemplate/demo.vue | 24 ++++----
 .../component/createReusableTemplate/index.ts | 16 ++++-
 .../component/unrefElement/demo.vue           | 20 +++---
 .../component/useCurrentElement/demo.vue      | 26 ++++----
 .../component/useForwardExpose/demo.vue       | 22 +++----
 .../component/useForwardExpose/index.ts       |  2 +-
 .../component/useTemplateRefsList/demo.vue    | 30 ++++-----
 .../component/useVirtualList/demo.vue         | 26 ++++----
 .../component/useVirtualList/index.ts         |  2 +-
 .../composables/debug/useRenderCount/demo.vue | 18 +++---
 .../composables/debug/useRenderInfo/demo.vue  | 32 +++++-----
 .../elements/onElementRemoval/demo.vue        | 34 +++++------
 .../elements/useActiveElement/demo.vue        | 20 +++---
 .../elements/useDocumentReadyState/demo.vue   | 18 +++---
 .../elements/useDocumentVisibility/demo.vue   | 22 +++----
 .../elements/useDraggable/demo.vue            | 26 ++++----
 .../elements/useDraggable/index.ts            |  6 +-
 .../composables/elements/useDropZone/demo.vue | 24 ++++----
 .../elements/useElementBounding/demo.vue      | 32 +++++-----
 .../elements/useElementSize/demo.vue          | 34 +++++------
 .../elements/useElementVisibility/demo.vue    | 30 ++++-----
 .../elements/useFocusGuard/demo.vue           | 22 +++----
 .../elements/useIntersectionObserver/demo.vue | 30 ++++-----
 .../elements/useMutationObserver/demo.vue     | 44 ++++++-------
 .../elements/useParentElement/demo.vue        | 36 +++++------
 .../elements/useResizeObserver/demo.vue       | 36 +++++------
 .../elements/useWindowFocus/demo.vue          | 26 ++++----
 .../elements/useWindowScroll/demo.vue         | 42 ++++++-------
 .../elements/useWindowSize/demo.vue           | 32 +++++-----
 .../composables/forms/mask/presets/card.ts    | 28 +++------
 .../composables/forms/mask/presets/dynamic.ts | 39 ++++++++++++
 .../forms/mask/presets/phone-country.ts       | 28 +++------
 .../src/composables/forms/useField/demo.vue   | 20 +++---
 .../src/composables/forms/useField/index.ts   |  6 +-
 .../composables/forms/useFieldArray/demo.vue  | 24 ++++----
 .../composables/forms/useFieldArray/index.ts  |  2 +-
 .../src/composables/forms/useForm/context.ts  |  2 +-
 .../src/composables/forms/useForm/demo.vue    | 24 ++++----
 .../src/composables/forms/useForm/index.ts    | 23 +++----
 .../src/composables/forms/useForm/types.ts    | 15 +++--
 .../composables/forms/useForm/validation.ts   |  2 +-
 .../composables/forms/useFormContext/demo.vue | 20 +++---
 .../composables/forms/useFormContext/index.ts |  2 +-
 .../composables/forms/useMaskedField/demo.vue | 16 ++---
 .../composables/forms/useMaskedInput/demo.vue |  8 +--
 .../lifecycle/tryOnBeforeMount/demo.vue       | 24 ++++----
 .../lifecycle/tryOnBeforeMount/index.ts       | 20 +-----
 .../lifecycle/tryOnMounted/demo.vue           | 16 ++---
 .../lifecycle/tryOnMounted/index.test.ts      |  2 +-
 .../lifecycle/tryOnMounted/index.ts           | 18 +-----
 .../lifecycle/tryOnScopeDispose/demo.vue      | 28 ++++-----
 .../composables/lifecycle/useMounted/demo.vue | 20 +++---
 .../src/composables/math/logicAnd/demo.vue    | 36 +++++------
 .../src/composables/math/logicNot/demo.vue    | 26 ++++----
 .../src/composables/math/logicOr/demo.vue     | 14 ++---
 .../src/composables/math/useAbs/demo.vue      | 20 +++---
 .../src/composables/math/useAverage/demo.vue  | 20 +++---
 .../src/composables/math/useCeil/demo.vue     | 26 ++++----
 .../src/composables/math/useClamp/demo.vue    | 36 +++++------
 .../src/composables/math/useFloor/demo.vue    | 26 ++++----
 .../src/composables/math/useMath/demo.vue     | 22 +++----
 .../src/composables/math/useMath/index.ts     |  8 ++-
 .../src/composables/math/useMax/demo.vue      | 28 ++++-----
 .../src/composables/math/useMin/demo.vue      | 28 ++++-----
 .../src/composables/math/useMin/index.ts      | 47 +++++++-------
 .../composables/math/usePrecision/demo.vue    | 36 +++++------
 .../composables/math/useProjection/demo.vue   | 44 ++++++-------
 .../src/composables/math/useRound/demo.vue    | 26 ++++----
 .../src/composables/math/useSum/demo.vue      | 24 ++++----
 .../src/composables/math/useTrunc/demo.vue    | 26 ++++----
 .../composables/media/useBluetooth/demo.vue   | 26 ++++----
 .../media/useDisplayMedia/demo.vue            | 28 ++++-----
 .../media/useMediaControls/demo.vue           | 34 +++++------
 .../media/useMediaControls/index.ts           | 32 ++--------
 .../src/composables/media/useMemory/demo.vue  | 42 ++++++-------
 .../media/usePerformanceObserver/demo.vue     | 38 ++++++------
 .../media/useSpeechRecognition/demo.vue       | 32 +++++-----
 .../media/useSpeechSynthesis/demo.vue         | 40 ++++++------
 .../composables/media/useUserMedia/demo.vue   | 18 +++---
 .../composables/media/useWebWorker/demo.vue   | 20 +++---
 .../composables/media/useWebWorker/index.ts   | 14 +++--
 .../composables/media/useWebWorkerFn/demo.vue | 36 +++++------
 .../reactivity/computedAsync/demo.vue         | 28 ++++-----
 .../reactivity/computedEager/demo.vue         | 24 ++++----
 .../reactivity/computedWithControl/demo.vue   | 38 ++++++------
 .../reactivity/computedWithControl/index.ts   |  6 +-
 .../composables/reactivity/extendRef/demo.vue | 28 ++++-----
 .../reactivity/reactiveComputed/demo.vue      | 36 +++++------
 .../reactivity/reactiveOmit/demo.vue          | 34 +++++------
 .../reactivity/reactiveOmit/index.ts          |  4 +-
 .../reactivity/reactivePick/demo.vue          | 26 ++++----
 .../reactivity/refAutoReset/demo.vue          | 34 +++++------
 .../reactivity/refDebounced/demo.vue          | 28 ++++-----
 .../reactivity/refDefault/demo.vue            | 28 ++++-----
 .../reactivity/refThrottled/demo.vue          | 36 +++++------
 .../reactivity/refThrottled/index.ts          |  4 +-
 .../reactivity/refWithControl/demo.vue        | 34 +++++------
 .../composables/reactivity/syncRef/demo.vue   | 28 ++++-----
 .../reactivity/toReactive/demo.vue            | 26 ++++----
 .../composables/reactivity/useCached/demo.vue | 26 ++++----
 .../composables/reactivity/useCloned/demo.vue | 38 ++++++------
 .../reactivity/useDebounceFn/demo.vue         | 40 ++++++------
 .../reactivity/usePrevious/demo.vue           | 26 ++++----
 .../reactivity/useSyncRefs/demo.vue           | 32 +++++-----
 .../reactivity/useThrottleFn/demo.vue         | 40 ++++++------
 .../reactivity/useThrottleFn/index.ts         |  5 ++
 .../reactivity/useToNumber/demo.vue           | 24 ++++----
 .../reactivity/useToString/demo.vue           | 34 +++++------
 .../composables/sensors/onKeyStroke/demo.vue  | 30 ++++-----
 .../composables/sensors/onKeyStroke/index.ts  |  2 +
 .../composables/sensors/onLongPress/demo.vue  | 34 +++++------
 .../sensors/onStartTyping/demo.vue            | 22 +++----
 .../composables/sensors/useBattery/demo.vue   | 32 +++++-----
 .../sensors/useBodyScrollLock/demo.vue        | 22 +++----
 .../sensors/useClickOutside/demo.vue          | 20 +++---
 .../sensors/useDeviceMotion/demo.vue          | 44 ++++++-------
 .../sensors/useDeviceOrientation/demo.vue     | 30 ++++-----
 .../sensors/useDevicePixelRatio/demo.vue      | 24 ++++----
 .../sensors/useDevicesList/demo.vue           | 26 ++++----
 .../sensors/useElementByPoint/demo.vue        | 26 ++++----
 .../sensors/useElementHover/demo.vue          | 40 ++++++------
 .../composables/sensors/useEscapeKey/demo.vue | 32 +++++-----
 .../src/composables/sensors/useFocus/demo.vue | 22 +++----
 .../sensors/useFocusWithin/demo.vue           | 20 +++---
 .../src/composables/sensors/useFps/demo.vue   | 34 +++++------
 .../composables/sensors/useGamepad/demo.vue   | 40 ++++++------
 .../sensors/useGeolocation/demo.vue           | 40 ++++++------
 .../sensors/useGeolocation/index.ts           |  5 +-
 .../src/composables/sensors/useIdle/demo.vue  | 32 +++++-----
 .../sensors/useInfiniteScroll/demo.vue        | 22 +++----
 .../sensors/useKeyModifier/demo.vue           | 24 ++++----
 .../composables/sensors/useMagicKeys/demo.vue | 32 +++++-----
 .../composables/sensors/useMagicKeys/index.ts | 27 +++++---
 .../src/composables/sensors/useMouse/demo.vue | 30 ++++-----
 .../src/composables/sensors/useMouse/index.ts | 11 +---
 .../sensors/useMouseInElement/demo.vue        | 38 ++++++------
 .../sensors/useMousePressed/demo.vue          | 30 ++++-----
 .../composables/sensors/useNetwork/demo.vue   | 42 ++++++-------
 .../composables/sensors/useOnline/demo.vue    | 12 ++--
 .../composables/sensors/usePageLeave/demo.vue | 24 ++++----
 .../composables/sensors/useParallax/demo.vue  | 38 ++++++------
 .../composables/sensors/usePointer/demo.vue   | 36 +++++------
 .../composables/sensors/usePointer/index.ts   | 11 +---
 .../sensors/usePointerLock/demo.vue           | 28 ++++-----
 .../sensors/usePointerSwipe/demo.vue          | 36 +++++------
 .../sensors/useScreenOrientation/demo.vue     | 30 ++++-----
 .../composables/sensors/useScroll/demo.vue    | 26 ++++----
 .../sensors/useScrollLock/demo.vue            | 22 +++----
 .../src/composables/sensors/useSwipe/demo.vue | 28 ++++-----
 .../sensors/useTextSelection/demo.vue         | 34 +++++------
 .../state/createSharedComposable/demo.vue     | 22 +++----
 .../state/useAppSharedState/demo.vue          | 34 +++++------
 .../composables/state/useAsyncState/demo.vue  | 36 +++++------
 .../composables/state/useAsyncState/index.ts  | 10 +--
 .../state/useContextFactory/demo.vue          | 30 ++++-----
 .../src/composables/state/useCounter/demo.vue | 32 +++++-----
 .../composables/state/useCycleList/demo.vue   | 28 ++++-----
 .../state/useDebouncedRefHistory/demo.vue     | 30 ++++-----
 .../src/composables/state/useId/demo.vue      | 26 ++++----
 .../state/useInjectionStore/demo.vue          | 32 +++++-----
 .../state/useInjectionStore/index.ts          |  2 +-
 .../composables/state/useLastChanged/demo.vue | 22 +++----
 .../composables/state/useLastChanged/index.ts |  2 +-
 .../state/useManualRefHistory/demo.vue        | 38 ++++++------
 .../state/useOffsetPagination/demo.vue        | 28 ++++-----
 .../composables/state/useRefHistory/demo.vue  | 26 ++++----
 .../composables/state/useRefHistory/index.ts  | 22 +++----
 .../src/composables/state/useStepper/demo.vue | 18 +++---
 .../src/composables/state/useStepper/index.ts | 61 +++++++++++++------
 .../state/useThrottledRefHistory/demo.vue     | 34 +++++------
 .../src/composables/state/useToggle/demo.vue  | 32 +++++-----
 .../composables/storage/useCookie/demo.vue    | 28 ++++-----
 .../composables/storage/useCookie/index.ts    |  6 +-
 .../storage/useLocalStorage/demo.vue          | 28 ++++-----
 .../storage/useSessionStorage/demo.vue        | 38 ++++++------
 .../composables/storage/useStorage/demo.vue   | 38 ++++++------
 .../composables/storage/useStorage/index.ts   | 34 +++++------
 .../storage/useStorageAsync/demo.vue          | 38 ++++++------
 .../storage/useStorageAsync/index.ts          | 10 +--
 .../utilities/createEventHook/demo.vue        | 30 ++++-----
 .../utilities/createEventHook/index.ts        | 30 ++++-----
 .../src/composables/utilities/get/demo.vue    | 34 +++++------
 .../composables/utilities/isDefined/demo.vue  | 20 +++---
 .../src/composables/utilities/set/demo.vue    | 28 ++++-----
 .../utilities/useEventBus/demo.vue            | 24 ++++----
 .../utilities/useEventBus/index.ts            |  6 +-
 .../composables/utilities/useMemoize/demo.vue | 44 ++++++-------
 .../utilities/useSupported/demo.vue           | 20 +++---
 .../src/composables/watch/until/demo.vue      | 30 ++++-----
 .../src/composables/watch/until/index.ts      | 36 +++++------
 .../composables/watch/watchDebounced/demo.vue | 40 ++++++------
 .../composables/watch/watchDebounced/index.ts | 16 +----
 .../composables/watch/watchIgnorable/demo.vue | 28 ++++-----
 .../composables/watch/watchIgnorable/index.ts | 23 ++-----
 .../src/composables/watch/watchOnce/demo.vue  | 34 +++++------
 .../src/composables/watch/watchOnce/index.ts  | 17 +-----
 .../composables/watch/watchPausable/demo.vue  | 30 ++++-----
 .../composables/watch/watchPausable/index.ts  | 15 +----
 .../composables/watch/watchThrottled/demo.vue | 32 +++++-----
 .../composables/watch/watchThrottled/index.ts | 26 +++-----
 .../src/composables/watch/whenever/demo.vue   | 24 ++++----
 vue/toolkit/src/types/watch.ts                | 26 ++++++++
 vue/toolkit/src/utils/filters.ts              |  2 +-
 vue/toolkit/src/utils/lifecycle.ts            | 51 ++++++++++++++++
 283 files changed, 3505 insertions(+), 3482 deletions(-)
 create mode 100644 vue/toolkit/src/composables/forms/mask/presets/dynamic.ts
 create mode 100644 vue/toolkit/src/types/watch.ts
 create mode 100644 vue/toolkit/src/utils/lifecycle.ts

diff --git a/vue/toolkit/docs/intro.vue b/vue/toolkit/docs/intro.vue
index b66005b..1bf45ae 100644
--- a/vue/toolkit/docs/intro.vue
+++ b/vue/toolkit/docs/intro.vue
@@ -29,33 +29,33 @@ const { count, increment, decrement, reset } = useCounter(0, { min: 0, max: 10 }
 
     <!-- Feature highlights -->
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
-        <h3 class="text-sm font-semibold text-(--fg) mb-1.5">Tree-shakeable by design</h3>
-        <p class="text-sm text-(--fg-muted) leading-relaxed">
+      <div class="rounded-lg border border-border bg-bg-subtle p-5">
+        <h3 class="text-sm font-semibold text-fg mb-1.5">Tree-shakeable by design</h3>
+        <p class="text-sm text-fg-muted leading-relaxed">
           Import only what you use. Each composable lives on its own and pulls in nothing it
           doesn't need — your bundle stays exactly as small as your usage.
         </p>
       </div>
 
-      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
-        <h3 class="text-sm font-semibold text-(--fg) mb-1.5">SSR-safe out of the box</h3>
-        <p class="text-sm text-(--fg-muted) leading-relaxed">
+      <div class="rounded-lg border border-border bg-bg-subtle p-5">
+        <h3 class="text-sm font-semibold text-fg mb-1.5">SSR-safe out of the box</h3>
+        <p class="text-sm text-fg-muted leading-relaxed">
           Browser-only access is guarded behind lifecycle hooks and configurable
           <code>window</code>/<code>document</code> targets, so Nuxt and SSR setups just work.
         </p>
       </div>
 
-      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
-        <h3 class="text-sm font-semibold text-(--fg) mb-1.5">Fully typed</h3>
-        <p class="text-sm text-(--fg-muted) leading-relaxed">
+      <div class="rounded-lg border border-border bg-bg-subtle p-5">
+        <h3 class="text-sm font-semibold text-fg mb-1.5">Fully typed</h3>
+        <p class="text-sm text-fg-muted leading-relaxed">
           Written in TypeScript with precise return types and generics. <code>MaybeRefOrGetter</code>
           arguments mean you can pass plain values, refs or getters interchangeably.
         </p>
       </div>
 
-      <div class="rounded-lg border border-(--border) bg-(--bg-subtle) p-5">
-        <h3 class="text-sm font-semibold text-(--fg) mb-1.5">Broad coverage</h3>
-        <p class="text-sm text-(--fg-muted) leading-relaxed">
+      <div class="rounded-lg border border-border bg-bg-subtle p-5">
+        <h3 class="text-sm font-semibold text-fg mb-1.5">Broad coverage</h3>
+        <p class="text-sm text-fg-muted leading-relaxed">
           From state and reactivity to sensors, elements, storage, math and form handling —
           one cohesive toolkit spanning the whole surface of a Vue app.
         </p>
@@ -101,19 +101,19 @@ useEventListener('keydown', (e) => {
       <p>The same <code>useCounter</code> running live:</p>
     </div>
     <ClientOnly>
-      <div class="flex items-center gap-3 rounded-lg border border-(--border) bg-(--bg-subtle) p-4">
+      <div class="flex items-center gap-3 rounded-lg border border-border bg-bg-subtle p-4">
         <button
           type="button"
-          class="size-9 rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) focus:outline-none focus:ring-2 focus:ring-(--ring) disabled:opacity-40"
+          class="size-9 rounded-md border border-border bg-bg-elevated text-fg hover:bg-bg-inset focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-40"
           :disabled="count <= 0"
           @click="decrement()"
         >
           −
         </button>
-        <span class="min-w-12 text-center text-lg font-medium tabular-nums text-(--fg)">{{ count }}</span>
+        <span class="min-w-12 text-center text-lg font-medium tabular-nums text-fg">{{ count }}</span>
         <button
           type="button"
-          class="size-9 rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) focus:outline-none focus:ring-2 focus:ring-(--ring) disabled:opacity-40"
+          class="size-9 rounded-md border border-border bg-bg-elevated text-fg hover:bg-bg-inset focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-40"
           :disabled="count >= 10"
           @click="increment()"
         >
@@ -121,7 +121,7 @@ useEventListener('keydown', (e) => {
         </button>
         <button
           type="button"
-          class="ml-auto rounded-md px-3 py-1.5 text-sm text-(--fg-muted) hover:text-(--fg) hover:bg-(--bg-inset) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="ml-auto rounded-md px-3 py-1.5 text-sm text-fg-muted hover:text-fg hover:bg-bg-inset focus:outline-none focus:ring-2 focus:ring-ring"
           @click="reset()"
         >
           Reset
diff --git a/vue/toolkit/eslint.config.ts b/vue/toolkit/eslint.config.ts
index c86da2b..114b5be 100644
--- a/vue/toolkit/eslint.config.ts
+++ b/vue/toolkit/eslint.config.ts
@@ -1,3 +1,3 @@
-import { base, compose, imports, stylistic, typescript, vitest, vue } from '@robonen/eslint';
+import { base, compose, imports, stylistic, tests, typescript, vitest, vue } from '@robonen/eslint';
 
-export default compose(base, typescript, vue, vitest, imports, stylistic);
+export default compose(base, typescript, vue, vitest, imports, stylistic, tests);
diff --git a/vue/toolkit/src/composables/animation/useAnimate/demo.vue b/vue/toolkit/src/composables/animation/useAnimate/demo.vue
index 3e3e953..e477226 100644
--- a/vue/toolkit/src/composables/animation/useAnimate/demo.vue
+++ b/vue/toolkit/src/composables/animation/useAnimate/demo.vue
@@ -40,7 +40,7 @@ const stateColor = computed(() => {
     case 'running': return 'bg-emerald-500';
     case 'paused': return 'bg-amber-500';
     case 'finished': return 'bg-sky-500';
-    default: return 'bg-(--border-strong)';
+    default: return 'bg-border-strong';
   }
 });
 
@@ -48,7 +48,7 @@ const rates = [0.5, 1, 2] as const;
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       v-if="!isSupported"
       class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400"
@@ -57,28 +57,28 @@ const rates = [0.5, 1, 2] as const;
     </div>
 
     <template v-else>
-      <div class="flex h-28 items-center justify-center overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset)">
+      <div class="flex h-28 items-center justify-center overflow-hidden rounded-xl border border-border bg-bg-inset">
         <div
           ref="target"
-          class="size-12 bg-(--accent) shadow-lg"
+          class="size-12 bg-accent shadow-lg"
         />
       </div>
 
       <div class="grid grid-cols-2 gap-3">
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <div class="rounded-lg border border-border bg-bg-inset p-3">
+          <div class="demo-label">
             State
           </div>
           <div class="mt-1 flex items-center gap-2">
             <span class="inline-block size-2 rounded-full transition" :class="stateColor" />
-            <span class="font-mono text-sm text-(--fg)">{{ playState }}</span>
+            <span class="font-mono text-sm text-fg">{{ playState }}</span>
           </div>
         </div>
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <div class="rounded-lg border border-border bg-bg-inset p-3">
+          <div class="demo-label">
             Current time
           </div>
-          <div class="mt-1 font-mono text-sm tabular-nums text-(--fg)">
+          <div class="mt-1 font-mono text-sm tabular-nums text-fg">
             {{ elapsed }}
           </div>
         </div>
@@ -86,31 +86,31 @@ const rates = [0.5, 1, 2] as const;
 
       <div class="grid grid-cols-3 gap-2">
         <button
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          class="demo-btn-primary"
           @click="play"
         >
           Play
         </button>
         <button
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="pause"
         >
           Pause
         </button>
         <button
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="reverse"
         >
           Reverse
         </button>
         <button
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="finish"
         >
           Finish
         </button>
         <button
-          class="col-span-2 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn col-span-2"
           @click="cancel"
         >
           Cancel
@@ -118,7 +118,7 @@ const rates = [0.5, 1, 2] as const;
       </div>
 
       <div class="flex flex-col gap-2">
-        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <div class="demo-label">
           Playback rate
         </div>
         <div class="flex gap-2">
@@ -127,8 +127,8 @@ const rates = [0.5, 1, 2] as const;
             :key="rate"
             class="flex-1 rounded-lg border px-3 py-1.5 text-sm font-medium tabular-nums transition active:scale-[0.98] cursor-pointer"
             :class="playbackRate === rate
-              ? 'border-transparent bg-(--accent) text-(--accent-fg)'
-              : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+              ? 'border-transparent bg-accent text-accent-fg'
+              : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
             @click="playbackRate = rate"
           >
             {{ rate }}×
diff --git a/vue/toolkit/src/composables/animation/useCountdown/demo.vue b/vue/toolkit/src/composables/animation/useCountdown/demo.vue
index 652bc45..e2b0bff 100644
--- a/vue/toolkit/src/composables/animation/useCountdown/demo.vue
+++ b/vue/toolkit/src/composables/animation/useCountdown/demo.vue
@@ -37,9 +37,9 @@ function toggle() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5 text-center">
-      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-5 text-center">
+      <div class="demo-label">
         Time remaining
       </div>
       <div
@@ -48,22 +48,22 @@ function toggle() {
           ? 'text-emerald-600 dark:text-emerald-400'
           : remaining <= 10 && remaining > 0
             ? 'text-amber-600 dark:text-amber-400'
-            : 'text-(--fg)'"
+            : 'text-fg'"
       >
         {{ minutes }}:{{ seconds }}
       </div>
 
-      <div class="mt-4 h-1.5 w-full overflow-hidden rounded-full bg-(--bg-inset)">
+      <div class="mt-4 h-1.5 w-full overflow-hidden rounded-full bg-bg-inset">
         <div
-          class="h-full rounded-full bg-(--accent) transition-[width] duration-300 ease-linear"
+          class="h-full rounded-full bg-accent transition-[width] duration-300 ease-linear"
           :style="{ width: `${progress * 100}%` }"
         />
       </div>
 
-      <div class="mt-3 flex items-center justify-center gap-2 text-xs text-(--fg-subtle)">
+      <div class="mt-3 flex items-center justify-center gap-2 text-xs text-fg-subtle">
         <span
           class="inline-block size-2 rounded-full transition"
-          :class="isActive ? 'bg-emerald-500' : justFinished ? 'bg-sky-500' : 'bg-(--border-strong)'"
+          :class="isActive ? 'bg-emerald-500' : justFinished ? 'bg-sky-500' : 'bg-border-strong'"
         />
         {{ justFinished ? 'Completed' : isActive ? 'Counting down' : 'Paused' }}
       </div>
@@ -73,7 +73,7 @@ function toggle() {
       <button
         v-for="preset in presets"
         :key="preset"
-        class="rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium tabular-nums text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="rounded-lg border border-border bg-bg-elevated px-3 py-1.5 text-sm font-medium tabular-nums text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.98] cursor-pointer"
         @click="setPreset(preset)"
       >
         {{ preset < 60 ? `${preset}s` : `${preset / 60}m` }}
@@ -82,20 +82,20 @@ function toggle() {
 
     <div class="flex items-center gap-2">
       <button
-        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="remaining === 0 && isActive"
         @click="toggle"
       >
         {{ isActive ? 'Pause' : 'Resume' }}
       </button>
       <button
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="start()"
       >
         Restart
       </button>
       <button
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="stop"
       >
         Stop
diff --git a/vue/toolkit/src/composables/animation/useDateFormat/demo.vue b/vue/toolkit/src/composables/animation/useDateFormat/demo.vue
index 54a5dcd..9d4ea5d 100644
--- a/vue/toolkit/src/composables/animation/useDateFormat/demo.vue
+++ b/vue/toolkit/src/composables/animation/useDateFormat/demo.vue
@@ -27,46 +27,46 @@ const isValid = computed(() => formatted.value !== 'Invalid Date');
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+  <div class="demo-stack max-w-md">
+    <div class="demo-card p-4">
+      <div class="demo-label">
         Formatted output
       </div>
       <div
         class="mt-2 font-mono text-lg font-semibold tabular-nums"
-        :class="isValid ? 'text-(--fg)' : 'text-red-600 dark:text-red-400'"
+        :class="isValid ? 'text-fg' : 'text-red-600 dark:text-red-400'"
       >
         {{ formatted }}
       </div>
     </div>
 
     <div class="flex flex-col gap-1.5">
-      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <label class="demo-label">
         Date input
       </label>
       <input
         v-model="date"
         type="datetime-local"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
       >
     </div>
 
     <div class="flex flex-col gap-1.5">
-      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <label class="demo-label">
         Format token string
       </label>
       <input
         v-model="format"
         type="text"
         spellcheck="false"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 font-mono text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input font-mono"
       >
       <div class="flex flex-wrap gap-1.5 pt-1">
         <button
           v-for="f in formats"
           :key="f"
-          class="rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 font-mono text-xs text-(--fg-muted) transition hover:bg-(--bg-elevated) hover:text-(--fg) active:scale-[0.98] cursor-pointer"
-          :class="{ 'border-(--accent) text-(--accent-text)': format === f }"
+          class="rounded-md border border-border bg-bg-inset px-2 py-0.5 font-mono text-xs text-fg-muted transition hover:bg-bg-elevated hover:text-fg active:scale-[0.98] cursor-pointer"
+          :class="{ 'border-accent text-accent-text': format === f }"
           @click="format = f"
         >
           {{ f }}
@@ -75,7 +75,7 @@ const isValid = computed(() => formatted.value !== 'Invalid Date');
     </div>
 
     <div class="flex flex-col gap-1.5">
-      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <label class="demo-label">
         Locale
       </label>
       <div class="flex flex-wrap gap-2">
@@ -84,8 +84,8 @@ const isValid = computed(() => formatted.value !== 'Invalid Date');
           :key="loc.value"
           class="rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
           :class="locale === loc.value
-            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
-            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            ? 'border-transparent bg-accent text-accent-fg'
+            : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
           @click="locale = loc.value"
         >
           {{ loc.label }}
diff --git a/vue/toolkit/src/composables/animation/useDateFormat/index.ts b/vue/toolkit/src/composables/animation/useDateFormat/index.ts
index bd8938b..ded979f 100644
--- a/vue/toolkit/src/composables/animation/useDateFormat/index.ts
+++ b/vue/toolkit/src/composables/animation/useDateFormat/index.ts
@@ -52,6 +52,7 @@ const REGEX_FORMAT
 // `20240101`); JS lacks possessive quantifiers to disambiguate it.
 // eslint-disable-next-line regexp/no-misleading-capturing-group
 const REGEX_PARSE = /* #__PURE__ */ /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[T\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/i;
+const REGEX_ISO_SUFFIX = /* #__PURE__ */ /z$/i;
 
 const ORDINAL_SUFFIXES = ['th', 'st', 'nd', 'rd'] as const;
 
@@ -82,7 +83,7 @@ function formatOrdinal(num: number): string {
 export function normalizeDate(date: DateLike): Date {
   if (date === null || date === undefined) return new Date();
   if (isDate(date)) return new Date(date.getTime());
-  if (isString(date) && !/z$/i.test(date)) {
+  if (isString(date) && !REGEX_ISO_SUFFIX.test(date)) {
     const d = REGEX_PARSE.exec(date);
     if (d) {
       const month = d[2] ? Number(d[2]) - 1 : 0;
diff --git a/vue/toolkit/src/composables/animation/useInterval/demo.vue b/vue/toolkit/src/composables/animation/useInterval/demo.vue
index a28d92a..f826642 100644
--- a/vue/toolkit/src/composables/animation/useInterval/demo.vue
+++ b/vue/toolkit/src/composables/animation/useInterval/demo.vue
@@ -27,12 +27,12 @@ function toggle() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5 text-center">
-      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-5 text-center">
+      <div class="demo-label">
         Ticks elapsed
       </div>
-      <div class="mt-2 font-mono text-5xl font-bold tabular-nums text-(--fg)">
+      <div class="demo-stat mt-2 text-5xl">
         {{ counter }}
       </div>
 
@@ -41,21 +41,21 @@ function toggle() {
           v-for="(on, i) in beats"
           :key="i"
           class="size-2.5 rounded-full transition-colors duration-200"
-          :class="on ? 'bg-(--accent)' : 'bg-(--bg-inset)'"
+          :class="on ? 'bg-accent' : 'bg-bg-inset'"
         />
       </div>
 
-      <div class="mt-4 flex items-center justify-center gap-2 text-xs text-(--fg-subtle)">
+      <div class="mt-4 flex items-center justify-center gap-2 text-xs text-fg-subtle">
         <span
           class="inline-block size-2 rounded-full transition"
-          :class="isActive ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+          :class="isActive ? 'bg-emerald-500' : 'bg-border-strong'"
         />
         {{ isActive ? `Ticking every ${interval}ms` : 'Paused' }}
       </div>
     </div>
 
     <div class="flex flex-col gap-1.5">
-      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <div class="demo-label">
         Interval speed
       </div>
       <div class="flex gap-2">
@@ -64,8 +64,8 @@ function toggle() {
           :key="speed.value"
           class="flex-1 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
           :class="interval === speed.value
-            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
-            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            ? 'border-transparent bg-accent text-accent-fg'
+            : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
           @click="interval = speed.value"
         >
           {{ speed.label }}
@@ -75,13 +75,13 @@ function toggle() {
 
     <div class="flex items-center gap-2">
       <button
-        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary flex-1"
         @click="toggle"
       >
         {{ isActive ? 'Pause' : 'Resume' }}
       </button>
       <button
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="counter === 0"
         @click="reset"
       >
diff --git a/vue/toolkit/src/composables/animation/useIntervalFn/demo.vue b/vue/toolkit/src/composables/animation/useIntervalFn/demo.vue
index bee5607..57580af 100644
--- a/vue/toolkit/src/composables/animation/useIntervalFn/demo.vue
+++ b/vue/toolkit/src/composables/animation/useIntervalFn/demo.vue
@@ -31,22 +31,22 @@ function clear() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="flex items-center justify-between rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card flex items-center justify-between p-4">
       <div>
-        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <div class="demo-label">
           Interval callback
         </div>
-        <div class="mt-1 flex items-center gap-2 text-sm text-(--fg-muted)">
+        <div class="mt-1 flex items-center gap-2 text-sm text-fg-muted">
           <span
             class="inline-block size-2 rounded-full transition"
-            :class="isActive ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+            :class="isActive ? 'bg-emerald-500' : 'bg-border-strong'"
           />
           {{ isActive ? `Firing every ${interval}ms` : 'Stopped' }}
         </div>
       </div>
       <button
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary"
         @click="toggle"
       >
         {{ isActive ? 'Pause' : 'Start' }}
@@ -54,7 +54,7 @@ function clear() {
     </div>
 
     <div class="flex flex-col gap-1.5">
-      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <div class="demo-label">
         Interval
       </div>
       <div class="flex gap-2">
@@ -63,24 +63,24 @@ function clear() {
           :key="speed.value"
           class="flex-1 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
           :class="interval === speed.value
-            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
-            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            ? 'border-transparent bg-accent text-accent-fg'
+            : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
           @click="interval = speed.value"
         >
           {{ speed.label }}
         </button>
       </div>
-      <p class="text-xs text-(--fg-subtle)">
+      <p class="text-xs text-fg-subtle">
         Changing the interval while running restarts the timer with the new duration.
       </p>
     </div>
 
     <div class="flex items-center justify-between">
-      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <div class="demo-label">
         Tick log
       </div>
       <button
-        class="text-xs text-(--accent-text) transition hover:underline disabled:cursor-not-allowed disabled:opacity-40 cursor-pointer"
+        class="text-xs text-accent-text transition hover:underline disabled:cursor-not-allowed disabled:opacity-40 cursor-pointer"
         :disabled="logs.length === 0"
         @click="clear"
       >
@@ -88,17 +88,17 @@ function clear() {
       </button>
     </div>
 
-    <div class="min-h-32 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-      <p v-if="logs.length === 0" class="py-6 text-center text-sm text-(--fg-subtle)">
+    <div class="min-h-32 rounded-lg border border-border bg-bg-inset p-3">
+      <p v-if="logs.length === 0" class="py-6 text-center text-sm text-fg-subtle">
         No ticks yet — press Start.
       </p>
       <ul v-else class="flex flex-col gap-1.5">
         <li
           v-for="log in logs"
           :key="log.id"
-          class="flex items-center gap-2 font-mono text-sm tabular-nums text-(--fg)"
+          class="flex items-center gap-2 font-mono text-sm tabular-nums text-fg"
         >
-          <span class="inline-block size-1.5 rounded-full bg-(--accent)" />
+          <span class="inline-block size-1.5 rounded-full bg-accent" />
           {{ log.time }}
         </li>
       </ul>
@@ -106,14 +106,14 @@ function clear() {
 
     <div class="flex items-center gap-2">
       <button
-        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="isActive"
         @click="resume"
       >
         Resume
       </button>
       <button
-        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="!isActive"
         @click="pause"
       >
diff --git a/vue/toolkit/src/composables/animation/useNow/demo.vue b/vue/toolkit/src/composables/animation/useNow/demo.vue
index d4ec1ba..e16cfed 100644
--- a/vue/toolkit/src/composables/animation/useNow/demo.vue
+++ b/vue/toolkit/src/composables/animation/useNow/demo.vue
@@ -20,23 +20,23 @@ const secondAngle = computed(() => {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-3">
-      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Reactive now</div>
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col items-center gap-3">
+      <div class="demo-label">Reactive now</div>
 
       <div class="flex items-baseline gap-1">
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ time }}</span>
-        <span class="font-mono text-lg font-semibold tabular-nums text-(--fg-subtle)">.{{ millis }}</span>
+        <span class="demo-stat text-3xl">{{ time }}</span>
+        <span class="font-mono text-lg font-semibold tabular-nums text-fg-subtle">.{{ millis }}</span>
       </div>
 
-      <div class="text-sm text-(--fg-muted)">{{ date }}</div>
+      <div class="text-sm text-fg-muted">{{ date }}</div>
 
-      <div class="relative mt-1 size-24 rounded-full border-2 border-(--border-strong) bg-(--bg-inset)">
+      <div class="relative mt-1 size-24 rounded-full border-2 border-border-strong bg-bg-inset">
         <div class="absolute inset-0 flex items-center justify-center">
-          <div class="size-1.5 rounded-full bg-(--accent)" />
+          <div class="size-1.5 rounded-full bg-accent" />
         </div>
         <div
-          class="absolute bottom-1/2 left-1/2 h-9 w-0.5 origin-bottom rounded-full bg-(--accent)"
+          class="absolute bottom-1/2 left-1/2 h-9 w-0.5 origin-bottom rounded-full bg-accent"
           :style="{ transform: `translateX(-50%) rotate(${secondAngle}deg)` }"
         />
       </div>
@@ -44,11 +44,11 @@ const secondAngle = computed(() => {
 
     <div class="flex items-center justify-between gap-3">
       <span
-        class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+        class="demo-badge"
       >
         <span
           class="size-1.5 rounded-full transition"
-          :class="isActive ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+          :class="isActive ? 'bg-emerald-500' : 'bg-fg-subtle'"
         />
         {{ isActive ? 'Ticking (RAF)' : 'Paused' }}
       </span>
@@ -56,7 +56,7 @@ const secondAngle = computed(() => {
       <div class="flex items-center gap-2">
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="toggle"
         >
           {{ isActive ? 'Pause' : 'Resume' }}
@@ -64,7 +64,7 @@ const secondAngle = computed(() => {
         <button
           type="button"
           :disabled="isActive"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           @click="resume"
         >
           Resume
@@ -72,7 +72,7 @@ const secondAngle = computed(() => {
         <button
           type="button"
           :disabled="!isActive"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           @click="pause"
         >
           Pause
diff --git a/vue/toolkit/src/composables/animation/useRafFn/demo.vue b/vue/toolkit/src/composables/animation/useRafFn/demo.vue
index ca754a0..91f02c2 100644
--- a/vue/toolkit/src/composables/animation/useRafFn/demo.vue
+++ b/vue/toolkit/src/composables/animation/useRafFn/demo.vue
@@ -35,46 +35,46 @@ const limitLabel = computed(() => (fpsLimit.value === 0 ? 'Unlimited' : `${fpsLi
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-4">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">requestAnimationFrame</span>
+        <span class="demo-label">requestAnimationFrame</span>
         <span
-          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+          class="demo-badge"
         >
-          <span class="size-1.5 rounded-full transition" :class="isActive ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+          <span class="size-1.5 rounded-full transition" :class="isActive ? 'bg-emerald-500' : 'bg-fg-subtle'" />
           {{ isActive ? 'Running' : 'Paused' }}
         </span>
       </div>
 
       <!-- The animated track: marker position is updated every frame -->
-      <div class="relative mx-2.5 h-8 rounded-lg border border-(--border) bg-(--bg-inset)">
+      <div class="relative mx-2.5 h-8 rounded-lg border border-border bg-bg-inset">
         <div
-          class="absolute top-1/2 size-5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-(--accent) shadow"
+          class="absolute top-1/2 size-5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-accent shadow"
           :style="{ left: `${position}%` }"
         />
       </div>
 
       <div class="grid grid-cols-3 gap-2">
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
-          <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ fps }}</div>
-          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">fps</div>
+        <div class="rounded-lg border border-border bg-bg-inset p-2 text-center">
+          <div class="demo-stat text-lg">{{ fps }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-fg-subtle">fps</div>
         </div>
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
-          <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ delta.toFixed(1) }}</div>
-          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">delta ms</div>
+        <div class="rounded-lg border border-border bg-bg-inset p-2 text-center">
+          <div class="demo-stat text-lg">{{ delta.toFixed(1) }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-fg-subtle">delta ms</div>
         </div>
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
-          <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ frames }}</div>
-          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">frames</div>
+        <div class="rounded-lg border border-border bg-bg-inset p-2 text-center">
+          <div class="demo-stat text-lg">{{ frames }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-fg-subtle">frames</div>
         </div>
       </div>
     </div>
 
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="fps-limit">FPS limit</label>
-        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ limitLabel }}</span>
+        <label class="demo-label" for="fps-limit">FPS limit</label>
+        <span class="font-mono text-xs tabular-nums text-fg-muted">{{ limitLabel }}</span>
       </div>
       <input
         id="fps-limit"
@@ -83,14 +83,14 @@ const limitLabel = computed(() => (fpsLimit.value === 0 ? 'Unlimited' : `${fpsLi
         min="0"
         max="60"
         step="5"
-        class="w-full accent-(--accent) cursor-pointer"
+        class="w-full accent-accent cursor-pointer"
       >
-      <p class="text-xs text-(--fg-subtle)">Changing the limit takes effect on the next mount; toggle below to see it live.</p>
+      <p class="text-xs text-fg-subtle">Changing the limit takes effect on the next mount; toggle below to see it live.</p>
     </div>
 
     <button
       type="button"
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+      class="demo-btn-primary"
       @click="toggle"
     >
       {{ isActive ? 'Pause loop' : 'Resume loop' }}
diff --git a/vue/toolkit/src/composables/animation/useTimeAgo/demo.vue b/vue/toolkit/src/composables/animation/useTimeAgo/demo.vue
index 1d97257..b36c170 100644
--- a/vue/toolkit/src/composables/animation/useTimeAgo/demo.vue
+++ b/vue/toolkit/src/composables/animation/useTimeAgo/demo.vue
@@ -42,15 +42,15 @@ const absolute = computed(() =>
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-2">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Relative time</span>
-      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg) text-center">{{ timeAgo }}</span>
-      <span class="text-xs text-(--fg-muted)">{{ absolute }}</span>
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col items-center gap-2">
+      <span class="demo-label">Relative time</span>
+      <span class="demo-stat text-3xl text-center">{{ timeAgo }}</span>
+      <span class="text-xs text-fg-muted">{{ absolute }}</span>
     </div>
 
     <div class="flex flex-col gap-2">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Pick an instant</span>
+      <span class="demo-label">Pick an instant</span>
       <div class="grid grid-cols-2 gap-2">
         <button
           v-for="preset in presets"
@@ -58,8 +58,8 @@ const absolute = computed(() =>
           type="button"
           class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
           :class="offset === preset.offset
-            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
-            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            ? 'border-transparent bg-accent text-accent-fg hover:bg-accent-hover'
+            : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
           @click="offset = preset.offset"
         >
           {{ preset.label }}
@@ -69,14 +69,14 @@ const absolute = computed(() =>
 
     <div class="flex items-center justify-between gap-3">
       <span
-        class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+        class="demo-badge"
       >
-        <span class="size-1.5 rounded-full transition" :class="isActive ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+        <span class="size-1.5 rounded-full transition" :class="isActive ? 'bg-emerald-500' : 'bg-fg-subtle'" />
         {{ isActive ? 'Updating every 1s' : 'Updates paused' }}
       </span>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="toggle"
       >
         {{ isActive ? 'Pause' : 'Resume' }}
diff --git a/vue/toolkit/src/composables/animation/useTimeAgo/index.ts b/vue/toolkit/src/composables/animation/useTimeAgo/index.ts
index 7895210..2bce3f1 100644
--- a/vue/toolkit/src/composables/animation/useTimeAgo/index.ts
+++ b/vue/toolkit/src/composables/animation/useTimeAgo/index.ts
@@ -165,10 +165,12 @@ const DEFAULT_UNITS: Array<UseTimeAgoUnit<UseTimeAgoUnitName>> = [
   { max: Number.POSITIVE_INFINITY, value: 31536000000, name: 'year' },
 ];
 
+const REGEX_DIGIT = /* #__PURE__ */ /\d/;
+
 const DEFAULT_MESSAGES: UseTimeAgoMessages<UseTimeAgoUnitName> = {
   justNow: 'just now',
-  past: n => /\d/.test(n) ? `${n} ago` : n,
-  future: n => /\d/.test(n) ? `in ${n}` : n,
+  past: n => REGEX_DIGIT.test(n) ? `${n} ago` : n,
+  future: n => REGEX_DIGIT.test(n) ? `in ${n}` : n,
   month: (n, past) => n === 1 ? (past ? 'last month' : 'next month') : `${n} month${n > 1 ? 's' : ''}`,
   year: (n, past) => n === 1 ? (past ? 'last year' : 'next year') : `${n} year${n > 1 ? 's' : ''}`,
   day: (n, past) => n === 1 ? (past ? 'yesterday' : 'tomorrow') : `${n} day${n > 1 ? 's' : ''}`,
diff --git a/vue/toolkit/src/composables/animation/useTimeout/demo.vue b/vue/toolkit/src/composables/animation/useTimeout/demo.vue
index cc5be1c..6292e98 100644
--- a/vue/toolkit/src/composables/animation/useTimeout/demo.vue
+++ b/vue/toolkit/src/composables/animation/useTimeout/demo.vue
@@ -24,21 +24,21 @@ function cancel() {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-3">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Status</span>
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col items-center gap-3">
+      <span class="demo-label">Status</span>
 
       <div
         class="flex size-20 items-center justify-center rounded-full border-2 transition"
         :class="ready
           ? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-          : 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'"
+          : 'border-accent bg-accent-subtle text-accent-text'"
       >
         <span class="text-sm font-semibold">{{ ready ? 'Ready' : 'Pending' }}</span>
       </div>
 
-      <p class="text-center text-sm text-(--fg-muted)">
-        <template v-if="ready && firedAt">Fired at <span class="font-mono tabular-nums text-(--fg)">{{ firedAt }}</span></template>
+      <p class="text-center text-sm text-fg-muted">
+        <template v-if="ready && firedAt">Fired at <span class="font-mono tabular-nums text-fg">{{ firedAt }}</span></template>
         <template v-else-if="ready">Idle — start the timer below</template>
         <template v-else>Counting down… stays pending until the delay elapses</template>
       </p>
@@ -46,8 +46,8 @@ function cancel() {
 
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="delay">Delay</label>
-        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ (delay / 1000).toFixed(1) }}s</span>
+        <label class="demo-label" for="delay">Delay</label>
+        <span class="font-mono text-xs tabular-nums text-fg-muted">{{ (delay / 1000).toFixed(1) }}s</span>
       </div>
       <input
         id="delay"
@@ -56,14 +56,14 @@ function cancel() {
         min="500"
         max="5000"
         step="500"
-        class="w-full accent-(--accent) cursor-pointer"
+        class="w-full accent-accent cursor-pointer"
       >
     </div>
 
     <div class="flex items-center gap-2">
       <button
         type="button"
-        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary flex-1"
         @click="restart"
       >
         {{ ready ? 'Start' : 'Restart' }}
@@ -71,7 +71,7 @@ function cancel() {
       <button
         type="button"
         :disabled="ready"
-        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="cancel"
       >
         Cancel
diff --git a/vue/toolkit/src/composables/animation/useTimeoutFn/demo.vue b/vue/toolkit/src/composables/animation/useTimeoutFn/demo.vue
index a75029c..92a4621 100644
--- a/vue/toolkit/src/composables/animation/useTimeoutFn/demo.vue
+++ b/vue/toolkit/src/composables/animation/useTimeoutFn/demo.vue
@@ -42,23 +42,23 @@ function undo() {
 
 <template>
   <div class="w-full max-w-sm flex flex-col gap-3">
-    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Inbox · undo with grace period</span>
+    <span class="demo-label">Inbox · undo with grace period</span>
 
     <ul v-if="inbox.length" class="flex flex-col gap-2">
       <li
         v-for="mail in inbox"
         :key="mail.id"
-        class="flex items-center justify-between gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-3 transition"
+        class="demo-card flex items-center justify-between gap-3 p-3 transition"
         :class="{ 'opacity-40': pendingDelete?.id === mail.id }"
       >
         <div class="min-w-0">
-          <div class="truncate text-sm font-medium text-(--fg)">{{ mail.subject }}</div>
-          <div class="truncate text-xs text-(--fg-muted)">{{ mail.from }}</div>
+          <div class="truncate text-sm font-medium text-fg">{{ mail.subject }}</div>
+          <div class="truncate text-xs text-fg-muted">{{ mail.from }}</div>
         </div>
         <button
           type="button"
           :disabled="isPending"
-          class="shrink-0 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn shrink-0 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           @click="archive(mail)"
         >
           Archive
@@ -66,7 +66,7 @@ function undo() {
       </li>
     </ul>
 
-    <div v-else class="rounded-xl border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center text-sm text-(--fg-subtle)">
+    <div v-else class="rounded-xl border border-dashed border-border bg-bg-inset p-6 text-center text-sm text-fg-subtle">
       Inbox zero — everything archived.
     </div>
 
diff --git a/vue/toolkit/src/composables/animation/useTimeoutFn/index.ts b/vue/toolkit/src/composables/animation/useTimeoutFn/index.ts
index ab769f6..471a5bf 100644
--- a/vue/toolkit/src/composables/animation/useTimeoutFn/index.ts
+++ b/vue/toolkit/src/composables/animation/useTimeoutFn/index.ts
@@ -21,7 +21,7 @@ export interface UseTimeoutFnOptions {
   immediateCallback?: boolean;
 }
 
-export interface UseTimeoutFnReturn<Args extends any[]> {
+export interface UseTimeoutFnReturn<Args extends unknown[]> {
   /**
    * Whether the timeout is currently pending
    */
diff --git a/vue/toolkit/src/composables/animation/useTimestamp/demo.vue b/vue/toolkit/src/composables/animation/useTimestamp/demo.vue
index 826edea..12a8dab 100644
--- a/vue/toolkit/src/composables/animation/useTimestamp/demo.vue
+++ b/vue/toolkit/src/composables/animation/useTimestamp/demo.vue
@@ -45,33 +45,33 @@ function resetOffset() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 text-center">
-      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 text-center">
+      <div class="demo-label">
         Reactive timestamp
       </div>
-      <div class="mt-2 font-mono text-3xl font-bold tabular-nums text-(--fg)">
+      <div class="demo-stat mt-2 text-3xl">
         {{ clockTime }}
       </div>
-      <div class="mt-1 text-sm text-(--fg-muted)">
+      <div class="mt-1 text-sm text-fg-muted">
         {{ clockDate }}
       </div>
-      <div class="mt-3 flex items-center justify-center gap-2 text-xs text-(--fg-subtle)">
+      <div class="mt-3 flex items-center justify-center gap-2 text-xs text-fg-subtle">
         <span
           class="inline-block size-2 rounded-full transition"
-          :class="isActive ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+          :class="isActive ? 'bg-emerald-500' : 'bg-border-strong'"
         />
         {{ isActive ? 'Updating every second' : 'Paused' }}
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
       {{ Math.round(timestamp) }} ms
     </div>
 
     <div class="flex items-center justify-between gap-2">
       <button
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary"
         @click="toggle"
       >
         {{ isActive ? 'Pause' : 'Resume' }}
@@ -79,13 +79,13 @@ function resetOffset() {
 
       <div class="flex items-center gap-2">
         <button
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="shift(-3600_000)"
         >
           -1h
         </button>
         <button
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="shift(3600_000)"
         >
           +1h
@@ -93,13 +93,13 @@ function resetOffset() {
       </div>
     </div>
 
-    <div class="flex items-center justify-between text-sm text-(--fg-muted)">
+    <div class="flex items-center justify-between text-sm text-fg-muted">
       <span>
         Offset:
-        <span class="font-mono text-(--fg) tabular-nums">{{ (offset / 3600_000).toFixed(0) }}h</span>
+        <span class="font-mono text-fg tabular-nums">{{ (offset / 3600_000).toFixed(0) }}h</span>
       </span>
       <button
-        class="text-(--accent-text) transition hover:underline disabled:cursor-not-allowed disabled:opacity-40 cursor-pointer"
+        class="text-accent-text transition hover:underline disabled:cursor-not-allowed disabled:opacity-40 cursor-pointer"
         :disabled="offset === 0"
         @click="resetOffset"
       >
diff --git a/vue/toolkit/src/composables/animation/useTransition/demo.vue b/vue/toolkit/src/composables/animation/useTransition/demo.vue
index a94bcf9..58f9b0b 100644
--- a/vue/toolkit/src/composables/animation/useTransition/demo.vue
+++ b/vue/toolkit/src/composables/animation/useTransition/demo.vue
@@ -40,19 +40,19 @@ function randomize() {
 
 <template>
   <div class="flex w-full max-w-md flex-col gap-5">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+    <div class="demo-card p-4">
       <div class="flex items-baseline justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <span class="demo-label">
           Eased value
         </span>
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+        <span class="demo-stat text-3xl">
           {{ value.toFixed(1) }}
         </span>
       </div>
 
-      <div class="mt-3 h-2.5 w-full overflow-hidden rounded-full bg-(--bg-inset)">
+      <div class="mt-3 h-2.5 w-full overflow-hidden rounded-full bg-bg-inset">
         <div
-          class="h-full rounded-full bg-(--accent)"
+          class="h-full rounded-full bg-accent"
           :style="{ width: `${Math.max(0, Math.min(100, value))}%` }"
         />
       </div>
@@ -63,10 +63,10 @@ function randomize() {
           type="range"
           min="0"
           max="100"
-          class="h-1.5 flex-1 cursor-pointer accent-(--accent)"
+          class="h-1.5 flex-1 cursor-pointer accent-accent"
         >
         <button
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="randomize"
         >
           Random
@@ -75,21 +75,21 @@ function randomize() {
     </div>
 
     <div class="flex flex-col gap-2">
-      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <label class="demo-label">
         Easing preset
       </label>
       <select
         v-model="preset"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="w-full rounded-lg border border-border bg-bg px-3 py-2 text-sm text-fg transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring"
       >
         <option v-for="name in presetNames" :key="name" :value="name">
           {{ name }}
         </option>
       </select>
 
-      <label class="mt-1 flex items-center justify-between text-sm text-(--fg-muted)">
+      <label class="mt-1 flex items-center justify-between text-sm text-fg-muted">
         <span>Duration</span>
-        <span class="font-mono text-(--fg) tabular-nums">{{ duration }}ms</span>
+        <span class="font-mono text-fg tabular-nums">{{ duration }}ms</span>
       </label>
       <input
         v-model.number="duration"
@@ -97,21 +97,21 @@ function randomize() {
         min="100"
         max="2000"
         step="100"
-        class="h-1.5 w-full cursor-pointer accent-(--accent)"
+        class="h-1.5 w-full cursor-pointer accent-accent"
       >
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+    <div class="demo-card p-4">
       <div class="flex items-center gap-3">
         <div
-          class="size-12 shrink-0 rounded-lg border border-(--border)"
+          class="size-12 shrink-0 rounded-lg border border-border"
           :style="{ backgroundColor: colorCss }"
         />
         <div class="min-w-0">
-          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          <div class="demo-label">
             Animated tuple
           </div>
-          <div class="font-mono text-sm text-(--fg) tabular-nums">
+          <div class="font-mono text-sm text-fg tabular-nums">
             {{ colorCss }}
           </div>
         </div>
@@ -121,7 +121,7 @@ function randomize() {
         <button
           v-for="[label, rgb] in swatches"
           :key="label"
-          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) transition hover:border-(--border-strong) cursor-pointer"
+          class="demo-badge transition hover:border-border-strong cursor-pointer"
           @click="colorTarget = [...rgb]"
         >
           <span class="size-2.5 rounded-full" :style="{ backgroundColor: `rgb(${rgb.join(',')})` }" />
diff --git a/vue/toolkit/src/composables/animation/useTransition/index.ts b/vue/toolkit/src/composables/animation/useTransition/index.ts
index 23f6b48..c551c41 100644
--- a/vue/toolkit/src/composables/animation/useTransition/index.ts
+++ b/vue/toolkit/src/composables/animation/useTransition/index.ts
@@ -4,6 +4,7 @@ import { clamp, isFunction, isNumber, lerp, noop } from '@robonen/stdlib';
 import { defaultWindow } from '@/types';
 import type { ConfigurableWindow } from '@/types';
 import { useRafFn } from '@/composables/animation/useRafFn';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
 
 /**
  * Cubic bezier control points `[x1, y1, x2, y2]` (the implied endpoints are
@@ -356,5 +357,10 @@ export function useTransition<T extends TransitionValue>(
     },
   );
 
+  // The RAF loop is torn down by useRafFn on scope dispose, but a pending start
+  // delay (window.setTimeout) is not — clear it so the timer can't fire into a
+  // disposed scope.
+  tryOnScopeDispose(clearDelay);
+
   return computed(() => outputRef.value);
 }
diff --git a/vue/toolkit/src/composables/array/useArrayDifference/demo.vue b/vue/toolkit/src/composables/array/useArrayDifference/demo.vue
index ca2d492..bd55348 100644
--- a/vue/toolkit/src/composables/array/useArrayDifference/demo.vue
+++ b/vue/toolkit/src/composables/array/useArrayDifference/demo.vue
@@ -40,16 +40,16 @@ function toggle(track: Track) {
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Library — tap to add / remove from playlist
       </span>
-      <label class="inline-flex cursor-pointer items-center gap-2 text-sm text-(--fg-muted)">
+      <label class="inline-flex cursor-pointer items-center gap-2 text-sm text-fg-muted">
         <input
           v-model="symmetric"
           type="checkbox"
-          class="size-4 cursor-pointer accent-(--accent)"
+          class="size-4 cursor-pointer accent-accent"
         >
         Symmetric
       </label>
@@ -61,8 +61,8 @@ function toggle(track: Track) {
         :key="track.id"
         class="inline-flex items-center justify-between gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
         :class="inPlaylist(track)
-          ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
-          : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          ? 'border-transparent bg-accent text-accent-fg hover:bg-accent-hover'
+          : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
         @click="toggle(track)"
       >
         <span class="truncate">{{ track.title }}</span>
@@ -70,12 +70,12 @@ function toggle(track: Track) {
       </button>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+    <div class="demo-card p-4">
       <div class="flex items-baseline justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <span class="demo-label">
           {{ symmetric ? 'In exactly one (XOR)' : 'Not in playlist' }}
         </span>
-        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">
+        <span class="font-mono text-sm tabular-nums text-fg-muted">
           {{ diff.length }}
         </span>
       </div>
@@ -84,12 +84,12 @@ function toggle(track: Track) {
         <li
           v-for="track in diff"
           :key="track.id"
-          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+          class="demo-badge"
         >
           {{ track.title }}
         </li>
       </ul>
-      <p v-else class="mt-3 text-sm text-(--fg-subtle)">
+      <p v-else class="mt-3 text-sm text-fg-subtle">
         No difference — every track matches.
       </p>
     </div>
diff --git a/vue/toolkit/src/composables/array/useArrayDifference/index.ts b/vue/toolkit/src/composables/array/useArrayDifference/index.ts
index 96394b9..b79cca4 100644
--- a/vue/toolkit/src/composables/array/useArrayDifference/index.ts
+++ b/vue/toolkit/src/composables/array/useArrayDifference/index.ts
@@ -1,6 +1,6 @@
 import { computed, toValue } from 'vue';
 import type { ComputedRef, MaybeRefOrGetter } from 'vue';
-import { isObject, isString } from '@robonen/stdlib';
+import { isFunction, isNumber, isObject, isString, isSymbol } from '@robonen/stdlib';
 
 /**
  * Comparator deciding whether two array elements are considered equal.
@@ -24,7 +24,7 @@ export interface UseArrayDifferenceOptions<T> {
   comparator?: UseArrayDifferenceComparatorFn<T> | keyof T;
 }
 
-export type UseArrayDifferenceReturn<T = any>
+export type UseArrayDifferenceReturn<T = unknown>
   = ComputedRef<T[]>;
 
 function isArrayDifferenceOptions<T>(value: unknown): value is UseArrayDifferenceOptions<T> {
@@ -101,11 +101,11 @@ export function useArrayDifference<T>(
   // Resolve the comparator once instead of rebuilding it on every recompute.
   let compare: UseArrayDifferenceComparatorFn<T>;
 
-  if (isString(resolved) || typeof resolved === 'symbol' || typeof resolved === 'number') {
+  if (isString(resolved) || isSymbol(resolved) || isNumber(resolved)) {
     const key = resolved as keyof T;
     compare = (value, othVal) => value[key] === othVal[key];
   }
-  else if (typeof resolved === 'function') {
+  else if (isFunction(resolved)) {
     compare = resolved;
   }
   else {
diff --git a/vue/toolkit/src/composables/array/useArrayEvery/demo.vue b/vue/toolkit/src/composables/array/useArrayEvery/demo.vue
index 5c44e50..3f5463d 100644
--- a/vue/toolkit/src/composables/array/useArrayEvery/demo.vue
+++ b/vue/toolkit/src/composables/array/useArrayEvery/demo.vue
@@ -30,22 +30,22 @@ function reset() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       class="rounded-xl border p-4 transition"
       :class="allDone
         ? 'border-emerald-500/30 bg-emerald-500/10'
-        : 'border-(--border) bg-(--bg-elevated)'"
+        : 'border-border bg-bg-elevated'"
     >
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <span class="demo-label">
           Release readiness
         </span>
         <span
           class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
           :class="allDone
             ? 'border-emerald-500/30 text-emerald-600 dark:text-emerald-400'
-            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+            : 'border-border bg-bg-inset text-fg-muted'"
         >
           <span
             class="size-2 rounded-full"
@@ -54,7 +54,7 @@ function reset() {
           {{ allDone ? 'Ready to ship' : 'Blocked' }}
         </span>
       </div>
-      <div class="mt-2 font-mono text-sm tabular-nums text-(--fg-muted)">
+      <div class="mt-2 font-mono text-sm tabular-nums text-fg-muted">
         {{ completed }} / {{ checklist.length }} complete
       </div>
     </div>
@@ -62,18 +62,18 @@ function reset() {
     <ul class="flex flex-col gap-2">
       <li v-for="item in checklist" :key="item.id">
         <button
-          class="flex w-full items-center gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2 text-left text-sm text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.99] cursor-pointer"
+          class="flex w-full items-center gap-3 rounded-lg border border-border bg-bg-elevated px-3 py-2 text-left text-sm text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.99] cursor-pointer"
           @click="toggle(item)"
         >
           <span
             class="flex size-5 shrink-0 items-center justify-center rounded-md border text-xs transition"
             :class="item.done
-              ? 'border-transparent bg-(--accent) text-(--accent-fg)'
-              : 'border-(--border-strong) text-transparent'"
+              ? 'border-transparent bg-accent text-accent-fg'
+              : 'border-border-strong text-transparent'"
           >
             ✓
           </span>
-          <span :class="item.done ? 'line-through text-(--fg-subtle)' : ''">
+          <span :class="item.done ? 'line-through text-fg-subtle' : ''">
             {{ item.label }}
           </span>
         </button>
@@ -81,7 +81,7 @@ function reset() {
     </ul>
 
     <button
-      class="inline-flex items-center justify-center gap-1.5 self-start rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      class="demo-btn self-start"
       @click="reset"
     >
       Reset
diff --git a/vue/toolkit/src/composables/array/useArrayFilter/demo.vue b/vue/toolkit/src/composables/array/useArrayFilter/demo.vue
index 32080ea..62f6a37 100644
--- a/vue/toolkit/src/composables/array/useArrayFilter/demo.vue
+++ b/vue/toolkit/src/composables/array/useArrayFilter/demo.vue
@@ -35,18 +35,18 @@ const formatted = computed(() =>
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <input
       v-model="query"
       type="text"
       placeholder="Search products…"
-      class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      class="demo-input"
     >
 
-    <div class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <label class="flex items-center justify-between text-sm text-(--fg-muted)">
+    <div class="demo-card flex flex-col gap-3 p-4">
+      <label class="flex items-center justify-between text-sm text-fg-muted">
         <span>Max price</span>
-        <span class="font-mono text-(--fg) tabular-nums">${{ maxPrice }}</span>
+        <span class="font-mono text-fg tabular-nums">${{ maxPrice }}</span>
       </label>
       <input
         v-model.number="maxPrice"
@@ -54,21 +54,21 @@ const formatted = computed(() =>
         min="25"
         max="400"
         step="5"
-        class="h-1.5 w-full cursor-pointer accent-(--accent)"
+        class="h-1.5 w-full cursor-pointer accent-accent"
       >
-      <label class="inline-flex cursor-pointer items-center gap-2 text-sm text-(--fg-muted)">
+      <label class="inline-flex cursor-pointer items-center gap-2 text-sm text-fg-muted">
         <input
           v-model="inStockOnly"
           type="checkbox"
-          class="size-4 cursor-pointer accent-(--accent)"
+          class="size-4 cursor-pointer accent-accent"
         >
         In stock only
       </label>
     </div>
 
     <div class="flex items-center justify-between text-xs">
-      <span class="font-medium uppercase tracking-wide text-(--fg-subtle)">Results</span>
-      <span class="font-mono tabular-nums text-(--fg-muted)">
+      <span class="font-medium uppercase tracking-wide text-fg-subtle">Results</span>
+      <span class="font-mono tabular-nums text-fg-muted">
         {{ formatted.length }} / {{ products.length }}
       </span>
     </div>
@@ -77,10 +77,10 @@ const formatted = computed(() =>
       <li
         v-for="product in formatted"
         :key="product.name"
-        class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2"
+        class="flex items-center justify-between gap-3 rounded-lg border border-border bg-bg-elevated px-3 py-2"
       >
         <div class="flex items-center gap-2">
-          <span class="text-sm font-medium text-(--fg)">{{ product.name }}</span>
+          <span class="text-sm font-medium text-fg">{{ product.name }}</span>
           <span
             v-if="!product.inStock"
             class="inline-flex items-center rounded-md border border-amber-500/30 bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium uppercase text-amber-600 dark:text-amber-400"
@@ -88,12 +88,12 @@ const formatted = computed(() =>
             Out
           </span>
         </div>
-        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ product.priceLabel }}</span>
+        <span class="font-mono text-sm tabular-nums text-fg-muted">{{ product.priceLabel }}</span>
       </li>
     </ul>
     <div
       v-else
-      class="rounded-lg border border-dashed border-(--border) bg-(--bg-inset) px-3 py-6 text-center text-sm text-(--fg-subtle)"
+      class="rounded-lg border border-dashed border-border bg-bg-inset px-3 py-6 text-center text-sm text-fg-subtle"
     >
       No products match your filters.
     </div>
diff --git a/vue/toolkit/src/composables/array/useArrayFind/demo.vue b/vue/toolkit/src/composables/array/useArrayFind/demo.vue
index aa60657..6329e38 100644
--- a/vue/toolkit/src/composables/array/useArrayFind/demo.vue
+++ b/vue/toolkit/src/composables/array/useArrayFind/demo.vue
@@ -35,13 +35,13 @@ const matchIndex = computed(() =>
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="space-y-3">
       <div class="flex items-center justify-between">
-        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="maxPrice">
+        <label class="demo-label" for="maxPrice">
           Max price
         </label>
-        <span class="font-mono text-sm tabular-nums text-(--fg)">${{ maxPrice }}</span>
+        <span class="font-mono text-sm tabular-nums text-fg">${{ maxPrice }}</span>
       </div>
       <input
         id="maxPrice"
@@ -50,28 +50,28 @@ const matchIndex = computed(() =>
         min="20"
         max="400"
         step="5"
-        class="w-full accent-(--accent)"
+        class="w-full accent-accent"
       >
-      <label class="flex cursor-pointer items-center gap-2 text-sm text-(--fg-muted)">
-        <input v-model="inStockOnly" type="checkbox" class="accent-(--accent)">
+      <label class="flex cursor-pointer items-center gap-2 text-sm text-fg-muted">
+        <input v-model="inStockOnly" type="checkbox" class="accent-accent">
         In stock only
       </label>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-      <p class="mb-1 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+    <div class="rounded-lg border border-border bg-bg-inset p-3">
+      <p class="demo-label mb-1">
         First match
       </p>
       <template v-if="firstMatch">
         <div class="flex items-baseline justify-between">
-          <span class="text-sm font-medium text-(--fg)">{{ firstMatch.name }}</span>
-          <span class="font-mono text-sm tabular-nums text-(--fg)">${{ firstMatch.price }}</span>
+          <span class="text-sm font-medium text-fg">{{ firstMatch.name }}</span>
+          <span class="font-mono text-sm tabular-nums text-fg">${{ firstMatch.price }}</span>
         </div>
-        <p class="mt-1 font-mono text-xs text-(--fg-subtle)">
+        <p class="mt-1 font-mono text-xs text-fg-subtle">
           index {{ matchIndex }} · id {{ firstMatch.id }}
         </p>
       </template>
-      <p v-else class="text-sm text-(--fg-subtle)">
+      <p v-else class="text-sm text-fg-subtle">
         No product matches the filters
       </p>
     </div>
@@ -82,8 +82,8 @@ const matchIndex = computed(() =>
         :key="product.id"
         class="flex items-center justify-between rounded-lg border px-3 py-2 text-sm transition"
         :class="product.id === firstMatch?.id
-          ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
-          : 'border-(--border) bg-(--bg-elevated) text-(--fg-muted)'"
+          ? 'border-accent bg-accent-subtle text-accent-text'
+          : 'border-border bg-bg-elevated text-fg-muted'"
       >
         <span class="flex items-center gap-2">
           {{ product.name }}
diff --git a/vue/toolkit/src/composables/array/useArrayFindIndex/demo.vue b/vue/toolkit/src/composables/array/useArrayFindIndex/demo.vue
index 219f1d3..0609705 100644
--- a/vue/toolkit/src/composables/array/useArrayFindIndex/demo.vue
+++ b/vue/toolkit/src/composables/array/useArrayFindIndex/demo.vue
@@ -24,15 +24,15 @@ function toggle(index: number) {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+  <div class="demo-stack max-w-sm">
+    <div class="rounded-lg border border-border bg-bg-inset p-3">
+      <p class="demo-label">
         Next pending index
       </p>
-      <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">
+      <p class="demo-stat mt-1 text-3xl">
         {{ nextIndex }}
       </p>
-      <p class="mt-1 text-sm text-(--fg-subtle)">
+      <p class="mt-1 text-sm text-fg-subtle">
         {{ nextIndex === -1 ? 'All steps complete' : `“${steps[nextIndex]!.label}”` }}
       </p>
     </div>
@@ -43,16 +43,16 @@ function toggle(index: number) {
         :key="step.label"
         class="flex items-center justify-between rounded-lg border px-3 py-2 text-sm transition"
         :class="index === nextIndex
-          ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
-          : 'border-(--border) bg-(--bg-elevated) text-(--fg-muted)'"
+          ? 'border-accent bg-accent-subtle text-accent-text'
+          : 'border-border bg-bg-elevated text-fg-muted'"
       >
         <span class="flex items-center gap-2">
-          <span class="font-mono text-xs tabular-nums text-(--fg-subtle)">{{ index }}</span>
+          <span class="font-mono text-xs tabular-nums text-fg-subtle">{{ index }}</span>
           <span :class="step.done ? 'line-through opacity-60' : ''">{{ step.label }}</span>
         </span>
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="toggle(index)"
         >
           {{ step.done ? 'Undo' : 'Done' }}
diff --git a/vue/toolkit/src/composables/array/useArrayFindLast/demo.vue b/vue/toolkit/src/composables/array/useArrayFindLast/demo.vue
index 771490b..60b520c 100644
--- a/vue/toolkit/src/composables/array/useArrayFindLast/demo.vue
+++ b/vue/toolkit/src/composables/array/useArrayFindLast/demo.vue
@@ -42,7 +42,7 @@ const tone: Record<LogEntry['level'], string> = {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex gap-1.5">
       <button
         v-for="level in levels"
@@ -50,38 +50,38 @@ const tone: Record<LogEntry['level'], string> = {
         type="button"
         class="flex-1 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
         :class="filter === level
-          ? 'border-transparent bg-(--accent) text-(--accent-fg)'
-          : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset)'"
+          ? 'border-transparent bg-accent text-accent-fg'
+          : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset'"
         @click="filter = level"
       >
         {{ level }}
       </button>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+    <div class="rounded-lg border border-border bg-bg-inset p-3">
+      <p class="demo-label">
         Latest “{{ filter }}” entry
       </p>
       <template v-if="latest">
-        <p class="mt-1 font-mono text-sm text-(--fg)">{{ latest.message }}</p>
-        <p class="mt-1 font-mono text-xs text-(--fg-subtle)">#{{ latest.id }}</p>
+        <p class="mt-1 font-mono text-sm text-fg">{{ latest.message }}</p>
+        <p class="mt-1 font-mono text-xs text-fg-subtle">#{{ latest.id }}</p>
       </template>
-      <p v-else class="mt-1 text-sm text-(--fg-subtle)">
+      <p v-else class="mt-1 text-sm text-fg-subtle">
         No “{{ filter }}” entries yet
       </p>
     </div>
 
-    <ul class="flex max-h-44 flex-col gap-1 overflow-y-auto rounded-lg border border-(--border) bg-(--bg-elevated) p-2">
+    <ul class="flex max-h-44 flex-col gap-1 overflow-y-auto rounded-lg border border-border bg-bg-elevated p-2">
       <li
         v-for="entry in log"
         :key="entry.id"
         class="flex items-center gap-2 rounded-md px-2 py-1 font-mono text-xs transition"
-        :class="entry.id === latest?.id ? 'bg-(--accent-subtle)' : ''"
+        :class="entry.id === latest?.id ? 'bg-accent-subtle' : ''"
       >
         <span class="w-10 shrink-0 font-semibold uppercase" :class="tone[entry.level]">
           {{ entry.level }}
         </span>
-        <span class="truncate text-(--fg-muted)">{{ entry.message }}</span>
+        <span class="truncate text-fg-muted">{{ entry.message }}</span>
       </li>
     </ul>
 
@@ -90,7 +90,7 @@ const tone: Record<LogEntry['level'], string> = {
         v-for="level in levels"
         :key="level"
         type="button"
-        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn flex-1"
         @click="append(level)"
       >
         + {{ level }}
diff --git a/vue/toolkit/src/composables/array/useArrayIncludes/demo.vue b/vue/toolkit/src/composables/array/useArrayIncludes/demo.vue
index 6cdd6be..1dce9f1 100644
--- a/vue/toolkit/src/composables/array/useArrayIncludes/demo.vue
+++ b/vue/toolkit/src/composables/array/useArrayIncludes/demo.vue
@@ -26,9 +26,9 @@ const hasTag = useArrayIncludes(tags, query, { fromIndex: fromIndex.value });
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4">
+      <p class="demo-label mb-2">
         Member by key
       </p>
       <div class="flex flex-wrap gap-1.5">
@@ -37,11 +37,11 @@ const hasTag = useArrayIncludes(tags, query, { fromIndex: fromIndex.value });
           :key="user.id"
           class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
           :class="user.id === searchId
-            ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
-            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+            ? 'border-accent bg-accent-subtle text-accent-text'
+            : 'border-border bg-bg-inset text-fg-muted'"
         >
           {{ user.name }}
-          <span class="font-mono text-(--fg-subtle)">#{{ user.id }}</span>
+          <span class="font-mono text-fg-subtle">#{{ user.id }}</span>
         </span>
       </div>
 
@@ -49,21 +49,21 @@ const hasTag = useArrayIncludes(tags, query, { fromIndex: fromIndex.value });
         <input
           v-model.number="searchId"
           type="number"
-          class="w-24 rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="w-24 rounded-lg border border-border bg-bg px-3 py-2 text-sm text-fg transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring"
         >
         <span
           class="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium"
           :class="isMember
             ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-            : 'bg-(--bg-inset) text-(--fg-subtle)'"
+            : 'bg-bg-inset text-fg-subtle'"
         >
           {{ isMember ? 'includes id' : 'not found' }}
         </span>
       </div>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+    <div class="demo-card p-4">
+      <p class="demo-label mb-2">
         Primitive search (fromIndex 2)
       </p>
       <div class="flex flex-wrap gap-1.5">
@@ -72,8 +72,8 @@ const hasTag = useArrayIncludes(tags, query, { fromIndex: fromIndex.value });
           :key="i"
           class="inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium"
           :class="i < 2
-            ? 'border-(--border) bg-(--bg-inset) text-(--fg-subtle) opacity-50 line-through'
-            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+            ? 'border-border bg-bg-inset text-fg-subtle opacity-50 line-through'
+            : 'border-border bg-bg-inset text-fg-muted'"
         >
           {{ tag }}
         </span>
@@ -83,13 +83,13 @@ const hasTag = useArrayIncludes(tags, query, { fromIndex: fromIndex.value });
         v-model="query"
         type="text"
         placeholder="search a tag…"
-        class="mt-3 w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input mt-3"
       >
-      <p class="mt-2 text-sm text-(--fg-muted)">
+      <p class="mt-2 text-sm text-fg-muted">
         Searching from index 2 →
         <span
           class="font-mono font-semibold"
-          :class="hasTag ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-subtle)'"
+          :class="hasTag ? 'text-emerald-600 dark:text-emerald-400' : 'text-fg-subtle'"
         >{{ hasTag }}</span>
       </p>
     </div>
diff --git a/vue/toolkit/src/composables/array/useArrayIncludes/index.ts b/vue/toolkit/src/composables/array/useArrayIncludes/index.ts
index 1f7a407..018429a 100644
--- a/vue/toolkit/src/composables/array/useArrayIncludes/index.ts
+++ b/vue/toolkit/src/composables/array/useArrayIncludes/index.ts
@@ -1,6 +1,6 @@
 import { computed, toValue } from 'vue';
 import type { ComputedRef, MaybeRefOrGetter } from 'vue';
-import { isObject, isString } from '@robonen/stdlib';
+import { isFunction, isNumber, isObject, isString, isSymbol } from '@robonen/stdlib';
 
 /**
  * Comparator deciding whether an array element equals the searched value.
@@ -83,11 +83,11 @@ export function useArrayIncludes<T, V = T>(
   // Resolve the comparator once instead of on every recompute.
   let compare: UseArrayIncludesComparatorFn<T, V>;
 
-  if (isString(resolved) || typeof resolved === 'symbol' || typeof resolved === 'number') {
+  if (isString(resolved) || isSymbol(resolved) || isNumber(resolved)) {
     const key = resolved as keyof T;
     compare = (element, searched) => element[key] === (searched as unknown);
   }
-  else if (typeof resolved === 'function') {
+  else if (isFunction(resolved)) {
     compare = resolved;
   }
   else {
diff --git a/vue/toolkit/src/composables/array/useArrayJoin/demo.vue b/vue/toolkit/src/composables/array/useArrayJoin/demo.vue
index 3058c1b..dfd950e 100644
--- a/vue/toolkit/src/composables/array/useArrayJoin/demo.vue
+++ b/vue/toolkit/src/composables/array/useArrayJoin/demo.vue
@@ -30,19 +30,19 @@ function remove(index: number) {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-      <p class="mb-1 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+  <div class="demo-stack max-w-sm">
+    <div class="rounded-lg border border-border bg-bg-inset p-3">
+      <p class="demo-label mb-1">
         Joined result
       </p>
-      <p class="break-all font-mono text-sm text-(--fg) tabular-nums">
+      <p class="break-all font-mono text-sm text-fg tabular-nums">
         <span v-if="joined">{{ joined }}</span>
-        <span v-else class="text-(--fg-subtle)">empty</span>
+        <span v-else class="text-fg-subtle">empty</span>
       </p>
     </div>
 
     <div class="flex flex-col gap-2">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Separator</span>
+      <span class="demo-label">Separator</span>
       <div class="flex gap-1.5">
         <button
           v-for="sep in separators"
@@ -50,8 +50,8 @@ function remove(index: number) {
           type="button"
           class="flex-1 rounded-lg border px-2 py-1.5 text-xs font-medium transition active:scale-[0.98] cursor-pointer"
           :class="separator === sep.value
-            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
-            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset)'"
+            ? 'border-transparent bg-accent text-accent-fg'
+            : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset'"
           @click="separator = sep.value"
         >
           {{ sep.label }}
@@ -63,16 +63,16 @@ function remove(index: number) {
       <li
         v-for="(segment, index) in segments"
         :key="index"
-        class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm text-(--fg)"
+        class="flex items-center justify-between rounded-lg border border-border bg-bg-elevated px-3 py-1.5 text-sm text-fg"
       >
         <span class="flex items-center gap-2">
-          <span class="font-mono text-xs text-(--fg-subtle)">{{ index }}</span>
+          <span class="font-mono text-xs text-fg-subtle">{{ index }}</span>
           {{ segment }}
         </span>
         <button
           type="button"
           aria-label="Remove segment"
-          class="rounded-md px-2 py-0.5 text-xs font-medium text-(--fg-subtle) transition hover:bg-(--bg-inset) hover:text-(--fg) cursor-pointer"
+          class="rounded-md px-2 py-0.5 text-xs font-medium text-fg-subtle transition hover:bg-bg-inset hover:text-fg cursor-pointer"
           @click="remove(index)"
         >
           ✕
@@ -85,11 +85,11 @@ function remove(index: number) {
         v-model="draft"
         type="text"
         placeholder="add a segment…"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
       >
       <button
         type="submit"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40"
+        class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40"
         :disabled="!draft.trim()"
       >
         Add
diff --git a/vue/toolkit/src/composables/array/useArrayJoin/index.ts b/vue/toolkit/src/composables/array/useArrayJoin/index.ts
index c156e43..52df794 100644
--- a/vue/toolkit/src/composables/array/useArrayJoin/index.ts
+++ b/vue/toolkit/src/composables/array/useArrayJoin/index.ts
@@ -1,5 +1,6 @@
 import { computed, toValue } from 'vue';
 import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import { isFunction } from '@robonen/stdlib';
 
 export type UseArrayJoinReturn = ComputedRef<string>;
 
@@ -30,7 +31,7 @@ export function useArrayJoin(
     // reactive items first lets the computed track per-item ref dependencies.
     let needsUnwrap = false;
     for (const item of resolved) {
-      if (typeof item === 'function' || (typeof item === 'object' && item !== null && 'value' in item)) {
+      if (isFunction(item) || (typeof item === 'object' && item !== null && 'value' in item)) {
         needsUnwrap = true;
         break;
       }
diff --git a/vue/toolkit/src/composables/array/useArrayMap/demo.vue b/vue/toolkit/src/composables/array/useArrayMap/demo.vue
index 9ac6c9f..4607744 100644
--- a/vue/toolkit/src/composables/array/useArrayMap/demo.vue
+++ b/vue/toolkit/src/composables/array/useArrayMap/demo.vue
@@ -34,17 +34,17 @@ function bump(index: number, delta: number) {
 </script>
 
 <template>
-  <div class="w-full max-w-md flex flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Cart</span>
-      <label class="flex items-center gap-2 text-sm text-(--fg-muted)">
+      <span class="demo-label">Cart</span>
+      <label class="flex items-center gap-2 text-sm text-fg-muted">
         Tax {{ taxRate }}%
         <input
           v-model.number="taxRate"
           type="range"
           min="0"
           max="25"
-          class="accent-(--accent)"
+          class="accent-accent"
         >
       </label>
     </div>
@@ -53,41 +53,41 @@ function bump(index: number, delta: number) {
       <li
         v-for="(item, index) in priced"
         :key="item.name"
-        class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2"
+        class="flex items-center justify-between gap-3 rounded-lg border border-border bg-bg-elevated px-3 py-2"
       >
         <div class="min-w-0 flex-1">
-          <p class="truncate text-sm font-medium text-(--fg)">
+          <p class="truncate text-sm font-medium text-fg">
             {{ item.name }}
           </p>
-          <p class="text-xs text-(--fg-subtle)">
+          <p class="text-xs text-fg-subtle">
             base {{ formatter.format(item.price) }}
           </p>
         </div>
         <div class="flex items-center gap-1.5">
           <button
-            class="inline-flex size-7 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+            class="inline-flex size-7 items-center justify-center rounded-md border border-border bg-bg-elevated text-fg transition hover:bg-bg-inset active:scale-[0.98] cursor-pointer"
             aria-label="Decrease price"
             @click="bump(index, -10)"
           >
             &minus;
           </button>
           <button
-            class="inline-flex size-7 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+            class="inline-flex size-7 items-center justify-center rounded-md border border-border bg-bg-elevated text-fg transition hover:bg-bg-inset active:scale-[0.98] cursor-pointer"
             aria-label="Increase price"
             @click="bump(index, 10)"
           >
             +
           </button>
         </div>
-        <span class="w-20 text-right font-mono text-sm tabular-nums text-(--fg)">
+        <span class="w-20 text-right font-mono text-sm tabular-nums text-fg">
           {{ formatter.format(item.gross) }}
         </span>
       </li>
     </ul>
 
-    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Total with tax</span>
-      <span class="font-mono text-xl font-bold tabular-nums text-(--fg)">
+    <div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset p-3">
+      <span class="demo-label">Total with tax</span>
+      <span class="demo-stat text-xl">
         {{ formatter.format(total) }}
       </span>
     </div>
diff --git a/vue/toolkit/src/composables/array/useArrayReduce/demo.vue b/vue/toolkit/src/composables/array/useArrayReduce/demo.vue
index 800a60f..a385054 100644
--- a/vue/toolkit/src/composables/array/useArrayReduce/demo.vue
+++ b/vue/toolkit/src/composables/array/useArrayReduce/demo.vue
@@ -36,14 +36,14 @@ function removeAt(index: number) {
 </script>
 
 <template>
-  <div class="w-full max-w-md flex flex-col gap-4">
-    <label class="flex items-center justify-between gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Starting budget</span>
+  <div class="demo-stack max-w-md">
+    <label class="demo-card flex items-center justify-between gap-3 p-4">
+      <span class="demo-label">Starting budget</span>
       <input
         v-model.number="startingBudget"
         type="number"
         step="50"
-        class="w-28 rounded-lg border border-(--border) bg-(--bg) px-3 py-1.5 text-right font-mono text-sm tabular-nums text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="w-28 rounded-lg border border-border bg-bg px-3 py-1.5 text-right font-mono text-sm tabular-nums text-fg transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring"
       >
     </label>
 
@@ -51,34 +51,34 @@ function removeAt(index: number) {
       <li
         v-for="(expense, index) in expenses"
         :key="index"
-        class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2"
+        class="flex items-center justify-between gap-3 rounded-lg border border-border bg-bg-elevated px-3 py-2"
       >
-        <span class="flex-1 truncate text-sm text-(--fg)">{{ expense.label }}</span>
+        <span class="flex-1 truncate text-sm text-fg">{{ expense.label }}</span>
         <span class="font-mono text-sm tabular-nums text-rose-600 dark:text-rose-400">
           &minus;{{ formatter.format(expense.amount) }}
         </span>
         <button
-          class="inline-flex size-6 items-center justify-center rounded-md text-(--fg-subtle) transition hover:bg-(--bg-inset) hover:text-(--fg) active:scale-[0.98] cursor-pointer"
+          class="inline-flex size-6 items-center justify-center rounded-md text-fg-subtle transition hover:bg-bg-inset hover:text-fg active:scale-[0.98] cursor-pointer"
           aria-label="Remove expense"
           @click="removeAt(index)"
         >
           &times;
         </button>
       </li>
-      <li v-if="expenses.length === 0" class="rounded-lg border border-dashed border-(--border) px-3 py-4 text-center text-sm text-(--fg-subtle)">
+      <li v-if="expenses.length === 0" class="rounded-lg border border-dashed border-border px-3 py-4 text-center text-sm text-fg-subtle">
         No expenses — full budget remains.
       </li>
     </ul>
 
     <button
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      class="demo-btn"
       @click="add"
     >
       + Add charge
     </button>
 
-    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Remaining</span>
+    <div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset p-3">
+      <span class="demo-label">Remaining</span>
       <span
         class="font-mono text-2xl font-bold tabular-nums"
         :class="remaining < 0 ? 'text-rose-600 dark:text-rose-400' : 'text-emerald-600 dark:text-emerald-400'"
diff --git a/vue/toolkit/src/composables/array/useArraySome/demo.vue b/vue/toolkit/src/composables/array/useArraySome/demo.vue
index 0de38a9..35d435e 100644
--- a/vue/toolkit/src/composables/array/useArraySome/demo.vue
+++ b/vue/toolkit/src/composables/array/useArraySome/demo.vue
@@ -27,7 +27,7 @@ function load(index: number, delta: number) {
 </script>
 
 <template>
-  <div class="w-full max-w-md flex flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div
       class="flex items-center gap-3 rounded-xl border p-4 transition"
       :class="hasOverloaded
@@ -43,7 +43,7 @@ function load(index: number, delta: number) {
       </p>
     </div>
 
-    <label class="flex items-center justify-between gap-3 text-sm text-(--fg-muted)">
+    <label class="flex items-center justify-between gap-3 text-sm text-fg-muted">
       <span>Alert threshold</span>
       <span class="flex items-center gap-2">
         <input
@@ -51,9 +51,9 @@ function load(index: number, delta: number) {
           type="range"
           min="40"
           max="100"
-          class="accent-(--accent)"
+          class="accent-accent"
         >
-        <span class="w-10 text-right font-mono tabular-nums text-(--fg)">{{ threshold }}%</span>
+        <span class="w-10 text-right font-mono tabular-nums text-fg">{{ threshold }}%</span>
       </span>
     </label>
 
@@ -61,31 +61,31 @@ function load(index: number, delta: number) {
       <li
         v-for="(server, index) in servers"
         :key="server.name"
-        class="rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2.5"
+        class="rounded-lg border border-border bg-bg-elevated px-3 py-2.5"
       >
         <div class="mb-1.5 flex items-center justify-between">
-          <span class="font-mono text-sm text-(--fg)">{{ server.name }}</span>
+          <span class="font-mono text-sm text-fg">{{ server.name }}</span>
           <span class="flex items-center gap-2">
             <span
               class="font-mono text-sm tabular-nums"
-              :class="server.cpu > threshold ? 'text-amber-600 dark:text-amber-400' : 'text-(--fg-muted)'"
+              :class="server.cpu > threshold ? 'text-amber-600 dark:text-amber-400' : 'text-fg-muted'"
             >{{ server.cpu }}%</span>
             <button
-              class="inline-flex size-6 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+              class="inline-flex size-6 items-center justify-center rounded-md border border-border bg-bg-elevated text-fg transition hover:bg-bg-inset active:scale-[0.98] cursor-pointer"
               aria-label="Decrease load"
               @click="load(index, -10)"
             >&minus;</button>
             <button
-              class="inline-flex size-6 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+              class="inline-flex size-6 items-center justify-center rounded-md border border-border bg-bg-elevated text-fg transition hover:bg-bg-inset active:scale-[0.98] cursor-pointer"
               aria-label="Increase load"
               @click="load(index, 10)"
             >+</button>
           </span>
         </div>
-        <div class="h-1.5 w-full overflow-hidden rounded-full bg-(--bg-inset)">
+        <div class="h-1.5 w-full overflow-hidden rounded-full bg-bg-inset">
           <div
             class="h-full rounded-full transition-all"
-            :class="server.cpu > threshold ? 'bg-amber-500' : 'bg-(--accent)'"
+            :class="server.cpu > threshold ? 'bg-amber-500' : 'bg-accent'"
             :style="{ width: `${server.cpu}%` }"
           />
         </div>
diff --git a/vue/toolkit/src/composables/array/useArrayUnique/demo.vue b/vue/toolkit/src/composables/array/useArrayUnique/demo.vue
index 6db2374..0d3b0cb 100644
--- a/vue/toolkit/src/composables/array/useArrayUnique/demo.vue
+++ b/vue/toolkit/src/composables/array/useArrayUnique/demo.vue
@@ -35,40 +35,40 @@ function addTag() {
 </script>
 
 <template>
-  <div class="w-full max-w-md flex flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <form class="flex gap-2" @submit.prevent="addTag">
       <input
         v-model="draft"
         type="text"
         placeholder="Add a tag, e.g. TypeScript"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
       >
       <button
         type="submit"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary"
       >
         Add
       </button>
     </form>
 
-    <label class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2.5 text-sm text-(--fg)">
+    <label class="flex items-center justify-between gap-3 rounded-lg border border-border bg-bg-elevated px-3 py-2.5 text-sm text-fg">
       <span>Case-insensitive comparator</span>
       <input
         v-model="caseInsensitive"
         type="checkbox"
-        class="size-4 accent-(--accent) cursor-pointer"
+        class="size-4 accent-accent cursor-pointer"
       >
     </label>
 
     <div class="flex flex-col gap-1.5">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Source ({{ raw.length }})
       </span>
-      <div class="flex flex-wrap gap-1.5 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <div class="flex flex-wrap gap-1.5 rounded-lg border border-border bg-bg-inset p-3">
         <span
           v-for="(tag, index) in raw"
           :key="`${tag}-${index}`"
-          class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+          class="inline-flex items-center rounded-md border border-border bg-bg-elevated px-2 py-0.5 text-xs font-medium text-fg-muted"
         >
           {{ tag }}
         </span>
@@ -76,18 +76,18 @@ function addTag() {
     </div>
 
     <div class="flex flex-col gap-1.5">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Unique ({{ unique.length }})
       </span>
-      <div class="flex flex-wrap gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) p-3">
+      <div class="flex flex-wrap gap-1.5 rounded-lg border border-border bg-bg-elevated p-3">
         <span
           v-for="tag in unique"
           :key="tag"
-          class="inline-flex items-center gap-1.5 rounded-md border border-(--accent) bg-(--accent-subtle) px-2 py-0.5 text-xs font-medium text-(--accent-text)"
+          class="inline-flex items-center gap-1.5 rounded-md border border-accent bg-accent-subtle px-2 py-0.5 text-xs font-medium text-accent-text"
         >
           {{ tag }}
         </span>
-        <span v-if="unique.length === 0" class="text-xs text-(--fg-subtle)">No tags yet.</span>
+        <span v-if="unique.length === 0" class="text-xs text-fg-subtle">No tags yet.</span>
       </div>
     </div>
   </div>
diff --git a/vue/toolkit/src/composables/array/useArrayUnique/index.ts b/vue/toolkit/src/composables/array/useArrayUnique/index.ts
index 25bf683..6ae33f8 100644
--- a/vue/toolkit/src/composables/array/useArrayUnique/index.ts
+++ b/vue/toolkit/src/composables/array/useArrayUnique/index.ts
@@ -1,6 +1,6 @@
 import { computed, toValue } from 'vue';
 import type { ComputedRef, MaybeRefOrGetter } from 'vue';
-import { isString, unique } from '@robonen/stdlib';
+import { isFunction, isNumber, isString, isSymbol, unique } from '@robonen/stdlib';
 
 /**
  * Equality comparator deciding whether two array elements are duplicates.
@@ -66,12 +66,12 @@ export function useArrayUnique<T>(
   // Resolve the comparison strategy once, not on every recompute.
 
   // Key of T (string | number | symbol) -> O(n) first-seen-wins key de-dup.
-  if (isString(comparator) || typeof comparator === 'symbol' || typeof comparator === 'number') {
+  if (isString(comparator) || isSymbol(comparator) || isNumber(comparator)) {
     const key = comparator as keyof T;
     return computed<T[]>(() => uniqueByKey(resolve(list), element => element[key] as PropertyKey));
   }
 
-  if (typeof comparator === 'function') {
+  if (isFunction(comparator)) {
     // A unary key extractor stays O(n); a binary comparator falls back to O(n²)
     // pairwise comparison (unavoidable for arbitrary equality). Branch on arity.
     if (comparator.length <= 1) {
diff --git a/vue/toolkit/src/composables/array/useSorted/demo.vue b/vue/toolkit/src/composables/array/useSorted/demo.vue
index 082bbd2..882dd37 100644
--- a/vue/toolkit/src/composables/array/useSorted/demo.vue
+++ b/vue/toolkit/src/composables/array/useSorted/demo.vue
@@ -38,23 +38,23 @@ const keys: { id: SortKey; label: string }[] = [
 </script>
 
 <template>
-  <div class="w-full max-w-md flex flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div class="flex items-center justify-between gap-2">
-      <div class="inline-flex rounded-lg border border-(--border) bg-(--bg-elevated) p-0.5">
+      <div class="inline-flex rounded-lg border border-border bg-bg-elevated p-0.5">
         <button
           v-for="key in keys"
           :key="key.id"
           class="rounded-md px-3 py-1 text-sm font-medium transition cursor-pointer"
           :class="sortKey === key.id
-            ? 'bg-(--accent) text-(--accent-fg)'
-            : 'text-(--fg-muted) hover:text-(--fg)'"
+            ? 'bg-accent text-accent-fg'
+            : 'text-fg-muted hover:text-fg'"
           @click="sortKey = key.id"
         >
           {{ key.label }}
         </button>
       </div>
       <button
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="descending = !descending"
       >
         {{ descending ? 'Desc ↓' : 'Asc ↑' }}
@@ -65,22 +65,22 @@ const keys: { id: SortKey; label: string }[] = [
       <li
         v-for="(player, index) in sorted"
         :key="player.name"
-        class="flex items-center gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2.5"
+        class="flex items-center gap-3 rounded-lg border border-border bg-bg-elevated px-3 py-2.5"
       >
-        <span class="w-6 text-center font-mono text-sm tabular-nums text-(--fg-subtle)">
+        <span class="w-6 text-center font-mono text-sm tabular-nums text-fg-subtle">
           {{ index + 1 }}
         </span>
-        <span class="flex-1 text-sm font-medium text-(--fg)">{{ player.name }}</span>
-        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="flex-1 text-sm font-medium text-fg">{{ player.name }}</span>
+        <span class="demo-badge">
           Lv {{ player.level }}
         </span>
-        <span class="w-16 text-right font-mono text-sm font-semibold tabular-nums text-(--fg)">
+        <span class="w-16 text-right font-mono text-sm font-semibold tabular-nums text-fg">
           {{ player.score.toLocaleString() }}
         </span>
       </li>
     </ol>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Stable sort — players with an equal {{ sortKey }} keep their original order. The source array is left untouched.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/array/useSorted/index.ts b/vue/toolkit/src/composables/array/useSorted/index.ts
index 59fb566..ce6e255 100644
--- a/vue/toolkit/src/composables/array/useSorted/index.ts
+++ b/vue/toolkit/src/composables/array/useSorted/index.ts
@@ -2,13 +2,13 @@ import { computed, isRef, toValue, watchEffect } from 'vue';
 import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
 import { isFunction } from '@robonen/stdlib';
 
-export type UseSortedCompareFn<T = any>
+export type UseSortedCompareFn<T = unknown>
   = (a: T, b: T) => number;
 
-export type UseSortedFn<T = any>
+export type UseSortedFn<T = unknown>
   = (arr: T[], compareFn: UseSortedCompareFn<T>) => T[];
 
-export interface UseSortedOptions<T = any> {
+export interface UseSortedOptions<T = unknown> {
   /**
    * The sort algorithm to apply. Receives a copy of the array (or the source
    * itself in `dirty` mode) and the resolved compare function.
@@ -101,13 +101,13 @@ const defaultSortFn: UseSortedFn = <T>(source: T[], compareFn: UseSortedCompareF
  *
  * @since 0.0.15
  */
-export function useSorted<T = any>(source: Ref<T[]>, compareFn?: UseSortedCompareFn<T>): Ref<T[]>;
-export function useSorted<T = any>(source: MaybeRefOrGetter<T[]>, compareFn?: UseSortedCompareFn<T>): ComputedRef<T[]>;
-export function useSorted<T = any>(source: Ref<T[]>, options?: UseSortedOptions<T>): Ref<T[]>;
-export function useSorted<T = any>(source: MaybeRefOrGetter<T[]>, options?: UseSortedOptions<T>): ComputedRef<T[]>;
-export function useSorted<T = any>(source: Ref<T[]>, compareFn?: UseSortedCompareFn<T>, options?: Omit<UseSortedOptions<T>, 'compareFn'>): Ref<T[]>;
-export function useSorted<T = any>(source: MaybeRefOrGetter<T[]>, compareFn?: UseSortedCompareFn<T>, options?: Omit<UseSortedOptions<T>, 'compareFn'>): ComputedRef<T[]>;
-export function useSorted<T = any>(
+export function useSorted<T = unknown>(source: Ref<T[]>, compareFn?: UseSortedCompareFn<T>): Ref<T[]>;
+export function useSorted<T = unknown>(source: MaybeRefOrGetter<T[]>, compareFn?: UseSortedCompareFn<T>): ComputedRef<T[]>;
+export function useSorted<T = unknown>(source: Ref<T[]>, options?: UseSortedOptions<T>): Ref<T[]>;
+export function useSorted<T = unknown>(source: MaybeRefOrGetter<T[]>, options?: UseSortedOptions<T>): ComputedRef<T[]>;
+export function useSorted<T = unknown>(source: Ref<T[]>, compareFn?: UseSortedCompareFn<T>, options?: Omit<UseSortedOptions<T>, 'compareFn'>): Ref<T[]>;
+export function useSorted<T = unknown>(source: MaybeRefOrGetter<T[]>, compareFn?: UseSortedCompareFn<T>, options?: Omit<UseSortedOptions<T>, 'compareFn'>): ComputedRef<T[]>;
+export function useSorted<T = unknown>(
   source: MaybeRefOrGetter<T[]>,
   compareFnOrOptions?: UseSortedCompareFn<T> | UseSortedOptions<T>,
   maybeOptions?: Omit<UseSortedOptions<T>, 'compareFn'>,
diff --git a/vue/toolkit/src/composables/browser/broadcastedRef/demo.vue b/vue/toolkit/src/composables/browser/broadcastedRef/demo.vue
index d87dfff..601a038 100644
--- a/vue/toolkit/src/composables/browser/broadcastedRef/demo.vue
+++ b/vue/toolkit/src/composables/browser/broadcastedRef/demo.vue
@@ -27,9 +27,9 @@ function setQuantity(delta: number): void {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Shared cart</span>
+      <span class="demo-label">Shared cart</span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
         :class="supported
@@ -41,15 +41,15 @@ function setQuantity(delta: number): void {
       </span>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+    <div class="demo-card p-4">
       <div class="flex flex-wrap gap-2">
         <button
           v-for="product in products"
           :key="product"
           class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
           :class="cart.item === product
-            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
-            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            ? 'border-transparent bg-accent text-accent-fg hover:bg-accent-hover'
+            : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
           @click="pick(product)"
         >
           {{ product }}
@@ -57,18 +57,18 @@ function setQuantity(delta: number): void {
       </div>
 
       <div class="mt-4 flex items-center justify-between">
-        <span class="text-sm text-(--fg-muted)">Quantity</span>
+        <span class="text-sm text-fg-muted">Quantity</span>
         <div class="flex items-center gap-2">
           <button
-            class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40"
+            class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border bg-bg-elevated text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40"
             :disabled="cart.quantity <= 1"
             @click="setQuantity(-1)"
           >
             &minus;
           </button>
-          <span class="w-8 text-center font-mono text-lg font-bold tabular-nums text-(--fg)">{{ cart.quantity }}</span>
+          <span class="demo-stat w-8 text-center text-lg">{{ cart.quantity }}</span>
           <button
-            class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+            class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border bg-bg-elevated text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.98] cursor-pointer"
             @click="setQuantity(1)"
           >
             +
@@ -77,21 +77,21 @@ function setQuantity(delta: number): void {
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
       <div class="flex justify-between">
-        <span class="text-(--fg-muted)">{{ cart.item }} &times; {{ cart.quantity }}</span>
+        <span class="text-fg-muted">{{ cart.item }} &times; {{ cart.quantity }}</span>
         <span class="font-bold">${{ subtotal }}</span>
       </div>
     </div>
 
     <button
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      class="demo-btn"
       @click="theme = theme === 'light' ? 'dark' : 'light'"
     >
       Toggle shared theme: <span class="font-mono">{{ theme }}</span>
     </button>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Open this page in a second tab. Every change you make here is broadcast and mirrored instantly in the other tab.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/browser/useBreakpoints/demo.vue b/vue/toolkit/src/composables/browser/useBreakpoints/demo.vue
index c573b73..f50ac74 100644
--- a/vue/toolkit/src/composables/browser/useBreakpoints/demo.vue
+++ b/vue/toolkit/src/composables/browser/useBreakpoints/demo.vue
@@ -21,42 +21,42 @@ const device = (): string => (isDesktop.value ? 'Desktop' : isMobile.value ? 'Mo
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Active breakpoint</span>
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4">
+      <span class="demo-label">Active breakpoint</span>
       <div class="mt-1 flex items-baseline gap-2">
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ active || 'none' }}</span>
-        <span class="rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">{{ device() }}</span>
+        <span class="demo-stat text-3xl">{{ active || 'none' }}</span>
+        <span class="rounded-md border border-border bg-bg-inset px-2 py-0.5 text-xs font-medium text-fg-muted">{{ device() }}</span>
       </div>
     </div>
 
     <div class="flex flex-col gap-1.5">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tailwind breakpoints</span>
+      <span class="demo-label">Tailwind breakpoints</span>
       <div
         v-for="row in rows"
         :key="row.key"
         class="flex items-center justify-between rounded-lg border px-3 py-2 text-sm transition"
         :class="bp[row.key].value
-          ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          ? 'border-accent bg-accent-subtle text-accent-text'
+          : 'border-border bg-bg-inset text-fg-muted'"
       >
         <span class="font-mono font-medium">{{ row.key }}</span>
-        <span class="font-mono tabular-nums text-(--fg-subtle)">&ge; {{ row.width }}</span>
+        <span class="font-mono tabular-nums text-fg-subtle">&ge; {{ row.width }}</span>
         <span
           class="h-2 w-2 rounded-full transition"
-          :class="bp[row.key].value ? 'bg-(--accent)' : 'bg-(--border-strong)'"
+          :class="bp[row.key].value ? 'bg-accent' : 'bg-border-strong'"
         />
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
       <div class="flex justify-between">
-        <span class="text-(--fg-muted)">current()</span>
+        <span class="text-fg-muted">current()</span>
         <span>[{{ current.length ? current.join(', ') : '—' }}]</span>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Resize your browser window — the matched breakpoints update live.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/browser/useBreakpoints/index.ts b/vue/toolkit/src/composables/browser/useBreakpoints/index.ts
index 5a57602..09e91cc 100644
--- a/vue/toolkit/src/composables/browser/useBreakpoints/index.ts
+++ b/vue/toolkit/src/composables/browser/useBreakpoints/index.ts
@@ -5,6 +5,7 @@ import { defaultWindow } from '@/types';
 import type { ConfigurableWindow } from '@/types';
 import { useMediaQuery } from '@/composables/browser/useMediaQuery';
 import type { UseMediaQueryOptions } from '@/composables/browser/useMediaQuery';
+import { pxValue } from '@robonen/platform/browsers';
 
 /**
  * A breakpoints map: name → viewport width. Numbers are treated as pixels;
@@ -61,22 +62,6 @@ export type UseBreakpointsReturn<K extends string = string>
     active: () => ComputedRef<K | ''>;
   };
 
-/**
- * Parse a CSS length token (`"1024px"`, `"48em"`, `"30rem"`, `"50%"`) into a
- * pixel number. `em`/`rem` use the conventional 16px root size.
- */
-function pxValue(value: string): number {
-  const number = Number.parseFloat(value);
-
-  if (Number.isNaN(number))
-    return Number.NaN;
-
-  if (/(?:em|rem)\s*$/i.test(value))
-    return number * 16;
-
-  return number;
-}
-
 /**
  * Add `delta` to the numeric portion of a CSS length, preserving its unit.
  * Used to build the strict (`> / <`) variants from inclusive media queries via
diff --git a/vue/toolkit/src/composables/browser/useClipboard/demo.vue b/vue/toolkit/src/composables/browser/useClipboard/demo.vue
index b229387..0d04aab 100644
--- a/vue/toolkit/src/composables/browser/useClipboard/demo.vue
+++ b/vue/toolkit/src/composables/browser/useClipboard/demo.vue
@@ -14,9 +14,9 @@ const snippets = [
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Clipboard API</span>
+      <span class="demo-label">Clipboard API</span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
         :class="isSupported
@@ -32,11 +32,11 @@ const snippets = [
         <input
           v-model="draft"
           type="text"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="demo-input"
           placeholder="Type something to copy…"
         >
         <button
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           :disabled="copyPending || !draft"
           @click="copy(draft)"
         >
@@ -45,21 +45,21 @@ const snippets = [
       </div>
 
       <div class="flex flex-col gap-1.5">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Quick copy</span>
+        <span class="demo-label">Quick copy</span>
         <button
           v-for="snippet in snippets"
           :key="snippet"
-          class="inline-flex items-center justify-between gap-2 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2 text-left text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.99] cursor-pointer"
+          class="inline-flex items-center justify-between gap-2 rounded-lg border border-border bg-bg-elevated px-3 py-2 text-left text-sm font-medium text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.99] cursor-pointer"
           @click="copy(snippet)"
         >
-          <span class="truncate font-mono text-xs text-(--fg-muted)">{{ snippet }}</span>
-          <span class="shrink-0 text-xs text-(--fg-subtle)">Copy</span>
+          <span class="truncate font-mono text-xs text-fg-muted">{{ snippet }}</span>
+          <span class="shrink-0 text-xs text-fg-subtle">Copy</span>
         </button>
       </div>
 
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last copied</span>
-        <p class="mt-1 break-all font-mono text-sm text-(--fg)">{{ text || '—' }}</p>
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <span class="demo-label">Last copied</span>
+        <p class="mt-1 break-all font-mono text-sm text-fg">{{ text || '—' }}</p>
       </div>
     </template>
 
diff --git a/vue/toolkit/src/composables/browser/useClipboardItems/demo.vue b/vue/toolkit/src/composables/browser/useClipboardItems/demo.vue
index 485ab6f..c386a03 100644
--- a/vue/toolkit/src/composables/browser/useClipboardItems/demo.vue
+++ b/vue/toolkit/src/composables/browser/useClipboardItems/demo.vue
@@ -34,9 +34,9 @@ function typesOf(item: ClipboardItem): string {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">ClipboardItem API</span>
+      <span class="demo-label">ClipboardItem API</span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
         :class="isSupported
@@ -48,42 +48,42 @@ function typesOf(item: ClipboardItem): string {
     </div>
 
     <template v-if="isSupported">
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Rich payload</span>
-        <p class="mt-1 text-sm text-(--fg)" v-html="html" />
-        <p class="mt-1 font-mono text-xs text-(--fg-subtle)">text/plain &middot; text/html</p>
+      <div class="demo-card p-4">
+        <span class="demo-label">Rich payload</span>
+        <p class="mt-1 text-sm text-fg" v-html="html" />
+        <p class="mt-1 font-mono text-xs text-fg-subtle">text/plain &middot; text/html</p>
       </div>
 
       <div class="flex gap-2">
         <button
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn-primary flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           :disabled="copyPending"
           @click="copyRich"
         >
           {{ copyPending ? 'Copying…' : copied ? 'Copied!' : 'Copy rich content' }}
         </button>
         <button
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="readClipboard"
         >
           Read clipboard
         </button>
       </div>
 
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <span class="demo-label">
           content ({{ content.length }} {{ content.length === 1 ? 'item' : 'items' }})
         </span>
         <ul v-if="content.length" class="mt-2 flex flex-col gap-1">
           <li
             v-for="(item, i) in content"
             :key="i"
-            class="font-mono text-xs text-(--fg)"
+            class="font-mono text-xs text-fg"
           >
             #{{ i + 1 }}: {{ typesOf(item) }}
           </li>
         </ul>
-        <p v-else class="mt-2 font-mono text-xs text-(--fg-subtle)">No items read yet</p>
+        <p v-else class="mt-2 font-mono text-xs text-fg-subtle">No items read yet</p>
       </div>
 
       <div
diff --git a/vue/toolkit/src/composables/browser/useCloseWatcher/demo.vue b/vue/toolkit/src/composables/browser/useCloseWatcher/demo.vue
index 475391e..ac1793a 100644
--- a/vue/toolkit/src/composables/browser/useCloseWatcher/demo.vue
+++ b/vue/toolkit/src/composables/browser/useCloseWatcher/demo.vue
@@ -20,9 +20,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">CloseWatcher API</span>
+      <span class="demo-label">CloseWatcher API</span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
         :class="isSupported
@@ -34,7 +34,7 @@ onMounted(() => {
     </div>
 
     <button
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40"
+      class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40"
       :disabled="open"
       @click="open = true"
     >
@@ -47,19 +47,19 @@ onMounted(() => {
       leave-active-class="transition duration-100 ease-in"
       leave-to-class="opacity-0 translate-y-1"
     >
-      <div v-if="open" class="rounded-xl border border-(--border-strong) bg-(--bg-elevated) p-4 shadow-lg">
+      <div v-if="open" class="rounded-xl border border-border-strong bg-bg-elevated p-4 shadow-lg">
         <div class="flex items-start justify-between gap-3">
           <div>
-            <p class="text-sm font-semibold text-(--fg)">Unsaved changes</p>
-            <p class="mt-1 text-sm text-(--fg-muted)">
-              Press <kbd class="rounded border border-(--border) bg-(--bg-inset) px-1.5 py-0.5 font-mono text-xs text-(--fg)">Esc</kbd>
+            <p class="text-sm font-semibold text-fg">Unsaved changes</p>
+            <p class="mt-1 text-sm text-fg-muted">
+              Press <kbd class="rounded border border-border bg-bg-inset px-1.5 py-0.5 font-mono text-xs text-fg">Esc</kbd>
               (or the Android back gesture) to dismiss.
             </p>
           </div>
         </div>
         <div class="mt-4 flex justify-end gap-2">
           <button
-            class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+            class="demo-btn"
             @click="close()"
           >
             Dismiss via close()
@@ -68,18 +68,18 @@ onMounted(() => {
       </div>
     </Transition>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
       <div class="flex justify-between">
-        <span class="text-(--fg-muted)">closes</span>
+        <span class="text-fg-muted">closes</span>
         <span class="font-bold">{{ closeCount }}</span>
       </div>
       <div class="mt-1 flex justify-between">
-        <span class="text-(--fg-muted)">last</span>
+        <span class="text-fg-muted">last</span>
         <span>{{ lastClosedAt ?? '—' }}</span>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Open the dialog, then dismiss it with Esc, the system back gesture, or the programmatic <code class="font-mono">close()</code> call.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/browser/useColorMode/demo.vue b/vue/toolkit/src/composables/browser/useColorMode/demo.vue
index 0b58ce9..1581d1e 100644
--- a/vue/toolkit/src/composables/browser/useColorMode/demo.vue
+++ b/vue/toolkit/src/composables/browser/useColorMode/demo.vue
@@ -30,11 +30,11 @@ const options = [
 <template>
   <div
     ref="target"
-    class="flex w-full max-w-sm flex-col gap-4"
+    class="demo-stack max-w-sm"
   >
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Color mode</span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-label">Color mode</span>
+      <span class="demo-badge">
         system: {{ mode.system.value }}
       </span>
     </div>
@@ -46,8 +46,8 @@ const options = [
         type="button"
         class="inline-flex flex-col items-center justify-center gap-1 rounded-lg border px-2 py-3 text-xs font-medium transition active:scale-[0.98] cursor-pointer"
         :class="mode === opt.value
-          ? 'border-transparent bg-(--accent) text-(--accent-fg)'
-          : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          ? 'border-transparent bg-accent text-accent-fg'
+          : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
         @click="mode = opt.value"
       >
         <span class="text-base leading-none">{{ opt.icon }}</span>
@@ -55,26 +55,26 @@ const options = [
       </button>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <p class="mb-3 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Reactive state</p>
+    <div class="demo-card p-4">
+      <p class="demo-label mb-3">Reactive state</p>
       <dl class="space-y-2 text-sm">
         <div class="flex items-center justify-between">
-          <dt class="text-(--fg-muted)">selected (emitAuto)</dt>
-          <dd class="font-mono tabular-nums text-(--fg)">{{ mode }}</dd>
+          <dt class="text-fg-muted">selected (emitAuto)</dt>
+          <dd class="font-mono tabular-nums text-fg">{{ mode }}</dd>
         </div>
         <div class="flex items-center justify-between">
-          <dt class="text-(--fg-muted)">resolved state</dt>
-          <dd class="font-mono tabular-nums text-(--fg)">{{ mode.state.value }}</dd>
+          <dt class="text-fg-muted">resolved state</dt>
+          <dd class="font-mono tabular-nums text-fg">{{ mode.state.value }}</dd>
         </div>
         <div class="flex items-center justify-between">
-          <dt class="text-(--fg-muted)">store</dt>
-          <dd class="font-mono tabular-nums text-(--fg)">{{ mode.store.value }}</dd>
+          <dt class="text-fg-muted">store</dt>
+          <dd class="font-mono tabular-nums text-fg">{{ mode.store.value }}</dd>
         </div>
       </dl>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
-      The chosen mode is applied as <code class="font-mono text-(--fg-muted)">data-demo-theme</code> on this card.
+    <p class="text-xs text-fg-subtle">
+      The chosen mode is applied as <code class="font-mono text-fg-muted">data-demo-theme</code> on this card.
       Pick "Auto" to follow your OS preference.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/browser/useCssVar/demo.vue b/vue/toolkit/src/composables/browser/useCssVar/demo.vue
index 8858fa0..d8d2605 100644
--- a/vue/toolkit/src/composables/browser/useCssVar/demo.vue
+++ b/vue/toolkit/src/composables/browser/useCssVar/demo.vue
@@ -15,10 +15,10 @@ const accent = computed(() => `hsl(${hue.value} 80% 55%)`);
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       ref="target"
-      class="flex items-center justify-center rounded-xl border border-(--border) bg-(--bg-inset) p-6"
+      class="flex items-center justify-center rounded-xl border border-border bg-bg-inset p-6"
     >
       <div
         class="shadow-lg transition-all duration-300 ease-out"
@@ -31,11 +31,11 @@ const accent = computed(() => `hsl(${hue.value} 80% 55%)`);
       />
     </div>
 
-    <div class="flex flex-col gap-4 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+    <div class="demo-card flex flex-col gap-4 p-4">
       <div class="flex flex-col gap-2">
         <div class="flex items-center justify-between">
-          <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="hue">Hue</label>
-          <span class="font-mono text-sm tabular-nums text-(--fg)">--demo-hue: {{ hue }}</span>
+          <label class="demo-label" for="hue">Hue</label>
+          <span class="font-mono text-sm tabular-nums text-fg">--demo-hue: {{ hue }}</span>
         </div>
         <input
           id="hue"
@@ -43,14 +43,14 @@ const accent = computed(() => `hsl(${hue.value} 80% 55%)`);
           type="range"
           min="0"
           max="360"
-          class="w-full accent-(--accent) cursor-pointer"
+          class="w-full accent-accent cursor-pointer"
         >
         <div class="flex gap-1.5">
           <button
             v-for="s in swatches"
             :key="s"
             type="button"
-            class="h-6 w-6 rounded-md border border-(--border) transition hover:scale-110 active:scale-95 cursor-pointer"
+            class="h-6 w-6 rounded-md border border-border transition hover:scale-110 active:scale-95 cursor-pointer"
             :style="{ background: `hsl(${s} 80% 55%)` }"
             :aria-label="`Set hue ${s}`"
             @click="hue = s"
@@ -60,8 +60,8 @@ const accent = computed(() => `hsl(${hue.value} 80% 55%)`);
 
       <div class="flex flex-col gap-2">
         <div class="flex items-center justify-between">
-          <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="radius">Radius</label>
-          <span class="font-mono text-sm tabular-nums text-(--fg)">--demo-radius: {{ radius }}</span>
+          <label class="demo-label" for="radius">Radius</label>
+          <span class="font-mono text-sm tabular-nums text-fg">--demo-radius: {{ radius }}</span>
         </div>
         <input
           id="radius"
@@ -69,14 +69,14 @@ const accent = computed(() => `hsl(${hue.value} 80% 55%)`);
           type="range"
           min="0"
           max="48"
-          class="w-full accent-(--accent) cursor-pointer"
+          class="w-full accent-accent cursor-pointer"
         >
       </div>
 
       <div class="flex flex-col gap-2">
         <div class="flex items-center justify-between">
-          <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="size">Size</label>
-          <span class="font-mono text-sm tabular-nums text-(--fg)">--demo-size: {{ size }}</span>
+          <label class="demo-label" for="size">Size</label>
+          <span class="font-mono text-sm tabular-nums text-fg">--demo-size: {{ size }}</span>
         </div>
         <input
           id="size"
@@ -84,12 +84,12 @@ const accent = computed(() => `hsl(${hue.value} 80% 55%)`);
           type="range"
           min="48"
           max="140"
-          class="w-full accent-(--accent) cursor-pointer"
+          class="w-full accent-accent cursor-pointer"
         >
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
       background: {{ accent }};
     </div>
   </div>
diff --git a/vue/toolkit/src/composables/browser/useDark/demo.vue b/vue/toolkit/src/composables/browser/useDark/demo.vue
index bc261de..b233dc8 100644
--- a/vue/toolkit/src/composables/browser/useDark/demo.vue
+++ b/vue/toolkit/src/composables/browser/useDark/demo.vue
@@ -23,9 +23,9 @@ function toggle() {
   <div
     ref="target"
     data-demo-mode
-    class="flex w-full max-w-sm flex-col gap-4"
+    class="demo-stack max-w-sm"
   >
-    <div class="flex items-center justify-between rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+    <div class="demo-card flex items-center justify-between p-4">
       <div class="flex items-center gap-3">
         <span
           class="flex h-10 w-10 items-center justify-center rounded-lg text-lg transition-colors"
@@ -36,8 +36,8 @@ function toggle() {
           {{ isDark ? '☾' : '☀' }}
         </span>
         <div>
-          <p class="text-sm font-medium text-(--fg)">{{ isDark ? 'Dark mode' : 'Light mode' }}</p>
-          <p class="text-xs text-(--fg-subtle)">isDark = {{ isDark }}</p>
+          <p class="text-sm font-medium text-fg">{{ isDark ? 'Dark mode' : 'Light mode' }}</p>
+          <p class="text-xs text-fg-subtle">isDark = {{ isDark }}</p>
         </div>
       </div>
 
@@ -45,30 +45,30 @@ function toggle() {
         type="button"
         role="switch"
         :aria-checked="isDark"
-        class="relative inline-flex h-7 w-12 items-center rounded-full border border-(--border) transition focus:outline-none focus:ring-2 focus:ring-(--ring) cursor-pointer"
-        :class="isDark ? 'bg-(--accent)' : 'bg-(--bg-inset)'"
+        class="relative inline-flex h-7 w-12 items-center rounded-full border border-border transition focus:outline-none focus:ring-2 focus:ring-ring cursor-pointer"
+        :class="isDark ? 'bg-accent' : 'bg-bg-inset'"
         @click="toggle"
       >
         <span
-          class="inline-block h-5 w-5 transform rounded-full bg-(--bg) shadow transition-transform"
+          class="inline-block h-5 w-5 transform rounded-full bg-bg shadow transition-transform"
           :class="isDark ? 'translate-x-6' : 'translate-x-1'"
         />
       </button>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Preview surface</p>
+    <div class="rounded-lg border border-border bg-bg-inset p-3">
+      <p class="demo-label mb-2">Preview surface</p>
       <div class="flex items-center gap-2">
-        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-border bg-bg px-2 py-0.5 text-xs font-medium text-fg-muted">
           data-demo-mode = "{{ isDark ? 'dark' : 'light' }}"
         </span>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Writing the boolean toggles the attribute on this card. When the requested state
-      matches your OS preference, <code class="font-mono text-(--fg-muted)">useDark</code>
-      falls back to <code class="font-mono text-(--fg-muted)">auto</code> to keep tracking it.
+      matches your OS preference, <code class="font-mono text-fg-muted">useDark</code>
+      falls back to <code class="font-mono text-fg-muted">auto</code> to keep tracking it.
     </p>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/browser/useDocumentPiP/demo.vue b/vue/toolkit/src/composables/browser/useDocumentPiP/demo.vue
index 64c433e..693f56f 100644
--- a/vue/toolkit/src/composables/browser/useDocumentPiP/demo.vue
+++ b/vue/toolkit/src/composables/browser/useDocumentPiP/demo.vue
@@ -51,7 +51,7 @@ watch(isOpen, (openNow) => {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       v-if="!isSupported"
       class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-400"
@@ -62,14 +62,14 @@ watch(isOpen, (openNow) => {
     <template v-else>
       <div
         ref="host"
-        class="min-h-[7rem] rounded-xl border border-(--border) bg-(--bg-inset) p-1"
+        class="min-h-[7rem] rounded-xl border border-border bg-bg-inset p-1"
       >
         <div
           ref="player"
-          class="flex h-full flex-col items-center justify-center gap-1 rounded-lg bg-(--bg-elevated) p-6"
+          class="flex h-full flex-col items-center justify-center gap-1 rounded-lg bg-bg-elevated p-6"
         >
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Live timer</span>
-          <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+          <span class="demo-label">Live timer</span>
+          <span class="demo-stat text-3xl">
             {{ String(Math.floor(elapsed / 60)).padStart(2, '0') }}:{{ String(elapsed % 60).padStart(2, '0') }}
           </span>
         </div>
@@ -78,7 +78,7 @@ watch(isOpen, (openNow) => {
       <div class="flex items-center gap-2">
         <button
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn-primary flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           :disabled="isOpen"
           @click="popOut"
         >
@@ -86,7 +86,7 @@ watch(isOpen, (openNow) => {
         </button>
         <button
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           :disabled="!isOpen"
           @click="close"
         >
@@ -94,17 +94,17 @@ watch(isOpen, (openNow) => {
         </button>
       </div>
 
-      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-sm">
-        <span class="text-(--fg-muted)">isOpen</span>
+      <div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset p-3 text-sm">
+        <span class="text-fg-muted">isOpen</span>
         <span
           class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
           :class="isOpen
             ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-            : 'border-(--border) bg-(--bg) text-(--fg-muted)'"
+            : 'border-border bg-bg text-fg-muted'"
         >
           <span
             class="h-1.5 w-1.5 rounded-full"
-            :class="isOpen ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+            :class="isOpen ? 'bg-emerald-500' : 'bg-fg-subtle'"
           />
           {{ isOpen ? 'floating' : 'docked' }}
         </span>
@@ -118,7 +118,7 @@ watch(isOpen, (openNow) => {
       </p>
       <p
         v-else
-        class="text-xs text-(--fg-subtle)"
+        class="text-xs text-fg-subtle"
       >
         "Pop out" moves the live timer into an always-on-top window. Closing it returns the element to the page.
       </p>
diff --git a/vue/toolkit/src/composables/browser/useEventListener/demo.vue b/vue/toolkit/src/composables/browser/useEventListener/demo.vue
index 7cfd334..a2d1a8c 100644
--- a/vue/toolkit/src/composables/browser/useEventListener/demo.vue
+++ b/vue/toolkit/src/composables/browser/useEventListener/demo.vue
@@ -46,33 +46,33 @@ function toggleListening() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex flex-col gap-2">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">pointermove on element</span>
+      <span class="demo-label">pointermove on element</span>
       <div
         ref="pad"
-        class="relative h-32 overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) touch-none"
+        class="relative h-32 overflow-hidden rounded-xl border border-border bg-bg-inset touch-none"
       >
         <div
-          class="pointer-events-none absolute h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-(--accent) transition-opacity"
+          class="pointer-events-none absolute h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-accent transition-opacity"
           :class="inside ? 'opacity-100' : 'opacity-0'"
           :style="{ left: `${pos.x}px`, top: `${pos.y}px` }"
         />
         <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <span class="text-xs text-(--fg-subtle)">{{ inside ? '' : 'Hover here' }}</span>
+          <span class="text-xs text-fg-subtle">{{ inside ? '' : 'Hover here' }}</span>
         </div>
-        <div class="pointer-events-none absolute bottom-2 left-2 rounded-md border border-(--border) bg-(--bg) px-2 py-0.5 font-mono text-xs tabular-nums text-(--fg-muted)">
+        <div class="pointer-events-none absolute bottom-2 left-2 rounded-md border border-border bg-bg px-2 py-0.5 font-mono text-xs tabular-nums text-fg-muted">
           x: {{ pos.x }} · y: {{ pos.y }}
         </div>
       </div>
     </div>
 
-    <div class="flex flex-col gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+    <div class="demo-card flex flex-col gap-2 p-4">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">keydown on window</span>
+        <span class="demo-label">keydown on window</span>
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-xs font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-border bg-bg-elevated px-3 py-1.5 text-xs font-medium text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.98] cursor-pointer"
           @click="toggleListening"
         >
           {{ listening ? 'Stop listening' : 'Start listening' }}
@@ -81,30 +81,30 @@ function toggleListening() {
 
       <div class="flex items-center gap-3">
         <kbd
-          class="flex min-w-[3.5rem] items-center justify-center rounded-lg border border-(--border-strong) bg-(--bg-inset) px-3 py-2 font-mono text-sm font-medium text-(--fg)"
+          class="flex min-w-[3.5rem] items-center justify-center rounded-lg border border-border-strong bg-bg-inset px-3 py-2 font-mono text-sm font-medium text-fg"
         >
           {{ lastKey || '—' }}
         </kbd>
         <div class="flex flex-col">
-          <span class="text-xs text-(--fg-subtle)">presses captured</span>
-          <span class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ keyCount }}</span>
+          <span class="text-xs text-fg-subtle">presses captured</span>
+          <span class="demo-stat text-lg">{{ keyCount }}</span>
         </div>
         <span
           class="ml-auto inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
           :class="listening
             ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+            : 'border-border bg-bg-inset text-fg-muted'"
         >
           <span
             class="h-1.5 w-1.5 rounded-full"
-            :class="listening ? 'bg-emerald-500 animate-pulse' : 'bg-(--fg-subtle)'"
+            :class="listening ? 'bg-emerald-500 animate-pulse' : 'bg-fg-subtle'"
           />
           {{ listening ? 'active' : 'stopped' }}
         </span>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Listeners auto-detach on unmount. The returned stop function lets you detach early — press any key, then toggle listening.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/browser/useEventListener/index.ts b/vue/toolkit/src/composables/browser/useEventListener/index.ts
index 93b0910..3970223 100644
--- a/vue/toolkit/src/composables/browser/useEventListener/index.ts
+++ b/vue/toolkit/src/composables/browser/useEventListener/index.ts
@@ -6,8 +6,8 @@ import type { MaybeRefOrGetter } from 'vue';
 import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
 
 interface InferEventTarget<Events> {
-  addEventListener: (event: Events, listener?: any, options?: any) => any;
-  removeEventListener: (event: Events, listener?: any, options?: any) => any;
+  addEventListener: (event: Events, listener?: GeneralEventListener, options?: boolean | AddEventListenerOptions) => void;
+  removeEventListener: (event: Events, listener?: GeneralEventListener, options?: boolean | EventListenerOptions) => void;
 }
 
 export type GeneralEventListener<E = Event> = (evt: E) => void;
@@ -27,7 +27,7 @@ type ListenerOptions = boolean | AddEventListenerOptions;
  */
 export function useEventListener<E extends WindowEventName>(
   event: Arrayable<E>,
-  listener: Arrayable<(this: Window, ev: WindowEventMap[E]) => any>,
+  listener: Arrayable<(this: Window, ev: WindowEventMap[E]) => void>,
   options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
 ): VoidFunction;
 
@@ -41,7 +41,7 @@ export function useEventListener<E extends WindowEventName>(
 export function useEventListener<E extends WindowEventName>(
   target: Window,
   event: Arrayable<E>,
-  listener: Arrayable<(this: Window, ev: WindowEventMap[E]) => any>,
+  listener: Arrayable<(this: Window, ev: WindowEventMap[E]) => void>,
   options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
 ): VoidFunction;
 
@@ -55,7 +55,7 @@ export function useEventListener<E extends WindowEventName>(
 export function useEventListener<E extends DocumentEventName>(
   target: Document,
   event: Arrayable<E>,
-  listener: Arrayable<(this: Document, ev: DocumentEventMap[E]) => any>,
+  listener: Arrayable<(this: Document, ev: DocumentEventMap[E]) => void>,
   options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
 ): VoidFunction;
 
@@ -69,7 +69,7 @@ export function useEventListener<E extends DocumentEventName>(
 export function useEventListener<E extends ElementEventName>(
   target: MaybeRefOrGetter<HTMLElement | null | undefined>,
   event: Arrayable<E>,
-  listener: Arrayable<(this: HTMLElement, ev: HTMLElementEventMap[E]) => any>,
+  listener: Arrayable<(this: HTMLElement, ev: HTMLElementEventMap[E]) => void>,
   options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
 ): VoidFunction;
 
@@ -101,6 +101,7 @@ export function useEventListener<EventType = Event>(
   options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
 ): VoidFunction;
 
+// Variadic implementation signature behind the typed overloads above; args are narrowed at runtime.
 export function useEventListener(...args: any[]) {
   let target: MaybeRefOrGetter<EventTarget> | undefined = defaultWindow;
   let _events: Arrayable<string>;
diff --git a/vue/toolkit/src/composables/browser/useEyeDropper/demo.vue b/vue/toolkit/src/composables/browser/useEyeDropper/demo.vue
index 0e51395..05ec812 100644
--- a/vue/toolkit/src/composables/browser/useEyeDropper/demo.vue
+++ b/vue/toolkit/src/composables/browser/useEyeDropper/demo.vue
@@ -34,7 +34,7 @@ async function pick() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       v-if="!isSupported"
       class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center text-sm text-amber-600 dark:text-amber-400"
@@ -44,33 +44,33 @@ async function pick() {
 
     <template v-else>
       <div
-        class="flex h-32 items-center justify-center rounded-xl border border-(--border) transition-colors duration-300"
+        class="flex h-32 items-center justify-center rounded-xl border border-border transition-colors duration-300"
         :style="{ backgroundColor: hex, color: readableText }"
       >
         <span class="font-mono text-2xl font-bold tabular-nums">{{ hex }}</span>
       </div>
 
-      <button class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer" @click="pick">
+      <button class="demo-btn-primary" @click="pick">
         <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="m2 22 1-1h3l9-9" /><path d="M3 21v-3l9-9" /><path d="m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L21 6l3 3-3 3-3-3-9 9" />
         </svg>
         Pick a color from screen
       </button>
 
-      <p v-if="error" class="text-center text-xs text-(--fg-subtle)">
+      <p v-if="error" class="text-center text-xs text-fg-subtle">
         {{ error }}
       </p>
 
       <div v-if="history.length" class="flex flex-col gap-2">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Recent</span>
+        <span class="demo-label">Recent</span>
         <div class="flex flex-wrap gap-2">
           <button
             v-for="color in history"
             :key="color"
-            class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) transition hover:border-(--border-strong) cursor-pointer"
+            class="demo-badge transition hover:border-border-strong cursor-pointer"
             @click="sRGBHex = color"
           >
-            <span class="size-3 rounded-full border border-(--border)" :style="{ backgroundColor: color }" />
+            <span class="size-3 rounded-full border border-border" :style="{ backgroundColor: color }" />
             {{ color }}
           </button>
         </div>
diff --git a/vue/toolkit/src/composables/browser/useFavicon/demo.vue b/vue/toolkit/src/composables/browser/useFavicon/demo.vue
index ef57387..d70769b 100644
--- a/vue/toolkit/src/composables/browser/useFavicon/demo.vue
+++ b/vue/toolkit/src/composables/browser/useFavicon/demo.vue
@@ -31,34 +31,34 @@ function select(preset: Preset) {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <div class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4">
+      <div class="flex items-center gap-2 rounded-lg border border-border bg-bg-inset px-3 py-2">
         <div class="flex gap-1.5">
           <span class="size-2.5 rounded-full bg-red-500/70" />
           <span class="size-2.5 rounded-full bg-amber-500/70" />
           <span class="size-2.5 rounded-full bg-emerald-500/70" />
         </div>
-        <div class="ml-2 flex flex-1 items-center gap-2 rounded-md bg-(--bg) px-2 py-1">
+        <div class="ml-2 flex flex-1 items-center gap-2 rounded-md bg-bg px-2 py-1">
           <span class="text-base leading-none">{{ presets.find(p => p.label === active)?.emoji }}</span>
-          <span class="truncate text-xs text-(--fg-muted)">My Awesome App</span>
+          <span class="truncate text-xs text-fg-muted">My Awesome App</span>
         </div>
       </div>
-      <p class="mt-2 text-center text-xs text-(--fg-subtle)">
+      <p class="mt-2 text-center text-xs text-fg-subtle">
         Look at the real browser tab — its favicon updates live.
       </p>
     </div>
 
     <div class="flex flex-col gap-2">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Choose a favicon</span>
+      <span class="demo-label">Choose a favicon</span>
       <div class="grid grid-cols-2 gap-2">
         <button
           v-for="preset in presets"
           :key="preset.label"
           class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
           :class="active === preset.label
-            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
-            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            ? 'border-transparent bg-accent text-accent-fg hover:bg-accent-hover'
+            : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
           @click="select(preset)"
         >
           <span class="text-base leading-none">{{ preset.emoji }}</span>
@@ -67,7 +67,7 @@ function select(preset: Preset) {
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg) break-all">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-xs text-fg break-all">
       favicon.value = "{{ presets.find(p => p.label === active)?.emoji }} svg"
     </div>
   </div>
diff --git a/vue/toolkit/src/composables/browser/useFileDialog/demo.vue b/vue/toolkit/src/composables/browser/useFileDialog/demo.vue
index b1e3e3b..fd27546 100644
--- a/vue/toolkit/src/composables/browser/useFileDialog/demo.vue
+++ b/vue/toolkit/src/composables/browser/useFileDialog/demo.vue
@@ -35,26 +35,26 @@ function pick() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div class="flex items-center justify-between gap-3">
-      <label class="inline-flex cursor-pointer items-center gap-2 text-sm text-(--fg-muted)">
-        <input v-model="multiple" type="checkbox" class="size-4 rounded border-(--border) accent-(--accent)">
+      <label class="inline-flex cursor-pointer items-center gap-2 text-sm text-fg-muted">
+        <input v-model="multiple" type="checkbox" class="size-4 rounded border-border accent-accent">
         Allow multiple
       </label>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-badge">
         {{ status }}
       </span>
     </div>
 
     <div class="flex gap-2">
-      <button class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer" @click="pick">
+      <button class="demo-btn-primary flex-1" @click="pick">
         <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="17 8 12 3 7 8" /><line x1="12" y1="3" x2="12" y2="15" />
         </svg>
         Choose images
       </button>
       <button
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="!selected.length"
         @click="reset"
       >
@@ -64,25 +64,25 @@ function pick() {
 
     <div
       v-if="!selected.length"
-      class="flex flex-col items-center justify-center gap-1 rounded-xl border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center"
+      class="flex flex-col items-center justify-center gap-1 rounded-xl border border-dashed border-border bg-bg-inset p-6 text-center"
     >
-      <span class="text-sm text-(--fg-muted)">No files selected</span>
-      <span class="text-xs text-(--fg-subtle)">Click “Choose images” to open the native dialog</span>
+      <span class="text-sm text-fg-muted">No files selected</span>
+      <span class="text-xs text-fg-subtle">Click “Choose images” to open the native dialog</span>
     </div>
 
     <div v-else class="flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">{{ selected.length }} file(s)</span>
-        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ formatBytes(totalBytes) }} total</span>
+        <span class="demo-label">{{ selected.length }} file(s)</span>
+        <span class="font-mono text-xs tabular-nums text-fg-muted">{{ formatBytes(totalBytes) }} total</span>
       </div>
       <ul class="flex max-h-44 flex-col gap-1.5 overflow-auto">
         <li
           v-for="file in selected"
           :key="file.name + file.lastModified"
-          class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2"
+          class="flex items-center justify-between gap-3 rounded-lg border border-border bg-bg-elevated px-3 py-2"
         >
-          <span class="truncate text-sm text-(--fg)">{{ file.name }}</span>
-          <span class="shrink-0 font-mono text-xs tabular-nums text-(--fg-subtle)">{{ formatBytes(file.size) }}</span>
+          <span class="truncate text-sm text-fg">{{ file.name }}</span>
+          <span class="shrink-0 font-mono text-xs tabular-nums text-fg-subtle">{{ formatBytes(file.size) }}</span>
         </li>
       </ul>
     </div>
diff --git a/vue/toolkit/src/composables/browser/useFileSystemAccess/demo.vue b/vue/toolkit/src/composables/browser/useFileSystemAccess/demo.vue
index 29a100f..8f64a49 100644
--- a/vue/toolkit/src/composables/browser/useFileSystemAccess/demo.vue
+++ b/vue/toolkit/src/composables/browser/useFileSystemAccess/demo.vue
@@ -47,7 +47,7 @@ async function newFile() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div
       v-if="!isSupported"
       class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center text-sm text-amber-600 dark:text-amber-400"
@@ -57,28 +57,28 @@ async function newFile() {
 
     <template v-else>
       <div class="flex flex-wrap gap-2">
-        <button class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer" @click="open()">
+        <button class="demo-btn" @click="open()">
           Open…
         </button>
-        <button class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer" @click="newFile">
+        <button class="demo-btn" @click="newFile">
           New…
         </button>
-        <button class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100" :disabled="data === undefined" @click="save()">
+        <button class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100" :disabled="data === undefined" @click="save()">
           Save
         </button>
-        <button class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100" :disabled="data === undefined" @click="saveAs()">
+        <button class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100" :disabled="data === undefined" @click="saveAs()">
           Save As…
         </button>
       </div>
 
       <div v-if="fileName" class="flex flex-wrap items-center gap-2">
-        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="demo-badge">
           {{ fileName }}
         </span>
-        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="demo-badge">
           {{ fileMIME || 'text/plain' }}
         </span>
-        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-mono tabular-nums text-(--fg-muted)">
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-border bg-bg-inset px-2 py-0.5 text-xs font-mono tabular-nums text-fg-muted">
           {{ formatBytes(fileSize) }}
         </span>
       </div>
@@ -88,19 +88,19 @@ async function newFile() {
         v-model="text"
         rows="6"
         spellcheck="false"
-        class="w-full resize-none rounded-lg border border-(--border) bg-(--bg) px-3 py-2 font-mono text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input resize-none font-mono"
         placeholder="File contents…"
       />
 
       <div
         v-else
-        class="flex flex-col items-center justify-center gap-1 rounded-xl border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center"
+        class="flex flex-col items-center justify-center gap-1 rounded-xl border border-dashed border-border bg-bg-inset p-6 text-center"
       >
-        <span class="text-sm text-(--fg-muted)">No file open</span>
-        <span class="text-xs text-(--fg-subtle)">Open an existing file or create a new one, edit it, then save back to disk.</span>
+        <span class="text-sm text-fg-muted">No file open</span>
+        <span class="text-xs text-fg-subtle">Open an existing file or create a new one, edit it, then save back to disk.</span>
       </div>
 
-      <p v-if="lastError" class="text-center text-xs text-(--fg-subtle)">
+      <p v-if="lastError" class="text-center text-xs text-fg-subtle">
         {{ lastError }}
       </p>
     </template>
diff --git a/vue/toolkit/src/composables/browser/useFullscreen/demo.vue b/vue/toolkit/src/composables/browser/useFullscreen/demo.vue
index 2e8bd21..4146a76 100644
--- a/vue/toolkit/src/composables/browser/useFullscreen/demo.vue
+++ b/vue/toolkit/src/composables/browser/useFullscreen/demo.vue
@@ -7,7 +7,7 @@ const { isSupported, isFullscreen, enter, exit, toggle } = useFullscreen(target)
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       v-if="!isSupported"
       class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center text-sm text-amber-600 dark:text-amber-400"
@@ -17,27 +17,27 @@ const { isSupported, isFullscreen, enter, exit, toggle } = useFullscreen(target)
 
     <div
       ref="target"
-      class="relative flex h-44 flex-col items-center justify-center gap-3 overflow-hidden rounded-xl border border-(--border) bg-(--bg-elevated) transition-colors"
-      :class="isFullscreen && 'bg-(--bg-inset)'"
+      class="demo-card relative flex h-44 flex-col items-center justify-center gap-3 overflow-hidden transition-colors"
+      :class="isFullscreen && 'bg-bg-inset'"
     >
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
         :class="isFullscreen
           ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          : 'border-border bg-bg-inset text-fg-muted'"
       >
-        <span class="size-1.5 rounded-full" :class="isFullscreen ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+        <span class="size-1.5 rounded-full" :class="isFullscreen ? 'bg-emerald-500' : 'bg-fg-subtle'" />
         {{ isFullscreen ? 'Fullscreen' : 'Windowed' }}
       </span>
 
-      <p class="px-6 text-center text-sm text-(--fg-muted)">
+      <p class="px-6 text-center text-sm text-fg-muted">
         This panel becomes the fullscreen target. Press
-        <kbd class="rounded border border-(--border) bg-(--bg) px-1.5 py-0.5 font-mono text-xs text-(--fg)">Esc</kbd>
+        <kbd class="rounded border border-border bg-bg px-1.5 py-0.5 font-mono text-xs text-fg">Esc</kbd>
         to leave.
       </p>
 
       <button
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="!isSupported"
         @click="toggle"
       >
@@ -55,14 +55,14 @@ const { isSupported, isFullscreen, enter, exit, toggle } = useFullscreen(target)
 
     <div class="flex gap-2">
       <button
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="!isSupported || isFullscreen"
         @click="enter"
       >
         Enter
       </button>
       <button
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="!isSupported || !isFullscreen"
         @click="exit"
       >
diff --git a/vue/toolkit/src/composables/browser/useFullscreen/index.ts b/vue/toolkit/src/composables/browser/useFullscreen/index.ts
index b7dfd8b..24d8442 100644
--- a/vue/toolkit/src/composables/browser/useFullscreen/index.ts
+++ b/vue/toolkit/src/composables/browser/useFullscreen/index.ts
@@ -146,7 +146,7 @@ export function useFullscreen(
 
   const isCurrentElementFullScreen = (): boolean => {
     if (fullscreenElementMethod)
-      return (document as any)?.[fullscreenElementMethod] === targetRef.value;
+      return (document as Record<string, unknown> | undefined)?.[fullscreenElementMethod] === targetRef.value;
     return false;
   };
 
@@ -155,12 +155,12 @@ export function useFullscreen(
     if (!flag)
       return false;
 
-    const docFlag = document && (document as any)[flag];
+    const docFlag = document && (document as unknown as Record<string, unknown>)[flag];
     if (docFlag !== null && docFlag !== undefined)
       return Boolean(docFlag);
 
     // Fallback for WebKit / iOS Safari, where the flag lives on the element itself.
-    const elFlag = (targetRef.value as any)?.[flag];
+    const elFlag = (targetRef.value as unknown as Record<string, unknown> | null | undefined)?.[flag];
     if (elFlag !== null && elFlag !== undefined)
       return Boolean(elFlag);
 
@@ -173,13 +173,15 @@ export function useFullscreen(
 
     const method = exitMethod.value;
     if (method) {
-      if (typeof (document as any)?.[method] === 'function')
-        await (document as any)[method]();
+      const docMethod = (document as unknown as Record<string, unknown> | undefined)?.[method];
+      if (isFunction(docMethod))
+        await docMethod.call(document);
       else {
         // Fallback for Safari iOS, where exit lives on the element.
-        const el = targetRef.value as any;
-        if (isFunction(el?.[method]))
-          await el[method]();
+        const el = targetRef.value as unknown as Record<string, unknown> | null | undefined;
+        const elMethod = el?.[method];
+        if (isFunction(elMethod))
+          await elMethod.call(targetRef.value);
       }
     }
 
@@ -193,10 +195,11 @@ export function useFullscreen(
     if (isElementFullScreen())
       await exit();
 
-    const el = targetRef.value as any;
+    const el = targetRef.value as unknown as Record<string, unknown> | null | undefined;
     const method = requestMethod.value;
-    if (method && isFunction(el?.[method])) {
-      await el[method]();
+    const elMethod = method ? el?.[method] : undefined;
+    if (isFunction(elMethod)) {
+      await elMethod.call(targetRef.value);
       isFullscreen.value = true;
     }
   }
diff --git a/vue/toolkit/src/composables/browser/useImage/demo.vue b/vue/toolkit/src/composables/browser/useImage/demo.vue
index d73c318..8a8d0aa 100644
--- a/vue/toolkit/src/composables/browser/useImage/demo.vue
+++ b/vue/toolkit/src/composables/browser/useImage/demo.vue
@@ -18,7 +18,7 @@ const { isLoading, isReady, error, state, execute } = useImage(
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex flex-wrap gap-2">
       <button
         v-for="(sample, index) in samples"
@@ -26,15 +26,15 @@ const { isLoading, isReady, error, state, execute } = useImage(
         type="button"
         class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
         :class="current === index
-          ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
-          : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          ? 'border-transparent bg-accent text-accent-fg hover:bg-accent-hover'
+          : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
         @click="current = index"
       >
         {{ sample.label }}
       </button>
     </div>
 
-    <div class="relative aspect-[8/5] w-full overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset)">
+    <div class="relative aspect-[8/5] w-full overflow-hidden rounded-xl border border-border bg-bg-inset">
       <Transition
         enter-active-class="transition duration-300"
         enter-from-class="opacity-0 scale-[1.02]"
@@ -61,8 +61,8 @@ const { isLoading, isReady, error, state, execute } = useImage(
           v-else
           class="absolute inset-0 flex flex-col items-center justify-center gap-3"
         >
-          <span class="h-7 w-7 animate-spin rounded-full border-2 border-(--border-strong) border-t-(--accent)" />
-          <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          <span class="h-7 w-7 animate-spin rounded-full border-2 border-border-strong border-t-accent" />
+          <p class="demo-label">
             Loading…
           </p>
         </div>
@@ -83,7 +83,7 @@ const { isLoading, isReady, error, state, execute } = useImage(
         </span>
         <span
           v-if="isReady && state"
-          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums"
+          class="demo-badge tabular-nums"
         >
           {{ state.naturalWidth }}×{{ state.naturalHeight }}
         </span>
@@ -91,7 +91,7 @@ const { isLoading, isReady, error, state, execute } = useImage(
 
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="isLoading"
         @click="execute()"
       >
diff --git a/vue/toolkit/src/composables/browser/useImage/index.ts b/vue/toolkit/src/composables/browser/useImage/index.ts
index 487c875..64f0ddf 100644
--- a/vue/toolkit/src/composables/browser/useImage/index.ts
+++ b/vue/toolkit/src/composables/browser/useImage/index.ts
@@ -40,7 +40,7 @@ export interface UseImageOptions {
 export interface UseImageAsyncStateOptions
   extends UseAsyncStateOptions<true, HTMLImageElement | undefined>, ConfigurableWindow {}
 
-export type UseImageReturn = UseAsyncStateReturn<HTMLImageElement | undefined, any[], true>;
+export type UseImageReturn = UseAsyncStateReturn<HTMLImageElement | undefined, [], true>;
 
 interface LoadImageContext {
   window?: Window;
diff --git a/vue/toolkit/src/composables/browser/useLocalFonts/demo.vue b/vue/toolkit/src/composables/browser/useLocalFonts/demo.vue
index 3000cfa..17e146b 100644
--- a/vue/toolkit/src/composables/browser/useLocalFonts/demo.vue
+++ b/vue/toolkit/src/composables/browser/useLocalFonts/demo.vue
@@ -34,14 +34,14 @@ function familyStyle(name: string) {
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div class="flex items-center justify-between gap-3">
-      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <p class="demo-label">
         Local Font Access
       </p>
       <span
         v-if="fonts.length"
-        class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums"
+        class="demo-badge tabular-nums"
       >
         {{ fonts.length }} faces · {{ familyCount }} families
       </span>
@@ -57,7 +57,7 @@ function familyStyle(name: string) {
     <template v-else>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="loading"
         @click="pickFonts"
       >
@@ -76,28 +76,28 @@ function familyStyle(name: string) {
           v-model="filter"
           type="search"
           placeholder="Filter by name…"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="demo-input"
         >
 
-        <ul class="max-h-56 divide-y divide-(--border) overflow-y-auto rounded-xl border border-(--border) bg-(--bg-elevated)">
+        <ul class="demo-card max-h-56 divide-y divide-border overflow-y-auto">
           <li
             v-for="font in filtered"
             :key="font.postscriptName"
             class="flex items-baseline justify-between gap-3 px-3 py-2"
           >
             <span
-              class="truncate text-base text-(--fg)"
+              class="truncate text-base text-fg"
               :style="familyStyle(font.fullName)"
             >
               {{ font.fullName }}
             </span>
-            <span class="shrink-0 font-mono text-xs text-(--fg-subtle)">
+            <span class="shrink-0 font-mono text-xs text-fg-subtle">
               {{ font.style }}
             </span>
           </li>
           <li
             v-if="!filtered.length"
-            class="px-3 py-6 text-center text-sm text-(--fg-subtle)"
+            class="px-3 py-6 text-center text-sm text-fg-subtle"
           >
             No fonts match "{{ filter }}"
           </li>
@@ -106,7 +106,7 @@ function familyStyle(name: string) {
 
       <p
         v-else-if="!error && !loading"
-        class="rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-6 text-center text-sm text-(--fg-subtle)"
+        class="rounded-lg border border-border bg-bg-inset px-3 py-6 text-center text-sm text-fg-subtle"
       >
         Click above to grant the <code class="font-mono">local-fonts</code> permission and list your fonts.
       </p>
diff --git a/vue/toolkit/src/composables/browser/useMediaQuery/demo.vue b/vue/toolkit/src/composables/browser/useMediaQuery/demo.vue
index 0915dbf..33aa3ce 100644
--- a/vue/toolkit/src/composables/browser/useMediaQuery/demo.vue
+++ b/vue/toolkit/src/composables/browser/useMediaQuery/demo.vue
@@ -22,35 +22,35 @@ const queries = [
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 text-center">
-      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+  <div class="demo-stack max-w-md">
+    <div class="demo-card p-4 text-center">
+      <p class="demo-label">
         Current layout
       </p>
-      <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">
+      <p class="demo-stat mt-1 text-3xl">
         {{ breakpoint ? 'desktop' : isMedium ? 'tablet' : 'mobile' }}
       </p>
-      <p class="mt-1 text-sm text-(--fg-muted)">
+      <p class="mt-1 text-sm text-fg-muted">
         Resize the window to watch these queries flip live.
       </p>
     </div>
 
-    <ul class="divide-y divide-(--border) rounded-xl border border-(--border) bg-(--bg-elevated)">
+    <ul class="demo-card divide-y divide-border">
       <li
         v-for="query in queries"
         :key="query.label"
         class="flex items-center justify-between gap-3 px-3 py-2.5"
       >
-        <code class="font-mono text-sm text-(--fg)">{{ query.label }}</code>
+        <code class="font-mono text-sm text-fg">{{ query.label }}</code>
         <span
           class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
           :class="query.match.value
             ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-            : 'border-(--border) bg-(--bg-inset) text-(--fg-subtle)'"
+            : 'border-border bg-bg-inset text-fg-subtle'"
         >
           <span
             class="h-1.5 w-1.5 rounded-full"
-            :class="query.match.value ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+            :class="query.match.value ? 'bg-emerald-500' : 'bg-border-strong'"
           />
           {{ query.match.value ? 'matches' : 'no match' }}
         </span>
diff --git a/vue/toolkit/src/composables/browser/useMediaQuery/index.ts b/vue/toolkit/src/composables/browser/useMediaQuery/index.ts
index 6c5304f..80c7091 100644
--- a/vue/toolkit/src/composables/browser/useMediaQuery/index.ts
+++ b/vue/toolkit/src/composables/browser/useMediaQuery/index.ts
@@ -5,6 +5,7 @@ import { defaultWindow } from '@/types';
 import type { ConfigurableWindow } from '@/types';
 import { useSupported } from '@/composables/utilities/useSupported';
 import { useEventListener } from '@/composables/browser/useEventListener';
+import { pxValue } from '@robonen/platform/browsers';
 
 export interface UseMediaQueryOptions extends ConfigurableWindow {
   /**
@@ -20,22 +21,6 @@ export interface UseMediaQueryOptions extends ConfigurableWindow {
   ssrWidth?: number;
 }
 
-/**
- * Convert a CSS length token (e.g. `"1024px"`, `"48em"`, `"30rem"`) to pixels.
- * Falls back to treating `em`/`rem` as the conventional 16px root size.
- */
-function pxValue(value: string): number {
-  const number = Number.parseFloat(value);
-
-  if (Number.isNaN(number))
-    return Number.NaN;
-
-  if (/(?:em|rem)\s*$/i.test(value))
-    return number * 16;
-
-  return number;
-}
-
 /**
  * Best-effort evaluation of `min-width` / `max-width` media queries against a
  * known viewport width, for SSR. Comma-separated queries are OR-combined and
diff --git a/vue/toolkit/src/composables/browser/useObjectUrl/demo.vue b/vue/toolkit/src/composables/browser/useObjectUrl/demo.vue
index be76b54..389eb5e 100644
--- a/vue/toolkit/src/composables/browser/useObjectUrl/demo.vue
+++ b/vue/toolkit/src/composables/browser/useObjectUrl/demo.vue
@@ -44,19 +44,19 @@ function generateSample() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <label
       class="flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-6 text-center transition"
       :class="dragging
-        ? 'border-(--accent) bg-(--accent-subtle)'
-        : 'border-(--border) bg-(--bg-inset) hover:border-(--border-strong)'"
+        ? 'border-accent bg-accent-subtle'
+        : 'border-border bg-bg-inset hover:border-border-strong'"
       @dragover.prevent="dragging = true"
       @dragleave.prevent="dragging = false"
       @drop.prevent="onDrop"
     >
       <span class="text-2xl">📎</span>
-      <span class="text-sm font-medium text-(--fg)">Drop a file or click to choose</span>
-      <span class="text-xs text-(--fg-subtle)">An object URL is created instantly</span>
+      <span class="text-sm font-medium text-fg">Drop a file or click to choose</span>
+      <span class="text-xs text-fg-subtle">An object URL is created instantly</span>
       <input
         type="file"
         class="hidden"
@@ -67,14 +67,14 @@ function generateSample() {
     <div class="flex gap-2">
       <button
         type="button"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn flex-1"
         @click="generateSample"
       >
         Use sample image
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="!file"
         @click="clear"
       >
@@ -84,26 +84,26 @@ function generateSample() {
 
     <div
       v-if="file"
-      class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4"
+      class="demo-card flex flex-col gap-3 p-4"
     >
       <img
         v-if="isImage && url"
         :src="url"
         alt="Selected file preview"
-        class="mx-auto max-h-40 rounded-lg border border-(--border) object-contain"
+        class="mx-auto max-h-40 rounded-lg border border-border object-contain"
       >
       <div class="flex items-center justify-between gap-3 text-sm">
-        <span class="truncate font-medium text-(--fg)">{{ file.name }}</span>
-        <span class="shrink-0 font-mono text-xs text-(--fg-muted) tabular-nums">{{ sizeLabel }}</span>
+        <span class="truncate font-medium text-fg">{{ file.name }}</span>
+        <span class="shrink-0 font-mono text-xs text-fg-muted tabular-nums">{{ sizeLabel }}</span>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg) break-all">
+      <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-xs text-fg break-all">
         {{ url }}
       </div>
     </div>
 
     <p
       v-else
-      class="rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-6 text-center text-sm text-(--fg-subtle)"
+      class="rounded-lg border border-border bg-bg-inset px-3 py-6 text-center text-sm text-fg-subtle"
     >
       No source — the URL ref is <code class="font-mono">undefined</code>
     </p>
diff --git a/vue/toolkit/src/composables/browser/useOtpCredentials/demo.vue b/vue/toolkit/src/composables/browser/useOtpCredentials/demo.vue
index 3046803..bd73439 100644
--- a/vue/toolkit/src/composables/browser/useOtpCredentials/demo.vue
+++ b/vue/toolkit/src/composables/browser/useOtpCredentials/demo.vue
@@ -41,9 +41,9 @@ function simulate() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between gap-2">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">WebOTP</span>
+      <span class="demo-label">WebOTP</span>
       <span
         class="rounded-full px-2 py-0.5 text-xs font-medium"
         :class="isSupported
@@ -61,27 +61,27 @@ function simulate() {
       autocomplete="one-time-code"
       maxlength="6"
       placeholder="••••••"
-      class="w-full rounded-xl border border-(--border) bg-(--bg-inset) px-4 py-3 text-center font-mono text-2xl tracking-[0.4em] tabular-nums text-(--fg) outline-none transition focus:border-(--accent)"
+      class="w-full rounded-xl border border-border bg-bg-inset px-4 py-3 text-center font-mono text-2xl tracking-[0.4em] tabular-nums text-fg outline-none transition focus:border-accent"
       @input="onInput"
     >
 
     <div class="flex gap-2">
       <button
         v-if="!isReceiving"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg bg-accent px-3 py-1.5 text-sm font-medium text-accent-fg transition hover:bg-accent-hover active:scale-[0.98] cursor-pointer"
         @click="listen"
       >
         Listen for code
       </button>
       <button
         v-else
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) px-3 py-1.5 text-sm font-medium text-(--fg-muted) transition hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm font-medium text-fg-muted transition hover:border-border-strong active:scale-[0.98] cursor-pointer"
         @click="abort()"
       >
         Cancel
       </button>
       <button
-        class="inline-flex items-center justify-center rounded-lg border border-(--border) px-3 py-1.5 text-sm font-medium text-(--fg-muted) transition hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="inline-flex items-center justify-center rounded-lg border border-border px-3 py-1.5 text-sm font-medium text-fg-muted transition hover:border-border-strong active:scale-[0.98] cursor-pointer"
         @click="simulate"
       >
         Simulate
@@ -92,13 +92,13 @@ function simulate() {
       <span
         class="size-2 rounded-full"
         :class="{
-          'bg-(--fg-subtle)': status.tone === 'idle',
+          'bg-fg-subtle': status.tone === 'idle',
           'animate-pulse bg-amber-500': status.tone === 'pending',
           'bg-emerald-500': status.tone === 'ok',
           'bg-red-500': status.tone === 'error',
         }"
       />
-      <span class="text-(--fg-muted)">{{ status.label }}</span>
+      <span class="text-fg-muted">{{ status.label }}</span>
     </div>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/browser/usePermission/demo.vue b/vue/toolkit/src/composables/browser/usePermission/demo.vue
index 23651a7..b7c58da 100644
--- a/vue/toolkit/src/composables/browser/usePermission/demo.vue
+++ b/vue/toolkit/src/composables/browser/usePermission/demo.vue
@@ -32,13 +32,13 @@ const meta = computed(() => {
     case 'prompt':
       return { label: 'prompt', dot: 'bg-amber-500', text: 'text-amber-600 dark:text-amber-400', ring: 'border-amber-500/30 bg-amber-500/10' };
     default:
-      return { label: 'unknown', dot: 'bg-(--border-strong)', text: 'text-(--fg-subtle)', ring: 'border-(--border) bg-(--bg-inset)' };
+      return { label: 'unknown', dot: 'bg-border-strong', text: 'text-fg-subtle', ring: 'border-border bg-bg-inset' };
   }
 });
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       v-if="!isSupported"
       class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300"
@@ -48,12 +48,12 @@ const meta = computed(() => {
 
     <template v-else>
       <div class="flex flex-col gap-1.5">
-        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <label class="demo-label">
           Permission
         </label>
         <select
           v-model="selected"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="w-full rounded-lg border border-border bg-bg px-3 py-2 text-sm text-fg transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring"
         >
           <option v-for="name in names" :key="name" :value="name">
             {{ name }}
@@ -61,19 +61,19 @@ const meta = computed(() => {
         </select>
       </div>
 
-      <ul class="divide-y divide-(--border) rounded-xl border border-(--border) bg-(--bg-elevated)">
+      <ul class="demo-card divide-y divide-border">
         <li
           v-for="perm in permissions"
           :key="perm.name"
           class="flex items-center justify-between gap-3 px-3 py-2.5"
         >
-          <code class="font-mono text-sm text-(--fg)">{{ perm.name }}</code>
-          <span class="font-mono text-xs text-(--fg-muted)">{{ perm.state.value ?? 'unknown' }}</span>
+          <code class="font-mono text-sm text-fg">{{ perm.name }}</code>
+          <span class="font-mono text-xs text-fg-muted">{{ perm.state.value ?? 'unknown' }}</span>
         </li>
       </ul>
 
-      <div class="flex flex-col items-center gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-5">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <div class="demo-card flex flex-col items-center gap-3 p-5">
+        <span class="demo-label">
           {{ selected }}
         </span>
         <span
@@ -87,13 +87,13 @@ const meta = computed(() => {
 
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary"
         @click="active.query()"
       >
         Re-check "{{ selected }}"
       </button>
 
-      <p class="text-center text-xs text-(--fg-subtle)">
+      <p class="text-center text-xs text-fg-subtle">
         Status updates live if you change a permission in your browser settings.
       </p>
     </template>
diff --git a/vue/toolkit/src/composables/browser/usePreferredColorScheme/demo.vue b/vue/toolkit/src/composables/browser/usePreferredColorScheme/demo.vue
index 7106197..190e1d0 100644
--- a/vue/toolkit/src/composables/browser/usePreferredColorScheme/demo.vue
+++ b/vue/toolkit/src/composables/browser/usePreferredColorScheme/demo.vue
@@ -22,12 +22,12 @@ const previewClass = computed(() =>
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Preferred color scheme
       </span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-badge">
         <span class="size-1.5 rounded-full bg-emerald-500" />
         live
       </span>
@@ -39,22 +39,22 @@ const previewClass = computed(() =>
         :key="option.value"
         class="flex items-center gap-3 rounded-lg border px-3 py-2.5 transition"
         :class="scheme === option.value
-          ? 'border-(--accent) bg-(--accent-subtle)'
-          : 'border-(--border) bg-(--bg-elevated)'"
+          ? 'border-accent bg-accent-subtle'
+          : 'border-border bg-bg-elevated'"
       >
         <span class="text-lg leading-none">{{ option.icon }}</span>
         <span class="flex flex-1 flex-col">
           <span
             class="text-sm font-medium"
-            :class="scheme === option.value ? 'text-(--accent-text)' : 'text-(--fg)'"
+            :class="scheme === option.value ? 'text-accent-text' : 'text-fg'"
           >
             {{ option.label }}
           </span>
-          <span class="font-mono text-xs text-(--fg-subtle)">{{ option.hint }}</span>
+          <span class="font-mono text-xs text-fg-subtle">{{ option.hint }}</span>
         </span>
         <span
           v-if="scheme === option.value"
-          class="text-(--accent-text)"
+          class="text-accent-text"
           aria-hidden="true"
         >✓</span>
       </li>
@@ -73,7 +73,7 @@ const previewClass = computed(() =>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Read-only: change your OS appearance setting to see this update instantly.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/browser/usePreferredContrast/demo.vue b/vue/toolkit/src/composables/browser/usePreferredContrast/demo.vue
index 637cea6..853ee34 100644
--- a/vue/toolkit/src/composables/browser/usePreferredContrast/demo.vue
+++ b/vue/toolkit/src/composables/browser/usePreferredContrast/demo.vue
@@ -17,22 +17,22 @@ const active = computed(() => levels.find(l => l.value === contrast.value));
 const cardClass = computed(() => {
   switch (contrast.value) {
     case 'more':
-      return 'border-(--border-strong) bg-(--bg-inset)';
+      return 'border-border-strong bg-bg-inset';
     case 'less':
-      return 'border-(--border) bg-(--bg-subtle) opacity-90';
+      return 'border-border bg-bg-subtle opacity-90';
     default:
-      return 'border-(--border) bg-(--bg-elevated)';
+      return 'border-border bg-bg-elevated';
   }
 });
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Preferred contrast
       </span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-badge">
         {{ contrast }}
       </span>
     </div>
@@ -43,30 +43,30 @@ const cardClass = computed(() => {
         :key="level.value"
         class="flex flex-col gap-1 rounded-lg border px-3 py-2.5 transition"
         :class="contrast === level.value
-          ? 'border-(--accent) bg-(--accent-subtle)'
-          : 'border-(--border) bg-(--bg-elevated)'"
+          ? 'border-accent bg-accent-subtle'
+          : 'border-border bg-bg-elevated'"
       >
         <span
           class="text-sm font-medium"
-          :class="contrast === level.value ? 'text-(--accent-text)' : 'text-(--fg)'"
+          :class="contrast === level.value ? 'text-accent-text' : 'text-fg'"
         >
           {{ level.label }}
         </span>
-        <span class="text-xs leading-snug text-(--fg-muted)">{{ level.desc }}</span>
+        <span class="text-xs leading-snug text-fg-muted">{{ level.desc }}</span>
       </div>
     </div>
 
     <div class="rounded-xl border p-4 transition-colors" :class="cardClass">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Adaptive surface
       </span>
-      <p class="mt-1 text-sm text-(--fg)">
+      <p class="mt-1 text-sm text-fg">
         This card adjusts its borders and fill to match the
-        <span class="font-mono text-(--fg-muted)">{{ active?.query }}</span> level.
+        <span class="font-mono text-fg-muted">{{ active?.query }}</span> level.
       </p>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Read-only: toggle your OS accessibility "increase / reduce contrast" setting to update.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/browser/usePreferredDark/demo.vue b/vue/toolkit/src/composables/browser/usePreferredDark/demo.vue
index c190cd2..9e58c79 100644
--- a/vue/toolkit/src/composables/browser/usePreferredDark/demo.vue
+++ b/vue/toolkit/src/composables/browser/usePreferredDark/demo.vue
@@ -8,9 +8,9 @@ const label = computed(() => (isDark.value ? 'Dark' : 'Light'));
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         prefers-color-scheme: dark
       </span>
       <span
@@ -25,7 +25,7 @@ const label = computed(() => (isDark.value ? 'Dark' : 'Light'));
 
     <!-- A miniature sky scene that flips between day and night. -->
     <div
-      class="relative flex h-40 items-end overflow-hidden rounded-xl border border-(--border) p-4 transition-colors duration-500"
+      class="relative flex h-40 items-end overflow-hidden rounded-xl border border-border p-4 transition-colors duration-500"
       :class="isDark
         ? 'bg-gradient-to-b from-slate-900 to-slate-700'
         : 'bg-gradient-to-b from-sky-300 to-sky-100'"
@@ -60,12 +60,12 @@ const label = computed(() => (isDark.value ? 'Dark' : 'Light'));
       </span>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
       const isDark = usePreferredDark()
-      <span class="text-(--fg-subtle)"> // </span>{{ isDark }}
+      <span class="text-fg-subtle"> // </span>{{ isDark }}
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Read-only: switch your OS to dark/light mode to watch the scene change.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/browser/usePreferredLanguages/demo.vue b/vue/toolkit/src/composables/browser/usePreferredLanguages/demo.vue
index 28820be..414bb4f 100644
--- a/vue/toolkit/src/composables/browser/usePreferredLanguages/demo.vue
+++ b/vue/toolkit/src/composables/browser/usePreferredLanguages/demo.vue
@@ -30,25 +30,25 @@ const primary = computed(() => languages.value[0] ?? 'en');
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         navigator.languages
       </span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-badge">
         {{ languages.length }} {{ languages.length === 1 ? 'locale' : 'locales' }}
       </span>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+    <div class="demo-card p-4">
+      <span class="demo-label">
         Primary language
       </span>
       <div class="mt-1 flex items-center gap-2.5">
         <span class="text-2xl leading-none">{{ flagOf(primary) }}</span>
         <span class="flex flex-col">
-          <span class="text-base font-semibold text-(--fg)">{{ nameOf(primary) }}</span>
-          <span class="font-mono text-xs text-(--fg-subtle)">{{ primary }}</span>
+          <span class="text-base font-semibold text-fg">{{ nameOf(primary) }}</span>
+          <span class="font-mono text-xs text-fg-subtle">{{ primary }}</span>
         </span>
       </div>
     </div>
@@ -57,26 +57,26 @@ const primary = computed(() => languages.value[0] ?? 'en');
       <li
         v-for="(lang, index) in languages"
         :key="`${lang}-${index}`"
-        class="flex items-center gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2"
+        class="flex items-center gap-3 rounded-lg border border-border bg-bg-elevated px-3 py-2"
       >
-        <span class="w-5 text-center font-mono text-xs text-(--fg-subtle) tabular-nums">
+        <span class="w-5 text-center font-mono text-xs text-fg-subtle tabular-nums">
           {{ index + 1 }}
         </span>
         <span class="text-lg leading-none">{{ flagOf(lang) }}</span>
         <span class="flex flex-1 flex-col">
-          <span class="text-sm font-medium text-(--fg)">{{ nameOf(lang) }}</span>
-          <span class="font-mono text-xs text-(--fg-subtle)">{{ lang }}</span>
+          <span class="text-sm font-medium text-fg">{{ nameOf(lang) }}</span>
+          <span class="font-mono text-xs text-fg-subtle">{{ lang }}</span>
         </span>
         <span
           v-if="index === 0"
-          class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+          class="inline-flex items-center rounded-md border border-border bg-bg-inset px-2 py-0.5 text-xs font-medium text-fg-muted"
         >
           preferred
         </span>
       </li>
     </ol>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Read-only: updates automatically on the browser's <span class="font-mono">languagechange</span> event.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/browser/usePreferredReducedMotion/demo.vue b/vue/toolkit/src/composables/browser/usePreferredReducedMotion/demo.vue
index 3324d2d..7af8a8a 100644
--- a/vue/toolkit/src/composables/browser/usePreferredReducedMotion/demo.vue
+++ b/vue/toolkit/src/composables/browser/usePreferredReducedMotion/demo.vue
@@ -12,9 +12,9 @@ const duration = computed(() => (reduced.value ? 0 : 1.2));
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         prefers-reduced-motion
       </span>
       <span
@@ -28,14 +28,14 @@ const duration = computed(() => (reduced.value ? 0 : 1.2));
     </div>
 
     <!-- Animated demo box: the orbiting dot pauses when motion is reduced. -->
-    <div class="flex h-40 items-center justify-center rounded-xl border border-(--border) bg-(--bg-inset)">
+    <div class="flex h-40 items-center justify-center rounded-xl border border-border bg-bg-inset">
       <div class="relative size-24">
-        <div class="absolute inset-0 rounded-full border-2 border-dashed border-(--border-strong)" />
+        <div class="absolute inset-0 rounded-full border-2 border-dashed border-border-strong" />
         <div
           class="orbit absolute left-1/2 top-1/2 size-24"
           :style="{ animationDuration: `${duration}s`, animationPlayState: reduced ? 'paused' : 'running' }"
         >
-          <span class="absolute -left-2 -top-2 size-4 rounded-full bg-(--accent) shadow-lg" />
+          <span class="absolute -left-2 -top-2 size-4 rounded-full bg-accent shadow-lg" />
         </div>
         <div class="absolute inset-0 flex items-center justify-center">
           <span class="text-2xl">{{ reduced ? '⏸' : '🎞️' }}</span>
@@ -43,24 +43,24 @@ const duration = computed(() => (reduced.value ? 0 : 1.2));
       </div>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+    <div class="demo-card p-4">
+      <span class="demo-label">
         Derived setting
       </span>
       <div class="mt-1 flex items-baseline gap-2">
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+        <span class="demo-stat text-3xl">
           {{ reduced ? 0 : 1200 }}
         </span>
-        <span class="text-sm text-(--fg-muted)">ms transition</span>
+        <span class="text-sm text-fg-muted">ms transition</span>
       </div>
-      <p class="mt-2 text-sm text-(--fg-muted)">
+      <p class="mt-2 text-sm text-fg-muted">
         {{ reduced
           ? 'Reduced motion requested — animations are disabled.'
           : 'Full motion — animations run at normal speed.' }}
       </p>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Read-only: enable "Reduce motion" in your OS accessibility settings to pause the orbit.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/browser/usePreferredReducedTransparency/demo.vue b/vue/toolkit/src/composables/browser/usePreferredReducedTransparency/demo.vue
index 3924f18..9406a91 100644
--- a/vue/toolkit/src/composables/browser/usePreferredReducedTransparency/demo.vue
+++ b/vue/toolkit/src/composables/browser/usePreferredReducedTransparency/demo.vue
@@ -8,9 +8,9 @@ const isReduced = computed(() => transparency.value === 'reduce');
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         prefers-reduced-transparency
       </span>
       <span
@@ -28,23 +28,23 @@ const isReduced = computed(() => transparency.value === 'reduce');
     </div>
 
     <!-- Live preview: a frosted glass panel that flattens when reduce is preferred -->
-    <div class="relative overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) p-4">
+    <div class="relative overflow-hidden rounded-xl border border-border bg-bg-inset p-4">
       <div
-        class="pointer-events-none absolute -left-6 -top-8 size-28 rounded-full bg-(--accent) opacity-60 blur-xl"
+        class="pointer-events-none absolute -left-6 -top-8 size-28 rounded-full bg-accent opacity-60 blur-xl"
       />
       <div
         class="pointer-events-none absolute -bottom-10 right-2 size-24 rounded-full bg-sky-500 opacity-50 blur-xl"
       />
       <div
-        class="relative rounded-lg border border-(--border) p-4 transition"
+        class="relative rounded-lg border border-border p-4 transition"
         :class="isReduced
-          ? 'bg-(--bg-elevated)'
-          : 'bg-(--bg-elevated)/60 backdrop-blur-md'"
+          ? 'bg-bg-elevated'
+          : 'bg-bg-elevated/60 backdrop-blur-md'"
       >
-        <p class="text-sm font-medium text-(--fg)">
+        <p class="text-sm font-medium text-fg">
           Glass card
         </p>
-        <p class="mt-1 text-sm text-(--fg-muted)">
+        <p class="mt-1 text-sm text-fg-muted">
           {{ isReduced
             ? 'Translucency removed for clarity.'
             : 'Background blurs through the panel.' }}
@@ -52,8 +52,8 @@ const isReduced = computed(() => transparency.value === 'reduce');
       </div>
     </div>
 
-    <p class="text-xs leading-relaxed text-(--fg-subtle)">
-      Toggle <span class="font-mono text-(--fg-muted)">Reduce transparency</span> in your OS
+    <p class="text-xs leading-relaxed text-fg-subtle">
+      Toggle <span class="font-mono text-fg-muted">Reduce transparency</span> in your OS
       accessibility settings to see this update live.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/browser/useScriptTag/demo.vue b/vue/toolkit/src/composables/browser/useScriptTag/demo.vue
index 8e4d142..91f45b7 100644
--- a/vue/toolkit/src/composables/browser/useScriptTag/demo.vue
+++ b/vue/toolkit/src/composables/browser/useScriptTag/demo.vue
@@ -35,7 +35,7 @@ function onUnload() {
 }
 
 const statusStyles = {
-  idle: 'border-(--border) bg-(--bg-inset) text-(--fg-muted)',
+  idle: 'border-border bg-bg-inset text-fg-muted',
   loading: 'border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-400',
   loaded: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
   error: 'border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400',
@@ -43,10 +43,10 @@ const statusStyles = {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4">
       <div class="flex items-center justify-between gap-3">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <span class="demo-label">
           Script status
         </span>
         <span
@@ -56,7 +56,7 @@ const statusStyles = {
           <span
             class="size-1.5 rounded-full"
             :class="{
-              'bg-(--fg-subtle)': status === 'idle',
+              'bg-fg-subtle': status === 'idle',
               'bg-sky-500 animate-pulse': status === 'loading',
               'bg-emerald-500': status === 'loaded',
               'bg-red-500': status === 'error',
@@ -66,24 +66,24 @@ const statusStyles = {
         </span>
       </div>
 
-      <div class="mt-3 truncate rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg-muted)">
+      <div class="mt-3 truncate rounded-lg border border-border bg-bg-inset p-3 font-mono text-xs text-fg-muted">
         {{ src }}
       </div>
 
       <dl class="mt-3 grid grid-cols-2 gap-2 text-sm">
         <div>
-          <dt class="text-xs text-(--fg-subtle)">
+          <dt class="text-xs text-fg-subtle">
             &lt;script&gt; element
           </dt>
-          <dd class="font-mono text-(--fg)">
+          <dd class="font-mono text-fg">
             {{ scriptTag ? 'present' : 'null' }}
           </dd>
         </div>
         <div>
-          <dt class="text-xs text-(--fg-subtle)">
+          <dt class="text-xs text-fg-subtle">
             Loaded at
           </dt>
-          <dd class="font-mono text-(--fg)">
+          <dd class="font-mono text-fg">
             {{ loadedAt ?? '—' }}
           </dd>
         </div>
@@ -94,7 +94,7 @@ const statusStyles = {
       <button
         type="button"
         :disabled="status === 'loading' || status === 'loaded'"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="onLoad"
       >
         {{ status === 'loading' ? 'Loading…' : 'Load script' }}
@@ -102,15 +102,15 @@ const statusStyles = {
       <button
         type="button"
         :disabled="status !== 'loaded'"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="onUnload"
       >
         Unload
       </button>
     </div>
 
-    <p class="text-xs leading-relaxed text-(--fg-subtle)">
-      Manual mode — the tag is injected into <span class="font-mono text-(--fg-muted)">&lt;head&gt;</span>
+    <p class="text-xs leading-relaxed text-fg-subtle">
+      Manual mode — the tag is injected into <span class="font-mono text-fg-muted">&lt;head&gt;</span>
       only when you click, and removed on unload.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/browser/useShare/demo.vue b/vue/toolkit/src/composables/browser/useShare/demo.vue
index a42d352..20b5ce3 100644
--- a/vue/toolkit/src/composables/browser/useShare/demo.vue
+++ b/vue/toolkit/src/composables/browser/useShare/demo.vue
@@ -26,48 +26,48 @@ async function onShare() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Web Share API
       </span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
         :class="isSupported
           ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          : 'border-border bg-bg-inset text-fg-muted'"
       >
         <span
           class="size-1.5 rounded-full"
-          :class="isSupported ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+          :class="isSupported ? 'bg-emerald-500' : 'bg-fg-subtle'"
         />
         {{ isSupported ? 'Supported' : 'Unsupported' }}
       </span>
     </div>
 
-    <div class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+    <div class="demo-card flex flex-col gap-3 p-4">
       <label class="flex flex-col gap-1.5">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Title</span>
+        <span class="demo-label">Title</span>
         <input
           v-model="payload.title"
           type="text"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="demo-input"
         >
       </label>
       <label class="flex flex-col gap-1.5">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Text</span>
+        <span class="demo-label">Text</span>
         <input
           v-model="payload.text"
           type="text"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="demo-input"
         >
       </label>
       <label class="flex flex-col gap-1.5">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">URL</span>
+        <span class="demo-label">URL</span>
         <input
           v-model="payload.url"
           type="url"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="demo-input"
         >
       </label>
     </div>
@@ -75,7 +75,7 @@ async function onShare() {
     <button
       type="button"
       :disabled="!isSupported"
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+      class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
       @click="onShare"
     >
       <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -88,7 +88,7 @@ async function onShare() {
       Share
     </button>
 
-    <p v-if="!isSupported" class="text-xs leading-relaxed text-(--fg-subtle)">
+    <p v-if="!isSupported" class="text-xs leading-relaxed text-fg-subtle">
       The Web Share API is not available in this browser. It works on most mobile
       browsers and Safari.
     </p>
@@ -97,7 +97,7 @@ async function onShare() {
       class="text-xs font-medium"
       :class="lastResult === 'shared'
         ? 'text-emerald-600 dark:text-emerald-400'
-        : 'text-(--fg-muted)'"
+        : 'text-fg-muted'"
     >
       {{ lastResult === 'shared' ? 'Content shared.' : 'Share sheet dismissed.' }}
     </p>
diff --git a/vue/toolkit/src/composables/browser/useStyleTag/demo.vue b/vue/toolkit/src/composables/browser/useStyleTag/demo.vue
index b3d1c43..3b5b1ec 100644
--- a/vue/toolkit/src/composables/browser/useStyleTag/demo.vue
+++ b/vue/toolkit/src/composables/browser/useStyleTag/demo.vue
@@ -11,41 +11,41 @@ const { id, css, isLoaded, load, unload } = useStyleTag(initialCss, { immediate:
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Injected style tag
       </span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
         :class="isLoaded
           ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          : 'border-border bg-bg-inset text-fg-muted'"
       >
         <span
           class="size-1.5 rounded-full"
-          :class="isLoaded ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+          :class="isLoaded ? 'bg-emerald-500' : 'bg-fg-subtle'"
         />
         {{ isLoaded ? 'Loaded' : 'Unloaded' }}
       </span>
     </div>
 
     <!-- Live target affected by the injected stylesheet -->
-    <div class="rounded-xl border border-(--border) bg-(--bg-inset) p-4">
+    <div class="rounded-xl border border-border bg-bg-inset p-4">
       <div
-        class="styletag-demo-box rounded-lg border border-(--border) bg-(--bg-elevated) px-4 py-6 text-center text-sm font-semibold text-(--fg) transition-all"
+        class="styletag-demo-box rounded-lg border border-border bg-bg-elevated px-4 py-6 text-center text-sm font-semibold text-fg transition-all"
       >
         Styled by &lt;style id="{{ id }}"&gt;
       </div>
     </div>
 
     <label class="flex flex-col gap-1.5">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">CSS source</span>
+      <span class="demo-label">CSS source</span>
       <textarea
         v-model="css"
         rows="5"
         spellcheck="false"
-        class="w-full resize-none rounded-lg border border-(--border) bg-(--bg) px-3 py-2 font-mono text-xs leading-relaxed text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="w-full resize-none rounded-lg border border-border bg-bg px-3 py-2 font-mono text-xs leading-relaxed text-fg placeholder:text-fg-subtle transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring"
       />
     </label>
 
@@ -53,7 +53,7 @@ const { id, css, isLoaded, load, unload } = useStyleTag(initialCss, { immediate:
       <button
         type="button"
         :disabled="isLoaded"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="load"
       >
         Load
@@ -61,14 +61,14 @@ const { id, css, isLoaded, load, unload } = useStyleTag(initialCss, { immediate:
       <button
         type="button"
         :disabled="!isLoaded"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="unload"
       >
         Unload
       </button>
     </div>
 
-    <p class="text-xs leading-relaxed text-(--fg-subtle)">
+    <p class="text-xs leading-relaxed text-fg-subtle">
       Editing the CSS updates the live stylesheet instantly while loaded.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/browser/useTabLeader/demo.vue b/vue/toolkit/src/composables/browser/useTabLeader/demo.vue
index cab81c2..0c5ebba 100644
--- a/vue/toolkit/src/composables/browser/useTabLeader/demo.vue
+++ b/vue/toolkit/src/composables/browser/useTabLeader/demo.vue
@@ -5,20 +5,20 @@ const { isLeader, isSupported, acquire, release } = useTabLeader('vue-toolkit-de
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Web Locks election
       </span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
         :class="isSupported
           ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          : 'border-border bg-bg-inset text-fg-muted'"
       >
         <span
           class="size-1.5 rounded-full"
-          :class="isSupported ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+          :class="isSupported ? 'bg-emerald-500' : 'bg-fg-subtle'"
         />
         {{ isSupported ? 'Supported' : 'Unsupported' }}
       </span>
@@ -28,14 +28,14 @@ const { isLeader, isSupported, acquire, release } = useTabLeader('vue-toolkit-de
     <div
       class="flex flex-col items-center gap-2 rounded-xl border p-6 transition-colors"
       :class="isLeader
-        ? 'border-(--accent) bg-(--accent-subtle)'
-        : 'border-(--border) bg-(--bg-elevated)'"
+        ? 'border-accent bg-accent-subtle'
+        : 'border-border bg-bg-elevated'"
     >
       <div
         class="flex size-12 items-center justify-center rounded-full transition-colors"
         :class="isLeader
-          ? 'bg-(--accent) text-(--accent-fg)'
-          : 'bg-(--bg-inset) text-(--fg-subtle)'"
+          ? 'bg-accent text-accent-fg'
+          : 'bg-bg-inset text-fg-subtle'"
       >
         <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
           <path d="m12 2 3 7h7l-5.5 4.5L18.5 21 12 16.5 5.5 21 7.5 13.5 2 9h7z" />
@@ -43,11 +43,11 @@ const { isLeader, isSupported, acquire, release } = useTabLeader('vue-toolkit-de
       </div>
       <p
         class="text-lg font-bold"
-        :class="isLeader ? 'text-(--accent-text)' : 'text-(--fg)'"
+        :class="isLeader ? 'text-accent-text' : 'text-fg'"
       >
         {{ isLeader ? 'Leader tab' : 'Follower tab' }}
       </p>
-      <p class="text-center text-xs text-(--fg-muted)">
+      <p class="text-center text-xs text-fg-muted">
         {{ isLeader
           ? 'This tab holds the lock and would run exclusive work.'
           : 'Another tab is the leader, or leadership was released.' }}
@@ -58,7 +58,7 @@ const { isLeader, isSupported, acquire, release } = useTabLeader('vue-toolkit-de
       <button
         type="button"
         :disabled="!isSupported || isLeader"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="acquire"
       >
         Acquire
@@ -66,17 +66,17 @@ const { isLeader, isSupported, acquire, release } = useTabLeader('vue-toolkit-de
       <button
         type="button"
         :disabled="!isSupported || !isLeader"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="release"
       >
         Release
       </button>
     </div>
 
-    <p v-if="!isSupported" class="text-xs leading-relaxed text-(--fg-subtle)">
+    <p v-if="!isSupported" class="text-xs leading-relaxed text-fg-subtle">
       The Web Locks API is not available in this browser.
     </p>
-    <p v-else class="text-xs leading-relaxed text-(--fg-subtle)">
+    <p v-else class="text-xs leading-relaxed text-fg-subtle">
       Open this page in a second tab — only one tab is the leader at a time. Release
       here and watch another tab take over.
     </p>
diff --git a/vue/toolkit/src/composables/browser/useTextareaAutosize/demo.vue b/vue/toolkit/src/composables/browser/useTextareaAutosize/demo.vue
index 66b2940..644ba43 100644
--- a/vue/toolkit/src/composables/browser/useTextareaAutosize/demo.vue
+++ b/vue/toolkit/src/composables/browser/useTextareaAutosize/demo.vue
@@ -28,9 +28,9 @@ function clear(): void {
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div class="flex flex-col gap-1.5">
-      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <label class="demo-label">
         Auto-growing textarea
       </label>
       <textarea
@@ -38,16 +38,16 @@ function clear(): void {
         v-model="input"
         placeholder="Start typing…"
         rows="1"
-        class="w-full resize-none overflow-y-auto rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm leading-relaxed text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input resize-none overflow-y-auto leading-relaxed"
       />
     </div>
 
-    <div class="flex flex-col gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+    <div class="demo-card flex flex-col gap-2 p-4">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <span class="demo-label">
           Max height
         </span>
-        <span class="font-mono text-sm tabular-nums text-(--fg)">{{ maxHeight }}px</span>
+        <span class="font-mono text-sm tabular-nums text-fg">{{ maxHeight }}px</span>
       </div>
       <input
         v-model.number="maxHeight"
@@ -55,11 +55,11 @@ function clear(): void {
         min="80"
         max="400"
         step="20"
-        class="w-full accent-(--accent)"
+        class="w-full accent-accent"
       >
-      <div class="flex items-center justify-between border-t border-(--border) pt-2 text-xs">
-        <span class="text-(--fg-muted)">{{ input.length }} chars</span>
-        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 font-medium text-(--fg-muted)">
+      <div class="flex items-center justify-between border-t border-border pt-2 text-xs">
+        <span class="text-fg-muted">{{ input.length }} chars</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-border bg-bg-inset px-2 py-0.5 font-medium text-fg-muted">
           {{ resizes }} resizes
         </span>
       </div>
@@ -68,21 +68,21 @@ function clear(): void {
     <div class="flex flex-wrap gap-2">
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary"
         @click="loadSample"
       >
         Load sample
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="triggerResize"
       >
         Trigger resize
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="!input"
         @click="clear"
       >
diff --git a/vue/toolkit/src/composables/browser/useTitle/demo.vue b/vue/toolkit/src/composables/browser/useTitle/demo.vue
index 793fd98..f8fdd1d 100644
--- a/vue/toolkit/src/composables/browser/useTitle/demo.vue
+++ b/vue/toolkit/src/composables/browser/useTitle/demo.vue
@@ -19,42 +19,42 @@ watch(appName, () => {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4">
+      <span class="demo-label">
         Live document title
       </span>
-      <div class="mt-2 flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
-        <svg viewBox="0 0 24 24" fill="none" class="size-4 shrink-0 text-(--fg-subtle)">
+      <div class="mt-2 flex items-center gap-2 rounded-lg border border-border bg-bg-inset px-3 py-2.5">
+        <svg viewBox="0 0 24 24" fill="none" class="size-4 shrink-0 text-fg-subtle">
           <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.5" />
           <path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" stroke="currentColor" stroke-width="1.5" />
         </svg>
-        <span class="truncate font-mono text-sm text-(--fg)">
+        <span class="truncate font-mono text-sm text-fg">
           {{ title || 'Untitled' }} · {{ appName }}
         </span>
       </div>
     </div>
 
     <div class="flex flex-col gap-1.5">
-      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <label class="demo-label">
         Page title
       </label>
       <input
         v-model="title"
         type="text"
         placeholder="Enter a page title"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
       >
     </div>
 
     <div class="flex flex-col gap-1.5">
-      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <label class="demo-label">
         App name (template suffix)
       </label>
       <input
         v-model="appName"
         type="text"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
       >
     </div>
 
@@ -63,15 +63,15 @@ watch(appName, () => {
         v-for="preset in presets"
         :key="preset"
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
-        :class="title === preset ? 'border-(--accent) text-(--accent-text)' : ''"
+        class="demo-btn"
+        :class="title === preset ? 'border-accent text-accent-text' : ''"
         @click="title = preset"
       >
         {{ preset }}
       </button>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Check your browser tab — it updates in real time.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/browser/useUrlSearchParams/demo.vue b/vue/toolkit/src/composables/browser/useUrlSearchParams/demo.vue
index e0dfca7..cfe7be2 100644
--- a/vue/toolkit/src/composables/browser/useUrlSearchParams/demo.vue
+++ b/vue/toolkit/src/composables/browser/useUrlSearchParams/demo.vue
@@ -44,21 +44,21 @@ const queryString = computed(() => {
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div class="flex flex-col gap-1.5">
-      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <label class="demo-label">
         Search query
       </label>
       <input
         v-model="params.q"
         type="text"
         placeholder="Search…"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
       >
     </div>
 
     <div class="flex flex-col gap-2">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Sort by</span>
+      <span class="demo-label">Sort by</span>
       <div class="flex flex-wrap gap-2">
         <button
           v-for="s in sorts"
@@ -66,8 +66,8 @@ const queryString = computed(() => {
           type="button"
           class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
           :class="params.sort === s
-            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
-            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            ? 'border-transparent bg-accent text-accent-fg hover:bg-accent-hover'
+            : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
           @click="params.sort = s"
         >
           {{ s }}
@@ -76,7 +76,7 @@ const queryString = computed(() => {
     </div>
 
     <div class="flex flex-col gap-2">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Tags (repeated keys → array)
       </span>
       <div class="flex flex-wrap gap-2">
@@ -86,8 +86,8 @@ const queryString = computed(() => {
           type="button"
           class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition cursor-pointer"
           :class="activeTags.includes(tag)
-            ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
-            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted) hover:border-(--border-strong)'"
+            ? 'border-accent bg-accent-subtle text-accent-text'
+            : 'border-border bg-bg-inset text-fg-muted hover:border-border-strong'"
           @click="toggleTag(tag)"
         >
           #{{ tag }}
@@ -96,13 +96,13 @@ const queryString = computed(() => {
     </div>
 
     <div class="flex flex-col gap-1.5">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Live URL query
       </span>
-      <div class="overflow-x-auto rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="overflow-x-auto rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
         <span class="whitespace-nowrap">{{ queryString }}</span>
       </div>
-      <p class="text-xs text-(--fg-subtle)">
+      <p class="text-xs text-fg-subtle">
         The browser address bar updates as you edit. Falsy values are dropped.
       </p>
     </div>
diff --git a/vue/toolkit/src/composables/browser/useUrlSearchParams/index.ts b/vue/toolkit/src/composables/browser/useUrlSearchParams/index.ts
index 072e920..7b8e87d 100644
--- a/vue/toolkit/src/composables/browser/useUrlSearchParams/index.ts
+++ b/vue/toolkit/src/composables/browser/useUrlSearchParams/index.ts
@@ -54,6 +54,9 @@ export interface UseUrlSearchParamsOptions<T> extends ConfigurableWindow {
   stringify?: (params: URLSearchParams) => string;
 }
 
+// `Record<string, any>` is the idiomatic "any object shape" constraint here: `T` is
+// caller-supplied and flows straight back out, so an interface (no implicit index
+// signature) must still satisfy the bound — `Record<string, unknown>` would reject those.
 export type UseUrlSearchParamsReturn<T extends Record<string, any> = UrlParams>
   = T;
 
@@ -87,6 +90,8 @@ export type UseUrlSearchParamsReturn<T extends Record<string, any> = UrlParams>
  *
  * @since 0.0.15
  */
+// `Record<string, any>` constraint mirrors `UseUrlSearchParamsReturn`: caller-supplied
+// `T` flows back out, so interface types must satisfy the bound (see note above).
 export function useUrlSearchParams<T extends Record<string, any> = UrlParams>(
   mode: UrlSearchParamsMode = 'history',
   options: UseUrlSearchParamsOptions<T> = {},
@@ -104,7 +109,7 @@ export function useUrlSearchParams<T extends Record<string, any> = UrlParams>(
   if (!window)
     return reactive({ ...initialValue }) as UseUrlSearchParamsReturn<T>;
 
-  const state = reactive<Record<string, any>>({});
+  const state = reactive<Record<string, string | string[] | null | undefined>>({});
 
   const getRawParams = (): string => {
     if (mode === 'history')
@@ -160,7 +165,9 @@ export function useUrlSearchParams<T extends Record<string, any> = UrlParams>(
       else if (removeFalsyValues && !value)
         params.delete(key);
       else
-        params.set(key, value);
+        // `set` coerces to string at runtime; do it explicitly so null/undefined (when
+        // not stripped above) match the WHATWG ToString behaviour the old `any` masked.
+        params.set(key, String(value));
     }
     return params;
   };
diff --git a/vue/toolkit/src/composables/browser/useVibrate/demo.vue b/vue/toolkit/src/composables/browser/useVibrate/demo.vue
index bbea540..0ce2b1b 100644
--- a/vue/toolkit/src/composables/browser/useVibrate/demo.vue
+++ b/vue/toolkit/src/composables/browser/useVibrate/demo.vue
@@ -32,7 +32,7 @@ function toggleLoop(): void {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       v-if="!isSupported"
       class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300"
@@ -40,27 +40,27 @@ function toggleLoop(): void {
       The Vibration API is not supported in this browser. Try a mobile device.
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+    <div class="demo-card p-4">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <span class="demo-label">
           Current pattern (ms)
         </span>
         <span
           class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
           :class="isSupported
             ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+            : 'border-border bg-bg-inset text-fg-muted'"
         >
           {{ isSupported ? 'supported' : 'unsupported' }}
         </span>
       </div>
-      <div class="mt-2 overflow-x-auto rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="mt-2 overflow-x-auto rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
         [{{ Array.isArray(pattern) ? pattern.join(', ') : pattern }}]
       </div>
     </div>
 
     <div class="flex flex-col gap-2">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Presets</span>
+      <span class="demo-label">Presets</span>
       <div class="grid grid-cols-2 gap-2">
         <button
           v-for="(_, name) in presets"
@@ -69,8 +69,8 @@ function toggleLoop(): void {
           :disabled="!isSupported"
           class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           :class="activePreset === name
-            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
-            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            ? 'border-transparent bg-accent text-accent-fg hover:bg-accent-hover'
+            : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
           @click="applyPreset(name)"
         >
           {{ name }}
@@ -82,7 +82,7 @@ function toggleLoop(): void {
       <button
         type="button"
         :disabled="!isSupported"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="vibrate()"
       >
         Vibrate now
@@ -90,7 +90,7 @@ function toggleLoop(): void {
       <button
         type="button"
         :disabled="!isSupported"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="toggleLoop"
       >
         {{ looping ? 'Stop loop' : 'Loop every 1.5s' }}
@@ -98,7 +98,7 @@ function toggleLoop(): void {
       <button
         type="button"
         :disabled="!isSupported"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="stop"
       >
         Stop
diff --git a/vue/toolkit/src/composables/browser/useWakeLock/demo.vue b/vue/toolkit/src/composables/browser/useWakeLock/demo.vue
index 26f9c05..6d77c82 100644
--- a/vue/toolkit/src/composables/browser/useWakeLock/demo.vue
+++ b/vue/toolkit/src/composables/browser/useWakeLock/demo.vue
@@ -21,7 +21,7 @@ async function toggle(): Promise<void> {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       v-if="!isSupported"
       class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300"
@@ -29,12 +29,12 @@ async function toggle(): Promise<void> {
       The Screen Wake Lock API is not supported in this browser.
     </div>
 
-    <div class="flex flex-col items-center gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-6">
+    <div class="demo-card flex flex-col items-center gap-3 p-6">
       <div
         class="flex size-16 items-center justify-center rounded-full border transition"
         :class="isActive
           ? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-subtle)'"
+          : 'border-border bg-bg-inset text-fg-subtle'"
       >
         <svg viewBox="0 0 24 24" fill="none" class="size-7">
           <rect x="4" y="3" width="16" height="14" rx="2" stroke="currentColor" stroke-width="1.5" />
@@ -43,18 +43,18 @@ async function toggle(): Promise<void> {
         </svg>
       </div>
       <div class="text-center">
-        <p class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+        <p class="demo-stat text-3xl">
           {{ isActive ? 'AWAKE' : 'IDLE' }}
         </p>
-        <p class="mt-1 text-xs text-(--fg-muted)">
+        <p class="mt-1 text-xs text-fg-muted">
           {{ isActive ? 'Screen will stay on' : 'Screen may sleep normally' }}
         </p>
       </div>
     </div>
 
-    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5 text-sm">
-      <span class="text-(--fg-muted)">Lock held</span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+    <div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset px-3 py-2.5 text-sm">
+      <span class="text-fg-muted">Lock held</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-border bg-bg-elevated px-2 py-0.5 text-xs font-medium text-fg-muted">
         {{ sentinel ? 'yes' : 'none' }}
       </span>
     </div>
@@ -62,7 +62,7 @@ async function toggle(): Promise<void> {
     <button
       type="button"
       :disabled="!isSupported"
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+      class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
       @click="toggle"
     >
       {{ sentinel ? 'Release wake lock' : 'Request wake lock' }}
@@ -71,7 +71,7 @@ async function toggle(): Promise<void> {
     <p v-if="error" class="text-xs text-red-600 dark:text-red-400">
       {{ error }}
     </p>
-    <p v-else class="text-xs text-(--fg-subtle)">
+    <p v-else class="text-xs text-fg-subtle">
       The lock auto-releases when the tab is hidden and re-acquires when visible again.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/browser/useWebNotification/demo.vue b/vue/toolkit/src/composables/browser/useWebNotification/demo.vue
index 16103ad..4154d37 100644
--- a/vue/toolkit/src/composables/browser/useWebNotification/demo.vue
+++ b/vue/toolkit/src/composables/browser/useWebNotification/demo.vue
@@ -39,7 +39,7 @@ function notify() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       v-if="!isSupported"
       class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-400"
@@ -48,21 +48,21 @@ function notify() {
     </div>
 
     <template v-else>
-      <div class="flex items-center justify-between rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="demo-card flex items-center justify-between p-4">
         <div>
-          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          <div class="demo-label">
             Permission
           </div>
-          <div class="mt-1 flex items-center gap-2 text-sm text-(--fg-muted)">
+          <div class="mt-1 flex items-center gap-2 text-sm text-fg-muted">
             <span
               class="inline-block size-2 rounded-full transition"
-              :class="permissionGranted ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+              :class="permissionGranted ? 'bg-emerald-500' : 'bg-border-strong'"
             />
             {{ permissionGranted ? 'Granted' : 'Not granted' }}
           </div>
         </div>
         <button
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           :disabled="permissionGranted"
           @click="requestPermission"
         >
@@ -72,33 +72,33 @@ function notify() {
 
       <div class="flex flex-col gap-3">
         <label class="flex flex-col gap-1.5">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Title</span>
+          <span class="demo-label">Title</span>
           <input
             v-model="title"
             type="text"
-            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+            class="demo-input"
           >
         </label>
         <label class="flex flex-col gap-1.5">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Body</span>
+          <span class="demo-label">Body</span>
           <textarea
             v-model="body"
             rows="2"
-            class="w-full resize-none rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+            class="demo-input resize-none"
           />
         </label>
       </div>
 
       <div class="flex items-center gap-2">
         <button
-          class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn-primary flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           :disabled="!permissionGranted"
           @click="notify"
         >
           Show notification
         </button>
         <button
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           :disabled="!notification"
           @click="close"
         >
@@ -106,12 +106,12 @@ function notify() {
         </button>
       </div>
 
-      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-sm">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last event</span>
-        <span class="font-mono text-(--fg)">{{ lastEvent || '—' }}</span>
+      <div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset p-3 text-sm">
+        <span class="demo-label">Last event</span>
+        <span class="font-mono text-fg">{{ lastEvent || '—' }}</span>
       </div>
 
-      <p v-if="!permissionGranted" class="text-xs text-(--fg-subtle)">
+      <p v-if="!permissionGranted" class="text-xs text-fg-subtle">
         Grant access first, then trigger a notification. Switch back to this tab and it auto-closes.
       </p>
     </template>
diff --git a/vue/toolkit/src/composables/component/createReusableTemplate/demo.vue b/vue/toolkit/src/composables/component/createReusableTemplate/demo.vue
index bdd3c6c..f385505 100644
--- a/vue/toolkit/src/composables/component/createReusableTemplate/demo.vue
+++ b/vue/toolkit/src/composables/component/createReusableTemplate/demo.vue
@@ -26,14 +26,14 @@ function toggle(member: Member) {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <!-- Templates are captured here, rendered wherever Reuse* appears -->
     <DefineStat v-slot="{ label, value }">
-      <div class="flex-1 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <div class="flex-1 rounded-lg border border-border bg-bg-inset p-3">
+        <div class="demo-label">
           {{ label }}
         </div>
-        <div class="mt-1 font-mono text-2xl font-bold tabular-nums text-(--fg)">
+        <div class="demo-stat mt-1 text-2xl">
           {{ value }}
         </div>
       </div>
@@ -43,14 +43,14 @@ function toggle(member: Member) {
       <div class="flex items-center gap-3">
         <span
           class="inline-block size-2 shrink-0 rounded-full transition"
-          :class="online ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+          :class="online ? 'bg-emerald-500' : 'bg-border-strong'"
         />
         <div class="min-w-0 flex-1">
-          <div class="truncate text-sm font-medium text-(--fg)">{{ name }}</div>
-          <div class="text-xs text-(--fg-subtle)">{{ role }}</div>
+          <div class="truncate text-sm font-medium text-fg">{{ name }}</div>
+          <div class="text-xs text-fg-subtle">{{ role }}</div>
         </div>
         <span
-          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+          class="demo-badge"
         >
           {{ online ? 'Online' : 'Away' }}
         </span>
@@ -62,14 +62,14 @@ function toggle(member: Member) {
       <ReuseStat label="Online" :value="String(team.filter(m => m.online).length)" />
     </div>
 
-    <div class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+    <div class="demo-card flex flex-col gap-3 p-4">
+      <div class="demo-label">
         Team — click a row to toggle status
       </div>
       <button
         v-for="member in team"
         :key="member.name"
-        class="rounded-lg p-2 text-left transition hover:bg-(--bg-inset) active:scale-[0.99] cursor-pointer"
+        class="rounded-lg p-2 text-left transition hover:bg-bg-inset active:scale-[0.99] cursor-pointer"
         @click="toggle(member)"
       >
         <ReuseMember
@@ -80,7 +80,7 @@ function toggle(member: Member) {
       </button>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Both card and row markup are declared once via <code class="font-mono">DefineTemplate</code> and
       rendered from multiple <code class="font-mono">ReuseTemplate</code> call sites.
     </p>
diff --git a/vue/toolkit/src/composables/component/createReusableTemplate/index.ts b/vue/toolkit/src/composables/component/createReusableTemplate/index.ts
index 69c3b77..9112f43 100644
--- a/vue/toolkit/src/composables/component/createReusableTemplate/index.ts
+++ b/vue/toolkit/src/composables/component/createReusableTemplate/index.ts
@@ -1,16 +1,26 @@
 import type { ComponentObjectPropsOptions, DefineComponent, Slot } from 'vue';
 import { camelize, defineComponent, shallowRef } from 'vue';
 
-/** Map of slot name -> slot props object (or `undefined` for prop-less slots) */
+/**
+ * Map of slot name -> slot props object (or `undefined` for prop-less slots).
+ * The inner `Record<string, any>` is the idiomatic "any slot-props shape" bound:
+ * interface-typed slot props (which lack an implicit index signature) must satisfy
+ * it, so `Record<string, unknown>` would wrongly reject legitimate callers.
+ */
 type SlotPropsMap = Record<string, Record<string, any> | undefined>;
 
 /** Turn a {@link SlotPropsMap} into a record of typed `Slot`s */
 type GenerateSlotsFromSlotMap<T extends SlotPropsMap>
   = { [K in keyof T]: Slot<T[K]> };
 
+// `Bindings extends Record<string, any>` is the idiomatic "any object shape" bound,
+// matching Vue/Reka's own component-binding generics: an interface-typed `Bindings`
+// must satisfy it, which `Record<string, unknown>` would reject. Applies to every
+// `extends Record<string, any>` constraint in this file.
 export type DefineTemplateComponent<Bindings extends Record<string, any>, Slots extends SlotPropsMap>
   = DefineComponent & (new () => {
     $slots: {
+      // Slot render fn: returns `any` to match Vue's own `Slot` return type.
       default: (_: Bindings & { $slots: GenerateSlotsFromSlotMap<Slots> }) => any;
     };
   });
@@ -49,8 +59,8 @@ export interface CreateReusableTemplateOptions<Props extends Record<string, any>
 }
 
 /** Re-key an attrs object so every key is camelCased */
-function keysToCamelCase(obj: Record<string, any>): Record<string, any> {
-  const result: Record<string, any> = {};
+function keysToCamelCase(obj: Record<string, unknown>): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
 
   for (const key in obj)
     result[camelize(key)] = obj[key];
diff --git a/vue/toolkit/src/composables/component/unrefElement/demo.vue b/vue/toolkit/src/composables/component/unrefElement/demo.vue
index 5a75c8e..0edf8ac 100644
--- a/vue/toolkit/src/composables/component/unrefElement/demo.vue
+++ b/vue/toolkit/src/composables/component/unrefElement/demo.vue
@@ -21,10 +21,10 @@ function measure() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       ref="box"
-      class="flex items-center justify-center rounded-xl border border-dashed border-(--border-strong) bg-(--bg-inset) py-8 text-sm font-medium text-(--fg-muted) transition-[width] duration-300 ease-out"
+      class="flex items-center justify-center rounded-xl border border-dashed border-border-strong bg-bg-inset py-8 text-sm font-medium text-fg-muted transition-[width] duration-300 ease-out"
       :style="{ width: `${width}px` }"
     >
       Target element
@@ -32,37 +32,37 @@ function measure() {
 
     <label class="flex flex-col gap-1.5">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Width</span>
-        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ width }}px</span>
+        <span class="demo-label">Width</span>
+        <span class="font-mono text-sm tabular-nums text-fg-muted">{{ width }}px</span>
       </div>
       <input
         v-model.number="width"
         type="range"
         min="120"
         max="340"
-        class="w-full accent-(--accent)"
+        class="w-full accent-accent"
       >
     </label>
 
     <button
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+      class="demo-btn-primary"
       @click="measure"
     >
       Read element via unrefElement
     </button>
 
-    <div class="flex flex-col gap-2 rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+    <div class="flex flex-col gap-2 rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
       <div class="flex items-center justify-between">
-        <span class="text-(--fg-subtle)">tagName</span>
+        <span class="text-fg-subtle">tagName</span>
         <span>{{ tag }}</span>
       </div>
       <div class="flex items-center justify-between">
-        <span class="text-(--fg-subtle)">boundingRect</span>
+        <span class="text-fg-subtle">boundingRect</span>
         <span>{{ rect ? `${rect.w} × ${rect.h}` : '—' }}</span>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Resize the box, then measure. <code class="font-mono">unrefElement</code> unwraps the template
       ref to the real DOM node — it also resolves a component ref to its <code class="font-mono">$el</code>.
     </p>
diff --git a/vue/toolkit/src/composables/component/useCurrentElement/demo.vue b/vue/toolkit/src/composables/component/useCurrentElement/demo.vue
index 1c59986..68e591a 100644
--- a/vue/toolkit/src/composables/component/useCurrentElement/demo.vue
+++ b/vue/toolkit/src/composables/component/useCurrentElement/demo.vue
@@ -29,10 +29,10 @@ const chips = ['vue', 'reactivity', 'composables', 'ssr', 'typescript', 'dom'];
 
 <template>
   <div
-    class="flex w-full max-w-sm flex-col gap-4 rounded-xl border border-(--border) bg-(--bg-elevated)"
+    class="demo-stack demo-card max-w-sm"
     :style="{ padding: `${padding}px` }"
   >
-    <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+    <div class="demo-label">
       Live measurement of this component's root
     </div>
 
@@ -41,7 +41,7 @@ const chips = ['vue', 'reactivity', 'composables', 'ssr', 'typescript', 'dom'];
         v-for="chip in chips.slice(0, childCount)"
         :key="chip"
         data-chip
-        class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+        class="demo-badge"
       >
         {{ chip }}
       </span>
@@ -49,28 +49,28 @@ const chips = ['vue', 'reactivity', 'composables', 'ssr', 'typescript', 'dom'];
 
     <label class="flex flex-col gap-1.5">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Root padding</span>
-        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ padding }}px</span>
+        <span class="demo-label">Root padding</span>
+        <span class="font-mono text-sm tabular-nums text-fg-muted">{{ padding }}px</span>
       </div>
       <input
         v-model.number="padding"
         type="range"
         min="8"
         max="40"
-        class="w-full accent-(--accent)"
+        class="w-full accent-accent"
       >
     </label>
 
     <div class="flex items-center gap-2">
       <button
-        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="childCount <= 1"
         @click="childCount--"
       >
         Remove chip
       </button>
       <button
-        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="childCount >= chips.length"
         @click="childCount++"
       >
@@ -78,22 +78,22 @@ const chips = ['vue', 'reactivity', 'composables', 'ssr', 'typescript', 'dom'];
       </button>
     </div>
 
-    <div class="flex flex-col gap-2 rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+    <div class="flex flex-col gap-2 rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
       <div class="flex items-center justify-between">
-        <span class="text-(--fg-subtle)">el.value</span>
+        <span class="text-fg-subtle">el.value</span>
         <span>{{ info ? `<${info.tag}>` : 'undefined' }}</span>
       </div>
       <div class="flex items-center justify-between">
-        <span class="text-(--fg-subtle)">chips in DOM</span>
+        <span class="text-fg-subtle">chips in DOM</span>
         <span>{{ info?.children ?? '—' }}</span>
       </div>
       <div class="flex items-center justify-between">
-        <span class="text-(--fg-subtle)">root height</span>
+        <span class="text-fg-subtle">root height</span>
         <span>{{ info ? `${info.height}px` : '—' }}</span>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       The computed re-reads <code class="font-mono">$el</code> on every update, so the readout tracks
       padding and chip changes automatically.
     </p>
diff --git a/vue/toolkit/src/composables/component/useForwardExpose/demo.vue b/vue/toolkit/src/composables/component/useForwardExpose/demo.vue
index 0e84b4c..605b875 100644
--- a/vue/toolkit/src/composables/component/useForwardExpose/demo.vue
+++ b/vue/toolkit/src/composables/component/useForwardExpose/demo.vue
@@ -19,7 +19,7 @@ const FieldWrapper = defineComponent({
         // expose the resolved element so the demo can show it changed live
         'data-tag': currentElement.value?.tagName.toLowerCase(),
         class:
-          'w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)',
+          'w-full rounded-lg border border-border bg-bg px-3 py-2 text-sm text-fg placeholder:text-fg-subtle transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring',
       });
   },
 });
@@ -49,13 +49,13 @@ function fillSample() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card flex flex-col gap-3 p-4">
+      <div class="demo-label">
         Wrapper component
       </div>
       <FieldWrapper ref="field" />
-      <p class="text-xs text-(--fg-subtle)">
+      <p class="text-xs text-fg-subtle">
         <code class="font-mono">&lt;FieldWrapper&gt;</code> renders an inner input, but
         <code class="font-mono">useForwardExpose</code> makes its <code class="font-mono">$el</code>
         resolve to that input.
@@ -64,31 +64,31 @@ function fillSample() {
 
     <div class="flex items-center gap-2">
       <button
-        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary flex-1"
         @click="focusForwarded"
       >
         Focus forwarded $el
       </button>
       <button
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="fillSample"
       >
         Fill sample
       </button>
     </div>
 
-    <div class="flex flex-col gap-2 rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+    <div class="flex flex-col gap-2 rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
       <div class="flex items-center justify-between">
-        <span class="text-(--fg-subtle)">field.$el</span>
+        <span class="text-fg-subtle">field.$el</span>
         <span>{{ resolved ? `<${resolved.tag}>` : 'undefined' }}</span>
       </div>
       <div class="flex items-center justify-between gap-3">
-        <span class="text-(--fg-subtle)">value</span>
+        <span class="text-fg-subtle">value</span>
         <span class="truncate">{{ resolved?.value || '""' }}</span>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       The parent never touches the input directly — it holds a ref to the wrapper, whose
       <code class="font-mono">$el</code> is forwarded to the inner element.
     </p>
diff --git a/vue/toolkit/src/composables/component/useForwardExpose/index.ts b/vue/toolkit/src/composables/component/useForwardExpose/index.ts
index f6fcb70..157a109 100644
--- a/vue/toolkit/src/composables/component/useForwardExpose/index.ts
+++ b/vue/toolkit/src/composables/component/useForwardExpose/index.ts
@@ -53,7 +53,7 @@ export function useForwardExpose<T extends ComponentPublicInstance>(): UseForwar
 
   // localExpose should only be assigned once else will create infinite loop
   const localExpose = instance.exposed;
-  const ret: Record<string, any> = {};
+  const ret: Record<string, unknown> = {};
 
   // Collect all property descriptors in a single pass
   const descriptors: PropertyDescriptorMap = {};
diff --git a/vue/toolkit/src/composables/component/useTemplateRefsList/demo.vue b/vue/toolkit/src/composables/component/useTemplateRefsList/demo.vue
index 82bb7db..a4533aa 100644
--- a/vue/toolkit/src/composables/component/useTemplateRefsList/demo.vue
+++ b/vue/toolkit/src/composables/component/useTemplateRefsList/demo.vue
@@ -50,62 +50,62 @@ const collected = computed(() => refs.value.length);
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Playlist</span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-label">Playlist</span>
+      <span class="demo-badge">
         {{ collected }} refs collected
       </span>
     </div>
 
-    <ul class="flex flex-col gap-2 max-h-56 overflow-y-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-2">
+    <ul class="demo-card flex flex-col gap-2 max-h-56 overflow-y-auto p-2">
       <li
         v-for="(track, index) in tracks"
         :key="track.id"
         :ref="set"
-        class="group flex items-center gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 transition"
-        :class="lastMeasured?.index === index ? 'border-(--accent) ring-2 ring-(--ring)' : 'hover:border-(--border-strong)'"
+        class="group flex items-center gap-3 rounded-lg border border-border bg-bg-inset px-3 py-2 transition"
+        :class="lastMeasured?.index === index ? 'border-accent ring-2 ring-ring' : 'hover:border-border-strong'"
       >
-        <span class="font-mono text-xs tabular-nums text-(--fg-subtle) w-5 text-right">{{ index + 1 }}</span>
+        <span class="font-mono text-xs tabular-nums text-fg-subtle w-5 text-right">{{ index + 1 }}</span>
         <span class="flex min-w-0 flex-1 flex-col">
-          <span class="truncate text-sm font-medium text-(--fg)">{{ track.title }}</span>
-          <span class="truncate text-xs text-(--fg-muted)">{{ track.artist }}</span>
+          <span class="truncate text-sm font-medium text-fg">{{ track.title }}</span>
+          <span class="truncate text-xs text-fg-muted">{{ track.artist }}</span>
         </span>
         <button
           type="button"
           aria-label="Remove track"
-          class="rounded-md px-1.5 py-0.5 text-xs text-(--fg-subtle) opacity-0 transition hover:text-(--fg) group-hover:opacity-100 cursor-pointer"
+          class="rounded-md px-1.5 py-0.5 text-xs text-fg-subtle opacity-0 transition hover:text-fg group-hover:opacity-100 cursor-pointer"
           @click="removeTrack(track.id)"
         >
           ✕
         </button>
       </li>
-      <li v-if="tracks.length === 0" class="px-3 py-6 text-center text-sm text-(--fg-subtle)">
+      <li v-if="tracks.length === 0" class="px-3 py-6 text-center text-sm text-fg-subtle">
         No tracks — add one to collect a ref.
       </li>
     </ul>
 
     <div
       v-if="lastMeasured"
-      class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums"
+      class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums"
     >
       refs[{{ lastMeasured.index }}].width = {{ lastMeasured.width }}px
     </div>
-    <p v-else class="text-xs text-(--fg-subtle)">
+    <p v-else class="text-xs text-fg-subtle">
       Add a track to measure the newest collected element directly from the DOM.
     </p>
 
     <div class="flex gap-2">
       <button
         type="button"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary flex-1"
         @click="addTrack"
       >
         Add track
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="collected === 0"
         @click="measureLast"
       >
diff --git a/vue/toolkit/src/composables/component/useVirtualList/demo.vue b/vue/toolkit/src/composables/component/useVirtualList/demo.vue
index efc31cb..a84793d 100644
--- a/vue/toolkit/src/composables/component/useVirtualList/demo.vue
+++ b/vue/toolkit/src/composables/component/useVirtualList/demo.vue
@@ -36,54 +36,54 @@ const visibleRange = computed(() => {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Virtual list</span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-label">Virtual list</span>
+      <span class="demo-badge">
         {{ total.toLocaleString() }} rows
       </span>
     </div>
 
     <div
       v-bind="containerProps"
-      class="h-64 rounded-xl border border-(--border) bg-(--bg-elevated)"
+      class="demo-card h-64"
     >
       <div v-bind="wrapperProps">
         <div
           v-for="{ data, index } in list"
           :key="index"
-          class="flex items-center gap-3 border-b border-(--border) px-3"
+          class="flex items-center gap-3 border-b border-border px-3"
           :style="{ height: `${itemHeight}px` }"
         >
           <span
-            class="size-6 shrink-0 rounded-md border border-(--border)"
+            class="size-6 shrink-0 rounded-md border border-border"
             :style="{ backgroundColor: `hsl(${data.hue} 65% 55%)` }"
           />
-          <span class="flex-1 truncate font-mono text-sm text-(--fg) tabular-nums">{{ data.label }}</span>
-          <span class="text-xs text-(--fg-subtle)">idx {{ index }}</span>
+          <span class="flex-1 truncate font-mono text-sm text-fg tabular-nums">{{ data.label }}</span>
+          <span class="text-xs text-fg-subtle">idx {{ index }}</span>
         </div>
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums flex items-center justify-between">
-      <span class="text-(--fg-muted)">rendered</span>
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums flex items-center justify-between">
+      <span class="text-fg-muted">rendered</span>
       <span>{{ list.length }} nodes · idx {{ visibleRange }}</span>
     </div>
 
     <div class="flex items-end gap-2">
       <label class="flex flex-1 flex-col gap-1">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Scroll to index</span>
+        <span class="demo-label">Scroll to index</span>
         <input
           v-model.number="jumpTo"
           type="number"
           :min="0"
           :max="total - 1"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="demo-input"
         >
       </label>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-2 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-accent px-3 py-2 text-sm font-medium text-accent-fg transition hover:bg-accent-hover active:scale-[0.98] cursor-pointer"
         @click="go"
       >
         Jump
diff --git a/vue/toolkit/src/composables/component/useVirtualList/index.ts b/vue/toolkit/src/composables/component/useVirtualList/index.ts
index d5d9526..001754e 100644
--- a/vue/toolkit/src/composables/component/useVirtualList/index.ts
+++ b/vue/toolkit/src/composables/component/useVirtualList/index.ts
@@ -200,7 +200,7 @@ function createMetrics(length: number, itemSize: UseVirtualListItemSize): UseVir
  *
  * @since 0.0.15
  */
-export function useVirtualList<T = any>(
+export function useVirtualList<T = unknown>(
   list: MaybeRefOrGetter<readonly T[]>,
   options: UseVirtualListOptions,
 ): UseVirtualListReturn<T> {
diff --git a/vue/toolkit/src/composables/debug/useRenderCount/demo.vue b/vue/toolkit/src/composables/debug/useRenderCount/demo.vue
index a34343b..2f2e8e1 100644
--- a/vue/toolkit/src/composables/debug/useRenderCount/demo.vue
+++ b/vue/toolkit/src/composables/debug/useRenderCount/demo.vue
@@ -15,33 +15,33 @@ function nudgeTint() {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-2">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Render count</span>
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col items-center gap-2">
+      <span class="demo-label">Render count</span>
       <span
-        class="font-mono text-3xl font-bold tabular-nums text-(--fg) transition-colors"
+        class="demo-stat text-3xl transition-colors"
         :style="{ color: `hsl(${tint} 70% 55%)` }"
       >{{ renderCount }}</span>
-      <span class="text-xs text-(--fg-subtle)">renders since mount</span>
+      <span class="text-xs text-fg-subtle">renders since mount</span>
     </div>
 
     <label class="flex flex-col gap-1">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Bound input</span>
+      <span class="demo-label">Bound input</span>
       <input
         v-model="message"
         type="text"
         placeholder="Type to re-render…"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
       >
     </label>
 
-    <p class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-sm text-(--fg)">
+    <p class="rounded-lg border border-border bg-bg-inset p-3 text-sm text-fg">
       {{ message }}
     </p>
 
     <button
       type="button"
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      class="demo-btn"
       @click="nudgeTint"
     >
       Force re-render (shift color)
diff --git a/vue/toolkit/src/composables/debug/useRenderInfo/demo.vue b/vue/toolkit/src/composables/debug/useRenderInfo/demo.vue
index ff3c78c..3f5e80e 100644
--- a/vue/toolkit/src/composables/debug/useRenderInfo/demo.vue
+++ b/vue/toolkit/src/composables/debug/useRenderInfo/demo.vue
@@ -14,34 +14,34 @@ const mountedAt = new Date(lastRendered).toLocaleTimeString();
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Render info</span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-label">Render info</span>
+      <span class="demo-badge">
         {{ component ?? 'anonymous' }}
       </span>
     </div>
 
     <div class="grid grid-cols-2 gap-2">
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
-        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ count }}</div>
-        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">renders</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3 text-center">
+        <div class="demo-stat text-3xl">{{ count }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-fg-subtle">renders</div>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
-        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ duration.toFixed(2) }}</div>
-        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">last render ms</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3 text-center">
+        <div class="demo-stat text-3xl">{{ duration.toFixed(2) }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-fg-subtle">last render ms</div>
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums flex items-center justify-between">
-      <span class="text-(--fg-muted)">mounted at</span>
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums flex items-center justify-between">
+      <span class="text-fg-muted">mounted at</span>
       <span>{{ mountedAt }}</span>
     </div>
 
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="rows">Render workload</label>
-        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ rows }} cells</span>
+        <label class="demo-label" for="rows">Render workload</label>
+        <span class="font-mono text-xs tabular-nums text-fg-muted">{{ rows }} cells</span>
       </div>
       <input
         id="rows"
@@ -50,16 +50,16 @@ const mountedAt = new Date(lastRendered).toLocaleTimeString();
         min="1"
         max="400"
         step="1"
-        class="w-full accent-(--accent) cursor-pointer"
+        class="w-full accent-accent cursor-pointer"
       >
-      <p class="text-xs text-(--fg-subtle)">Drag to re-render a larger DOM subtree and watch the render duration climb.</p>
+      <p class="text-xs text-fg-subtle">Drag to re-render a larger DOM subtree and watch the render duration climb.</p>
     </div>
 
     <div class="grid grid-cols-10 gap-1">
       <span
         v-for="i in grid"
         :key="i"
-        class="aspect-square rounded-sm bg-(--accent-subtle)"
+        class="aspect-square rounded-sm bg-accent-subtle"
       />
     </div>
   </div>
diff --git a/vue/toolkit/src/composables/elements/onElementRemoval/demo.vue b/vue/toolkit/src/composables/elements/onElementRemoval/demo.vue
index eaa0a87..5d63314 100644
--- a/vue/toolkit/src/composables/elements/onElementRemoval/demo.vue
+++ b/vue/toolkit/src/composables/elements/onElementRemoval/demo.vue
@@ -27,51 +27,51 @@ function reset() {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">DOM removal watcher</span>
+      <span class="demo-label">DOM removal watcher</span>
       <span
-        class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+        class="demo-badge"
       >
-        <span class="size-1.5 rounded-full transition" :class="mounted ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+        <span class="size-1.5 rounded-full transition" :class="mounted ? 'bg-emerald-500' : 'bg-fg-subtle'" />
         {{ mounted ? 'In DOM' : 'Removed' }}
       </span>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 min-h-28 flex items-center justify-center">
+    <div class="demo-card p-4 min-h-28 flex items-center justify-center">
       <div
         v-if="mounted"
         ref="watched"
-        class="flex w-full flex-col items-center gap-1 rounded-lg border border-(--accent) bg-(--accent-subtle) px-4 py-6 text-center transition"
+        class="flex w-full flex-col items-center gap-1 rounded-lg border border-accent bg-accent-subtle px-4 py-6 text-center transition"
       >
-        <span class="text-sm font-medium text-(--accent-text)">Watched element</span>
-        <span class="text-xs text-(--fg-muted)">Remove me and the callback fires</span>
+        <span class="text-sm font-medium text-accent-text">Watched element</span>
+        <span class="text-xs text-fg-muted">Remove me and the callback fires</span>
       </div>
-      <span v-else class="text-sm text-(--fg-subtle)">Element detached from the document</span>
+      <span v-else class="text-sm text-fg-subtle">Element detached from the document</span>
     </div>
 
     <div class="grid grid-cols-2 gap-2">
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
-        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ removals }}</div>
-        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">removals fired</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3 text-center">
+        <div class="demo-stat text-3xl">{{ removals }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-fg-subtle">removals fired</div>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center flex flex-col justify-center">
-        <div class="font-mono text-sm font-medium tabular-nums text-(--fg)">{{ lastEvent ?? '—' }}</div>
-        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">last fired</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3 text-center flex flex-col justify-center">
+        <div class="font-mono text-sm font-medium tabular-nums text-fg">{{ lastEvent ?? '—' }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-fg-subtle">last fired</div>
       </div>
     </div>
 
     <div class="flex gap-2">
       <button
         type="button"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary flex-1"
         @click="toggle"
       >
         {{ mounted ? 'Remove element' : 'Mount element' }}
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="removals === 0"
         @click="reset"
       >
diff --git a/vue/toolkit/src/composables/elements/useActiveElement/demo.vue b/vue/toolkit/src/composables/elements/useActiveElement/demo.vue
index 8f136c2..dc5d01c 100644
--- a/vue/toolkit/src/composables/elements/useActiveElement/demo.vue
+++ b/vue/toolkit/src/composables/elements/useActiveElement/demo.vue
@@ -15,9 +15,9 @@ const activeTag = computed(() => activeElement.value?.tagName.toLowerCase() ?? n
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="space-y-3">
-      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <p class="demo-label">
         Focus a field
       </p>
       <div
@@ -27,39 +27,39 @@ const activeTag = computed(() => activeElement.value?.tagName.toLowerCase() ?? n
       >
         <label
           :for="field.id"
-          class="text-sm font-medium text-(--fg-muted)"
+          class="text-sm font-medium text-fg-muted"
         >{{ field.label }}</label>
         <input
           :id="field.id"
           :type="field.type"
           :placeholder="field.placeholder"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="demo-input"
         >
       </div>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
       >
         A focusable button
       </button>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
       <div class="flex items-center justify-between gap-3">
-        <span class="text-(--fg-subtle)">activeElement</span>
+        <span class="text-fg-subtle">activeElement</span>
         <span
           v-if="activeTag"
-          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--accent-text)"
+          class="inline-flex items-center gap-1.5 rounded-md border border-border bg-bg-elevated px-2 py-0.5 text-xs font-medium text-accent-text"
         >
           &lt;{{ activeTag }}&gt;
         </span>
         <span
           v-else
-          class="text-xs text-(--fg-subtle)"
+          class="text-xs text-fg-subtle"
         >none</span>
       </div>
       <div class="mt-2 flex items-center justify-between gap-3">
-        <span class="text-(--fg-subtle)">id</span>
+        <span class="text-fg-subtle">id</span>
         <span class="truncate">{{ activeId ?? '—' }}</span>
       </div>
     </div>
diff --git a/vue/toolkit/src/composables/elements/useDocumentReadyState/demo.vue b/vue/toolkit/src/composables/elements/useDocumentReadyState/demo.vue
index ebd88f7..e866d00 100644
--- a/vue/toolkit/src/composables/elements/useDocumentReadyState/demo.vue
+++ b/vue/toolkit/src/composables/elements/useDocumentReadyState/demo.vue
@@ -14,9 +14,9 @@ const activeIndex = computed(() => stages.findIndex(s => s.state === readyState.
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         document.readyState
       </span>
       <span class="inline-flex items-center gap-1.5 rounded-md border border-emerald-500/30 bg-emerald-500/10 px-2 py-0.5 text-xs font-medium text-emerald-600 dark:text-emerald-400">
@@ -31,24 +31,24 @@ const activeIndex = computed(() => stages.findIndex(s => s.state === readyState.
         :key="stage.state"
         class="flex items-center gap-3 rounded-lg border p-3 transition"
         :class="i <= activeIndex
-          ? 'border-(--accent) bg-(--accent-subtle)'
-          : 'border-(--border) bg-(--bg-elevated)'"
+          ? 'border-accent bg-accent-subtle'
+          : 'border-border bg-bg-elevated'"
       >
         <span
           class="flex size-6 shrink-0 items-center justify-center rounded-full font-mono text-xs font-bold tabular-nums transition"
           :class="i < activeIndex
-            ? 'bg-(--accent) text-(--accent-fg)'
+            ? 'bg-accent text-accent-fg'
             : i === activeIndex
-              ? 'bg-(--accent) text-(--accent-fg) ring-4 ring-(--ring)'
-              : 'bg-(--bg-inset) text-(--fg-subtle)'"
+              ? 'bg-accent text-accent-fg ring-4 ring-ring'
+              : 'bg-bg-inset text-fg-subtle'"
         >
           {{ i + 1 }}
         </span>
         <div class="min-w-0">
-          <p class="font-mono text-sm font-medium text-(--fg)">
+          <p class="font-mono text-sm font-medium text-fg">
             {{ stage.label }}
           </p>
-          <p class="text-xs text-(--fg-subtle)">
+          <p class="text-xs text-fg-subtle">
             {{ stage.hint }}
           </p>
         </div>
diff --git a/vue/toolkit/src/composables/elements/useDocumentVisibility/demo.vue b/vue/toolkit/src/composables/elements/useDocumentVisibility/demo.vue
index 79fda82..d19b625 100644
--- a/vue/toolkit/src/composables/elements/useDocumentVisibility/demo.vue
+++ b/vue/toolkit/src/composables/elements/useDocumentVisibility/demo.vue
@@ -18,8 +18,8 @@ const isVisible = computed(() => visibility.value === 'visible');
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-3 text-center">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col items-center gap-3 text-center">
       <span
         class="flex size-14 items-center justify-center rounded-full text-2xl transition"
         :class="isVisible
@@ -29,33 +29,33 @@ const isVisible = computed(() => visibility.value === 'visible');
         {{ isVisible ? '👁️' : '💤' }}
       </span>
       <div>
-        <p class="font-mono text-2xl font-bold tabular-nums text-(--fg)">
+        <p class="demo-stat text-2xl">
           {{ visibility }}
         </p>
-        <p class="text-xs text-(--fg-subtle)">
+        <p class="text-xs text-fg-subtle">
           {{ isVisible ? 'This tab is in the foreground' : 'This tab is hidden' }}
         </p>
       </div>
     </div>
 
-    <p class="text-center text-xs text-(--fg-subtle)">
+    <p class="text-center text-xs text-fg-subtle">
       Switch to another tab or minimize the window to watch this update.
     </p>
 
     <div class="grid grid-cols-2 gap-3">
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
-        <p class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+      <div class="rounded-lg border border-border bg-bg-inset p-3 text-center">
+        <p class="demo-stat text-3xl">
           {{ switches }}
         </p>
-        <p class="mt-0.5 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <p class="demo-label mt-0.5">
           Times hidden
         </p>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
-        <p class="font-mono text-sm font-medium tabular-nums text-(--fg) truncate">
+      <div class="rounded-lg border border-border bg-bg-inset p-3 text-center">
+        <p class="font-mono text-sm font-medium tabular-nums text-fg truncate">
           {{ lastHidden ?? '—' }}
         </p>
-        <p class="mt-0.5 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <p class="demo-label mt-0.5">
           Last hidden at
         </p>
       </div>
diff --git a/vue/toolkit/src/composables/elements/useDraggable/demo.vue b/vue/toolkit/src/composables/elements/useDraggable/demo.vue
index 96c35fb..1ebad50 100644
--- a/vue/toolkit/src/composables/elements/useDraggable/demo.vue
+++ b/vue/toolkit/src/composables/elements/useDraggable/demo.vue
@@ -16,20 +16,20 @@ const { x, y, isDragging, style } = useDraggable(
 </script>
 
 <template>
-  <div class="w-full max-w-md flex flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div class="flex items-center justify-between gap-3">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Draggable, clamped to container
       </span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
         :class="isDragging
-          ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          ? 'border-accent bg-accent-subtle text-accent-text'
+          : 'border-border bg-bg-inset text-fg-muted'"
       >
         <span
           class="size-1.5 rounded-full transition"
-          :class="isDragging ? 'bg-(--accent)' : 'bg-(--fg-subtle)'"
+          :class="isDragging ? 'bg-accent' : 'bg-fg-subtle'"
         />
         {{ isDragging ? 'dragging' : 'idle' }}
       </span>
@@ -37,29 +37,29 @@ const { x, y, isDragging, style } = useDraggable(
 
     <div
       ref="container"
-      class="relative h-56 w-full overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset)"
+      class="relative h-56 w-full overflow-hidden rounded-xl border border-border bg-bg-inset"
     >
       <div
         ref="card"
         :style="style"
-        class="absolute w-36 select-none rounded-lg border border-(--border-strong) bg-(--bg-elevated) shadow-lg"
-        :class="isDragging ? 'ring-2 ring-(--ring)' : ''"
+        class="absolute w-36 select-none rounded-lg border border-border-strong bg-bg-elevated shadow-lg"
+        :class="isDragging ? 'ring-2 ring-ring' : ''"
       >
         <div
           ref="handle"
-          class="flex items-center gap-1.5 rounded-t-lg border-b border-(--border) bg-(--bg-subtle) px-3 py-2 cursor-grab active:cursor-grabbing"
+          class="flex items-center gap-1.5 rounded-t-lg border-b border-border bg-bg-subtle px-3 py-2 cursor-grab active:cursor-grabbing"
         >
-          <span class="text-(--fg-subtle)">⠿</span>
-          <span class="text-xs font-medium text-(--fg-muted)">Drag me</span>
+          <span class="text-fg-subtle">⠿</span>
+          <span class="text-xs font-medium text-fg-muted">Drag me</span>
         </div>
-        <div class="p-3 font-mono text-xs tabular-nums text-(--fg)">
+        <div class="p-3 font-mono text-xs tabular-nums text-fg">
           <div>x: {{ Math.round(x) }}</div>
           <div>y: {{ Math.round(y) }}</div>
         </div>
       </div>
     </div>
 
-    <p class="text-center text-xs text-(--fg-subtle)">
+    <p class="text-center text-xs text-fg-subtle">
       Drag from the header. Movement is clamped to the container bounds.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/elements/useDraggable/index.ts b/vue/toolkit/src/composables/elements/useDraggable/index.ts
index 35face0..4c0556c 100644
--- a/vue/toolkit/src/composables/elements/useDraggable/index.ts
+++ b/vue/toolkit/src/composables/elements/useDraggable/index.ts
@@ -1,6 +1,6 @@
 import { computed, shallowRef, toValue } from 'vue';
 import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
-import { noop } from '@robonen/stdlib';
+import { clamp, noop } from '@robonen/stdlib';
 import { defaultWindow } from '@/types';
 import { useEventListener } from '@/composables/browser/useEventListener';
 import { unrefElement } from '@/composables/component/unrefElement';
@@ -259,13 +259,13 @@ export function useDraggable(
     if (axis === 'x' || axis === 'both') {
       x = event.clientX - pressedDelta.value.x;
       if (container && targetRect)
-        x = Math.min(Math.max(0, x), container.scrollWidth - targetRect.width);
+        x = clamp(x, 0, container.scrollWidth - targetRect.width);
     }
 
     if (axis === 'y' || axis === 'both') {
       y = event.clientY - pressedDelta.value.y;
       if (container && targetRect)
-        y = Math.min(Math.max(0, y), container.scrollHeight - targetRect.height);
+        y = clamp(y, 0, container.scrollHeight - targetRect.height);
     }
 
     position.value = { x, y };
diff --git a/vue/toolkit/src/composables/elements/useDropZone/demo.vue b/vue/toolkit/src/composables/elements/useDropZone/demo.vue
index 7961c1a..ecff1fd 100644
--- a/vue/toolkit/src/composables/elements/useDropZone/demo.vue
+++ b/vue/toolkit/src/composables/elements/useDropZone/demo.vue
@@ -24,7 +24,7 @@ function formatSize(bytes: number): string {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       v-if="!isSupported"
       class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center text-sm text-amber-700 dark:text-amber-300"
@@ -37,33 +37,33 @@ function formatSize(bytes: number): string {
         ref="dropZone"
         class="flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-8 text-center transition"
         :class="isOverDropZone
-          ? 'border-(--accent) bg-(--accent-subtle)'
-          : 'border-(--border-strong) bg-(--bg-elevated)'"
+          ? 'border-accent bg-accent-subtle'
+          : 'border-border-strong bg-bg-elevated'"
       >
         <span class="text-3xl transition" :class="isOverDropZone ? 'scale-110' : ''">
           {{ isOverDropZone ? '📥' : '🖼️' }}
         </span>
-        <p class="text-sm font-medium text-(--fg)">
+        <p class="text-sm font-medium text-fg">
           {{ isOverDropZone ? 'Release to drop' : 'Drop image files here' }}
         </p>
-        <p class="text-xs text-(--fg-subtle)">
+        <p class="text-xs text-fg-subtle">
           Only <span class="font-mono">image/*</span> files are accepted
         </p>
       </div>
 
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
         <div class="flex items-center justify-between">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          <span class="demo-label">
             Dropped files
           </span>
-          <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums">
+          <span class="inline-flex items-center gap-1.5 rounded-md border border-border bg-bg-elevated px-2 py-0.5 text-xs font-medium text-fg-muted tabular-nums">
             {{ fileList.length }}
           </span>
         </div>
 
         <p
           v-if="fileList.length === 0"
-          class="mt-3 text-center text-sm text-(--fg-subtle)"
+          class="mt-3 text-center text-sm text-fg-subtle"
         >
           Nothing dropped yet.
         </p>
@@ -72,10 +72,10 @@ function formatSize(bytes: number): string {
           <li
             v-for="file in fileList"
             :key="file.name"
-            class="flex items-center justify-between gap-3 rounded-md bg-(--bg-elevated) px-2.5 py-1.5"
+            class="flex items-center justify-between gap-3 rounded-md bg-bg-elevated px-2.5 py-1.5"
           >
-            <span class="truncate text-sm text-(--fg)">{{ file.name }}</span>
-            <span class="shrink-0 font-mono text-xs tabular-nums text-(--fg-subtle)">
+            <span class="truncate text-sm text-fg">{{ file.name }}</span>
+            <span class="shrink-0 font-mono text-xs tabular-nums text-fg-subtle">
               {{ formatSize(file.size) }}
             </span>
           </li>
diff --git a/vue/toolkit/src/composables/elements/useElementBounding/demo.vue b/vue/toolkit/src/composables/elements/useElementBounding/demo.vue
index 59b4110..5504863 100644
--- a/vue/toolkit/src/composables/elements/useElementBounding/demo.vue
+++ b/vue/toolkit/src/composables/elements/useElementBounding/demo.vue
@@ -34,20 +34,20 @@ function fmt(n: number) {
 </script>
 
 <template>
-  <div class="w-full max-w-md flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+  <div class="demo-stack max-w-md">
+    <div class="demo-card p-4 flex flex-col gap-4">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">getBoundingClientRect</span>
-        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="demo-label">getBoundingClientRect</span>
+        <span class="demo-badge">
           {{ timing }}
         </span>
       </div>
 
       <!-- The measured target. Resizing it mutates the reactive bounds. -->
-      <div class="relative h-40 overflow-hidden rounded-lg border border-(--border) bg-(--bg-inset)">
+      <div class="relative h-40 overflow-hidden rounded-lg border border-border bg-bg-inset">
         <div
           ref="target"
-          class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 grid place-items-center rounded-lg bg-(--accent) text-(--accent-fg) shadow transition-[width,height] duration-150"
+          class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 grid place-items-center rounded-lg bg-accent text-accent-fg shadow transition-[width,height] duration-150"
           :style="{ width: `${size}px`, height: `${size}px` }"
         >
           <span class="font-mono text-xs font-semibold tabular-nums">{{ fmt(bounds.width.value) }}×{{ fmt(bounds.height.value) }}</span>
@@ -58,18 +58,18 @@ function fmt(n: number) {
         <div
           v-for="m in metrics"
           :key="m.label"
-          class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center"
+          class="rounded-lg border border-border bg-bg-inset p-2 text-center"
         >
-          <div class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ fmt(m.value) }}</div>
-          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">{{ m.label }}</div>
+          <div class="demo-stat text-sm">{{ fmt(m.value) }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-fg-subtle">{{ m.label }}</div>
         </div>
       </div>
     </div>
 
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="bound-size">Size</label>
-        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ size }}px</span>
+        <label class="demo-label" for="bound-size">Size</label>
+        <span class="font-mono text-xs tabular-nums text-fg-muted">{{ size }}px</span>
       </div>
       <input
         id="bound-size"
@@ -78,7 +78,7 @@ function fmt(n: number) {
         min="32"
         max="140"
         step="2"
-        class="w-full accent-(--accent) cursor-pointer"
+        class="w-full accent-accent cursor-pointer"
       >
     </div>
 
@@ -89,22 +89,22 @@ function fmt(n: number) {
         type="button"
         class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
         :class="timing === opt
-          ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
-          : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          ? 'border-transparent bg-accent text-accent-fg hover:bg-accent-hover'
+          : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
         @click="timing = opt"
       >
         {{ opt }}
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="bounds.update()"
       >
         Update
       </button>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       <span class="font-mono">next-frame</span> batches rapid scroll/resize reads into one measurement per animation frame.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/elements/useElementSize/demo.vue b/vue/toolkit/src/composables/elements/useElementSize/demo.vue
index 474cb27..3212c57 100644
--- a/vue/toolkit/src/composables/elements/useElementSize/demo.vue
+++ b/vue/toolkit/src/composables/elements/useElementSize/demo.vue
@@ -25,12 +25,12 @@ function fmt(n: number) {
 </script>
 
 <template>
-  <div class="w-full max-w-md flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+  <div class="demo-stack max-w-md">
+    <div class="demo-card p-4 flex flex-col gap-4">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">ResizeObserver</span>
-        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
-          <span class="size-1.5 rounded-full" :class="observing ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+        <span class="demo-label">ResizeObserver</span>
+        <span class="demo-badge">
+          <span class="size-1.5 rounded-full" :class="observing ? 'bg-emerald-500' : 'bg-fg-subtle'" />
           {{ observing ? 'Observing' : 'Stopped' }}
         </span>
       </div>
@@ -40,25 +40,25 @@ function fmt(n: number) {
         ref="target"
         readonly
         :style="{ padding: `${padding}px` }"
-        class="w-full min-h-24 resize rounded-lg border border-(--border-strong) bg-(--bg-inset) text-sm leading-relaxed text-(--fg-muted) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="w-full min-h-24 resize rounded-lg border border-border-strong bg-bg-inset text-sm leading-relaxed text-fg-muted focus:outline-none focus:ring-2 focus:ring-ring"
       >Drag the bottom-right corner to resize me. The width and height update live as the ResizeObserver fires. Border-box sizing includes the padding below.</textarea>
 
       <div class="grid grid-cols-2 gap-3">
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
-          <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ fmt(width) }}</div>
-          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">width px</div>
+        <div class="rounded-lg border border-border bg-bg-inset p-3 text-center">
+          <div class="demo-stat text-3xl">{{ fmt(width) }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-fg-subtle">width px</div>
         </div>
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
-          <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ fmt(height) }}</div>
-          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">height px</div>
+        <div class="rounded-lg border border-border bg-bg-inset p-3 text-center">
+          <div class="demo-stat text-3xl">{{ fmt(height) }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-fg-subtle">height px</div>
         </div>
       </div>
     </div>
 
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="size-padding">Padding (border-box)</label>
-        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ padding }}px</span>
+        <label class="demo-label" for="size-padding">Padding (border-box)</label>
+        <span class="font-mono text-xs tabular-nums text-fg-muted">{{ padding }}px</span>
       </div>
       <input
         id="size-padding"
@@ -67,20 +67,20 @@ function fmt(n: number) {
         min="0"
         max="40"
         step="2"
-        class="w-full accent-(--accent) cursor-pointer"
+        class="w-full accent-accent cursor-pointer"
       >
     </div>
 
     <button
       type="button"
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+      class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
       :disabled="!observing"
       @click="toggleObserver"
     >
       {{ observing ? 'Stop observing' : 'Observer stopped' }}
     </button>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       With <span class="font-mono">box: 'border-box'</span> the reported size includes padding, so the slider changes the numbers without resizing the element.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/elements/useElementVisibility/demo.vue b/vue/toolkit/src/composables/elements/useElementVisibility/demo.vue
index f13ae2e..6476a79 100644
--- a/vue/toolkit/src/composables/elements/useElementVisibility/demo.vue
+++ b/vue/toolkit/src/composables/elements/useElementVisibility/demo.vue
@@ -22,16 +22,16 @@ watch(isVisible, (visible, was) => {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">IntersectionObserver</span>
+      <span class="demo-label">IntersectionObserver</span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
         :class="isVisible
           ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          : 'border-border bg-bg-inset text-fg-muted'"
       >
-        <span class="size-1.5 rounded-full" :class="isVisible ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+        <span class="size-1.5 rounded-full" :class="isVisible ? 'bg-emerald-500' : 'bg-fg-subtle'" />
         {{ isVisible ? 'In view' : 'Hidden' }}
       </span>
     </div>
@@ -39,38 +39,38 @@ watch(isVisible, (visible, was) => {
     <!-- Scrollable root; the target card sits below the fold until scrolled. -->
     <div
       ref="root"
-      class="h-44 overflow-y-auto rounded-xl border border-(--border) bg-(--bg-inset) p-3"
+      class="h-44 overflow-y-auto rounded-xl border border-border bg-bg-inset p-3"
     >
-      <p class="text-sm text-(--fg-subtle)">Scroll down inside this box…</p>
+      <p class="text-sm text-fg-subtle">Scroll down inside this box…</p>
       <div class="h-40" />
       <div
         ref="target"
-        class="rounded-lg border border-(--border) bg-(--accent) p-4 text-center text-(--accent-fg) shadow transition"
+        class="rounded-lg border border-border bg-accent p-4 text-center text-accent-fg shadow transition"
         :class="isVisible ? 'opacity-100 scale-100' : 'opacity-60 scale-95'"
       >
         <div class="text-sm font-semibold">Target element</div>
         <div class="text-xs opacity-80">at least 50% visible to count</div>
       </div>
       <div class="h-24" />
-      <p class="text-sm text-(--fg-subtle)">…and back up to hide it again.</p>
+      <p class="text-sm text-fg-subtle">…and back up to hide it again.</p>
     </div>
 
     <div class="grid grid-cols-2 gap-3">
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
-        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ seenCount }}</div>
-        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">times seen</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3 text-center">
+        <div class="demo-stat text-3xl">{{ seenCount }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-fg-subtle">times seen</div>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center flex flex-col items-center justify-center">
-        <div class="text-sm font-semibold" :class="isActive ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'">
+      <div class="rounded-lg border border-border bg-bg-inset p-3 text-center flex flex-col items-center justify-center">
+        <div class="text-sm font-semibold" :class="isActive ? 'text-emerald-600 dark:text-emerald-400' : 'text-fg-muted'">
           {{ isActive ? 'Active' : 'Paused' }}
         </div>
-        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">observer</div>
+        <div class="text-[10px] uppercase tracking-wide text-fg-subtle">observer</div>
       </div>
     </div>
 
     <button
       type="button"
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      class="demo-btn"
       @click="isActive ? pause() : resume()"
     >
       {{ isActive ? 'Pause observer' : 'Resume observer' }}
diff --git a/vue/toolkit/src/composables/elements/useFocusGuard/demo.vue b/vue/toolkit/src/composables/elements/useFocusGuard/demo.vue
index c27546e..0c85b37 100644
--- a/vue/toolkit/src/composables/elements/useFocusGuard/demo.vue
+++ b/vue/toolkit/src/composables/elements/useFocusGuard/demo.vue
@@ -26,31 +26,31 @@ const fields = [
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <component :is="GuardHost" v-if="enabled" />
 
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Focus guards</span>
+      <span class="demo-label">Focus guards</span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
         :class="enabled
           ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          : 'border-border bg-bg-inset text-fg-muted'"
       >
-        <span class="size-1.5 rounded-full" :class="enabled ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+        <span class="size-1.5 rounded-full" :class="enabled ? 'bg-emerald-500' : 'bg-fg-subtle'" />
         {{ enabled ? 'Mounted' : 'Off' }}
       </span>
     </div>
 
     <!-- A small focusable form to feel tab order with the guards active. -->
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+    <div class="demo-card p-4 flex flex-col gap-3">
       <div v-for="f in fields" :key="f.id" class="flex flex-col gap-1">
-        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" :for="f.id">{{ f.label }}</label>
+        <label class="demo-label" :for="f.id">{{ f.label }}</label>
         <input
           :id="f.id"
           :value="f.value"
           type="text"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="demo-input"
           @focus="focused = f.label"
           @blur="focused = null"
         >
@@ -58,7 +58,7 @@ const fields = [
 
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary"
         @focus="focused = 'Submit'"
         @blur="focused = null"
       >
@@ -66,19 +66,19 @@ const fields = [
       </button>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
       focused: {{ focused ?? 'nothing' }}
     </div>
 
     <button
       type="button"
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      class="demo-btn"
       @click="enabled = !enabled"
     >
       {{ enabled ? 'Remove focus guards' : 'Mount focus guards' }}
     </button>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Guards are invisible <span class="font-mono">tabindex="0"</span> sentinels inserted at the page boundaries. Tab past the last field with them on to feel focus wrap around for overlays and modals.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/elements/useIntersectionObserver/demo.vue b/vue/toolkit/src/composables/elements/useIntersectionObserver/demo.vue
index 87925ca..7003161 100644
--- a/vue/toolkit/src/composables/elements/useIntersectionObserver/demo.vue
+++ b/vue/toolkit/src/composables/elements/useIntersectionObserver/demo.vue
@@ -48,10 +48,10 @@ const activeId = computed(() => {
 </script>
 
 <template>
-  <div class="w-full max-w-md flex flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Scroll spy</span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-label">Scroll spy</span>
+      <span class="demo-badge">
         active: {{ activeId ?? '—' }}
       </span>
     </div>
@@ -64,8 +64,8 @@ const activeId = computed(() => {
           :key="s.id"
           class="flex items-center gap-2 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition"
           :class="activeId === s.id
-            ? 'border-(--border-strong) bg-(--bg-inset) text-(--fg)'
-            : 'border-transparent text-(--fg-muted)'"
+            ? 'border-border-strong bg-bg-inset text-fg'
+            : 'border-transparent text-fg-muted'"
         >
           <span class="size-2 rounded-full transition" :class="[s.color, activeId === s.id ? 'opacity-100' : 'opacity-30']" />
           {{ s.label }}
@@ -75,29 +75,29 @@ const activeId = computed(() => {
       <!-- Scrollable content; each section is an observed target. -->
       <div
         ref="root"
-        class="h-56 flex-1 overflow-y-auto rounded-xl border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-3 scroll-smooth"
+        class="h-56 flex-1 overflow-y-auto rounded-xl border border-border bg-bg-inset p-3 flex flex-col gap-3 scroll-smooth"
       >
         <section
           v-for="s in sections"
           :key="s.id"
           ref="itemEls"
           :data-id="s.id"
-          class="rounded-lg border border-(--border) bg-(--bg-elevated) p-4 transition"
-          :class="activeId === s.id ? 'ring-2 ring-(--ring)' : ''"
+          class="rounded-lg border border-border bg-bg-elevated p-4 transition"
+          :class="activeId === s.id ? 'ring-2 ring-ring' : ''"
         >
-          <h3 class="text-sm font-semibold text-(--fg)">{{ s.label }}</h3>
-          <p class="mt-1 text-xs text-(--fg-subtle)">
+          <h3 class="text-sm font-semibold text-fg">{{ s.label }}</h3>
+          <p class="mt-1 text-xs text-fg-subtle">
             Visibility: {{ Math.round((ratios[s.id] ?? 0) * 100) }}%
           </p>
-          <div class="mt-2 h-16 rounded bg-(--bg-inset)" />
+          <div class="mt-2 h-16 rounded bg-bg-inset" />
         </section>
       </div>
     </div>
 
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="io-threshold">Active threshold</label>
-        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ Math.round(threshold * 100) }}%</span>
+        <label class="demo-label" for="io-threshold">Active threshold</label>
+        <span class="font-mono text-xs tabular-nums text-fg-muted">{{ Math.round(threshold * 100) }}%</span>
       </div>
       <input
         id="io-threshold"
@@ -106,9 +106,9 @@ const activeId = computed(() => {
         min="0.1"
         max="0.9"
         step="0.1"
-        class="w-full accent-(--accent) cursor-pointer"
+        class="w-full accent-accent cursor-pointer"
       >
-      <p class="text-xs text-(--fg-subtle)">A section becomes active once at least this much of it is visible inside the scroll root.</p>
+      <p class="text-xs text-fg-subtle">A section becomes active once at least this much of it is visible inside the scroll root.</p>
     </div>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/elements/useMutationObserver/demo.vue b/vue/toolkit/src/composables/elements/useMutationObserver/demo.vue
index 460d995..49f6a18 100644
--- a/vue/toolkit/src/composables/elements/useMutationObserver/demo.vue
+++ b/vue/toolkit/src/composables/elements/useMutationObserver/demo.vue
@@ -45,10 +45,10 @@ function removeLabel() {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">MutationObserver</span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-label">MutationObserver</span>
+      <span class="demo-badge">
         <span class="size-1.5 rounded-full transition" :class="isActive ? 'bg-emerald-500' : 'bg-amber-500'" />
         {{ isActive ? 'Observing' : 'Paused' }}
       </span>
@@ -63,46 +63,46 @@ function removeLabel() {
       <div
         ref="target"
         class="rounded-xl border p-4 transition"
-        :class="accent ? 'border-(--accent) bg-(--accent-subtle)' : 'border-(--border) bg-(--bg-elevated)'"
+        :class="accent ? 'border-accent bg-accent-subtle' : 'border-border bg-bg-elevated'"
         :style="{ fontSize: `${fontSize}px` }"
       >
-        <div class="mb-2 text-xs font-medium uppercase tracking-wide" :class="accent ? 'text-(--accent-text)' : 'text-(--fg-subtle)'">
+        <div class="mb-2 text-xs font-medium uppercase tracking-wide" :class="accent ? 'text-accent-text' : 'text-fg-subtle'">
           Observed element
         </div>
         <div class="flex flex-wrap gap-1.5">
           <span
             v-for="(label, i) in labels"
             :key="`${label}-${i}`"
-            class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+            class="inline-flex items-center rounded-md border border-border bg-bg-inset px-2 py-0.5 text-xs font-medium text-fg-muted"
           >
             {{ label }}
           </span>
-          <span v-if="!labels.length" class="text-xs text-(--fg-subtle)">No labels</span>
+          <span v-if="!labels.length" class="text-xs text-fg-subtle">No labels</span>
         </div>
       </div>
 
       <div class="grid grid-cols-2 gap-2">
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
-          <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ mutationCount }}</div>
-          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">mutations</div>
+        <div class="rounded-lg border border-border bg-bg-inset p-3 text-center">
+          <div class="demo-stat text-3xl">{{ mutationCount }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-fg-subtle">mutations</div>
         </div>
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
-          <div class="truncate font-mono text-sm font-bold text-(--fg)">{{ lastType }}</div>
-          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">last record type</div>
+        <div class="rounded-lg border border-border bg-bg-inset p-3 text-center">
+          <div class="truncate font-mono text-sm font-bold text-fg">{{ lastType }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-fg-subtle">last record type</div>
         </div>
       </div>
 
       <div class="grid grid-cols-2 gap-2">
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="addLabel"
         >
           Add child
         </button>
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           :disabled="!labels.length"
           @click="removeLabel"
         >
@@ -110,31 +110,31 @@ function removeLabel() {
         </button>
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="accent = !accent"
         >
           Toggle class
         </button>
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="fontSize = fontSize === 14 ? 18 : 14"
         >
           Toggle style
         </button>
       </div>
 
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <div class="mb-1.5 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Recent records</div>
-        <ul v-if="log.length" class="flex flex-col gap-1 font-mono text-xs text-(--fg)">
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <div class="demo-label mb-1.5">Recent records</div>
+        <ul v-if="log.length" class="flex flex-col gap-1 font-mono text-xs text-fg">
           <li v-for="(entry, i) in log" :key="i" class="truncate">{{ entry }}</li>
         </ul>
-        <p v-else class="font-mono text-xs text-(--fg-subtle)">Mutate the element above to record changes.</p>
+        <p v-else class="font-mono text-xs text-fg-subtle">Mutate the element above to record changes.</p>
       </div>
 
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary"
         @click="isActive ? pause() : resume()"
       >
         {{ isActive ? 'Pause observer' : 'Resume observer' }}
diff --git a/vue/toolkit/src/composables/elements/useParentElement/demo.vue b/vue/toolkit/src/composables/elements/useParentElement/demo.vue
index 05ca7e6..36c083b 100644
--- a/vue/toolkit/src/composables/elements/useParentElement/demo.vue
+++ b/vue/toolkit/src/composables/elements/useParentElement/demo.vue
@@ -26,73 +26,73 @@ const parentInfo = computed(() => {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">parentElement</span>
+  <div class="demo-stack max-w-sm">
+    <span class="demo-label">parentElement</span>
 
     <!-- Two candidate parents; the child is teleported between them via v-if -->
     <div class="flex flex-col gap-3">
       <div
         id="wrapper-a"
         class="rounded-xl border border-dashed p-3 transition"
-        :class="!inSecond ? 'border-(--accent) bg-(--accent-subtle)' : 'border-(--border) bg-(--bg-elevated)'"
+        :class="!inSecond ? 'border-accent bg-accent-subtle' : 'border-border bg-bg-elevated'"
       >
-        <div class="mb-2 text-xs font-medium uppercase tracking-wide" :class="!inSecond ? 'text-(--accent-text)' : 'text-(--fg-subtle)'">
+        <div class="mb-2 text-xs font-medium uppercase tracking-wide" :class="!inSecond ? 'text-accent-text' : 'text-fg-subtle'">
           #wrapper-a
         </div>
         <div
           v-if="!inSecond"
           ref="child"
-          class="rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 text-sm font-medium text-(--fg)"
+          class="rounded-lg border border-border bg-bg-inset px-3 py-2 text-sm font-medium text-fg"
         >
           Tracked child
         </div>
-        <div v-else class="text-xs text-(--fg-subtle)">empty</div>
+        <div v-else class="text-xs text-fg-subtle">empty</div>
       </div>
 
       <div
         id="wrapper-b"
         class="rounded-xl border border-dashed p-3 transition"
-        :class="inSecond ? 'border-(--accent) bg-(--accent-subtle)' : 'border-(--border) bg-(--bg-elevated)'"
+        :class="inSecond ? 'border-accent bg-accent-subtle' : 'border-border bg-bg-elevated'"
       >
-        <div class="mb-2 text-xs font-medium uppercase tracking-wide" :class="inSecond ? 'text-(--accent-text)' : 'text-(--fg-subtle)'">
+        <div class="mb-2 text-xs font-medium uppercase tracking-wide" :class="inSecond ? 'text-accent-text' : 'text-fg-subtle'">
           #wrapper-b
         </div>
         <div
           v-if="inSecond"
           ref="child"
-          class="rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 text-sm font-medium text-(--fg)"
+          class="rounded-lg border border-border bg-bg-inset px-3 py-2 text-sm font-medium text-fg"
         >
           Tracked child
         </div>
-        <div v-else class="text-xs text-(--fg-subtle)">empty</div>
+        <div v-else class="text-xs text-fg-subtle">empty</div>
       </div>
     </div>
 
     <button
       type="button"
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+      class="demo-btn-primary"
       @click="inSecond = !inSecond"
     >
       Move child to #wrapper-{{ inSecond ? 'a' : 'b' }}
     </button>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
-      <div class="mb-2 font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Resolved parent</div>
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
+      <div class="demo-label mb-2 font-sans">Resolved parent</div>
       <template v-if="parentInfo">
         <div class="flex justify-between gap-2">
-          <span class="text-(--fg-subtle)">tag</span>
-          <span class="text-(--accent-text)">&lt;{{ parentInfo.tag }}&gt;</span>
+          <span class="text-fg-subtle">tag</span>
+          <span class="text-accent-text">&lt;{{ parentInfo.tag }}&gt;</span>
         </div>
         <div class="flex justify-between gap-2">
-          <span class="text-(--fg-subtle)">id</span>
+          <span class="text-fg-subtle">id</span>
           <span class="truncate">{{ parentInfo.id }}</span>
         </div>
         <div class="flex justify-between gap-2">
-          <span class="text-(--fg-subtle)">size</span>
+          <span class="text-fg-subtle">size</span>
           <span>{{ parentInfo.width }} × {{ parentInfo.height }}</span>
         </div>
       </template>
-      <div v-else class="font-sans text-xs text-(--fg-subtle)">Resolving parent on the client…</div>
+      <div v-else class="font-sans text-xs text-fg-subtle">Resolving parent on the client…</div>
     </div>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/elements/useResizeObserver/demo.vue b/vue/toolkit/src/composables/elements/useResizeObserver/demo.vue
index 025dabd..afc8dd2 100644
--- a/vue/toolkit/src/composables/elements/useResizeObserver/demo.vue
+++ b/vue/toolkit/src/composables/elements/useResizeObserver/demo.vue
@@ -22,10 +22,10 @@ const { isSupported, isActive, pause, resume } = useResizeObserver(
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">ResizeObserver</span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-label">ResizeObserver</span>
+      <span class="demo-badge">
         <span class="size-1.5 rounded-full transition" :class="isActive ? 'bg-emerald-500' : 'bg-amber-500'" />
         {{ isActive ? 'Observing' : 'Paused' }}
       </span>
@@ -39,40 +39,40 @@ const { isSupported, isActive, pause, resume } = useResizeObserver(
       <!-- Drag the bottom-right handle to resize; the observer reports new dimensions -->
       <div
         ref="target"
-        class="relative grid min-h-32 min-w-40 max-w-full resize overflow-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-4 place-items-center"
+        class="demo-card relative grid min-h-32 min-w-40 max-w-full resize overflow-auto p-4 place-items-center"
         style="width: 16rem; height: 8rem;"
       >
         <div class="pointer-events-none select-none text-center">
-          <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
-            {{ size.width }}<span class="text-(--fg-subtle)"> × </span>{{ size.height }}
+          <div class="demo-stat text-3xl">
+            {{ size.width }}<span class="text-fg-subtle"> × </span>{{ size.height }}
           </div>
-          <div class="mt-1 text-xs text-(--fg-subtle)">drag the bottom-right corner</div>
+          <div class="mt-1 text-xs text-fg-subtle">drag the bottom-right corner</div>
         </div>
       </div>
 
       <div class="grid grid-cols-3 gap-2">
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
-          <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ size.width }}</div>
-          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">width px</div>
+        <div class="rounded-lg border border-border bg-bg-inset p-2 text-center">
+          <div class="demo-stat text-lg">{{ size.width }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-fg-subtle">width px</div>
         </div>
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
-          <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ size.height }}</div>
-          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">height px</div>
+        <div class="rounded-lg border border-border bg-bg-inset p-2 text-center">
+          <div class="demo-stat text-lg">{{ size.height }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-fg-subtle">height px</div>
         </div>
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
-          <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ callbacks }}</div>
-          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">callbacks</div>
+        <div class="rounded-lg border border-border bg-bg-inset p-2 text-center">
+          <div class="demo-stat text-lg">{{ callbacks }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-fg-subtle">callbacks</div>
         </div>
       </div>
 
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary"
         @click="isActive ? pause() : resume()"
       >
         {{ isActive ? 'Pause observer' : 'Resume observer' }}
       </button>
-      <p class="text-xs text-(--fg-subtle)">
+      <p class="text-xs text-fg-subtle">
         While paused, resizing won't update the readout until you resume.
       </p>
     </template>
diff --git a/vue/toolkit/src/composables/elements/useWindowFocus/demo.vue b/vue/toolkit/src/composables/elements/useWindowFocus/demo.vue
index 8424b7f..316d713 100644
--- a/vue/toolkit/src/composables/elements/useWindowFocus/demo.vue
+++ b/vue/toolkit/src/composables/elements/useWindowFocus/demo.vue
@@ -14,39 +14,39 @@ watch(focused, (isFocused) => {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Window focus</span>
+  <div class="demo-stack max-w-sm">
+    <span class="demo-label">Window focus</span>
 
     <div
       class="rounded-xl border p-6 text-center transition"
       :class="focused
         ? 'border-emerald-500/30 bg-emerald-500/10'
-        : 'border-(--border) bg-(--bg-inset)'"
+        : 'border-border bg-bg-inset'"
     >
       <div
         class="mx-auto flex size-14 items-center justify-center rounded-full transition"
         :class="focused
           ? 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400'
-          : 'bg-(--bg-elevated) text-(--fg-subtle)'"
+          : 'bg-bg-elevated text-fg-subtle'"
       >
-        <span class="size-3 rounded-full transition" :class="focused ? 'bg-emerald-500 animate-pulse' : 'bg-(--fg-subtle)'" />
+        <span class="size-3 rounded-full transition" :class="focused ? 'bg-emerald-500 animate-pulse' : 'bg-fg-subtle'" />
       </div>
-      <div class="mt-3 text-lg font-semibold text-(--fg)">
+      <div class="mt-3 text-lg font-semibold text-fg">
         {{ focused ? 'Window focused' : 'Window blurred' }}
       </div>
-      <p class="mt-1 text-sm text-(--fg-muted)">
+      <p class="mt-1 text-sm text-fg-muted">
         {{ focused ? 'Click outside or switch apps to blur.' : 'Click back into this window to refocus.' }}
       </p>
     </div>
 
     <div class="grid grid-cols-2 gap-2">
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
-        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ focused ? 'on' : 'off' }}</div>
-        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">focused</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3 text-center">
+        <div class="demo-stat text-3xl">{{ focused ? 'on' : 'off' }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-fg-subtle">focused</div>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
-        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ blurCount }}</div>
-        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">times blurred</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3 text-center">
+        <div class="demo-stat text-3xl">{{ blurCount }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-fg-subtle">times blurred</div>
       </div>
     </div>
   </div>
diff --git a/vue/toolkit/src/composables/elements/useWindowScroll/demo.vue b/vue/toolkit/src/composables/elements/useWindowScroll/demo.vue
index 7f022dd..87a5e7b 100644
--- a/vue/toolkit/src/composables/elements/useWindowScroll/demo.vue
+++ b/vue/toolkit/src/composables/elements/useWindowScroll/demo.vue
@@ -25,53 +25,53 @@ function scrollToBottom() {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Window scroll</span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
-        <span class="size-1.5 rounded-full transition" :class="isScrolling ? 'bg-emerald-500 animate-pulse' : 'bg-(--fg-subtle)'" />
+      <span class="demo-label">Window scroll</span>
+      <span class="demo-badge">
+        <span class="size-1.5 rounded-full transition" :class="isScrolling ? 'bg-emerald-500 animate-pulse' : 'bg-fg-subtle'" />
         {{ isScrolling ? 'Scrolling' : 'Idle' }}
       </span>
     </div>
 
     <div class="grid grid-cols-2 gap-2">
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
-        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ Math.round(x) }}</div>
-        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">scroll x</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3 text-center">
+        <div class="demo-stat text-3xl">{{ Math.round(x) }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-fg-subtle">scroll x</div>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
-        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ Math.round(y) }}</div>
-        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">scroll y</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3 text-center">
+        <div class="demo-stat text-3xl">{{ Math.round(y) }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-fg-subtle">scroll y</div>
       </div>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+    <div class="demo-card p-4 flex flex-col gap-3">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Direction</span>
-        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="demo-label">Direction</span>
+        <span class="demo-badge">
           {{ verticalDirection }}
         </span>
       </div>
 
       <div class="flex flex-col gap-2">
         <div class="flex items-center justify-between text-sm">
-          <span class="text-(--fg-muted)">Arrived at top</span>
+          <span class="text-fg-muted">Arrived at top</span>
           <span
             class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium"
             :class="arrivedState.top
               ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-              : 'bg-(--bg-inset) text-(--fg-subtle)'"
+              : 'bg-bg-inset text-fg-subtle'"
           >
             {{ arrivedState.top ? 'yes' : 'no' }}
           </span>
         </div>
         <div class="flex items-center justify-between text-sm">
-          <span class="text-(--fg-muted)">Arrived at bottom</span>
+          <span class="text-fg-muted">Arrived at bottom</span>
           <span
             class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium"
             :class="arrivedState.bottom
               ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-              : 'bg-(--bg-inset) text-(--fg-subtle)'"
+              : 'bg-bg-inset text-fg-subtle'"
           >
             {{ arrivedState.bottom ? 'yes' : 'no' }}
           </span>
@@ -82,7 +82,7 @@ function scrollToBottom() {
     <div class="grid grid-cols-2 gap-2">
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="arrivedState.top"
         @click="scrollToTop"
       >
@@ -90,7 +90,7 @@ function scrollToBottom() {
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="arrivedState.bottom"
         @click="scrollToBottom"
       >
@@ -100,12 +100,12 @@ function scrollToBottom() {
 
     <button
       type="button"
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      class="demo-btn"
       @click="measure"
     >
       Re-measure
     </button>
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Scroll the documentation page to watch the position and arrived edges update live.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/elements/useWindowSize/demo.vue b/vue/toolkit/src/composables/elements/useWindowSize/demo.vue
index 47574ec..f3d149e 100644
--- a/vue/toolkit/src/composables/elements/useWindowSize/demo.vue
+++ b/vue/toolkit/src/composables/elements/useWindowSize/demo.vue
@@ -13,57 +13,57 @@ const ratioPercent = computed(() => {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="grid grid-cols-2 gap-3">
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 text-center">
-        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <div class="demo-card p-4 text-center">
+        <p class="demo-label">
           Width
         </p>
-        <p class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+        <p class="demo-stat text-3xl">
           {{ width }}
         </p>
-        <p class="text-xs text-(--fg-subtle)">
+        <p class="text-xs text-fg-subtle">
           px
         </p>
       </div>
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 text-center">
-        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <div class="demo-card p-4 text-center">
+        <p class="demo-label">
           Height
         </p>
-        <p class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+        <p class="demo-stat text-3xl">
           {{ height }}
         </p>
-        <p class="text-xs text-(--fg-subtle)">
+        <p class="text-xs text-fg-subtle">
           px
         </p>
       </div>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+    <div class="demo-card p-4">
       <div
-        class="relative flex items-center justify-center overflow-hidden rounded-lg border border-(--border-strong) bg-(--bg-inset) transition-all"
+        class="relative flex items-center justify-center overflow-hidden rounded-lg border border-border-strong bg-bg-inset transition-all"
         :style="{ aspectRatio: `${Math.max(width, 1)} / ${Math.max(height, 1)}` }"
       >
         <div
-          class="absolute inset-y-0 left-0 bg-(--accent-subtle) transition-all"
+          class="absolute inset-y-0 left-0 bg-accent-subtle transition-all"
           :style="{ width: `${ratioPercent}%` }"
         />
-        <span class="relative font-mono text-xs text-(--fg-muted) tabular-nums">
+        <span class="relative font-mono text-xs text-fg-muted tabular-nums">
           {{ width }} × {{ height }}
         </span>
       </div>
     </div>
 
     <div class="flex flex-wrap items-center justify-center gap-2">
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-badge">
         {{ orientation }}
       </span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-badge">
         ratio {{ aspect }}
       </span>
     </div>
 
-    <p class="text-center text-xs text-(--fg-subtle)">
+    <p class="text-center text-xs text-fg-subtle">
       Resize your browser window to watch the values update live.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/forms/mask/presets/card.ts b/vue/toolkit/src/composables/forms/mask/presets/card.ts
index 3be09d6..30c95d8 100644
--- a/vue/toolkit/src/composables/forms/mask/presets/card.ts
+++ b/vue/toolkit/src/composables/forms/mask/presets/card.ts
@@ -1,14 +1,13 @@
 import { CARD_BRANDS, findCardBrand } from '@robonen/platform/multi';
 import type { CardBrand } from '@robonen/platform/multi';
-import type { ElementState, MaskExpression, MaskOptions } from '../types';
-import { maskFromTemplate } from './template';
+import type { MaskOptions } from '../types';
+import { createDynamicMask } from './dynamic';
 
 // Re-export the platform reference data + resolver + validator (source of truth
 // lives in `@robonen/platform`; the Luhn primitive lives in `@robonen/encoding`).
 export { CARD_BRANDS, findCardBrand, isValidCardNumber } from '@robonen/platform/multi';
 export type { CardBrand } from '@robonen/platform/multi';
 
-const NON_DIGIT = /\D/g;
 const DEFAULT_CARD_FALLBACK = '#### #### #### ####';
 
 /**
@@ -55,22 +54,9 @@ export function maskCardOptions(params: MaskCardParams = {}): MaskOptions {
   const brands = params.brands ?? CARD_BRANDS;
   const fallback = params.fallback ?? DEFAULT_CARD_FALLBACK;
 
-  // 1-entry memo: resolveMask fires several times per keystroke with the same
-  // digits, and the expression is a pure function of those digits.
-  let lastDigits = '';
-  let lastExpression: MaskExpression = maskFromTemplate(fallback, params.tokens);
-
-  return {
-    mask: (state: ElementState): MaskExpression => {
-      const digits = state.value.replaceAll(NON_DIGIT, '');
-      if (digits === lastDigits)
-        return lastExpression;
-
-      const brand = findCardBrand(digits, brands);
-      lastDigits = digits;
-      lastExpression = maskFromTemplate(brand?.template ?? fallback, params.tokens);
-
-      return lastExpression;
-    },
-  };
+  return createDynamicMask(
+    digits => findCardBrand(digits, brands)?.template ?? fallback,
+    fallback,
+    params.tokens,
+  );
 }
diff --git a/vue/toolkit/src/composables/forms/mask/presets/dynamic.ts b/vue/toolkit/src/composables/forms/mask/presets/dynamic.ts
new file mode 100644
index 0000000..b1d1d97
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/mask/presets/dynamic.ts
@@ -0,0 +1,39 @@
+import type { ElementState, MaskExpression, MaskOptions } from '../types';
+import { maskFromTemplate } from './template';
+
+const NON_DIGIT = /\D/g;
+
+/**
+ * Build a digit-driven dynamic mask: the template is recomputed only when the
+ * stripped digit string changes (`resolveMask` fires several times per keystroke
+ * with the same digits, and the expression is a pure function of them). Shared
+ * by the card- and phone-country presets, which differ only in how they turn the
+ * digits into a template.
+ *
+ * @param resolveTemplate Maps the current digit string to a mask template (it
+ *   should already apply its own fallback when nothing matches).
+ * @param fallback Template used for the initial (empty) state.
+ * @param tokens Token map applied to every template.
+ */
+export function createDynamicMask(
+  resolveTemplate: (digits: string) => string,
+  fallback: string,
+  tokens?: Readonly<Record<string, RegExp>>,
+): MaskOptions {
+  // 1-entry memo keyed on the digit string.
+  let lastDigits = '';
+  let lastExpression: MaskExpression = maskFromTemplate(fallback, tokens);
+
+  return {
+    mask: (state: ElementState): MaskExpression => {
+      const digits = state.value.replaceAll(NON_DIGIT, '');
+      if (digits === lastDigits)
+        return lastExpression;
+
+      lastDigits = digits;
+      lastExpression = maskFromTemplate(resolveTemplate(digits), tokens);
+
+      return lastExpression;
+    },
+  };
+}
diff --git a/vue/toolkit/src/composables/forms/mask/presets/phone-country.ts b/vue/toolkit/src/composables/forms/mask/presets/phone-country.ts
index 3674040..c005792 100644
--- a/vue/toolkit/src/composables/forms/mask/presets/phone-country.ts
+++ b/vue/toolkit/src/composables/forms/mask/presets/phone-country.ts
@@ -1,14 +1,13 @@
 import { PHONE_COUNTRIES, findPhoneCountry } from '@robonen/platform/multi';
 import type { PhoneCountry } from '@robonen/platform/multi';
-import type { ElementState, MaskExpression, MaskOptions } from '../types';
-import { maskFromTemplate } from './template';
+import type { MaskOptions } from '../types';
+import { createDynamicMask } from './dynamic';
 
 // Re-export the platform reference data + resolver so mask consumers get them
 // from one place (the source of truth lives in `@robonen/platform`).
 export { PHONE_COUNTRIES, findPhoneCountry } from '@robonen/platform/multi';
 export type { PhoneCountry } from '@robonen/platform/multi';
 
-const NON_DIGIT = /\D/g;
 const DEFAULT_PHONE_FALLBACK = '+###############';
 
 /**
@@ -63,22 +62,9 @@ export function maskPhoneCountryOptions(params: MaskPhoneCountryParams = {}): Ma
   const countries = params.countries ?? PHONE_COUNTRIES;
   const fallback = params.fallback ?? DEFAULT_PHONE_FALLBACK;
 
-  // 1-entry memo: resolveMask fires several times per keystroke with the same
-  // digits, and the expression is a pure function of those digits.
-  let lastDigits = '';
-  let lastExpression: MaskExpression = maskFromTemplate(fallback, params.tokens);
-
-  return {
-    mask: (state: ElementState): MaskExpression => {
-      const digits = state.value.replaceAll(NON_DIGIT, '');
-      if (digits === lastDigits)
-        return lastExpression;
-
-      const country = findPhoneCountry(digits, countries);
-      lastDigits = digits;
-      lastExpression = maskFromTemplate(country?.template ?? fallback, params.tokens);
-
-      return lastExpression;
-    },
-  };
+  return createDynamicMask(
+    digits => findPhoneCountry(digits, countries)?.template ?? fallback,
+    fallback,
+    params.tokens,
+  );
 }
diff --git a/vue/toolkit/src/composables/forms/useField/demo.vue b/vue/toolkit/src/composables/forms/useField/demo.vue
index 7b8c44c..c8de9c6 100644
--- a/vue/toolkit/src/composables/forms/useField/demo.vue
+++ b/vue/toolkit/src/composables/forms/useField/demo.vue
@@ -22,14 +22,14 @@ const {
   },
 });
 
-const inputClass = 'w-full rounded-lg border bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:outline-none focus:ring-2 focus:ring-(--ring)';
+const inputClass = 'w-full rounded-lg border bg-bg px-3 py-2 text-sm text-fg placeholder:text-fg-subtle transition focus:outline-none focus:ring-2 focus:ring-ring';
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex flex-col gap-1.5">
       <label
-        class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)"
+        class="demo-label"
         :for="attrs.name"
       >
         Email address
@@ -44,7 +44,7 @@ const inputClass = 'w-full rounded-lg border bg-(--bg) px-3 py-2 text-sm text-(-
           inputClass,
           meta.touched.value && errorMessage
             ? 'border-red-500/60 focus:border-red-500'
-            : 'border-(--border) focus:border-(--accent)',
+            : 'border-border focus:border-accent',
         ]"
       >
       <p
@@ -55,7 +55,7 @@ const inputClass = 'w-full rounded-lg border bg-(--bg) px-3 py-2 text-sm text-(-
       </p>
       <p
         v-else
-        class="text-xs text-(--fg-subtle)"
+        class="text-xs text-fg-subtle"
       >
         Validates on every keystroke.
       </p>
@@ -70,10 +70,10 @@ const inputClass = 'w-full rounded-lg border bg-(--bg) px-3 py-2 text-sm text-(-
       >
         {{ meta.valid.value ? 'valid' : 'invalid' }}
       </span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-badge">
         dirty: {{ meta.dirty.value }}
       </span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-badge">
         touched: {{ meta.touched.value }}
       </span>
     </div>
@@ -81,21 +81,21 @@ const inputClass = 'w-full rounded-lg border bg-(--bg) px-3 py-2 text-sm text-(-
     <div class="flex gap-2">
       <button
         type="button"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary flex-1"
         @click="validate()"
       >
         Validate
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="reset()"
       >
         Reset
       </button>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
       value: "{{ value }}"
     </div>
   </div>
diff --git a/vue/toolkit/src/composables/forms/useField/index.ts b/vue/toolkit/src/composables/forms/useField/index.ts
index 6ebb6eb..7d448fb 100644
--- a/vue/toolkit/src/composables/forms/useField/index.ts
+++ b/vue/toolkit/src/composables/forms/useField/index.ts
@@ -2,7 +2,7 @@ import { computed, ref, toValue, watch } from 'vue';
 import type { MaybeRefOrGetter, Ref } from 'vue';
 import { cloneFnDefault } from '@/composables/reactivity/useCloned';
 import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
-import { isEqual } from '@robonen/stdlib';
+import { isArray, isEqual } from '@robonen/stdlib';
 import { injectFormContext } from '../useForm/context';
 import { normalizeFieldResult, runStandardSchema } from '../useForm/validation';
 import type {
@@ -40,7 +40,7 @@ import type {
  *
  * @since 0.0.16
  */
-export function useField<T = any>(
+export function useField<T = unknown>(
   path: MaybeRefOrGetter<string>,
   options: UseFieldOptions<T> = {},
 ): UseFieldReturn<T> {
@@ -223,7 +223,7 @@ export function useField<T = any>(
       localTouched.value = touched;
     },
     setErrors: (message) => {
-      localErrors.value = message === null ? [] : Array.isArray(message) ? message : [message];
+      localErrors.value = message === null ? [] : isArray(message) ? message : [message];
     },
     validate: runLocal,
     reset: () => {
diff --git a/vue/toolkit/src/composables/forms/useFieldArray/demo.vue b/vue/toolkit/src/composables/forms/useFieldArray/demo.vue
index 2b84ecf..396a87b 100644
--- a/vue/toolkit/src/composables/forms/useFieldArray/demo.vue
+++ b/vue/toolkit/src/composables/forms/useFieldArray/demo.vue
@@ -29,12 +29,12 @@ function addTask(): void {
 <template>
   <div class="flex w-full max-w-md flex-col gap-3">
     <div class="flex items-center justify-between">
-      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <p class="demo-label">
         Tasks ({{ fields.length }})
       </p>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary"
         @click="addTask"
       >
         + Add task
@@ -52,26 +52,26 @@ function addTask(): void {
       <li
         v-for="(field, index) in fields"
         :key="field.key"
-        class="flex items-center gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-2"
+        class="demo-card flex items-center gap-2 p-2"
       >
         <input
           v-model="field.value.value.done"
           type="checkbox"
-          class="size-4 shrink-0 cursor-pointer accent-(--accent)"
+          class="size-4 shrink-0 cursor-pointer accent-accent"
           aria-label="Mark done"
         >
         <input
           v-model="field.value.value.title"
           type="text"
           placeholder="Describe the task…"
-          class="min-w-0 flex-1 rounded-lg border border-(--border) bg-(--bg) px-3 py-1.5 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
-          :class="field.value.value.done ? 'line-through text-(--fg-subtle)' : ''"
+          class="min-w-0 flex-1 rounded-lg border border-border bg-bg px-3 py-1.5 text-sm text-fg placeholder:text-fg-subtle transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring"
+          :class="field.value.value.done ? 'line-through text-fg-subtle' : ''"
         >
         <div class="flex shrink-0 items-center gap-1">
           <button
             type="button"
             :disabled="field.isFirst"
-            class="inline-flex size-7 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg-muted) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.95] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+            class="inline-flex size-7 items-center justify-center rounded-md border border-border bg-bg-elevated text-fg-muted transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.95] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
             aria-label="Move up"
             @click="move(index, index - 1)"
           >
@@ -80,7 +80,7 @@ function addTask(): void {
           <button
             type="button"
             :disabled="field.isLast"
-            class="inline-flex size-7 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg-muted) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.95] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+            class="inline-flex size-7 items-center justify-center rounded-md border border-border bg-bg-elevated text-fg-muted transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.95] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
             aria-label="Move down"
             @click="move(index, index + 1)"
           >
@@ -100,19 +100,19 @@ function addTask(): void {
 
     <div
       v-if="fields.length === 0"
-      class="rounded-xl border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center text-sm text-(--fg-subtle)"
+      class="rounded-xl border border-dashed border-border bg-bg-inset p-6 text-center text-sm text-fg-subtle"
     >
       No tasks yet. Add one to get started.
     </div>
 
-    <div class="flex items-center justify-between border-t border-(--border) pt-3">
-      <span class="text-xs text-(--fg-subtle)">
+    <div class="flex items-center justify-between border-t border-border pt-3">
+      <span class="text-xs text-fg-subtle">
         Stable keys survive reorders
       </span>
       <button
         type="button"
         :disabled="fields.length < 2"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="swap(0, fields.length - 1)"
       >
         Swap first ↔ last
diff --git a/vue/toolkit/src/composables/forms/useFieldArray/index.ts b/vue/toolkit/src/composables/forms/useFieldArray/index.ts
index dfc7819..5397d81 100644
--- a/vue/toolkit/src/composables/forms/useFieldArray/index.ts
+++ b/vue/toolkit/src/composables/forms/useFieldArray/index.ts
@@ -31,7 +31,7 @@ import type {
  *
  * @since 0.0.16
  */
-export function useFieldArray<T = any>(
+export function useFieldArray<T = unknown>(
   path: MaybeRefOrGetter<string>,
   options: UseFieldArrayOptions = {},
 ): UseFieldArrayReturn<T> {
diff --git a/vue/toolkit/src/composables/forms/useForm/context.ts b/vue/toolkit/src/composables/forms/useForm/context.ts
index 4c8d034..3953f4e 100644
--- a/vue/toolkit/src/composables/forms/useForm/context.ts
+++ b/vue/toolkit/src/composables/forms/useForm/context.ts
@@ -20,6 +20,6 @@ export const provideFormContext = formContextFactory.provide;
  * Inject the nearest provided form context, or `null` when there is none.
  * (The factory's own `inject` throws when absent; fields need an optional one.)
  */
-export function injectFormContext<TInput extends object = any, TOutput = TInput>(): FormContext<TInput, TOutput> | null {
+export function injectFormContext<TInput extends object = Record<string, unknown>, TOutput = TInput>(): FormContext<TInput, TOutput> | null {
   return inject(FORM_CONTEXT_KEY, null) as FormContext<TInput, TOutput> | null;
 }
diff --git a/vue/toolkit/src/composables/forms/useForm/demo.vue b/vue/toolkit/src/composables/forms/useForm/demo.vue
index 2628ae1..9caa9ee 100644
--- a/vue/toolkit/src/composables/forms/useForm/demo.vue
+++ b/vue/toolkit/src/composables/forms/useForm/demo.vue
@@ -45,23 +45,23 @@ const onSubmit = handleSubmit(async (values) => {
   submitted.value = { ...values };
 });
 
-const baseInput = 'w-full rounded-lg border bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:outline-none focus:ring-2 focus:ring-(--ring)';
+const baseInput = 'w-full rounded-lg border bg-bg px-3 py-2 text-sm text-fg placeholder:text-fg-subtle transition focus:outline-none focus:ring-2 focus:ring-ring';
 
 function cls(path: keyof SignUp): string {
   return errors[path]?.length
     ? `${baseInput} border-red-500/60 focus:border-red-500`
-    : `${baseInput} border-(--border) focus:border-(--accent)`;
+    : `${baseInput} border-border focus:border-accent`;
 }
 </script>
 
 <template>
   <form
-    class="flex w-full max-w-sm flex-col gap-4"
+    class="demo-stack max-w-sm"
     novalidate
     @submit.prevent="onSubmit"
   >
     <div class="flex flex-col gap-1.5">
-      <label for="uf-name" class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Name</label>
+      <label for="uf-name" class="demo-label">Name</label>
       <input
         id="uf-name"
         v-model="name"
@@ -75,7 +75,7 @@ function cls(path: keyof SignUp): string {
     </div>
 
     <div class="flex flex-col gap-1.5">
-      <label for="uf-email" class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Email</label>
+      <label for="uf-email" class="demo-label">Email</label>
       <input
         id="uf-email"
         v-model="email"
@@ -90,7 +90,7 @@ function cls(path: keyof SignUp): string {
     </div>
 
     <div class="flex flex-col gap-1.5">
-      <label for="uf-age" class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Age</label>
+      <label for="uf-age" class="demo-label">Age</label>
       <input
         id="uf-age"
         v-model.number="age"
@@ -108,14 +108,14 @@ function cls(path: keyof SignUp): string {
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
         :class="meta.valid
           ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          : 'border-border bg-bg-inset text-fg-muted'"
       >
         {{ meta.valid ? 'valid' : 'invalid' }}
       </span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-badge">
         dirty: {{ meta.dirty }}
       </span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-badge">
         submits: {{ submitCount }}
       </span>
     </div>
@@ -124,13 +124,13 @@ function cls(path: keyof SignUp): string {
       <button
         type="submit"
         :disabled="isSubmitting"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
       >
         {{ isSubmitting ? 'Submitting…' : 'Create account' }}
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="resetForm(); submitted = null"
       >
         Reset
@@ -146,7 +146,7 @@ function cls(path: keyof SignUp): string {
       </p>
       <pre class="whitespace-pre-wrap">{{ JSON.stringify(submitted, null, 2) }}</pre>
     </div>
-    <p v-else class="text-center text-xs text-(--fg-subtle)">
+    <p v-else class="text-center text-xs text-fg-subtle">
       Validates on blur, then live on every change.
     </p>
   </form>
diff --git a/vue/toolkit/src/composables/forms/useForm/index.ts b/vue/toolkit/src/composables/forms/useForm/index.ts
index 0d36a7a..2eb3262 100644
--- a/vue/toolkit/src/composables/forms/useForm/index.ts
+++ b/vue/toolkit/src/composables/forms/useForm/index.ts
@@ -1,6 +1,7 @@
 import { computed, reactive, readonly, ref, toValue } from 'vue';
 import type { ComputedRef, Ref } from 'vue';
 import { get, isEqual, isObject, set, toArray } from '@robonen/stdlib';
+import type { Collection } from '@robonen/stdlib';
 import { cloneFnDefault } from '@/composables/reactivity/useCloned';
 import { tryOnMounted } from '@/composables/lifecycle/tryOnMounted';
 import { provideFormContext } from './context';
@@ -57,13 +58,13 @@ export type {
  * Recursively assign `source` into the reactive `target`, deep-merging plain
  * objects and cloning leaf values so callers can't share mutable references.
  */
-function deepAssign(target: Record<string, any>, source: Record<string, any>): void {
+function deepAssign(target: Record<string, unknown>, source: Record<string, unknown>): void {
   for (const key of Object.keys(source)) {
     const value = source[key];
     const current = target[key];
 
     if (isObject(value) && isObject(current))
-      deepAssign(current, value);
+      deepAssign(current as Record<string, unknown>, value as Record<string, unknown>);
     else
       target[key] = cloneFnDefault(value);
   }
@@ -123,8 +124,8 @@ export function useForm<TInput extends object, TOutput = TInput>(
   // Every path a field has been declared for (drives setTouched("all")).
   const knownFields = new Set<string>();
 
-  function readPath(path: string): any {
-    return get(values as any, path);
+  function readPath(path: string): unknown {
+    return get(values as Collection, path);
   }
 
   // ---- derived state ----------------------------------------------------
@@ -181,7 +182,7 @@ export function useForm<TInput extends object, TOutput = TInput>(
     // Merge per-field function validators on top of schema/resolver errors.
     for (const [path, validators] of fieldValidators) {
       for (const validator of validators) {
-        const messages = normalizeFieldResult(await validator(get(values as any, path), values as TInput));
+        const messages = normalizeFieldResult(await validator(get(values as Collection, path), values as Record<string, unknown>));
         if (messages.length > 0)
           (resultErrors[path] ??= []).push(...messages);
       }
@@ -234,7 +235,7 @@ export function useForm<TInput extends object, TOutput = TInput>(
   }
 
   function isFieldDirty(path: FieldPath<TInput>): boolean {
-    return !isEqual(readPath(path as string), get(initialSnapshot as any, path as string));
+    return !isEqual(readPath(path as string), get(initialSnapshot as Collection, path as string));
   }
 
   function isFieldTouched(path: FieldPath<TInput>): boolean {
@@ -252,7 +253,7 @@ export function useForm<TInput extends object, TOutput = TInput>(
     value: FieldPathValue<TInput, P>,
     setOptions?: SetValueOptions,
   ): void {
-    set(values as any, path as string, value);
+    set(values as Collection, path as string, value);
 
     if (setOptions?.shouldTouch) {
       touchedMap[path as string] = true;
@@ -272,7 +273,7 @@ export function useForm<TInput extends object, TOutput = TInput>(
         delete (values as Record<string, unknown>)[key];
     }
 
-    deepAssign(values as Record<string, any>, next as Record<string, any>);
+    deepAssign(values as Record<string, unknown>, next as Record<string, unknown>);
 
     if (shouldValidate('value'))
       void validate();
@@ -309,7 +310,7 @@ export function useForm<TInput extends object, TOutput = TInput>(
 
     for (const key of Object.keys(values as object))
       delete (values as Record<string, unknown>)[key];
-    deepAssign(values as Record<string, any>, initialSnapshot as Record<string, any>);
+    deepAssign(values as Record<string, unknown>, initialSnapshot as Record<string, unknown>);
 
     errorsMap.value = state?.errors ? { ...state.errors } : {};
 
@@ -324,8 +325,8 @@ export function useForm<TInput extends object, TOutput = TInput>(
   }
 
   function resetField<P extends FieldPath<TInput>>(path: P, value?: FieldPathValue<TInput, P>): void {
-    const next = value !== undefined ? value : get(initialSnapshot as any, path as string);
-    set(values as any, path as string, cloneFnDefault(next));
+    const next = value !== undefined ? value : get(initialSnapshot as Collection, path as string);
+    set(values as Collection, path as string, cloneFnDefault(next));
     delete errorsMap.value[path as string];
     delete touchedMap[path as string];
   }
diff --git a/vue/toolkit/src/composables/forms/useForm/types.ts b/vue/toolkit/src/composables/forms/useForm/types.ts
index b59c7c7..96b110a 100644
--- a/vue/toolkit/src/composables/forms/useForm/types.ts
+++ b/vue/toolkit/src/composables/forms/useForm/types.ts
@@ -14,6 +14,9 @@ type FieldPrimitive
     | undefined
     | Date
     | RegExp
+    // Idiomatic "any function" constraint: a path leaf can be any callable, and
+    // its params/return are intentionally unconstrained — `unknown` would break
+    // structural assignability of concrete function types here.
     | ((...args: any[]) => any);
 
 /**
@@ -77,7 +80,7 @@ export type FieldValidationResult = string | string[] | true | void | null | und
 /**
  * A field-level function validator.
  */
-export type FieldValidator<T = any, TInput extends object = any>
+export type FieldValidator<T = unknown, TInput extends object = Record<string, unknown>>
   = (value: T, values: TInput) => FieldValidationResult | Promise<FieldValidationResult>;
 
 /**
@@ -272,7 +275,7 @@ export interface UseFormOptions<TInput extends object, TOutput = TInput> {
  * The form instance returned by {@link useForm} (and injected by
  * {@link useFormContext}). Also serves as the context shared with fields.
  */
-export interface FormContext<TInput extends object = any, TOutput = TInput> {
+export interface FormContext<TInput extends object = Record<string, unknown>, TOutput = TInput> {
   /**
    * Reactive form values. Bind directly with `v-model="values.path"`.
    */
@@ -432,12 +435,12 @@ export interface FormContext<TInput extends object = any, TOutput = TInput> {
 /**
  * Alias: the public return of {@link useForm} is the form context itself.
  */
-export type UseFormReturn<TInput extends object = any, TOutput = TInput> = FormContext<TInput, TOutput>;
+export type UseFormReturn<TInput extends object = Record<string, unknown>, TOutput = TInput> = FormContext<TInput, TOutput>;
 
 /**
  * Options for `defineField`.
  */
-export interface DefineFieldOptions<T = any, TInput extends object = any> {
+export interface DefineFieldOptions<T = unknown, TInput extends object = Record<string, unknown>> {
   /**
    * A field-level function validator.
    */
@@ -451,7 +454,7 @@ export interface DefineFieldOptions<T = any, TInput extends object = any> {
 /**
  * Options for {@link useField}.
  */
-export interface UseFieldOptions<T, TInput extends object = any> {
+export interface UseFieldOptions<T, TInput extends object = Record<string, unknown>> {
   /**
    * The form to bind to. Defaults to the injected form context; if there is
    * none and `initialValue` is given, the field runs standalone.
@@ -600,7 +603,7 @@ export interface UseFieldArrayReturn<T> {
 /**
  * Options for {@link useFieldArray}.
  */
-export interface UseFieldArrayOptions<TInput extends object = any> {
+export interface UseFieldArrayOptions<TInput extends object = Record<string, unknown>> {
   /**
    * The form to bind to. Defaults to the injected form context.
    */
diff --git a/vue/toolkit/src/composables/forms/useForm/validation.ts b/vue/toolkit/src/composables/forms/useForm/validation.ts
index 86d832c..eeec424 100644
--- a/vue/toolkit/src/composables/forms/useForm/validation.ts
+++ b/vue/toolkit/src/composables/forms/useForm/validation.ts
@@ -47,7 +47,7 @@ export interface StandardSchemaRun<Output> {
  * the result into our `{ valid, output?, errors }` shape.
  */
 export async function runStandardSchema<Output>(
-  schema: StandardSchemaV1<any, Output>,
+  schema: StandardSchemaV1<unknown, Output>,
   value: unknown,
 ): Promise<StandardSchemaRun<Output>> {
   const result = await schema['~standard'].validate(value);
diff --git a/vue/toolkit/src/composables/forms/useFormContext/demo.vue b/vue/toolkit/src/composables/forms/useFormContext/demo.vue
index 578a743..cafb8c9 100644
--- a/vue/toolkit/src/composables/forms/useFormContext/demo.vue
+++ b/vue/toolkit/src/composables/forms/useFormContext/demo.vue
@@ -27,13 +27,13 @@ const ContextField = defineComponent({
 
     const tag = props.multiline ? 'textarea' : 'input';
     const inputClass
-      = 'w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)';
+      = 'w-full rounded-lg border border-border bg-bg px-3 py-2 text-sm text-fg placeholder:text-fg-subtle transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring';
 
     return () =>
       h('div', { class: 'flex flex-col gap-1.5' }, [
         h(
           'label',
-          { class: 'text-xs font-medium uppercase tracking-wide text-(--fg-subtle)' },
+          { class: 'text-xs font-medium uppercase tracking-wide text-fg-subtle' },
           props.label,
         ),
         h(tag, {
@@ -59,9 +59,9 @@ const { values, meta, isDirty } = form;
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card flex flex-col gap-3 p-4">
+      <p class="demo-label">
         Profile (fields read context, not props)
       </p>
       <ContextField path="username" label="Username" />
@@ -69,22 +69,22 @@ const { values, meta, isDirty } = form;
     </div>
 
     <div class="flex flex-wrap gap-2">
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-badge">
         dirty: {{ isDirty }}
       </span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-badge">
         touched: {{ meta.touched }}
       </span>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg)">
-      <p class="mb-1 text-(--fg-subtle)">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-xs text-fg">
+      <p class="mb-1 text-fg-subtle">
         Shared form values:
       </p>
       <pre class="whitespace-pre-wrap">{{ JSON.stringify(values, null, 2) }}</pre>
     </div>
 
-    <p class="text-center text-xs text-(--fg-subtle)">
+    <p class="text-center text-xs text-fg-subtle">
       Both inputs are nested children that locate the form via useFormContext().
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/forms/useFormContext/index.ts b/vue/toolkit/src/composables/forms/useFormContext/index.ts
index aa16818..2061bd8 100644
--- a/vue/toolkit/src/composables/forms/useFormContext/index.ts
+++ b/vue/toolkit/src/composables/forms/useFormContext/index.ts
@@ -18,6 +18,6 @@ import type { UseFormReturn } from '../useForm';
  *
  * @since 0.0.16
  */
-export function useFormContext<TInput extends object = any, TOutput = TInput>(): UseFormReturn<TInput, TOutput> | null {
+export function useFormContext<TInput extends object = Record<string, unknown>, TOutput = TInput>(): UseFormReturn<TInput, TOutput> | null {
   return injectFormContext<TInput, TOutput>();
 }
diff --git a/vue/toolkit/src/composables/forms/useMaskedField/demo.vue b/vue/toolkit/src/composables/forms/useMaskedField/demo.vue
index f2babd5..1055d14 100644
--- a/vue/toolkit/src/composables/forms/useMaskedField/demo.vue
+++ b/vue/toolkit/src/composables/forms/useMaskedField/demo.vue
@@ -18,13 +18,13 @@ const onSubmit = form.handleSubmit((values) => {
   globalThis.alert(`Submitted raw value: ${values.phone}`);
 });
 
-const inputClass = 'w-full rounded-lg border bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:outline-none focus:ring-2 focus:ring-(--ring)';
+const inputClass = 'w-full rounded-lg border bg-bg px-3 py-2 text-sm text-fg placeholder:text-fg-subtle transition focus:outline-none focus:ring-2 focus:ring-ring';
 </script>
 
 <template>
-  <form class="flex w-full max-w-sm flex-col gap-4" @submit.prevent="onSubmit">
+  <form class="demo-stack max-w-sm" @submit.prevent="onSubmit">
     <div class="flex flex-col gap-1.5">
-      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <label class="demo-label">
         Phone number
       </label>
       <!-- One spread wires the ref, mask handlers, name, blur, and aria-invalid. -->
@@ -37,13 +37,13 @@ const inputClass = 'w-full rounded-lg border bg-(--bg) px-3 py-2 text-sm text-(-
           inputClass,
           errorMessage
             ? 'border-red-500/60 focus:border-red-500'
-            : 'border-(--border) focus:border-(--accent)',
+            : 'border-border focus:border-accent',
         ]"
       >
       <p v-if="errorMessage" class="text-xs text-red-600 dark:text-red-400">
         {{ errorMessage }}
       </p>
-      <p v-else class="text-xs text-(--fg-subtle)">
+      <p v-else class="text-xs text-fg-subtle">
         Display is masked; the form stores the raw digits.
       </p>
     </div>
@@ -53,7 +53,7 @@ const inputClass = 'w-full rounded-lg border bg-(--bg) px-3 py-2 text-sm text-(-
         class="inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium"
         :class="complete
           ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-subtle)'"
+          : 'border-border bg-bg-inset text-fg-subtle'"
       >
         {{ complete ? 'complete' : 'incomplete' }}
       </span>
@@ -61,12 +61,12 @@ const inputClass = 'w-full rounded-lg border bg-(--bg) px-3 py-2 text-sm text-(-
 
     <button
       type="submit"
-      class="inline-flex items-center justify-center rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+      class="inline-flex items-center justify-center rounded-lg border border-transparent bg-accent px-3 py-1.5 text-sm font-medium text-accent-fg transition hover:bg-accent-hover active:scale-[0.98] cursor-pointer"
     >
       Submit
     </button>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
       <div>display: "{{ display }}"</div>
       <div>form value (raw): "{{ form.values.phone }}"</div>
     </div>
diff --git a/vue/toolkit/src/composables/forms/useMaskedInput/demo.vue b/vue/toolkit/src/composables/forms/useMaskedInput/demo.vue
index 94a1958..be0aa8d 100644
--- a/vue/toolkit/src/composables/forms/useMaskedInput/demo.vue
+++ b/vue/toolkit/src/composables/forms/useMaskedInput/demo.vue
@@ -27,14 +27,14 @@ const cardBrand = computed(() => findCardBrand(card.unmasked.value)?.name ?? 'un
 // Luhn + length validation (separate from the mask, which only formats).
 const cardValid = computed(() => isValidCardNumber(card.unmasked.value));
 
-const inputClass = 'w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:outline-none focus:border-(--accent) focus:ring-2 focus:ring-(--ring)';
-const labelClass = 'text-xs font-medium uppercase tracking-wide text-(--fg-subtle)';
-const readoutClass = 'flex flex-wrap items-center gap-2 font-mono text-xs text-(--fg-muted)';
+const inputClass = 'w-full rounded-lg border border-border bg-bg px-3 py-2 text-sm text-fg placeholder:text-fg-subtle transition focus:outline-none focus:border-accent focus:ring-2 focus:ring-ring';
+const labelClass = 'text-xs font-medium uppercase tracking-wide text-fg-subtle';
+const readoutClass = 'flex flex-wrap items-center gap-2 font-mono text-xs text-fg-muted';
 
 function badgeClass(on: boolean): string {
   return on
     ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-    : 'border-(--border) bg-(--bg-inset) text-(--fg-subtle)';
+    : 'border-border bg-bg-inset text-fg-subtle';
 }
 </script>
 
diff --git a/vue/toolkit/src/composables/lifecycle/tryOnBeforeMount/demo.vue b/vue/toolkit/src/composables/lifecycle/tryOnBeforeMount/demo.vue
index a82fca7..348f144 100644
--- a/vue/toolkit/src/composables/lifecycle/tryOnBeforeMount/demo.vue
+++ b/vue/toolkit/src/composables/lifecycle/tryOnBeforeMount/demo.vue
@@ -28,17 +28,17 @@ tryOnBeforeMount(() => push('async callback (nextTick)', 'before-mount'), { sync
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div class="flex flex-col gap-1">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">tryOnBeforeMount</span>
-      <p class="text-sm text-(--fg-muted)">
-        Registers a callback on <code class="font-mono text-(--fg)">onBeforeMount</code> when inside a component,
+      <span class="demo-label">tryOnBeforeMount</span>
+      <p class="text-sm text-fg-muted">
+        Registers a callback on <code class="font-mono text-fg">onBeforeMount</code> when inside a component,
         otherwise calls it directly. Watch the execution order below.
       </p>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Execution timeline</span>
+    <div class="demo-card p-4">
+      <span class="demo-label">Execution timeline</span>
 
       <ol class="mt-3 flex flex-col gap-2">
         <li
@@ -47,16 +47,16 @@ tryOnBeforeMount(() => push('async callback (nextTick)', 'before-mount'), { sync
           class="flex items-center gap-3"
         >
           <span
-            class="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md border border-(--border) bg-(--bg-inset) font-mono text-xs font-medium text-(--fg-muted) tabular-nums"
+            class="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md border border-border bg-bg-inset font-mono text-xs font-medium text-fg-muted tabular-nums"
           >
             {{ index + 1 }}
           </span>
-          <span class="text-sm text-(--fg)">{{ entry.label }}</span>
+          <span class="text-sm text-fg">{{ entry.label }}</span>
           <span
             class="ml-auto inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
             :class="entry.phase === 'before-mount'
               ? 'border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-400'
-              : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+              : 'border-border bg-bg-inset text-fg-muted'"
           >
             {{ entry.phase }}
           </span>
@@ -64,11 +64,11 @@ tryOnBeforeMount(() => push('async callback (nextTick)', 'before-mount'), { sync
       </ol>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
-      <span class="text-(--fg-subtle)">order:</span> [{{ order.join(' → ') }}]
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
+      <span class="text-fg-subtle">order:</span> [{{ order.join(' → ') }}]
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       The sync callback fires during the component's before-mount phase; the async one is queued to the next tick,
       so it always lands last.
     </p>
diff --git a/vue/toolkit/src/composables/lifecycle/tryOnBeforeMount/index.ts b/vue/toolkit/src/composables/lifecycle/tryOnBeforeMount/index.ts
index ca2d9d1..0a9eb1d 100644
--- a/vue/toolkit/src/composables/lifecycle/tryOnBeforeMount/index.ts
+++ b/vue/toolkit/src/composables/lifecycle/tryOnBeforeMount/index.ts
@@ -1,10 +1,8 @@
-import { nextTick, onBeforeMount } from 'vue';
+import { onBeforeMount } from 'vue';
 import type { ComponentInternalInstance } from 'vue';
-import { getLifeCycleTarger } from '@/utils';
+import { runTryOnLifecycle } from '@/utils/lifecycle';
 import type { VoidFunction } from '@robonen/stdlib';
 
-// TODO: test
-
 export interface TryOnBeforeMountOptions {
   sync?: boolean;
   target?: ComponentInternalInstance;
@@ -30,17 +28,5 @@ export interface TryOnBeforeMountOptions {
  * @since 0.0.1
  */
 export function tryOnBeforeMount(fn: VoidFunction, options: TryOnBeforeMountOptions = {}) {
-  const {
-    sync = true,
-    target,
-  } = options;
-
-  const instance = getLifeCycleTarger(target);
-
-  if (instance)
-    onBeforeMount(fn, instance);
-  else if (sync)
-    fn();
-  else
-    nextTick(fn);
+  runTryOnLifecycle(onBeforeMount, fn, options);
 }
diff --git a/vue/toolkit/src/composables/lifecycle/tryOnMounted/demo.vue b/vue/toolkit/src/composables/lifecycle/tryOnMounted/demo.vue
index ba787d6..fdf19dc 100644
--- a/vue/toolkit/src/composables/lifecycle/tryOnMounted/demo.vue
+++ b/vue/toolkit/src/composables/lifecycle/tryOnMounted/demo.vue
@@ -31,9 +31,9 @@ tryOnMounted(() => push('async callback (nextTick)'), { sync: false });
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div class="flex items-center justify-between gap-3">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">tryOnMounted</span>
+      <span class="demo-label">tryOnMounted</span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
         :class="mounted
@@ -48,8 +48,8 @@ tryOnMounted(() => push('async callback (nextTick)'), { sync: false });
       </span>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Mount timeline</span>
+    <div class="demo-card p-4">
+      <span class="demo-label">Mount timeline</span>
 
       <ol class="mt-3 flex flex-col gap-2">
         <li
@@ -58,17 +58,17 @@ tryOnMounted(() => push('async callback (nextTick)'), { sync: false });
           class="flex items-center gap-3"
         >
           <span
-            class="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md border border-(--border) bg-(--bg-inset) font-mono text-xs font-medium text-(--fg-muted) tabular-nums"
+            class="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md border border-border bg-bg-inset font-mono text-xs font-medium text-fg-muted tabular-nums"
           >
             {{ index + 1 }}
           </span>
-          <span class="text-sm text-(--fg)">{{ entry.label }}</span>
-          <span class="ml-auto font-mono text-xs text-(--fg-subtle) tabular-nums">+{{ entry.at }}ms</span>
+          <span class="text-sm text-fg">{{ entry.label }}</span>
+          <span class="ml-auto font-mono text-xs text-fg-subtle tabular-nums">+{{ entry.at }}ms</span>
         </li>
       </ol>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Both callbacks are safely deferred until the component is mounted. The async variant is queued one extra tick,
       so it consistently runs after the synchronous one.
     </p>
diff --git a/vue/toolkit/src/composables/lifecycle/tryOnMounted/index.test.ts b/vue/toolkit/src/composables/lifecycle/tryOnMounted/index.test.ts
index 507ef72..6a93e4d 100644
--- a/vue/toolkit/src/composables/lifecycle/tryOnMounted/index.test.ts
+++ b/vue/toolkit/src/composables/lifecycle/tryOnMounted/index.test.ts
@@ -48,7 +48,7 @@ describe(tryOnMounted, () => {
     expect(callback).toHaveBeenCalled();
   });
 
-  it.skip('run the callback with a specific target', () => {
+  it.todo('run the callback with a specific target', () => {
     const callback = vi.fn();
 
     const component = mount(ComponentStub);
diff --git a/vue/toolkit/src/composables/lifecycle/tryOnMounted/index.ts b/vue/toolkit/src/composables/lifecycle/tryOnMounted/index.ts
index e9b133d..93677b4 100644
--- a/vue/toolkit/src/composables/lifecycle/tryOnMounted/index.ts
+++ b/vue/toolkit/src/composables/lifecycle/tryOnMounted/index.ts
@@ -1,6 +1,6 @@
-import { nextTick, onMounted } from 'vue';
+import { onMounted } from 'vue';
 import type { ComponentInternalInstance } from 'vue';
-import { getLifeCycleTarger } from '@/utils';
+import { runTryOnLifecycle } from '@/utils/lifecycle';
 import type { VoidFunction } from '@robonen/stdlib';
 
 export interface TryOnMountedOptions {
@@ -28,17 +28,5 @@ export interface TryOnMountedOptions {
  * @since 0.0.1
  */
 export function tryOnMounted(fn: VoidFunction, options: TryOnMountedOptions = {}) {
-  const {
-    sync = true,
-    target,
-  } = options;
-
-  const instance = getLifeCycleTarger(target);
-
-  if (instance)
-    onMounted(fn, instance);
-  else if (sync)
-    fn();
-  else
-    nextTick(fn);
+  runTryOnLifecycle(onMounted, fn, options);
 }
diff --git a/vue/toolkit/src/composables/lifecycle/tryOnScopeDispose/demo.vue b/vue/toolkit/src/composables/lifecycle/tryOnScopeDispose/demo.vue
index 8ca903c..c1f1bed 100644
--- a/vue/toolkit/src/composables/lifecycle/tryOnScopeDispose/demo.vue
+++ b/vue/toolkit/src/composables/lifecycle/tryOnScopeDispose/demo.vue
@@ -61,18 +61,18 @@ function callOutsideScope() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div class="flex items-center justify-between gap-3">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">tryOnScopeDispose</span>
+      <span class="demo-label">tryOnScopeDispose</span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
         :class="activeScopes > 0
           ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          : 'border-border bg-bg-inset text-fg-muted'"
       >
         <span
           class="h-1.5 w-1.5 rounded-full"
-          :class="activeScopes > 0 ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+          :class="activeScopes > 0 ? 'bg-emerald-500' : 'bg-fg-subtle'"
         />
         {{ activeScopes > 0 ? 'scope active' : 'no scope' }}
       </span>
@@ -81,14 +81,14 @@ function callOutsideScope() {
     <div class="grid grid-cols-3 gap-2">
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary"
         @click="createScope"
       >
         Create scope
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="activeScopes === 0"
         @click="disposeScope"
       >
@@ -96,15 +96,15 @@ function callOutsideScope() {
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="callOutsideScope"
       >
         Outside
       </button>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Event log</span>
+    <div class="demo-card p-4">
+      <span class="demo-label">Event log</span>
 
       <ul v-if="log.length" class="mt-3 flex flex-col gap-2">
         <li
@@ -117,21 +117,21 @@ function callOutsideScope() {
             :class="{
               'bg-emerald-500': entry.kind === 'create',
               'bg-rose-500': entry.kind === 'dispose',
-              'bg-(--fg-subtle)': entry.kind === 'noop',
+              'bg-fg-subtle': entry.kind === 'noop',
             }"
           />
-          <span class="text-(--fg)">{{ entry.label }}</span>
+          <span class="text-fg">{{ entry.label }}</span>
         </li>
       </ul>
 
-      <p v-else class="mt-3 text-sm text-(--fg-subtle)">
+      <p v-else class="mt-3 text-sm text-fg-subtle">
         Create a scope to register a cleanup hook, then dispose it to watch the callback fire.
       </p>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Inside an active effect scope the cleanup is registered and runs on disposal. Called with no scope present, it
-      simply returns <code class="font-mono text-(--fg)">false</code> instead of throwing.
+      simply returns <code class="font-mono text-fg">false</code> instead of throwing.
     </p>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/lifecycle/useMounted/demo.vue b/vue/toolkit/src/composables/lifecycle/useMounted/demo.vue
index 620f057..ccff312 100644
--- a/vue/toolkit/src/composables/lifecycle/useMounted/demo.vue
+++ b/vue/toolkit/src/composables/lifecycle/useMounted/demo.vue
@@ -6,18 +6,18 @@ const isMounted = useMounted();
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex flex-col gap-1">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">useMounted</span>
-      <p class="text-sm text-(--fg-muted)">
+      <span class="demo-label">useMounted</span>
+      <p class="text-sm text-fg-muted">
         Tracks whether the component has finished mounting — handy for SSR-safe rendering and entry animations.
       </p>
     </div>
 
-    <div class="flex items-center justify-between rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+    <div class="demo-card flex items-center justify-between p-4">
       <div class="flex flex-col gap-0.5">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">isMounted</span>
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ isMounted }}</span>
+        <span class="demo-label">isMounted</span>
+        <span class="demo-stat text-3xl">{{ isMounted }}</span>
       </div>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium transition"
@@ -35,14 +35,14 @@ const isMounted = useMounted();
 
     <!-- Mount-gated reveal: only animates in once the client takes over. -->
     <div
-      class="overflow-hidden rounded-lg border border-(--border) bg-(--bg-inset) p-4 transition-all duration-500 ease-out"
+      class="overflow-hidden rounded-lg border border-border bg-bg-inset p-4 transition-all duration-500 ease-out"
       :class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-0'"
     >
-      <p class="text-sm text-(--fg)">
+      <p class="text-sm text-fg">
         This panel fades and slides into view the moment <code class="font-mono">isMounted</code> becomes
-        <code class="font-mono text-(--fg)">true</code>.
+        <code class="font-mono text-fg">true</code>.
       </p>
-      <p class="mt-1 text-xs text-(--fg-subtle)">
+      <p class="mt-1 text-xs text-fg-subtle">
         On the server it renders hidden, avoiding hydration flicker.
       </p>
     </div>
diff --git a/vue/toolkit/src/composables/math/logicAnd/demo.vue b/vue/toolkit/src/composables/math/logicAnd/demo.vue
index e446500..22afe16 100644
--- a/vue/toolkit/src/composables/math/logicAnd/demo.vue
+++ b/vue/toolkit/src/composables/math/logicAnd/demo.vue
@@ -22,46 +22,46 @@ const canPublish = logicAnd(hasTitle, acceptedTerms, draftSaved, meetsLength);
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div class="flex flex-col gap-1">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">logicAnd</span>
-      <p class="text-sm text-(--fg-muted)">
-        Reactive logical <code class="font-mono text-(--fg)">AND</code> — the result is true only when every input
+      <span class="demo-label">logicAnd</span>
+      <p class="text-sm text-fg-muted">
+        Reactive logical <code class="font-mono text-fg">AND</code> — the result is true only when every input
         resolves truthy. Toggle the checklist below.
       </p>
     </div>
 
-    <div class="flex flex-col gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+    <div class="demo-card flex flex-col gap-2 p-4">
       <label
         v-for="cond in conditions"
         :key="cond.key"
-        class="flex cursor-pointer items-center gap-3 rounded-lg px-1.5 py-1.5 transition hover:bg-(--bg-inset)"
+        class="flex cursor-pointer items-center gap-3 rounded-lg px-1.5 py-1.5 transition hover:bg-bg-inset"
       >
         <input
           v-model="cond.model.value"
           type="checkbox"
-          class="h-4 w-4 shrink-0 cursor-pointer accent-(--accent)"
+          class="h-4 w-4 shrink-0 cursor-pointer accent-accent"
         >
-        <span class="text-sm text-(--fg)">{{ cond.label }}</span>
+        <span class="text-sm text-fg">{{ cond.label }}</span>
         <span
           class="ml-auto inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium tabular-nums"
           :class="cond.model.value
             ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-            : 'border-(--border) bg-(--bg-inset) text-(--fg-subtle)'"
+            : 'border-border bg-bg-inset text-fg-subtle'"
         >
           {{ cond.model.value }}
         </span>
       </label>
 
       <!-- A getter-driven input to prove logicAnd accepts getters too. -->
-      <div class="mt-1 flex flex-col gap-2 rounded-lg bg-(--bg-inset) p-3">
+      <div class="mt-1 flex flex-col gap-2 rounded-lg bg-bg-inset p-3">
         <div class="flex items-center justify-between">
-          <span class="text-sm text-(--fg)">Word count ≥ 150</span>
+          <span class="text-sm text-fg">Word count ≥ 150</span>
           <span
             class="inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium tabular-nums"
             :class="meetsLength
               ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-              : 'border-(--border) bg-(--bg-elevated) text-(--fg-subtle)'"
+              : 'border-border bg-bg-elevated text-fg-subtle'"
           >
             {{ meetsLength }}
           </span>
@@ -72,9 +72,9 @@ const canPublish = logicAnd(hasTitle, acceptedTerms, draftSaved, meetsLength);
           min="0"
           max="300"
           step="10"
-          class="w-full cursor-pointer accent-(--accent)"
+          class="w-full cursor-pointer accent-accent"
         >
-        <span class="font-mono text-xs text-(--fg-subtle) tabular-nums">{{ wordCount }} words</span>
+        <span class="font-mono text-xs text-fg-subtle tabular-nums">{{ wordCount }} words</span>
       </div>
     </div>
 
@@ -82,13 +82,13 @@ const canPublish = logicAnd(hasTitle, acceptedTerms, draftSaved, meetsLength);
       class="flex items-center justify-between rounded-lg border p-4 transition"
       :class="canPublish
         ? 'border-emerald-500/30 bg-emerald-500/10'
-        : 'border-(--border) bg-(--bg-inset)'"
+        : 'border-border bg-bg-inset'"
     >
       <div class="flex flex-col gap-0.5">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">canPublish</span>
+        <span class="demo-label">canPublish</span>
         <span
           class="font-mono text-3xl font-bold tabular-nums"
-          :class="canPublish ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg)'"
+          :class="canPublish ? 'text-emerald-600 dark:text-emerald-400' : 'text-fg'"
         >
           {{ canPublish }}
         </span>
@@ -96,7 +96,7 @@ const canPublish = logicAnd(hasTitle, acceptedTerms, draftSaved, meetsLength);
       <button
         type="button"
         :disabled="!canPublish"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
       >
         Publish
       </button>
diff --git a/vue/toolkit/src/composables/math/logicNot/demo.vue b/vue/toolkit/src/composables/math/logicNot/demo.vue
index 6f8222a..cebb752 100644
--- a/vue/toolkit/src/composables/math/logicNot/demo.vue
+++ b/vue/toolkit/src/composables/math/logicNot/demo.vue
@@ -7,18 +7,18 @@ const isReady = logicNot(isLoading);
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="flex items-center justify-between gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card flex items-center justify-between gap-3 p-4">
       <div class="flex flex-col">
-        <span class="text-sm font-medium text-(--fg)">Loading</span>
-        <span class="text-xs text-(--fg-subtle)">source value</span>
+        <span class="text-sm font-medium text-fg">Loading</span>
+        <span class="text-xs text-fg-subtle">source value</span>
       </div>
       <button
         type="button"
         role="switch"
         :aria-checked="isLoading"
-        class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-(--border) transition focus:outline-none focus:ring-2 focus:ring-(--ring)"
-        :class="isLoading ? 'bg-(--accent)' : 'bg-(--bg-inset)'"
+        class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-border transition focus:outline-none focus:ring-2 focus:ring-ring"
+        :class="isLoading ? 'bg-accent' : 'bg-bg-inset'"
         @click="isLoading = !isLoading"
       >
         <span
@@ -29,23 +29,23 @@ const isReady = logicNot(isLoading);
     </div>
 
     <div class="grid grid-cols-2 gap-3">
-      <div class="flex flex-col items-center gap-1 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">isLoading</span>
+      <div class="flex flex-col items-center gap-1 rounded-lg border border-border bg-bg-inset p-3">
+        <span class="demo-label">isLoading</span>
         <span
           class="font-mono text-lg font-bold tabular-nums"
-          :class="isLoading ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'"
+          :class="isLoading ? 'text-emerald-600 dark:text-emerald-400' : 'text-fg-muted'"
         >{{ isLoading }}</span>
       </div>
-      <div class="flex flex-col items-center gap-1 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">isReady = !isLoading</span>
+      <div class="flex flex-col items-center gap-1 rounded-lg border border-border bg-bg-inset p-3">
+        <span class="demo-label">isReady = !isLoading</span>
         <span
           class="font-mono text-lg font-bold tabular-nums"
-          :class="isReady ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'"
+          :class="isReady ? 'text-emerald-600 dark:text-emerald-400' : 'text-fg-muted'"
         >{{ isReady }}</span>
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center text-sm text-(--fg-muted)">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 text-center text-sm text-fg-muted">
       <span v-if="isReady" class="text-emerald-600 dark:text-emerald-400">Ready to continue</span>
       <span v-else>Please wait, loading…</span>
     </div>
diff --git a/vue/toolkit/src/composables/math/logicOr/demo.vue b/vue/toolkit/src/composables/math/logicOr/demo.vue
index 0804144..8e3e898 100644
--- a/vue/toolkit/src/composables/math/logicOr/demo.vue
+++ b/vue/toolkit/src/composables/math/logicOr/demo.vue
@@ -16,20 +16,20 @@ const channels = [
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Notification channels</span>
+  <div class="demo-stack max-w-sm">
+    <span class="demo-label">Notification channels</span>
 
     <div class="flex flex-col gap-2">
       <label
         v-for="ch in channels"
         :key="ch.key"
-        class="flex cursor-pointer items-center justify-between rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2.5 transition hover:border-(--border-strong)"
+        class="flex cursor-pointer items-center justify-between rounded-lg border border-border bg-bg-elevated px-3 py-2.5 transition hover:border-border-strong"
       >
-        <span class="text-sm font-medium text-(--fg)">{{ ch.label }}</span>
+        <span class="text-sm font-medium text-fg">{{ ch.label }}</span>
         <input
           v-model="ch.model.value"
           type="checkbox"
-          class="size-4 cursor-pointer accent-(--accent)"
+          class="size-4 cursor-pointer accent-accent"
         >
       </label>
     </div>
@@ -41,7 +41,7 @@ const channels = [
         : 'border-amber-500/30 bg-amber-500/10'"
     >
       <div class="flex flex-col">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">logicOr(email, sms, push)</span>
+        <span class="demo-label">logicOr(email, sms, push)</span>
         <span
           class="text-sm font-medium"
           :class="hasChannel
@@ -49,7 +49,7 @@ const channels = [
             : 'text-amber-600 dark:text-amber-400'"
         >{{ hasChannel ? 'At least one channel is on' : 'Pick a channel to get notified' }}</span>
       </div>
-      <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ hasChannel }}</span>
+      <span class="demo-stat text-2xl">{{ hasChannel }}</span>
     </div>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/math/useAbs/demo.vue b/vue/toolkit/src/composables/math/useAbs/demo.vue
index 7697e17..12074a4 100644
--- a/vue/toolkit/src/composables/math/useAbs/demo.vue
+++ b/vue/toolkit/src/composables/math/useAbs/demo.vue
@@ -13,12 +13,12 @@ const markerLeft = computed(() => `${(value.value + 100) / 2}%`);
   <div class="flex w-full max-w-sm flex-col gap-5">
     <div class="flex items-end justify-between">
       <div class="flex flex-col">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">value</span>
-        <span class="font-mono text-2xl font-bold tabular-nums text-(--fg-muted)">{{ value }}</span>
+        <span class="demo-label">value</span>
+        <span class="font-mono text-2xl font-bold tabular-nums text-fg-muted">{{ value }}</span>
       </div>
       <div class="flex flex-col items-end">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">|value|</span>
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ abs }}</span>
+        <span class="demo-label">|value|</span>
+        <span class="demo-stat text-3xl">{{ abs }}</span>
       </div>
     </div>
 
@@ -29,23 +29,23 @@ const markerLeft = computed(() => `${(value.value + 100) / 2}%`);
         min="-100"
         max="100"
         step="1"
-        class="w-full cursor-pointer accent-(--accent)"
+        class="w-full cursor-pointer accent-accent"
       >
-      <div class="relative h-2 rounded-full bg-(--bg-inset)">
-        <div class="absolute inset-y-0 left-1/2 w-px bg-(--border-strong)" />
+      <div class="relative h-2 rounded-full bg-bg-inset">
+        <div class="absolute inset-y-0 left-1/2 w-px bg-border-strong" />
         <div
-          class="absolute -top-1 size-4 -translate-x-1/2 rounded-full border-2 border-(--bg) bg-(--accent) transition-[left] duration-75"
+          class="absolute -top-1 size-4 -translate-x-1/2 rounded-full border-2 border-bg bg-accent transition-[left] duration-75"
           :style="{ left: markerLeft }"
         />
       </div>
-      <div class="flex justify-between font-mono text-xs text-(--fg-subtle) tabular-nums">
+      <div class="flex justify-between font-mono text-xs text-fg-subtle tabular-nums">
         <span>-100</span>
         <span>0</span>
         <span>100</span>
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center font-mono text-sm text-(--fg) tabular-nums">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 text-center font-mono text-sm text-fg tabular-nums">
       Math.abs({{ value }}) = {{ abs }}
     </div>
   </div>
diff --git a/vue/toolkit/src/composables/math/useAverage/demo.vue b/vue/toolkit/src/composables/math/useAverage/demo.vue
index 55be5af..b583e66 100644
--- a/vue/toolkit/src/composables/math/useAverage/demo.vue
+++ b/vue/toolkit/src/composables/math/useAverage/demo.vue
@@ -19,15 +19,15 @@ function removeScore(index: number) {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="flex items-center justify-between gap-4 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card flex items-center justify-between gap-4 p-4">
       <div class="flex flex-col">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Average score</span>
-        <span class="text-xs text-(--fg-subtle)">{{ scores.length }} value{{ scores.length === 1 ? '' : 's' }}</span>
+        <span class="demo-label">Average score</span>
+        <span class="text-xs text-fg-subtle">{{ scores.length }} value{{ scores.length === 1 ? '' : 's' }}</span>
       </div>
       <span
         class="font-mono text-3xl font-bold tabular-nums"
-        :class="scores.length === 0 ? 'text-amber-600 dark:text-amber-400' : 'text-(--fg)'"
+        :class="scores.length === 0 ? 'text-amber-600 dark:text-amber-400' : 'text-fg'"
       >{{ display }}</span>
     </div>
 
@@ -35,20 +35,20 @@ function removeScore(index: number) {
       <div
         v-for="(score, i) in scores"
         :key="i"
-        class="flex items-center gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2"
+        class="flex items-center gap-3 rounded-lg border border-border bg-bg-inset px-3 py-2"
       >
-        <span class="w-6 shrink-0 font-mono text-xs text-(--fg-subtle) tabular-nums">#{{ i + 1 }}</span>
+        <span class="w-6 shrink-0 font-mono text-xs text-fg-subtle tabular-nums">#{{ i + 1 }}</span>
         <input
           v-model.number="scores[i]"
           type="number"
           min="0"
           max="100"
-          class="w-full rounded-md border border-(--border) bg-(--bg) px-2 py-1 text-sm text-(--fg) tabular-nums transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="w-full rounded-md border border-border bg-bg px-2 py-1 text-sm text-fg tabular-nums transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring"
         >
         <button
           type="button"
           aria-label="Remove value"
-          class="shrink-0 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-1 text-sm text-(--fg-muted) transition hover:border-(--border-strong) hover:text-(--fg) active:scale-[0.98] cursor-pointer"
+          class="shrink-0 rounded-md border border-border bg-bg-elevated px-2 py-1 text-sm text-fg-muted transition hover:border-border-strong hover:text-fg active:scale-[0.98] cursor-pointer"
           @click="removeScore(i)"
         >
           ✕
@@ -62,7 +62,7 @@ function removeScore(index: number) {
 
     <button
       type="button"
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+      class="demo-btn-primary"
       @click="addScore"
     >
       + Add random score
diff --git a/vue/toolkit/src/composables/math/useCeil/demo.vue b/vue/toolkit/src/composables/math/useCeil/demo.vue
index 9424a22..77dea0f 100644
--- a/vue/toolkit/src/composables/math/useCeil/demo.vue
+++ b/vue/toolkit/src/composables/math/useCeil/demo.vue
@@ -17,49 +17,49 @@ function step(delta: number) {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex flex-col gap-1.5">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">value</span>
+      <span class="demo-label">value</span>
       <div class="flex items-center gap-2">
         <button
           type="button"
           aria-label="Decrement"
-          class="inline-flex size-9 shrink-0 items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="inline-flex size-9 shrink-0 items-center justify-center rounded-lg border border-border bg-bg-elevated text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.98] cursor-pointer"
           @click="step(-0.25)"
         >−</button>
         <input
           v-model.number="value"
           type="number"
           step="0.25"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-center font-mono text-sm text-(--fg) tabular-nums transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="w-full rounded-lg border border-border bg-bg px-3 py-2 text-center font-mono text-sm text-fg tabular-nums transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring"
         >
         <button
           type="button"
           aria-label="Increment"
-          class="inline-flex size-9 shrink-0 items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="inline-flex size-9 shrink-0 items-center justify-center rounded-lg border border-border bg-bg-elevated text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.98] cursor-pointer"
           @click="step(0.25)"
         >+</button>
       </div>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+    <div class="demo-card p-4">
       <div class="mb-2 flex items-baseline justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Math.ceil</span>
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ ceiled }}</span>
+        <span class="demo-label">Math.ceil</span>
+        <span class="demo-stat text-3xl">{{ ceiled }}</span>
       </div>
-      <div class="relative h-2 overflow-hidden rounded-full bg-(--bg-inset)">
+      <div class="relative h-2 overflow-hidden rounded-full bg-bg-inset">
         <div
-          class="h-full rounded-full bg-(--accent) transition-[width] duration-150"
+          class="h-full rounded-full bg-accent transition-[width] duration-150"
           :style="{ width: `${fraction * 100}%` }"
         />
       </div>
-      <div class="mt-1.5 flex justify-between font-mono text-xs text-(--fg-subtle) tabular-nums">
+      <div class="mt-1.5 flex justify-between font-mono text-xs text-fg-subtle tabular-nums">
         <span>{{ Math.floor(value) }}</span>
-        <span class="text-(--accent-text)">{{ ceiled }}</span>
+        <span class="text-accent-text">{{ ceiled }}</span>
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center font-mono text-sm text-(--fg) tabular-nums">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 text-center font-mono text-sm text-fg tabular-nums">
       Math.ceil({{ value }}) = {{ ceiled }}
     </div>
   </div>
diff --git a/vue/toolkit/src/composables/math/useClamp/demo.vue b/vue/toolkit/src/composables/math/useClamp/demo.vue
index 91313b3..6dcef14 100644
--- a/vue/toolkit/src/composables/math/useClamp/demo.vue
+++ b/vue/toolkit/src/composables/math/useClamp/demo.vue
@@ -14,60 +14,60 @@ const presets = [-30, 0, 50, 100, 130];
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-4">
       <div class="flex items-end justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Clamped</span>
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ clamped }}</span>
+        <span class="demo-label">Clamped</span>
+        <span class="demo-stat text-3xl">{{ clamped }}</span>
       </div>
 
       <div class="flex flex-col gap-1.5">
-        <div class="flex items-center justify-between text-xs text-(--fg-muted)">
+        <div class="flex items-center justify-between text-xs text-fg-muted">
           <span>{{ min }}</span>
           <span>range</span>
           <span>{{ max }}</span>
         </div>
-        <div class="relative h-2 rounded-full bg-(--bg-inset)">
+        <div class="relative h-2 rounded-full bg-bg-inset">
           <div
-            class="absolute top-0 h-2 rounded-full bg-(--accent-subtle)"
+            class="absolute top-0 h-2 rounded-full bg-accent-subtle"
             :style="{ left: `${min}%`, width: `${Math.max(0, max - min)}%` }"
           />
           <div
-            class="absolute -top-1 size-4 -translate-x-1/2 rounded-full border-2 border-(--bg-elevated) bg-(--accent) shadow transition-[left]"
+            class="absolute -top-1 size-4 -translate-x-1/2 rounded-full border-2 border-bg-elevated bg-accent shadow transition-[left]"
             :style="{ left: `${clamped}%` }"
           />
         </div>
       </div>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+    <div class="demo-card p-4 flex flex-col gap-4">
       <label class="flex flex-col gap-1.5">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Input value</span>
+        <span class="demo-label">Input value</span>
         <input
           v-model.number="raw"
           type="range"
           min="-50"
           max="150"
-          class="w-full accent-(--accent)"
+          class="w-full accent-accent"
         >
-        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">raw = {{ raw }}</span>
+        <span class="font-mono text-sm tabular-nums text-fg-muted">raw = {{ raw }}</span>
       </label>
 
       <div class="grid grid-cols-2 gap-3">
         <label class="flex flex-col gap-1">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Min</span>
+          <span class="demo-label">Min</span>
           <input
             v-model.number="min"
             type="number"
-            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+            class="w-full rounded-lg border border-border bg-bg px-3 py-2 text-sm text-fg transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring"
           >
         </label>
         <label class="flex flex-col gap-1">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Max</span>
+          <span class="demo-label">Max</span>
           <input
             v-model.number="max"
             type="number"
-            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+            class="w-full rounded-lg border border-border bg-bg px-3 py-2 text-sm text-fg transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring"
           >
         </label>
       </div>
@@ -77,13 +77,13 @@ const presets = [-30, 0, 50, 100, 130];
           v-for="p in presets"
           :key="p"
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="clamped = p"
         >
           set {{ p }}
         </button>
       </div>
-      <p class="text-xs text-(--fg-subtle)">
+      <p class="text-xs text-fg-subtle">
         The buttons write straight through the clamped ref &mdash; values outside the range snap to the nearest bound.
       </p>
     </div>
diff --git a/vue/toolkit/src/composables/math/useFloor/demo.vue b/vue/toolkit/src/composables/math/useFloor/demo.vue
index 2d4cac1..a65960f 100644
--- a/vue/toolkit/src/composables/math/useFloor/demo.vue
+++ b/vue/toolkit/src/composables/math/useFloor/demo.vue
@@ -13,40 +13,40 @@ function nudge(delta: number) {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-3">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Math.floor</span>
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col items-center gap-3">
+      <span class="demo-label">Math.floor</span>
       <div class="flex items-baseline gap-3 font-mono tabular-nums">
-        <span class="text-2xl text-(--fg-muted)">{{ value.toFixed(2) }}</span>
-        <span class="text-(--fg-subtle)">&rarr;</span>
-        <span class="text-4xl font-bold text-(--fg)">{{ floored }}</span>
+        <span class="text-2xl text-fg-muted">{{ value.toFixed(2) }}</span>
+        <span class="text-fg-subtle">&rarr;</span>
+        <span class="text-4xl font-bold text-fg">{{ floored }}</span>
       </div>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+    <div class="demo-card p-4 flex flex-col gap-4">
       <label class="flex flex-col gap-1.5">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Value</span>
+        <span class="demo-label">Value</span>
         <input
           v-model.number="value"
           type="range"
           min="-10"
           max="10"
           step="0.01"
-          class="w-full accent-(--accent)"
+          class="w-full accent-accent"
         >
       </label>
 
       <div class="flex flex-wrap items-center gap-2">
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="nudge(-0.1)"
         >
           &minus;0.1
         </button>
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="nudge(0.1)"
         >
           +0.1
@@ -55,11 +55,11 @@ function nudge(delta: number) {
           v-model.number="value"
           type="number"
           step="0.01"
-          class="ml-auto w-28 rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="ml-auto w-28 rounded-lg border border-border bg-bg px-3 py-2 text-sm text-fg transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring"
         >
       </div>
 
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
         useFloor({{ value }}) === {{ floored }}
       </div>
     </div>
diff --git a/vue/toolkit/src/composables/math/useMath/demo.vue b/vue/toolkit/src/composables/math/useMath/demo.vue
index 927e89c..f2a189e 100644
--- a/vue/toolkit/src/composables/math/useMath/demo.vue
+++ b/vue/toolkit/src/composables/math/useMath/demo.vue
@@ -28,47 +28,47 @@ function fmt(n: number) {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 grid grid-cols-2 gap-3">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 grid grid-cols-2 gap-3">
       <label class="flex flex-col gap-1.5">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">a = {{ a }}</span>
+        <span class="demo-label">a = {{ a }}</span>
         <input
           v-model.number="a"
           type="range"
           min="0"
           max="12"
           step="1"
-          class="w-full accent-(--accent)"
+          class="w-full accent-accent"
         >
       </label>
       <label class="flex flex-col gap-1.5">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">b = {{ b }}</span>
+        <span class="demo-label">b = {{ b }}</span>
         <input
           v-model.number="b"
           type="range"
           min="0"
           max="12"
           step="1"
-          class="w-full accent-(--accent)"
+          class="w-full accent-accent"
         >
       </label>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) divide-y divide-(--border)">
+    <div class="demo-card divide-y divide-border">
       <div
         v-for="r in results"
         :key="r.label"
         class="flex items-center justify-between gap-3 px-4 py-2.5"
       >
         <div class="flex flex-col">
-          <span class="font-mono text-sm text-(--fg)">{{ r.label }}</span>
-          <span class="text-xs text-(--fg-subtle)">{{ r.expr }}</span>
+          <span class="font-mono text-sm text-fg">{{ r.label }}</span>
+          <span class="text-xs text-fg-subtle">{{ r.expr }}</span>
         </div>
-        <span class="font-mono text-lg font-semibold tabular-nums text-(--fg)">{{ fmt(r.value) }}</span>
+        <span class="font-mono text-lg font-semibold tabular-nums text-fg">{{ fmt(r.value) }}</span>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Every value above is a single <code class="font-mono">useMath('&lt;key&gt;', ...)</code> computed &mdash; any callable
       <code class="font-mono">Math</code> method works, with refs, getters or plain values as arguments.
     </p>
diff --git a/vue/toolkit/src/composables/math/useMath/index.ts b/vue/toolkit/src/composables/math/useMath/index.ts
index 4b0a790..aceb236 100644
--- a/vue/toolkit/src/composables/math/useMath/index.ts
+++ b/vue/toolkit/src/composables/math/useMath/index.ts
@@ -6,6 +6,8 @@ import type { ComputedRef, MaybeRefOrGetter } from 'vue';
  * such as `Math.PI` or `Math.E`).
  */
 export type UseMathKey
+  // `(...args: any[]) => any` is the idiomatic "any callable" matcher; `unknown`/`never`
+  // here would fail to match `Math`'s contravariant method params and select nothing.
   = keyof { [K in keyof Math as Math[K] extends (...args: any[]) => any ? K : never]: unknown };
 
 /**
@@ -13,7 +15,7 @@ export type UseMathKey
  * (`MaybeRefOrGetter`), so callers may pass plain values, refs or getters.
  */
 export type UseMathArgs<K extends UseMathKey>
-  = Math[K] extends (...args: infer A) => any
+  = Math[K] extends (...args: infer A) => unknown
     ? { [I in keyof A]: MaybeRefOrGetter<A[I]> }
     : never;
 
@@ -21,7 +23,7 @@ export type UseMathArgs<K extends UseMathKey>
  * Reactive result of the wrapped `Math` method.
  */
 export type UseMathReturn<K extends UseMathKey>
-  = Math[K] extends (...args: any[]) => infer R ? ComputedRef<R> : never;
+  = Math[K] extends (...args: never[]) => infer R ? ComputedRef<R> : never;
 
 /**
  * @name useMath
@@ -57,6 +59,6 @@ export function useMath<K extends UseMathKey>(
   ...args: UseMathArgs<K>
 ): UseMathReturn<K> {
   return computed(
-    () => (Math[key] as (...a: any[]) => any)(...args.map(arg => toValue(arg))),
+    () => (Math[key] as unknown as (...a: unknown[]) => unknown)(...args.map(arg => toValue(arg))),
   ) as UseMathReturn<K>;
 }
diff --git a/vue/toolkit/src/composables/math/useMax/demo.vue b/vue/toolkit/src/composables/math/useMax/demo.vue
index a500cb4..e620225 100644
--- a/vue/toolkit/src/composables/math/useMax/demo.vue
+++ b/vue/toolkit/src/composables/math/useMax/demo.vue
@@ -25,29 +25,29 @@ function removeAt(i: number) {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-1">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Maximum</span>
-      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col items-center gap-1">
+      <span class="demo-label">Maximum</span>
+      <span class="demo-stat text-3xl">
         {{ Number.isFinite(max) ? max : '−∞' }}
       </span>
-      <span v-if="!samples.length" class="text-xs text-(--fg-subtle)">empty list → −Infinity</span>
+      <span v-if="!samples.length" class="text-xs text-fg-subtle">empty list → −Infinity</span>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+    <div class="demo-card p-4 flex flex-col gap-3">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Values</span>
+        <span class="demo-label">Values</span>
         <div class="flex gap-2">
           <button
             type="button"
-            class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+            class="demo-btn"
             @click="add"
           >
             + add
           </button>
           <button
             type="button"
-            class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+            class="demo-btn-primary"
             @click="randomize"
           >
             shuffle
@@ -61,19 +61,19 @@ function removeAt(i: number) {
           :key="i"
           class="flex items-center gap-2"
         >
-          <div class="relative h-7 flex-1 overflow-hidden rounded-md bg-(--bg-inset)">
+          <div class="relative h-7 flex-1 overflow-hidden rounded-md bg-bg-inset">
             <div
               class="h-full rounded-md transition-all"
-              :class="i === maxIndex ? 'bg-(--accent)' : 'bg-(--accent-subtle)'"
+              :class="i === maxIndex ? 'bg-accent' : 'bg-accent-subtle'"
               :style="{ width: `${Math.max(4, n)}%` }"
             />
-            <span class="absolute inset-y-0 left-2 flex items-center font-mono text-xs font-medium tabular-nums text-(--fg)">
+            <span class="absolute inset-y-0 left-2 flex items-center font-mono text-xs font-medium tabular-nums text-fg">
               {{ n }}
             </span>
           </div>
           <button
             type="button"
-            class="inline-flex size-7 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg-muted) transition hover:bg-(--bg-inset) hover:text-(--fg) active:scale-[0.98] cursor-pointer"
+            class="inline-flex size-7 items-center justify-center rounded-md border border-border bg-bg-elevated text-fg-muted transition hover:bg-bg-inset hover:text-fg active:scale-[0.98] cursor-pointer"
             aria-label="Remove value"
             @click="removeAt(i)"
           >
@@ -81,7 +81,7 @@ function removeAt(i: number) {
           </button>
         </div>
       </div>
-      <p v-else class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center text-sm text-(--fg-subtle)">
+      <p v-else class="rounded-lg border border-border bg-bg-inset p-3 text-center text-sm text-fg-subtle">
         No values &mdash; add some to compute a maximum.
       </p>
     </div>
diff --git a/vue/toolkit/src/composables/math/useMin/demo.vue b/vue/toolkit/src/composables/math/useMin/demo.vue
index a4616c3..f631c15 100644
--- a/vue/toolkit/src/composables/math/useMin/demo.vue
+++ b/vue/toolkit/src/composables/math/useMin/demo.vue
@@ -25,29 +25,29 @@ function removeAt(i: number) {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-1">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Minimum</span>
-      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col items-center gap-1">
+      <span class="demo-label">Minimum</span>
+      <span class="demo-stat text-3xl">
         {{ Number.isFinite(min) ? min : '∞' }}
       </span>
-      <span v-if="!samples.length" class="text-xs text-(--fg-subtle)">empty list → Infinity</span>
+      <span v-if="!samples.length" class="text-xs text-fg-subtle">empty list → Infinity</span>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+    <div class="demo-card p-4 flex flex-col gap-3">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Values</span>
+        <span class="demo-label">Values</span>
         <div class="flex gap-2">
           <button
             type="button"
-            class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+            class="demo-btn"
             @click="add"
           >
             + add
           </button>
           <button
             type="button"
-            class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+            class="demo-btn-primary"
             @click="randomize"
           >
             shuffle
@@ -61,19 +61,19 @@ function removeAt(i: number) {
           :key="i"
           class="flex items-center gap-2"
         >
-          <div class="relative h-7 flex-1 overflow-hidden rounded-md bg-(--bg-inset)">
+          <div class="relative h-7 flex-1 overflow-hidden rounded-md bg-bg-inset">
             <div
               class="h-full rounded-md transition-all"
-              :class="i === minIndex ? 'bg-emerald-500' : 'bg-(--accent-subtle)'"
+              :class="i === minIndex ? 'bg-emerald-500' : 'bg-accent-subtle'"
               :style="{ width: `${Math.max(4, n)}%` }"
             />
-            <span class="absolute inset-y-0 left-2 flex items-center font-mono text-xs font-medium tabular-nums text-(--fg)">
+            <span class="absolute inset-y-0 left-2 flex items-center font-mono text-xs font-medium tabular-nums text-fg">
               {{ n }}
             </span>
           </div>
           <button
             type="button"
-            class="inline-flex size-7 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg-muted) transition hover:bg-(--bg-inset) hover:text-(--fg) active:scale-[0.98] cursor-pointer"
+            class="inline-flex size-7 items-center justify-center rounded-md border border-border bg-bg-elevated text-fg-muted transition hover:bg-bg-inset hover:text-fg active:scale-[0.98] cursor-pointer"
             aria-label="Remove value"
             @click="removeAt(i)"
           >
@@ -81,7 +81,7 @@ function removeAt(i: number) {
           </button>
         </div>
       </div>
-      <p v-else class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center text-sm text-(--fg-subtle)">
+      <p v-else class="rounded-lg border border-border bg-bg-inset p-3 text-center text-sm text-fg-subtle">
         No values &mdash; add some to compute a minimum.
       </p>
     </div>
diff --git a/vue/toolkit/src/composables/math/useMin/index.ts b/vue/toolkit/src/composables/math/useMin/index.ts
index 7c05ff7..a4f9f59 100644
--- a/vue/toolkit/src/composables/math/useMin/index.ts
+++ b/vue/toolkit/src/composables/math/useMin/index.ts
@@ -1,28 +1,7 @@
 import { isArray } from '@robonen/stdlib';
 import { computed, toValue } from 'vue';
 import type { ComputedRef, MaybeRefOrGetter } from 'vue';
-
-export type MaybeRefOrGetterArgs<T>
-  = Array<MaybeRefOrGetter<T>> | [MaybeRefOrGetter<Array<MaybeRefOrGetter<T>>>];
-
-/**
- * Resolve a variadic args tuple (numbers, refs/getters, or a single reactive
- * array of refs/getters) into a flat array of resolved values.
- */
-function resolveArgs(args: MaybeRefOrGetterArgs<number>): number[] {
-  // Fast path: single reactive-array argument (the common useMin(arrayRef) case).
-  if (args.length === 1) {
-    const value = toValue(args[0] as MaybeRefOrGetter<number | Array<MaybeRefOrGetter<number>>>);
-
-    if (isArray(value))
-      return value.map(item => toValue(item));
-
-    return [value];
-  }
-
-  // Variadic path: each argument is a single number/ref/getter.
-  return (args as Array<MaybeRefOrGetter<number>>).map(arg => toValue(arg));
-}
+import type { MaybeComputedRefArgs } from '@/types';
 
 /**
  * @name useMin
@@ -47,6 +26,26 @@ function resolveArgs(args: MaybeRefOrGetterArgs<number>): number[] {
  */
 export function useMin(array: MaybeRefOrGetter<Array<MaybeRefOrGetter<number>>>): ComputedRef<number>;
 export function useMin(...args: Array<MaybeRefOrGetter<number>>): ComputedRef<number>;
-export function useMin(...args: MaybeRefOrGetterArgs<number>): ComputedRef<number> {
-  return computed<number>(() => Math.min(...resolveArgs(args)));
+export function useMin(...args: MaybeComputedRefArgs<number>): ComputedRef<number> {
+  return computed<number>(() => {
+    // Avoid Math.min(...array): large spreads can overflow the call stack, and
+    // a single pass skips the intermediate flattened array that flatMap builds.
+    let min = Number.POSITIVE_INFINITY;
+
+    for (const arg of args) {
+      const value = toValue(arg);
+
+      if (isArray(value)) {
+        for (const item of value) {
+          const inner = toValue(item);
+          if (inner < min) min = inner;
+        }
+      }
+      else if (value < min) {
+        min = value;
+      }
+    }
+
+    return min;
+  });
 }
diff --git a/vue/toolkit/src/composables/math/usePrecision/demo.vue b/vue/toolkit/src/composables/math/usePrecision/demo.vue
index f5b4868..9896a44 100644
--- a/vue/toolkit/src/composables/math/usePrecision/demo.vue
+++ b/vue/toolkit/src/composables/math/usePrecision/demo.vue
@@ -23,24 +23,24 @@ function pick(n: number) {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4">
       <div class="flex items-baseline justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">precision result</span>
-        <span class="font-mono text-xs text-(--fg-subtle)">{{ digits }} digit{{ digits === 1 ? '' : 's' }}</span>
+        <span class="demo-label">precision result</span>
+        <span class="font-mono text-xs text-fg-subtle">{{ digits }} digit{{ digits === 1 ? '' : 's' }}</span>
       </div>
-      <div class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">
+      <div class="demo-stat mt-1 text-3xl">
         {{ result }}
       </div>
-      <div class="mt-1 font-mono text-xs text-(--fg-subtle)">
+      <div class="mt-1 font-mono text-xs text-fg-subtle">
         from {{ value }}
       </div>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <label class="flex items-center justify-between text-sm font-medium text-(--fg)">
+    <div class="demo-card p-4">
+      <label class="flex items-center justify-between text-sm font-medium text-fg">
         <span>Value</span>
-        <span class="font-mono text-(--fg-muted)">{{ value }}</span>
+        <span class="font-mono text-fg-muted">{{ value }}</span>
       </label>
       <input
         v-model.number="value"
@@ -48,12 +48,12 @@ function pick(n: number) {
         min="0"
         max="10"
         step="0.00001"
-        class="mt-2 w-full accent-(--accent)"
+        class="mt-2 w-full accent-accent"
       >
 
-      <label class="mt-4 flex items-center justify-between text-sm font-medium text-(--fg)">
+      <label class="mt-4 flex items-center justify-between text-sm font-medium text-fg">
         <span>Digits</span>
-        <span class="font-mono text-(--fg-muted)">{{ digits }}</span>
+        <span class="font-mono text-fg-muted">{{ digits }}</span>
       </label>
       <input
         v-model.number="digits"
@@ -61,12 +61,12 @@ function pick(n: number) {
         min="0"
         max="5"
         step="1"
-        class="mt-2 w-full accent-(--accent)"
+        class="mt-2 w-full accent-accent"
       >
     </div>
 
     <div>
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Rounding method</span>
+      <span class="demo-label">Rounding method</span>
       <div class="mt-2 grid grid-cols-3 gap-2">
         <button
           v-for="m in methods"
@@ -74,8 +74,8 @@ function pick(n: number) {
           type="button"
           class="inline-flex items-center justify-center rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
           :class="math === m.key
-            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
-            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            ? 'border-transparent bg-accent text-accent-fg hover:bg-accent-hover'
+            : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
           @click="math = m.key"
         >
           {{ m.label }}
@@ -84,13 +84,13 @@ function pick(n: number) {
     </div>
 
     <div>
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Samples</span>
+      <span class="demo-label">Samples</span>
       <div class="mt-2 flex flex-wrap gap-2">
         <button
           v-for="(s, i) in samples"
           :key="i"
           type="button"
-          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) transition hover:border-(--border-strong) hover:text-(--fg) cursor-pointer"
+          class="demo-badge transition hover:border-border-strong hover:text-fg cursor-pointer"
           @click="pick(s)"
         >
           {{ s }}
diff --git a/vue/toolkit/src/composables/math/useProjection/demo.vue b/vue/toolkit/src/composables/math/useProjection/demo.vue
index d1aa575..6ec7add 100644
--- a/vue/toolkit/src/composables/math/useProjection/demo.vue
+++ b/vue/toolkit/src/composables/math/useProjection/demo.vue
@@ -19,16 +19,16 @@ const swatch = computed(() => `hsl(${hue.value} 80% 50%)`);
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">source · °C</span>
-        <span class="font-mono text-sm text-(--fg-muted)">domain [0, 40]</span>
+        <span class="demo-label">source · °C</span>
+        <span class="font-mono text-sm text-fg-muted">domain [0, 40]</span>
       </div>
       <div class="mt-1 flex items-center gap-3">
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ celsius }}°</span>
+        <span class="demo-stat text-3xl">{{ celsius }}°</span>
         <span
-          class="size-6 shrink-0 rounded-full border border-(--border)"
+          class="size-6 shrink-0 rounded-full border border-border"
           :style="{ backgroundColor: swatch }"
         />
       </div>
@@ -38,39 +38,39 @@ const swatch = computed(() => `hsl(${hue.value} 80% 50%)`);
         min="-10"
         max="50"
         step="1"
-        class="mt-3 w-full accent-(--accent)"
+        class="mt-3 w-full accent-accent"
       >
     </div>
 
     <div class="space-y-2">
-      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <span class="text-sm text-(--fg-muted)">→ °F <span class="font-mono text-xs text-(--fg-subtle)">[32, 212]</span></span>
-        <span class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ fahrenheit.toFixed(1) }}</span>
+      <div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset p-3">
+        <span class="text-sm text-fg-muted">→ °F <span class="font-mono text-xs text-fg-subtle">[32, 212]</span></span>
+        <span class="demo-stat text-sm">{{ fahrenheit.toFixed(1) }}</span>
       </div>
-      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <span class="text-sm text-(--fg-muted)">→ fraction <span class="font-mono text-xs text-(--fg-subtle)">[0, 1]</span></span>
-        <span class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ fraction.toFixed(3) }}</span>
+      <div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset p-3">
+        <span class="text-sm text-fg-muted">→ fraction <span class="font-mono text-xs text-fg-subtle">[0, 1]</span></span>
+        <span class="demo-stat text-sm">{{ fraction.toFixed(3) }}</span>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
         <div class="flex items-center justify-between">
-          <span class="text-sm text-(--fg-muted)">→ percent <span class="font-mono text-xs text-(--fg-subtle)">[0, 100]</span></span>
-          <span class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ percent.toFixed(0) }}%</span>
+          <span class="text-sm text-fg-muted">→ percent <span class="font-mono text-xs text-fg-subtle">[0, 100]</span></span>
+          <span class="demo-stat text-sm">{{ percent.toFixed(0) }}%</span>
         </div>
-        <div class="mt-2 h-2 w-full overflow-hidden rounded-full bg-(--bg)">
+        <div class="mt-2 h-2 w-full overflow-hidden rounded-full bg-bg">
           <div
-            class="h-full rounded-full bg-(--accent) transition-[width] duration-200"
+            class="h-full rounded-full bg-accent transition-[width] duration-200"
             :style="{ width: barWidth }"
           />
         </div>
       </div>
     </div>
 
-    <label class="flex items-center justify-between gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+    <label class="demo-card flex items-center justify-between gap-3 p-4">
       <span class="flex flex-col">
-        <span class="text-sm font-medium text-(--fg)">Clamp to domain</span>
-        <span class="text-xs text-(--fg-subtle)">prevent extrapolation past bounds</span>
+        <span class="text-sm font-medium text-fg">Clamp to domain</span>
+        <span class="text-xs text-fg-subtle">prevent extrapolation past bounds</span>
       </span>
-      <input v-model="clamp" type="checkbox" class="size-4 accent-(--accent)">
+      <input v-model="clamp" type="checkbox" class="size-4 accent-accent">
     </label>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/math/useRound/demo.vue b/vue/toolkit/src/composables/math/useRound/demo.vue
index 365ffc6..a33467e 100644
--- a/vue/toolkit/src/composables/math/useRound/demo.vue
+++ b/vue/toolkit/src/composables/math/useRound/demo.vue
@@ -17,35 +17,35 @@ const hint = computed(() => {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4">
       <div class="flex items-baseline justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">rounded</span>
-        <span class="font-mono text-xs text-(--fg-subtle)">{{ hint }}</span>
+        <span class="demo-label">rounded</span>
+        <span class="font-mono text-xs text-fg-subtle">{{ hint }}</span>
       </div>
-      <div class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">
+      <div class="demo-stat mt-1 text-3xl">
         {{ rounded }}
       </div>
-      <div class="mt-1 font-mono text-xs text-(--fg-subtle)">
+      <div class="mt-1 font-mono text-xs text-fg-subtle">
         input {{ value }}
       </div>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <label class="block text-sm font-medium text-(--fg)" for="round-value">Value</label>
+    <div class="demo-card p-4">
+      <label class="block text-sm font-medium text-fg" for="round-value">Value</label>
       <input
         id="round-value"
         v-model.number="value"
         type="number"
         step="0.0001"
-        class="mt-2 w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input mt-2"
       >
 
-      <label class="mt-4 flex items-center justify-between text-sm font-medium text-(--fg)">
+      <label class="mt-4 flex items-center justify-between text-sm font-medium text-fg">
         <span>Digits</span>
         <span
           class="font-mono tabular-nums"
-          :class="digits === 0 ? 'text-(--fg-muted)' : 'text-(--accent-text)'"
+          :class="digits === 0 ? 'text-fg-muted' : 'text-accent-text'"
         >{{ digits > 0 ? '+' : '' }}{{ digits }}</span>
       </label>
       <input
@@ -54,9 +54,9 @@ const hint = computed(() => {
         min="-3"
         max="4"
         step="1"
-        class="mt-2 w-full accent-(--accent)"
+        class="mt-2 w-full accent-accent"
       >
-      <div class="mt-1 flex justify-between font-mono text-xs text-(--fg-subtle)">
+      <div class="mt-1 flex justify-between font-mono text-xs text-fg-subtle">
         <span>tens</span>
         <span>integer</span>
         <span>decimals</span>
diff --git a/vue/toolkit/src/composables/math/useSum/demo.vue b/vue/toolkit/src/composables/math/useSum/demo.vue
index 4921378..307ab76 100644
--- a/vue/toolkit/src/composables/math/useSum/demo.vue
+++ b/vue/toolkit/src/composables/math/useSum/demo.vue
@@ -28,53 +28,53 @@ function removeItem(id: number) {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="flex items-center justify-between rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card flex items-center justify-between p-4">
       <div class="flex flex-col">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">monthly total</span>
-        <span class="text-xs text-(--fg-subtle)">{{ items.length }} item{{ items.length === 1 ? '' : 's' }}</span>
+        <span class="demo-label">monthly total</span>
+        <span class="text-xs text-fg-subtle">{{ items.length }} item{{ items.length === 1 ? '' : 's' }}</span>
       </div>
-      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">${{ total.toFixed(2) }}</span>
+      <span class="demo-stat text-3xl">${{ total.toFixed(2) }}</span>
     </div>
 
     <div class="space-y-2">
       <div
         v-for="item in items"
         :key="item.id"
-        class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) p-2"
+        class="flex items-center gap-2 rounded-lg border border-border bg-bg-inset p-2"
       >
         <input
           v-model="item.label"
           type="text"
-          class="min-w-0 flex-1 rounded-md border border-transparent bg-transparent px-2 py-1 text-sm text-(--fg) transition focus:border-(--accent) focus:bg-(--bg) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="min-w-0 flex-1 rounded-md border border-transparent bg-transparent px-2 py-1 text-sm text-fg transition focus:border-accent focus:bg-bg focus:outline-none focus:ring-2 focus:ring-ring"
         >
-        <div class="flex items-center text-sm text-(--fg-subtle)">
+        <div class="flex items-center text-sm text-fg-subtle">
           <span class="font-mono">$</span>
           <input
             v-model.number="item.amount"
             type="number"
             step="0.01"
-            class="w-20 rounded-md border border-(--border) bg-(--bg) px-2 py-1 text-right font-mono text-sm tabular-nums text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+            class="w-20 rounded-md border border-border bg-bg px-2 py-1 text-right font-mono text-sm tabular-nums text-fg transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring"
           >
         </div>
         <button
           type="button"
           aria-label="Remove item"
-          class="inline-flex size-7 shrink-0 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg-muted) transition hover:border-red-500/40 hover:text-red-600 dark:hover:text-red-400 active:scale-[0.98] cursor-pointer"
+          class="inline-flex size-7 shrink-0 items-center justify-center rounded-md border border-border bg-bg-elevated text-fg-muted transition hover:border-red-500/40 hover:text-red-600 dark:hover:text-red-400 active:scale-[0.98] cursor-pointer"
           @click="removeItem(item.id)"
         >
           &times;
         </button>
       </div>
 
-      <p v-if="!items.length" class="rounded-lg border border-dashed border-(--border) bg-(--bg-inset) p-4 text-center text-sm text-(--fg-subtle)">
+      <p v-if="!items.length" class="rounded-lg border border-dashed border-border bg-bg-inset p-4 text-center text-sm text-fg-subtle">
         No items — total is ${{ total.toFixed(2) }}
       </p>
     </div>
 
     <button
       type="button"
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      class="demo-btn"
       @click="addItem"
     >
       + Add item
diff --git a/vue/toolkit/src/composables/math/useTrunc/demo.vue b/vue/toolkit/src/composables/math/useTrunc/demo.vue
index 3585528..974f794 100644
--- a/vue/toolkit/src/composables/math/useTrunc/demo.vue
+++ b/vue/toolkit/src/composables/math/useTrunc/demo.vue
@@ -12,22 +12,22 @@ const samples = [2.9, -3.7, 42.0001, -0.5, 99.999];
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="grid grid-cols-2 gap-3">
-      <div class="flex flex-col items-center gap-1 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">truncated</span>
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ truncated }}</span>
+      <div class="demo-card flex flex-col items-center gap-1 p-4">
+        <span class="demo-label">truncated</span>
+        <span class="demo-stat text-3xl">{{ truncated }}</span>
       </div>
-      <div class="flex flex-col items-center gap-1 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">dropped</span>
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg-muted)">{{ fractional.toFixed(3) }}</span>
+      <div class="demo-card flex flex-col items-center gap-1 p-4">
+        <span class="demo-label">dropped</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-fg-muted">{{ fractional.toFixed(3) }}</span>
       </div>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <label class="flex items-center justify-between text-sm font-medium text-(--fg)">
+    <div class="demo-card p-4">
+      <label class="flex items-center justify-between text-sm font-medium text-fg">
         <span>Value</span>
-        <span class="font-mono tabular-nums text-(--fg-muted)">{{ value }}</span>
+        <span class="font-mono tabular-nums text-fg-muted">{{ value }}</span>
       </label>
       <input
         v-model.number="value"
@@ -35,18 +35,18 @@ const samples = [2.9, -3.7, 42.0001, -0.5, 99.999];
         min="-10"
         max="10"
         step="0.01"
-        class="mt-2 w-full accent-(--accent)"
+        class="mt-2 w-full accent-accent"
       >
     </div>
 
     <div>
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Samples</span>
+      <span class="demo-label">Samples</span>
       <div class="mt-2 flex flex-wrap gap-2">
         <button
           v-for="(s, i) in samples"
           :key="i"
           type="button"
-          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) transition hover:border-(--border-strong) hover:text-(--fg) cursor-pointer"
+          class="demo-badge transition hover:border-border-strong hover:text-fg cursor-pointer"
           @click="value = s"
         >
           {{ s }}
diff --git a/vue/toolkit/src/composables/media/useBluetooth/demo.vue b/vue/toolkit/src/composables/media/useBluetooth/demo.vue
index 400a889..ab5142e 100644
--- a/vue/toolkit/src/composables/media/useBluetooth/demo.vue
+++ b/vue/toolkit/src/composables/media/useBluetooth/demo.vue
@@ -31,26 +31,26 @@ const errorMessage = computed(() => {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400">
       Web Bluetooth is not supported in this browser.
     </div>
 
     <template v-else>
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="demo-card p-4 flex flex-col gap-4">
         <div class="flex items-center justify-between">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Web Bluetooth</span>
-          <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
-            <span class="size-1.5 rounded-full transition" :class="isConnected ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+          <span class="demo-label">Web Bluetooth</span>
+          <span class="demo-badge">
+            <span class="size-1.5 rounded-full transition" :class="isConnected ? 'bg-emerald-500' : 'bg-fg-subtle'" />
             {{ isConnected ? 'Connected' : 'Disconnected' }}
           </span>
         </div>
 
-        <div v-if="device" class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-1">
-          <div class="text-sm font-medium text-(--fg) truncate">{{ deviceName }}</div>
-          <div class="font-mono text-xs text-(--fg-subtle) truncate">{{ deviceId }}</div>
+        <div v-if="device" class="rounded-lg border border-border bg-bg-inset p-3 flex flex-col gap-1">
+          <div class="text-sm font-medium text-fg truncate">{{ deviceName }}</div>
+          <div class="font-mono text-xs text-fg-subtle truncate">{{ deviceId }}</div>
         </div>
-        <div v-else class="rounded-lg border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center text-sm text-(--fg-subtle)">
+        <div v-else class="rounded-lg border border-dashed border-border bg-bg-inset p-6 text-center text-sm text-fg-subtle">
           No device paired yet
         </div>
       </div>
@@ -58,7 +58,7 @@ const errorMessage = computed(() => {
       <div class="flex flex-wrap gap-2">
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          class="demo-btn-primary"
           @click="requestDevice"
         >
           Pair device
@@ -66,7 +66,7 @@ const errorMessage = computed(() => {
         <button
           type="button"
           :disabled="!device || isConnected"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           @click="connect"
         >
           Reconnect
@@ -74,7 +74,7 @@ const errorMessage = computed(() => {
         <button
           type="button"
           :disabled="!isConnected"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           @click="disconnect"
         >
           Disconnect
@@ -84,7 +84,7 @@ const errorMessage = computed(() => {
       <p v-if="errorMessage" class="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-600 dark:text-red-400">
         {{ errorMessage }}
       </p>
-      <p class="text-xs text-(--fg-subtle)">
+      <p class="text-xs text-fg-subtle">
         Pairing prompts the browser's device chooser. A physical Bluetooth peripheral must be in range.
       </p>
     </template>
diff --git a/vue/toolkit/src/composables/media/useDisplayMedia/demo.vue b/vue/toolkit/src/composables/media/useDisplayMedia/demo.vue
index 775b594..0900b64 100644
--- a/vue/toolkit/src/composables/media/useDisplayMedia/demo.vue
+++ b/vue/toolkit/src/composables/media/useDisplayMedia/demo.vue
@@ -17,22 +17,22 @@ const surfaceLabel = computed(() => track.value?.label || 'Shared surface');
 </script>
 
 <template>
-  <div class="w-full max-w-md flex flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400">
       Screen capture (getDisplayMedia) is not supported in this browser.
     </div>
 
     <template v-else>
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="demo-card p-4 flex flex-col gap-4">
         <div class="flex items-center justify-between">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Screen share</span>
-          <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
-            <span class="size-1.5 rounded-full transition" :class="enabled ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+          <span class="demo-label">Screen share</span>
+          <span class="demo-badge">
+            <span class="size-1.5 rounded-full transition" :class="enabled ? 'bg-emerald-500' : 'bg-fg-subtle'" />
             {{ enabled ? 'Sharing' : 'Idle' }}
           </span>
         </div>
 
-        <div class="relative aspect-video overflow-hidden rounded-lg border border-(--border) bg-(--bg-inset)">
+        <div class="relative aspect-video overflow-hidden rounded-lg border border-border bg-bg-inset">
           <video
             ref="video"
             autoplay
@@ -42,14 +42,14 @@ const surfaceLabel = computed(() => track.value?.label || 'Shared surface');
           />
           <div
             v-if="!stream"
-            class="absolute inset-0 flex flex-col items-center justify-center gap-1 text-center text-sm text-(--fg-subtle)"
+            class="absolute inset-0 flex flex-col items-center justify-center gap-1 text-center text-sm text-fg-subtle"
           >
-            <span class="text-(--fg-muted)">No active capture</span>
+            <span class="text-fg-muted">No active capture</span>
             <span class="text-xs">Start sharing to preview your screen</span>
           </div>
         </div>
 
-        <div v-if="stream" class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg) truncate">
+        <div v-if="stream" class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-xs text-fg truncate">
           {{ surfaceLabel }}
         </div>
       </div>
@@ -58,7 +58,7 @@ const surfaceLabel = computed(() => track.value?.label || 'Shared surface');
         <button
           v-if="!enabled"
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          class="demo-btn-primary flex-1"
           @click="start"
         >
           Start sharing
@@ -66,19 +66,19 @@ const surfaceLabel = computed(() => track.value?.label || 'Shared surface');
         <button
           v-else
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn flex-1"
           @click="stop"
         >
           Stop sharing
         </button>
 
-        <label class="inline-flex select-none items-center gap-2 text-sm text-(--fg-muted) cursor-pointer">
-          <input v-model="enabled" type="checkbox" class="size-4 accent-(--accent) cursor-pointer">
+        <label class="inline-flex select-none items-center gap-2 text-sm text-fg-muted cursor-pointer">
+          <input v-model="enabled" type="checkbox" class="size-4 accent-accent cursor-pointer">
           enabled
         </label>
       </div>
 
-      <p class="text-xs text-(--fg-subtle)">
+      <p class="text-xs text-fg-subtle">
         Starting prompts the browser's screen-picker. Toggling <code class="font-mono">enabled</code> drives the same stream.
       </p>
     </template>
diff --git a/vue/toolkit/src/composables/media/useMediaControls/demo.vue b/vue/toolkit/src/composables/media/useMediaControls/demo.vue
index fd464b4..9cc347c 100644
--- a/vue/toolkit/src/composables/media/useMediaControls/demo.vue
+++ b/vue/toolkit/src/composables/media/useMediaControls/demo.vue
@@ -44,9 +44,9 @@ const rates = [0.5, 1, 1.5, 2];
 </script>
 
 <template>
-  <div class="w-full max-w-md flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
-      <div class="relative aspect-video overflow-hidden rounded-lg border border-(--border) bg-black">
+  <div class="demo-stack max-w-md">
+    <div class="demo-card p-4 flex flex-col gap-4">
+      <div class="relative aspect-video overflow-hidden rounded-lg border border-border bg-black">
         <video
           ref="video"
           playsinline
@@ -62,9 +62,9 @@ const rates = [0.5, 1, 1.5, 2];
 
       <!-- Scrub bar with a buffered underlay -->
       <div class="flex flex-col gap-1.5">
-        <div class="relative h-1.5 overflow-hidden rounded-full bg-(--bg-inset)">
-          <div class="absolute inset-y-0 left-0 bg-(--fg-subtle)/30" :style="{ width: `${bufferedPercent}%` }" />
-          <div class="absolute inset-y-0 left-0 bg-(--accent) transition-[width] duration-150" :style="{ width: `${progressPercent}%` }" />
+        <div class="relative h-1.5 overflow-hidden rounded-full bg-bg-inset">
+          <div class="absolute inset-y-0 left-0 bg-fg-subtle/30" :style="{ width: `${bufferedPercent}%` }" />
+          <div class="absolute inset-y-0 left-0 bg-accent transition-[width] duration-150" :style="{ width: `${progressPercent}%` }" />
         </div>
         <input
           v-model.number="currentTime"
@@ -72,10 +72,10 @@ const rates = [0.5, 1, 1.5, 2];
           min="0"
           :max="duration || 0"
           step="0.1"
-          class="w-full accent-(--accent) cursor-pointer"
+          class="w-full accent-accent cursor-pointer"
           aria-label="Seek"
         >
-        <div class="flex items-center justify-between font-mono text-xs tabular-nums text-(--fg-muted)">
+        <div class="flex items-center justify-between font-mono text-xs tabular-nums text-fg-muted">
           <span>{{ formatTime(currentTime) }}</span>
           <span>{{ formatTime(duration) }}</span>
         </div>
@@ -84,14 +84,14 @@ const rates = [0.5, 1, 1.5, 2];
       <div class="flex flex-wrap items-center gap-2">
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          class="demo-btn-primary"
           @click="playing = !playing"
         >
           {{ playing ? 'Pause' : ended ? 'Replay' : 'Play' }}
         </button>
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="muted = !muted"
         >
           {{ muted ? 'Unmute' : 'Mute' }}
@@ -99,7 +99,7 @@ const rates = [0.5, 1, 1.5, 2];
         <button
           v-if="supportsPictureInPicture"
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="togglePictureInPicture"
         >
           {{ isPictureInPicture ? 'Exit PiP' : 'Picture-in-Picture' }}
@@ -108,7 +108,7 @@ const rates = [0.5, 1, 1.5, 2];
 
       <div class="grid grid-cols-2 gap-4">
         <div class="flex flex-col gap-1.5">
-          <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="vol">Volume</label>
+          <label class="demo-label" for="vol">Volume</label>
           <input
             id="vol"
             v-model.number="volume"
@@ -116,11 +116,11 @@ const rates = [0.5, 1, 1.5, 2];
             min="0"
             max="1"
             step="0.05"
-            class="w-full accent-(--accent) cursor-pointer"
+            class="w-full accent-accent cursor-pointer"
           >
         </div>
         <div class="flex flex-col gap-1.5">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Speed</span>
+          <span class="demo-label">Speed</span>
           <div class="flex gap-1">
             <button
               v-for="r in rates"
@@ -128,8 +128,8 @@ const rates = [0.5, 1, 1.5, 2];
               type="button"
               class="flex-1 rounded-md border px-2 py-1 text-xs font-medium tabular-nums transition cursor-pointer"
               :class="rate === r
-                ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
-                : 'border-(--border) bg-(--bg-elevated) text-(--fg-muted) hover:bg-(--bg-inset)'"
+                ? 'border-accent bg-accent-subtle text-accent-text'
+                : 'border-border bg-bg-elevated text-fg-muted hover:bg-bg-inset'"
               @click="rate = r"
             >
               {{ r }}x
@@ -139,7 +139,7 @@ const rates = [0.5, 1, 1.5, 2];
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Reactive controls over a real <code class="font-mono">&lt;video&gt;</code>: seek, volume, mute, playback rate, buffered ranges, and Picture-in-Picture.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/media/useMediaControls/index.ts b/vue/toolkit/src/composables/media/useMediaControls/index.ts
index f023bad..5f104da 100644
--- a/vue/toolkit/src/composables/media/useMediaControls/index.ts
+++ b/vue/toolkit/src/composables/media/useMediaControls/index.ts
@@ -7,6 +7,8 @@ import { useEventListener } from '@/composables/browser/useEventListener';
 import { unrefElement } from '@/composables/component/unrefElement';
 import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
 import { watchIgnorable } from '@/composables/watch/watchIgnorable';
+import { createEventHook } from '@/composables/utilities/createEventHook';
+import type { EventHookOn } from '@/composables/utilities/createEventHook';
 
 /**
  * A media `<source>` descriptor injected as a child `<source>` element.
@@ -106,9 +108,11 @@ export interface UseMediaTextTrack {
 }
 
 /**
- * Subscribe to a media event hook; returns an unsubscribe handle.
+ * Subscribe to a media event hook; returns an unsubscribe handle. Backed by the
+ * shared {@link createEventHook}, so the off handle is callable (and exposes an
+ * `.off` method) and listeners are auto-removed on scope dispose.
  */
-export type MediaEventHookOn<T = void> = (callback: (param: T) => void) => { off: () => void };
+export type MediaEventHookOn<T = void> = EventHookOn<T>;
 
 export interface UseMediaControlsOptions extends ConfigurableDocument {
   /**
@@ -243,30 +247,6 @@ export interface UseMediaControlsReturn {
   onPlaybackError: MediaEventHookOn<unknown>;
 }
 
-interface MediaEventHook<T> {
-  on: MediaEventHookOn<T>;
-  trigger: (param: T) => void;
-}
-
-function createEventHook<T = void>(): MediaEventHook<T> {
-  const callbacks = new Set<(param: T) => void>();
-
-  const on: MediaEventHookOn<T> = (callback) => {
-    callbacks.add(callback);
-    return {
-      off: () => {
-        callbacks.delete(callback);
-      },
-    };
-  };
-
-  const trigger = (param: T): void => {
-    callbacks.forEach(cb => cb(param));
-  };
-
-  return { on, trigger };
-}
-
 /**
  * Convert a `TimeRanges` object to an array of `[start, end]` pairs.
  */
diff --git a/vue/toolkit/src/composables/media/useMemory/demo.vue b/vue/toolkit/src/composables/media/useMemory/demo.vue
index 30dd4a2..2c92b94 100644
--- a/vue/toolkit/src/composables/media/useMemory/demo.vue
+++ b/vue/toolkit/src/composables/media/useMemory/demo.vue
@@ -38,43 +38,43 @@ function release(): void {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400">
       <code class="font-mono">performance.memory</code> is not available in this browser (Chromium only).
     </div>
 
     <template v-else>
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="demo-card p-4 flex flex-col gap-4">
         <div class="flex items-center justify-between">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">JS heap</span>
-          <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ usedPercent.toFixed(1) }}%</span>
+          <span class="demo-label">JS heap</span>
+          <span class="font-mono text-xs tabular-nums text-fg-muted">{{ usedPercent.toFixed(1) }}%</span>
         </div>
 
         <div class="flex items-baseline gap-2">
-          <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+          <span class="demo-stat text-3xl">
             {{ memory ? formatBytes(memory.usedJSHeapSize) : '—' }}
           </span>
-          <span class="text-sm text-(--fg-subtle)">used</span>
+          <span class="text-sm text-fg-subtle">used</span>
         </div>
 
         <!-- Stacked gauge: allocated under used, both relative to the heap limit -->
-        <div class="relative h-2.5 overflow-hidden rounded-full bg-(--bg-inset)">
-          <div class="absolute inset-y-0 left-0 bg-(--fg-subtle)/30 transition-[width] duration-500" :style="{ width: `${allocatedPercent}%` }" />
-          <div class="absolute inset-y-0 left-0 bg-(--accent) transition-[width] duration-500" :style="{ width: `${usedPercent}%` }" />
+        <div class="relative h-2.5 overflow-hidden rounded-full bg-bg-inset">
+          <div class="absolute inset-y-0 left-0 bg-fg-subtle/30 transition-[width] duration-500" :style="{ width: `${allocatedPercent}%` }" />
+          <div class="absolute inset-y-0 left-0 bg-accent transition-[width] duration-500" :style="{ width: `${usedPercent}%` }" />
         </div>
 
         <div class="grid grid-cols-3 gap-2">
-          <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
-            <div class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ memory ? formatBytes(memory.usedJSHeapSize) : '—' }}</div>
-            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">used</div>
+          <div class="rounded-lg border border-border bg-bg-inset p-2 text-center">
+            <div class="demo-stat text-sm">{{ memory ? formatBytes(memory.usedJSHeapSize) : '—' }}</div>
+            <div class="text-[10px] uppercase tracking-wide text-fg-subtle">used</div>
           </div>
-          <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
-            <div class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ memory ? formatBytes(memory.totalJSHeapSize) : '—' }}</div>
-            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">total</div>
+          <div class="rounded-lg border border-border bg-bg-inset p-2 text-center">
+            <div class="demo-stat text-sm">{{ memory ? formatBytes(memory.totalJSHeapSize) : '—' }}</div>
+            <div class="text-[10px] uppercase tracking-wide text-fg-subtle">total</div>
           </div>
-          <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
-            <div class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ memory ? formatBytes(memory.jsHeapSizeLimit) : '—' }}</div>
-            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">limit</div>
+          <div class="rounded-lg border border-border bg-bg-inset p-2 text-center">
+            <div class="demo-stat text-sm">{{ memory ? formatBytes(memory.jsHeapSizeLimit) : '—' }}</div>
+            <div class="text-[10px] uppercase tracking-wide text-fg-subtle">limit</div>
           </div>
         </div>
       </div>
@@ -82,7 +82,7 @@ function release(): void {
       <div class="flex items-center gap-2">
         <button
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          class="demo-btn-primary flex-1"
           @click="allocate"
         >
           Allocate ~8 MB
@@ -90,14 +90,14 @@ function release(): void {
         <button
           type="button"
           :disabled="allocations === 0"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           @click="release"
         >
           Release
         </button>
       </div>
 
-      <p class="text-xs text-(--fg-subtle)">
+      <p class="text-xs text-fg-subtle">
         Sampled every second. Allocate buffers to watch usage climb; releasing lets the next GC reclaim it.
       </p>
     </template>
diff --git a/vue/toolkit/src/composables/media/usePerformanceObserver/demo.vue b/vue/toolkit/src/composables/media/usePerformanceObserver/demo.vue
index 417098f..d595915 100644
--- a/vue/toolkit/src/composables/media/usePerformanceObserver/demo.vue
+++ b/vue/toolkit/src/composables/media/usePerformanceObserver/demo.vue
@@ -58,29 +58,29 @@ const lastDuration = computed(() => {
 </script>
 
 <template>
-  <div class="w-full max-w-md flex flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400">
       <code class="font-mono">PerformanceObserver</code> is not supported in this browser.
     </div>
 
     <template v-else>
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="demo-card p-4 flex flex-col gap-4">
         <div class="flex items-center justify-between">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Performance entries</span>
-          <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
-            <span class="size-1.5 rounded-full transition" :class="isActive ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+          <span class="demo-label">Performance entries</span>
+          <span class="demo-badge">
+            <span class="size-1.5 rounded-full transition" :class="isActive ? 'bg-emerald-500' : 'bg-fg-subtle'" />
             {{ isActive ? 'Observing' : 'Paused' }}
           </span>
         </div>
 
         <div class="grid grid-cols-2 gap-2">
-          <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
-            <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ total }}</div>
-            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">entries seen</div>
+          <div class="rounded-lg border border-border bg-bg-inset p-2 text-center">
+            <div class="demo-stat text-lg">{{ total }}</div>
+            <div class="text-[10px] uppercase tracking-wide text-fg-subtle">entries seen</div>
           </div>
-          <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
-            <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ lastDuration.toFixed(2) }}</div>
-            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">last measure ms</div>
+          <div class="rounded-lg border border-border bg-bg-inset p-2 text-center">
+            <div class="demo-stat text-lg">{{ lastDuration.toFixed(2) }}</div>
+            <div class="text-[10px] uppercase tracking-wide text-fg-subtle">last measure ms</div>
           </div>
         </div>
 
@@ -89,20 +89,20 @@ const lastDuration = computed(() => {
             <li
               v-for="(entry, i) in entries"
               :key="`${entry.name}-${i}`"
-              class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-1.5"
+              class="flex items-center justify-between gap-3 rounded-lg border border-border bg-bg-inset px-3 py-1.5"
             >
               <span class="flex min-w-0 items-center gap-2">
                 <span
-                  class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-elevated) px-1.5 py-0.5 text-[10px] font-medium uppercase text-(--fg-muted)"
+                  class="inline-flex items-center rounded-md border border-border bg-bg-elevated px-1.5 py-0.5 text-[10px] font-medium uppercase text-fg-muted"
                 >{{ entry.type }}</span>
-                <span class="truncate font-mono text-xs text-(--fg)">{{ entry.name }}</span>
+                <span class="truncate font-mono text-xs text-fg">{{ entry.name }}</span>
               </span>
-              <span class="shrink-0 font-mono text-xs tabular-nums text-(--fg-muted)">{{ entry.duration.toFixed(1) }}ms</span>
+              <span class="shrink-0 font-mono text-xs tabular-nums text-fg-muted">{{ entry.duration.toFixed(1) }}ms</span>
             </li>
           </ul>
           <div
             v-else
-            class="rounded-lg border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center text-sm text-(--fg-subtle)"
+            class="rounded-lg border border-dashed border-border bg-bg-inset p-6 text-center text-sm text-fg-subtle"
           >
             No entries yet — run a measured task
           </div>
@@ -112,21 +112,21 @@ const lastDuration = computed(() => {
       <div class="flex items-center gap-2">
         <button
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          class="demo-btn-primary flex-1"
           @click="measureWork"
         >
           Run measured task
         </button>
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="toggle"
         >
           {{ isActive ? 'Pause' : 'Resume' }}
         </button>
       </div>
 
-      <p class="text-xs text-(--fg-subtle)">
+      <p class="text-xs text-fg-subtle">
         Each task emits User Timing <code class="font-mono">mark</code>/<code class="font-mono">measure</code> entries that the observer streams in live.
       </p>
     </template>
diff --git a/vue/toolkit/src/composables/media/useSpeechRecognition/demo.vue b/vue/toolkit/src/composables/media/useSpeechRecognition/demo.vue
index d890ed0..a72515b 100644
--- a/vue/toolkit/src/composables/media/useSpeechRecognition/demo.vue
+++ b/vue/toolkit/src/composables/media/useSpeechRecognition/demo.vue
@@ -25,7 +25,7 @@ const {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       v-if="!isSupported"
       class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400"
@@ -35,11 +35,11 @@ const {
 
     <template v-else>
       <div class="flex items-center justify-between gap-3">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Language</span>
+        <span class="demo-label">Language</span>
         <select
           v-model="lang"
           :disabled="isListening"
-          class="rounded-lg border border-(--border) bg-(--bg) px-2.5 py-1.5 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring) disabled:cursor-not-allowed disabled:opacity-40"
+          class="rounded-lg border border-border bg-bg px-2.5 py-1.5 text-sm text-fg transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-40"
         >
           <option v-for="l in languages" :key="l.value" :value="l.value">{{ l.label }}</option>
         </select>
@@ -50,48 +50,48 @@ const {
         class="inline-flex items-center justify-center gap-2 rounded-lg border border-transparent px-3 py-2.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
         :class="isListening
           ? 'bg-red-500 text-white hover:bg-red-600'
-          : 'bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'"
+          : 'bg-accent text-accent-fg hover:bg-accent-hover'"
         @click="toggle()"
       >
         <span
           class="size-2 rounded-full"
-          :class="isListening ? 'bg-white animate-pulse' : 'bg-(--accent-fg)/60'"
+          :class="isListening ? 'bg-white animate-pulse' : 'bg-accent-fg/60'"
         />
         {{ isListening ? 'Stop listening' : 'Start listening' }}
       </button>
 
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2 min-h-28">
+      <div class="demo-card p-4 flex flex-col gap-2 min-h-28">
         <div class="flex items-center justify-between">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Transcript</span>
+          <span class="demo-label">Transcript</span>
           <span
             v-if="result"
-            class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+            class="demo-badge"
           >
             {{ isFinal ? 'final' : 'interim' }}
           </span>
         </div>
         <p
           v-if="result"
-          class="text-sm leading-relaxed text-(--fg)"
-          :class="{ 'italic text-(--fg-muted)': !isFinal }"
+          class="text-sm leading-relaxed text-fg"
+          :class="{ 'italic text-fg-muted': !isFinal }"
         >
           {{ result }}
         </p>
-        <p v-else class="text-sm text-(--fg-subtle)">
+        <p v-else class="text-sm text-fg-subtle">
           {{ isListening ? 'Listening… start speaking.' : 'Press start and say something.' }}
         </p>
       </div>
 
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Confidence</span>
+      <div class="rounded-lg border border-border bg-bg-inset p-3 flex items-center justify-between">
+        <span class="demo-label">Confidence</span>
         <div class="flex items-center gap-2">
-          <div class="h-1.5 w-24 overflow-hidden rounded-full bg-(--bg-elevated)">
+          <div class="h-1.5 w-24 overflow-hidden rounded-full bg-bg-elevated">
             <div
-              class="h-full rounded-full bg-(--accent) transition-all duration-300"
+              class="h-full rounded-full bg-accent transition-all duration-300"
               :style="{ width: `${Math.round(confidence * 100)}%` }"
             />
           </div>
-          <span class="font-mono text-sm tabular-nums text-(--fg)">{{ Math.round(confidence * 100) }}%</span>
+          <span class="font-mono text-sm tabular-nums text-fg">{{ Math.round(confidence * 100) }}%</span>
         </div>
       </div>
 
diff --git a/vue/toolkit/src/composables/media/useSpeechSynthesis/demo.vue b/vue/toolkit/src/composables/media/useSpeechSynthesis/demo.vue
index a82b7b0..c04ff95 100644
--- a/vue/toolkit/src/composables/media/useSpeechSynthesis/demo.vue
+++ b/vue/toolkit/src/composables/media/useSpeechSynthesis/demo.vue
@@ -25,7 +25,7 @@ const statusLabels: Record<string, string> = {
 </script>
 
 <template>
-  <div class="w-full max-w-md flex flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div
       v-if="!isSupported"
       class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400"
@@ -35,38 +35,38 @@ const statusLabels: Record<string, string> = {
 
     <template v-else>
       <div class="flex flex-col gap-1.5">
-        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Text to speak</label>
+        <label class="demo-label">Text to speak</label>
         <textarea
           v-model="text"
           rows="2"
-          class="w-full resize-none rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="demo-input resize-none"
         />
       </div>
 
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="demo-card p-4 flex flex-col gap-3">
         <div class="flex items-center justify-between">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Rate</span>
-          <span class="font-mono text-sm tabular-nums text-(--fg)">{{ rate.toFixed(1) }}×</span>
+          <span class="demo-label">Rate</span>
+          <span class="font-mono text-sm tabular-nums text-fg">{{ rate.toFixed(1) }}×</span>
         </div>
-        <input v-model.number="rate" type="range" min="0.5" max="2" step="0.1" class="w-full accent-(--accent) cursor-pointer">
+        <input v-model.number="rate" type="range" min="0.5" max="2" step="0.1" class="w-full accent-accent cursor-pointer">
 
         <div class="flex items-center justify-between">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Pitch</span>
-          <span class="font-mono text-sm tabular-nums text-(--fg)">{{ pitch.toFixed(1) }}</span>
+          <span class="demo-label">Pitch</span>
+          <span class="font-mono text-sm tabular-nums text-fg">{{ pitch.toFixed(1) }}</span>
         </div>
-        <input v-model.number="pitch" type="range" min="0" max="2" step="0.1" class="w-full accent-(--accent) cursor-pointer">
+        <input v-model.number="pitch" type="range" min="0" max="2" step="0.1" class="w-full accent-accent cursor-pointer">
 
         <div class="flex items-center justify-between">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Volume</span>
-          <span class="font-mono text-sm tabular-nums text-(--fg)">{{ Math.round(volume * 100) }}%</span>
+          <span class="demo-label">Volume</span>
+          <span class="font-mono text-sm tabular-nums text-fg">{{ Math.round(volume * 100) }}%</span>
         </div>
-        <input v-model.number="volume" type="range" min="0" max="1" step="0.05" class="w-full accent-(--accent) cursor-pointer">
+        <input v-model.number="volume" type="range" min="0" max="1" step="0.05" class="w-full accent-accent cursor-pointer">
       </div>
 
       <div class="flex items-center gap-2">
         <button
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn-primary flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           :disabled="!text.trim()"
           @click="speak()"
         >
@@ -74,7 +74,7 @@ const statusLabels: Record<string, string> = {
         </button>
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           :disabled="!isPlaying && status !== 'pause'"
           @click="toggle()"
         >
@@ -82,19 +82,19 @@ const statusLabels: Record<string, string> = {
         </button>
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="stop()"
         >
           Stop
         </button>
       </div>
 
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Status</span>
-        <span class="inline-flex items-center gap-1.5 font-mono text-sm text-(--fg)">
+      <div class="rounded-lg border border-border bg-bg-inset p-3 flex items-center justify-between">
+        <span class="demo-label">Status</span>
+        <span class="inline-flex items-center gap-1.5 font-mono text-sm text-fg">
           <span
             class="size-2 rounded-full transition-colors"
-            :class="isPlaying ? 'bg-emerald-500 animate-pulse' : 'bg-(--fg-subtle)'"
+            :class="isPlaying ? 'bg-emerald-500 animate-pulse' : 'bg-fg-subtle'"
           />
           {{ statusLabels[status] }}
         </span>
diff --git a/vue/toolkit/src/composables/media/useUserMedia/demo.vue b/vue/toolkit/src/composables/media/useUserMedia/demo.vue
index 44e6bab..9535f1f 100644
--- a/vue/toolkit/src/composables/media/useUserMedia/demo.vue
+++ b/vue/toolkit/src/composables/media/useUserMedia/demo.vue
@@ -37,7 +37,7 @@ function swapCamera(): void {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       v-if="!isSupported"
       class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400"
@@ -46,7 +46,7 @@ function swapCamera(): void {
     </div>
 
     <template v-else>
-      <div class="relative aspect-video w-full overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset)">
+      <div class="relative aspect-video w-full overflow-hidden rounded-xl border border-border bg-bg-inset">
         <video
           ref="video"
           autoplay
@@ -57,7 +57,7 @@ function swapCamera(): void {
         />
         <div
           v-if="!stream"
-          class="absolute inset-0 flex flex-col items-center justify-center gap-1 text-(--fg-subtle)"
+          class="absolute inset-0 flex flex-col items-center justify-center gap-1 text-fg-subtle"
         >
           <span class="text-sm font-medium">Camera off</span>
           <span class="text-xs">Press start to enable your webcam.</span>
@@ -75,7 +75,7 @@ function swapCamera(): void {
         <button
           v-if="!enabled"
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          class="demo-btn-primary flex-1"
           @click="handleStart"
         >
           Start camera
@@ -83,23 +83,23 @@ function swapCamera(): void {
         <button
           v-else
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn flex-1"
           @click="stop()"
         >
           Stop camera
         </button>
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="swapCamera"
         >
           Flip
         </button>
       </div>
 
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Facing</span>
-        <span class="font-mono text-sm tabular-nums text-(--fg)">
+      <div class="rounded-lg border border-border bg-bg-inset p-3 flex items-center justify-between">
+        <span class="demo-label">Facing</span>
+        <span class="font-mono text-sm tabular-nums text-fg">
           {{ facingMode === 'user' ? 'Front (user)' : 'Back (environment)' }}
         </span>
       </div>
diff --git a/vue/toolkit/src/composables/media/useWebWorker/demo.vue b/vue/toolkit/src/composables/media/useWebWorker/demo.vue
index ac75179..ab4beb2 100644
--- a/vue/toolkit/src/composables/media/useWebWorker/demo.vue
+++ b/vue/toolkit/src/composables/media/useWebWorker/demo.vue
@@ -35,7 +35,7 @@ function send(): void {
 </script>
 
 <template>
-  <div class="w-full max-w-md flex flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div
       v-if="!isSupported"
       class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400"
@@ -45,18 +45,18 @@ function send(): void {
 
     <template v-else>
       <div class="flex flex-col gap-1.5">
-        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Message to worker</label>
+        <label class="demo-label">Message to worker</label>
         <div class="flex items-center gap-2">
           <input
             v-model="input"
             type="text"
-            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+            class="demo-input"
             placeholder="Type something…"
             @keydown.enter="send"
           >
           <button
             type="button"
-            class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-2 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+            class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-accent px-3 py-2 text-sm font-medium text-accent-fg transition hover:bg-accent-hover active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
             :disabled="!input.trim()"
             @click="send"
           >
@@ -65,26 +65,26 @@ function send(): void {
         </div>
       </div>
 
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Latest reply</span>
+      <div class="demo-card p-4 flex flex-col gap-2">
+        <span class="demo-label">Latest reply</span>
         <p
           v-if="data"
-          class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) break-all"
+          class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg break-all"
         >
           {{ data.transformed }}
         </p>
-        <p v-else class="text-sm text-(--fg-subtle)">
+        <p v-else class="text-sm text-fg-subtle">
           The worker runs off the main thread — post a message to see its reply.
         </p>
       </div>
 
       <div v-if="log.length" class="flex flex-col gap-1.5">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">History</span>
+        <span class="demo-label">History</span>
         <ul class="flex flex-col gap-1">
           <li
             v-for="(entry, i) in log"
             :key="i"
-            class="rounded-md border border-(--border) bg-(--bg-inset) px-2.5 py-1.5 font-mono text-xs text-(--fg-muted) break-all"
+            class="rounded-md border border-border bg-bg-inset px-2.5 py-1.5 font-mono text-xs text-fg-muted break-all"
           >
             {{ entry }}
           </li>
diff --git a/vue/toolkit/src/composables/media/useWebWorker/index.ts b/vue/toolkit/src/composables/media/useWebWorker/index.ts
index 9eae0c4..3544711 100644
--- a/vue/toolkit/src/composables/media/useWebWorker/index.ts
+++ b/vue/toolkit/src/composables/media/useWebWorker/index.ts
@@ -33,7 +33,7 @@ export interface UseWebWorkerOptions extends ConfigurableWindow {
   onError?: (event: ErrorEvent | MessageEvent) => void;
 }
 
-export interface UseWebWorkerReturn<Data = any> {
+export interface UseWebWorkerReturn<Data = unknown> {
   /**
    * The latest data received from the worker via `postMessage`
    */
@@ -79,7 +79,7 @@ export interface UseWebWorkerReturn<Data = any> {
  *
  * @since 0.0.15
  */
-export function useWebWorker<Data = any>(
+export function useWebWorker<Data = unknown>(
   source: WebWorkerSource,
   options: UseWebWorkerOptions = {},
 ): UseWebWorkerReturn<Data> {
@@ -94,9 +94,13 @@ export function useWebWorker<Data = any>(
   const data = shallowRef<Data | null>(null);
   const worker = shallowRef<Worker | undefined>();
 
-  const post = ((message: any, transfer?: any) => {
-    if (worker.value)
-      worker.value.postMessage(message, transfer);
+  const post = ((message: unknown, transfer?: Transferable[] | StructuredSerializeOptions) => {
+    if (worker.value) {
+      if (Array.isArray(transfer))
+        worker.value.postMessage(message, transfer);
+      else
+        worker.value.postMessage(message, transfer);
+    }
   }) as WorkerPostMessage;
 
   const terminate: VoidFunction = () => {
diff --git a/vue/toolkit/src/composables/media/useWebWorkerFn/demo.vue b/vue/toolkit/src/composables/media/useWebWorkerFn/demo.vue
index e446b5a..5d45c99 100644
--- a/vue/toolkit/src/composables/media/useWebWorkerFn/demo.vue
+++ b/vue/toolkit/src/composables/media/useWebWorkerFn/demo.vue
@@ -34,7 +34,7 @@ async function run(): Promise<void> {
 }
 
 const statusStyles: Record<string, string> = {
-  PENDING: 'text-(--fg-muted)',
+  PENDING: 'text-fg-muted',
   RUNNING: 'text-sky-600 dark:text-sky-400',
   SUCCESS: 'text-emerald-600 dark:text-emerald-400',
   ERROR: 'text-red-600 dark:text-red-400',
@@ -43,7 +43,7 @@ const statusStyles: Record<string, string> = {
 </script>
 
 <template>
-  <div class="w-full max-w-md flex flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div
       v-if="!isSupported"
       class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400"
@@ -52,10 +52,10 @@ const statusStyles: Record<string, string> = {
     </div>
 
     <template v-else>
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="demo-card p-4 flex flex-col gap-3">
         <div class="flex items-center justify-between">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Iterations</span>
-          <span class="font-mono text-sm tabular-nums text-(--fg)">{{ iterations.toLocaleString() }}</span>
+          <span class="demo-label">Iterations</span>
+          <span class="font-mono text-sm tabular-nums text-fg">{{ iterations.toLocaleString() }}</span>
         </div>
         <input
           v-model.number="iterations"
@@ -64,23 +64,23 @@ const statusStyles: Record<string, string> = {
           max="200000000"
           step="10000000"
           :disabled="isRunning"
-          class="w-full accent-(--accent) cursor-pointer disabled:cursor-not-allowed disabled:opacity-40"
+          class="w-full accent-accent cursor-pointer disabled:cursor-not-allowed disabled:opacity-40"
         >
       </div>
 
       <div class="flex items-center gap-2">
         <button
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn-primary flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           :disabled="isRunning"
           @click="run"
         >
-          <span v-if="isRunning" class="size-2 rounded-full bg-(--accent-fg) animate-pulse" />
+          <span v-if="isRunning" class="size-2 rounded-full bg-accent-fg animate-pulse" />
           {{ isRunning ? 'Computing…' : 'Run in worker' }}
         </button>
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           :disabled="!isRunning"
           @click="workerTerminate()"
         >
@@ -89,26 +89,26 @@ const statusStyles: Record<string, string> = {
       </div>
 
       <div class="grid grid-cols-2 gap-2">
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-1">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Result</span>
-          <span class="font-mono text-xl font-bold tabular-nums text-(--fg)">
+        <div class="rounded-lg border border-border bg-bg-inset p-3 flex flex-col gap-1">
+          <span class="demo-label">Result</span>
+          <span class="demo-stat text-xl">
             {{ result?.toLocaleString() ?? '—' }}
           </span>
         </div>
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-1">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Elapsed</span>
-          <span class="font-mono text-xl font-bold tabular-nums text-(--fg)">
+        <div class="rounded-lg border border-border bg-bg-inset p-3 flex flex-col gap-1">
+          <span class="demo-label">Elapsed</span>
+          <span class="demo-stat text-xl">
             {{ elapsed !== undefined ? `${elapsed}ms` : '—' }}
           </span>
         </div>
       </div>
 
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Status</span>
+      <div class="rounded-lg border border-border bg-bg-inset p-3 flex items-center justify-between">
+        <span class="demo-label">Status</span>
         <span class="font-mono text-sm" :class="statusStyles[workerStatus]">{{ workerStatus }}</span>
       </div>
 
-      <p class="text-xs text-(--fg-subtle)">
+      <p class="text-xs text-fg-subtle">
         The heavy loop runs off the main thread, so this UI stays interactive while it computes.
       </p>
     </template>
diff --git a/vue/toolkit/src/composables/reactivity/computedAsync/demo.vue b/vue/toolkit/src/composables/reactivity/computedAsync/demo.vue
index b40b510..9c64b8b 100644
--- a/vue/toolkit/src/composables/reactivity/computedAsync/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/computedAsync/demo.vue
@@ -58,9 +58,9 @@ const ids = [1, 2, 3, 4, 99];
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex flex-col gap-2">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Fetch user by id</span>
+      <span class="demo-label">Fetch user by id</span>
       <div class="flex flex-wrap gap-1.5">
         <button
           v-for="id in ids"
@@ -68,8 +68,8 @@ const ids = [1, 2, 3, 4, 99];
           type="button"
           class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
           :class="userId === id
-            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
-            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            ? 'border-transparent bg-accent text-accent-fg hover:bg-accent-hover'
+            : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
           @click="userId = id"
         >
           #{{ id }}
@@ -77,34 +77,34 @@ const ids = [1, 2, 3, 4, 99];
       </div>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 min-h-32 flex flex-col justify-center">
+    <div class="demo-card p-4 min-h-32 flex flex-col justify-center">
       <Transition name="fade" mode="out-in">
-        <div v-if="evaluating" key="loading" class="flex items-center gap-2 text-sm text-(--fg-muted)">
-          <span class="size-4 animate-spin rounded-full border-2 border-(--border) border-t-(--accent)" />
+        <div v-if="evaluating" key="loading" class="flex items-center gap-2 text-sm text-fg-muted">
+          <span class="size-4 animate-spin rounded-full border-2 border-border border-t-accent" />
           Resolving promise…
         </div>
 
         <div v-else-if="error" key="error" class="flex flex-col gap-1">
           <span class="text-sm font-medium text-red-600 dark:text-red-400">Evaluation failed</span>
-          <span class="font-mono text-xs text-(--fg-muted)">{{ error }}</span>
+          <span class="font-mono text-xs text-fg-muted">{{ error }}</span>
         </div>
 
         <div v-else-if="user" key="user" class="flex flex-col gap-1">
-          <span class="text-lg font-semibold text-(--fg)">{{ user.name }}</span>
-          <span class="text-sm text-(--fg-muted)">{{ user.role }}</span>
-          <span class="inline-flex w-fit items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          <span class="text-lg font-semibold text-fg">{{ user.name }}</span>
+          <span class="text-sm text-fg-muted">{{ user.role }}</span>
+          <span class="demo-badge w-fit">
             {{ user.city }}
           </span>
         </div>
 
-        <div v-else key="empty" class="text-sm text-(--fg-subtle)">
+        <div v-else key="empty" class="text-sm text-fg-subtle">
           Awaiting first resolution…
         </div>
       </Transition>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">evaluating</span>
+    <div class="rounded-lg border border-border bg-bg-inset p-3 flex items-center justify-between">
+      <span class="demo-label">evaluating</span>
       <span
         class="inline-flex items-center gap-1.5 font-mono text-sm tabular-nums"
         :class="evaluating ? 'text-amber-600 dark:text-amber-400' : 'text-emerald-600 dark:text-emerald-400'"
diff --git a/vue/toolkit/src/composables/reactivity/computedEager/demo.vue b/vue/toolkit/src/composables/reactivity/computedEager/demo.vue
index 0da20c2..da305b7 100644
--- a/vue/toolkit/src/composables/reactivity/computedEager/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/computedEager/demo.vue
@@ -26,7 +26,7 @@ const rules = computedEager(() => [
 ]);
 
 const tones = [
-  'bg-(--border)',
+  'bg-border',
   'bg-red-500',
   'bg-amber-500',
   'bg-sky-500',
@@ -35,45 +35,45 @@ const tones = [
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex flex-col gap-2">
-      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="pwd">Password</label>
+      <label class="demo-label" for="pwd">Password</label>
       <input
         id="pwd"
         v-model="password"
         type="text"
         placeholder="Type a password…"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
       >
     </div>
 
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <span class="text-sm text-(--fg-muted)">Strength</span>
-        <span class="font-mono text-sm font-medium tabular-nums text-(--fg)">{{ label }}</span>
+        <span class="text-sm text-fg-muted">Strength</span>
+        <span class="font-mono text-sm font-medium tabular-nums text-fg">{{ label }}</span>
       </div>
       <div class="flex gap-1.5">
         <div
           v-for="i in 4"
           :key="i"
           class="h-1.5 flex-1 rounded-full transition-colors duration-300"
-          :class="i <= score ? tones[score] : 'bg-(--bg-inset)'"
+          :class="i <= score ? tones[score] : 'bg-bg-inset'"
         />
       </div>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
+    <div class="demo-card p-4 flex flex-col gap-2">
       <div
         v-for="rule in rules"
         :key="rule.text"
         class="flex items-center gap-2 text-sm transition-colors"
-        :class="rule.ok ? 'text-(--fg)' : 'text-(--fg-subtle)'"
+        :class="rule.ok ? 'text-fg' : 'text-fg-subtle'"
       >
         <span
           class="grid size-4 place-items-center rounded-full text-[10px] transition-colors"
           :class="rule.ok
             ? 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400'
-            : 'bg-(--bg-inset) text-(--fg-subtle)'"
+            : 'bg-bg-inset text-fg-subtle'"
         >
           {{ rule.ok ? '✓' : '○' }}
         </span>
@@ -81,8 +81,8 @@ const tones = [
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums flex items-center justify-between">
-      <span class="text-(--fg-muted)">length</span>
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums flex items-center justify-between">
+      <span class="text-fg-muted">length</span>
       <span>{{ length }}</span>
     </div>
   </div>
diff --git a/vue/toolkit/src/composables/reactivity/computedWithControl/demo.vue b/vue/toolkit/src/composables/reactivity/computedWithControl/demo.vue
index 85a6132..5ff6541 100644
--- a/vue/toolkit/src/composables/reactivity/computedWithControl/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/computedWithControl/demo.vue
@@ -27,12 +27,12 @@ function stop() {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-4">
       <div class="flex flex-col gap-2">
         <div class="flex items-center justify-between">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Base price (tracked)</span>
-          <span class="font-mono text-sm tabular-nums text-(--accent-text)">{{ source }}</span>
+          <span class="demo-label">Base price (tracked)</span>
+          <span class="font-mono text-sm tabular-nums text-accent-text">{{ source }}</span>
         </div>
         <input
           v-model.number="source"
@@ -40,14 +40,14 @@ function stop() {
           min="0"
           max="500"
           step="10"
-          class="w-full accent-(--accent)"
+          class="w-full accent-accent"
         >
       </div>
 
       <div class="flex flex-col gap-2">
         <div class="flex items-center justify-between">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tax % (untracked)</span>
-          <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ tax }}</span>
+          <span class="demo-label">Tax % (untracked)</span>
+          <span class="font-mono text-sm tabular-nums text-fg-muted">{{ tax }}</span>
         </div>
         <input
           v-model.number="tax"
@@ -55,37 +55,37 @@ function stop() {
           min="0"
           max="30"
           step="1"
-          class="w-full accent-(--fg-muted)"
+          class="w-full accent-fg-muted"
         >
-        <span class="text-xs text-(--fg-subtle)">
+        <span class="text-xs text-fg-subtle">
           Changing tax alone won't recompute — trigger to pull it in.
         </span>
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Total</span>
-      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ total }}</span>
+    <div class="rounded-lg border border-border bg-bg-inset p-3 flex items-center justify-between">
+      <span class="demo-label">Total</span>
+      <span class="demo-stat text-3xl">{{ total }}</span>
     </div>
 
     <div class="grid grid-cols-3 gap-1.5">
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary"
         @click="total.trigger()"
       >
         Trigger
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="peek"
       >
         Peek
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="detached"
         @click="stop"
       >
@@ -95,12 +95,12 @@ function stop() {
 
     <div class="flex flex-col gap-1.5 text-sm">
       <div class="flex items-center justify-between">
-        <span class="text-(--fg-muted)">Getter runs</span>
-        <span class="font-mono tabular-nums text-(--fg)">{{ recomputes }}</span>
+        <span class="text-fg-muted">Getter runs</span>
+        <span class="font-mono tabular-nums text-fg">{{ recomputes }}</span>
       </div>
       <div class="flex items-center justify-between">
-        <span class="text-(--fg-muted)">Last peek</span>
-        <span class="font-mono tabular-nums text-(--fg)">{{ peeked ?? '—' }}</span>
+        <span class="text-fg-muted">Last peek</span>
+        <span class="font-mono tabular-nums text-fg">{{ peeked ?? '—' }}</span>
       </div>
       <div v-if="detached" class="text-xs text-amber-600 dark:text-amber-400">
         Source watcher stopped — only Trigger updates the total now.
diff --git a/vue/toolkit/src/composables/reactivity/computedWithControl/index.ts b/vue/toolkit/src/composables/reactivity/computedWithControl/index.ts
index 4d3b266..a383e7d 100644
--- a/vue/toolkit/src/composables/reactivity/computedWithControl/index.ts
+++ b/vue/toolkit/src/composables/reactivity/computedWithControl/index.ts
@@ -2,14 +2,14 @@ import { customRef, watch } from 'vue';
 import type {
   ComputedGetter,
   ComputedRef,
+  MultiWatchSources,
   WatchOptions,
   WatchSource,
   WatchStopHandle,
   WritableComputedOptions,
   WritableComputedRef,
 } from 'vue';
-
-type MultiWatchSources = Array<WatchSource<unknown> | object>;
+import { isFunction } from '@robonen/stdlib';
 
 export interface ComputedWithControlExtra<T> {
   /**
@@ -146,7 +146,7 @@ export function computedWithControl<T>(
 function isGetter<T>(
   fn: ComputedGetter<T> | WritableComputedOptions<T>,
 ): fn is ComputedGetter<T> {
-  return typeof fn === 'function';
+  return isFunction(fn);
 }
 
 function noopTrack(): void {}
diff --git a/vue/toolkit/src/composables/reactivity/extendRef/demo.vue b/vue/toolkit/src/composables/reactivity/extendRef/demo.vue
index 5f14467..082c1cb 100644
--- a/vue/toolkit/src/composables/reactivity/extendRef/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/extendRef/demo.vue
@@ -27,13 +27,13 @@ function toggleMute() {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-4">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Volume</span>
+        <span class="demo-label">Volume</span>
         <span
           class="font-mono text-3xl font-bold tabular-nums transition-colors"
-          :class="volume.isMuted ? 'text-(--fg-subtle)' : 'text-(--fg)'"
+          :class="volume.isMuted ? 'text-fg-subtle' : 'text-fg'"
         >{{ volume.percent }}</span>
       </div>
 
@@ -43,20 +43,20 @@ function toggleMute() {
         type="range"
         min="0"
         max="100"
-        class="w-full accent-(--accent)"
+        class="w-full accent-accent"
       >
 
       <div class="flex gap-1.5">
         <button
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-border bg-bg px-3 py-1.5 text-sm font-medium text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.98] cursor-pointer"
           @click="toggleMute"
         >
           {{ volume.isMuted ? 'Unmute' : 'Mute' }}
         </button>
         <button
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-border bg-bg px-3 py-1.5 text-sm font-medium text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.98] cursor-pointer"
           @click="volume.max()"
         >
           Max
@@ -64,24 +64,24 @@ function toggleMute() {
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-2 font-mono text-sm tabular-nums">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 flex flex-col gap-2 font-mono text-sm tabular-nums">
       <div class="flex items-center justify-between">
-        <span class="text-(--fg-muted)">volume.value</span>
-        <span class="text-(--fg)">{{ volume.value }}</span>
+        <span class="text-fg-muted">volume.value</span>
+        <span class="text-fg">{{ volume.value }}</span>
       </div>
       <div class="flex items-center justify-between">
-        <span class="text-(--fg-muted)">volume.percent</span>
-        <span class="text-(--fg)">{{ volume.percent }}</span>
+        <span class="text-fg-muted">volume.percent</span>
+        <span class="text-fg">{{ volume.percent }}</span>
       </div>
       <div class="flex items-center justify-between">
-        <span class="text-(--fg-muted)">volume.isMuted</span>
+        <span class="text-fg-muted">volume.isMuted</span>
         <span :class="volume.isMuted ? 'text-amber-600 dark:text-amber-400' : 'text-emerald-600 dark:text-emerald-400'">
           {{ volume.isMuted }}
         </span>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       One ref carries its value, derived properties, and methods — no destructuring of an object needed.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/reactivity/reactiveComputed/demo.vue b/vue/toolkit/src/composables/reactivity/reactiveComputed/demo.vue
index 7532ab3..023897c 100644
--- a/vue/toolkit/src/composables/reactivity/reactiveComputed/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/reactiveComputed/demo.vue
@@ -28,31 +28,31 @@ function setDiscount(value: number) {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-4">
       <div class="grid grid-cols-2 gap-3">
         <label class="flex flex-col gap-1.5">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Unit price</span>
+          <span class="demo-label">Unit price</span>
           <input
             v-model.number="price"
             type="number"
             min="0"
-            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) tabular-nums transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+            class="w-full rounded-lg border border-border bg-bg px-3 py-2 text-sm text-fg tabular-nums transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring"
           >
         </label>
         <label class="flex flex-col gap-1.5">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Quantity</span>
+          <span class="demo-label">Quantity</span>
           <input
             v-model.number="quantity"
             type="number"
             min="1"
-            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) tabular-nums transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+            class="w-full rounded-lg border border-border bg-bg px-3 py-2 text-sm text-fg tabular-nums transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring"
           >
         </label>
       </div>
 
       <div class="flex flex-col gap-2">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Discount</span>
+        <span class="demo-label">Discount</span>
         <div class="flex flex-wrap gap-1.5">
           <button
             v-for="p in presets"
@@ -60,8 +60,8 @@ function setDiscount(value: number) {
             type="button"
             class="inline-flex items-center justify-center rounded-lg border px-3 py-1.5 text-sm font-medium tabular-nums transition active:scale-[0.98] cursor-pointer"
             :class="cart.discount === p
-              ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
-              : 'border-(--border) bg-(--bg) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+              ? 'border-transparent bg-accent text-accent-fg hover:bg-accent-hover'
+              : 'border-border bg-bg text-fg hover:bg-bg-inset hover:border-border-strong'"
             @click="setDiscount(p)"
           >
             {{ p }}%
@@ -70,24 +70,24 @@ function setDiscount(value: number) {
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-2 font-mono text-sm tabular-nums">
-      <div class="flex items-center justify-between text-(--fg-muted)">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 flex flex-col gap-2 font-mono text-sm tabular-nums">
+      <div class="flex items-center justify-between text-fg-muted">
         <span>Subtotal</span>
-        <span class="text-(--fg)">${{ cart.subtotal }}</span>
+        <span class="text-fg">${{ cart.subtotal }}</span>
       </div>
-      <div class="flex items-center justify-between text-(--fg-muted)">
+      <div class="flex items-center justify-between text-fg-muted">
         <span>Saved ({{ cart.discount }}%)</span>
         <span class="text-emerald-600 dark:text-emerald-400">-${{ cart.saved }}</span>
       </div>
-      <div class="h-px bg-(--border)" />
+      <div class="h-px bg-border" />
       <div class="flex items-center justify-between">
-        <span class="text-(--fg)">Total</span>
-        <span class="text-2xl font-bold text-(--fg)">${{ cart.total }}</span>
+        <span class="text-fg">Total</span>
+        <span class="text-2xl font-bold text-fg">${{ cart.total }}</span>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
-      Each field reads from a single cached getter; writing <code class="text-(--fg-muted)">cart.discount</code> flows back to the source ref.
+    <p class="text-xs text-fg-subtle">
+      Each field reads from a single cached getter; writing <code class="text-fg-muted">cart.discount</code> flows back to the source ref.
     </p>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/reactivity/reactiveOmit/demo.vue b/vue/toolkit/src/composables/reactivity/reactiveOmit/demo.vue
index fb97877..3db81b4 100644
--- a/vue/toolkit/src/composables/reactivity/reactiveOmit/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/reactiveOmit/demo.vue
@@ -20,22 +20,22 @@ const roles = ['admin', 'editor', 'viewer'] as const;
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="space-y-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card space-y-3 p-4">
+      <p class="demo-label">
         Source object
       </p>
 
       <label class="flex flex-col gap-1">
-        <span class="text-xs font-medium text-(--fg-muted)">name</span>
+        <span class="text-xs font-medium text-fg-muted">name</span>
         <input
           v-model="user.name"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="demo-input"
         >
       </label>
 
       <div class="flex items-center justify-between gap-3">
-        <span class="text-xs font-medium text-(--fg-muted)">role</span>
+        <span class="text-xs font-medium text-fg-muted">role</span>
         <div class="flex gap-1.5">
           <button
             v-for="r in roles"
@@ -43,8 +43,8 @@ const roles = ['admin', 'editor', 'viewer'] as const;
             type="button"
             class="rounded-md border px-2 py-0.5 text-xs font-medium transition cursor-pointer"
             :class="user.role === r
-              ? 'border-transparent bg-(--accent) text-(--accent-fg)'
-              : 'border-(--border) bg-(--bg-inset) text-(--fg-muted) hover:border-(--border-strong)'"
+              ? 'border-transparent bg-accent text-accent-fg'
+              : 'border-border bg-bg-inset text-fg-muted hover:border-border-strong'"
             @click="user.role = r"
           >
             {{ r }}
@@ -53,11 +53,11 @@ const roles = ['admin', 'editor', 'viewer'] as const;
       </div>
 
       <label class="flex items-center justify-between gap-3">
-        <span class="text-xs font-medium text-(--fg-muted)">active</span>
+        <span class="text-xs font-medium text-fg-muted">active</span>
         <button
           type="button"
           class="relative h-5 w-9 rounded-full transition cursor-pointer"
-          :class="user.active ? 'bg-(--accent)' : 'bg-(--bg-inset)'"
+          :class="user.active ? 'bg-accent' : 'bg-bg-inset'"
           role="switch"
           :aria-checked="user.active"
           @click="user.active = !user.active"
@@ -70,18 +70,18 @@ const roles = ['admin', 'editor', 'viewer'] as const;
       </label>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
-        Omit <code class="text-(--accent-text)">token</code>, <code class="text-(--accent-text)">email</code>
+    <div class="demo-card p-4">
+      <p class="demo-label mb-2">
+        Omit <code class="text-accent-text">token</code>, <code class="text-accent-text">email</code>
       </p>
-      <pre class="overflow-x-auto rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg)">{{ safeUser }}</pre>
+      <pre class="overflow-x-auto rounded-lg border border-border bg-bg-inset p-3 font-mono text-xs text-fg">{{ safeUser }}</pre>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+    <div class="demo-card p-4">
+      <p class="demo-label mb-2">
         Predicate: drop booleans
       </p>
-      <pre class="overflow-x-auto rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg)">{{ noFlags }}</pre>
+      <pre class="overflow-x-auto rounded-lg border border-border bg-bg-inset p-3 font-mono text-xs text-fg">{{ noFlags }}</pre>
     </div>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/reactivity/reactiveOmit/index.ts b/vue/toolkit/src/composables/reactivity/reactiveOmit/index.ts
index b3ed8fc..d2d24de 100644
--- a/vue/toolkit/src/composables/reactivity/reactiveOmit/index.ts
+++ b/vue/toolkit/src/composables/reactivity/reactiveOmit/index.ts
@@ -1,5 +1,5 @@
 import { toValue } from 'vue';
-import { omit } from '@robonen/stdlib';
+import { isFunction, omit } from '@robonen/stdlib';
 import { reactiveComputed } from '@/composables/reactivity/reactiveComputed';
 
 /**
@@ -67,7 +67,7 @@ export function reactiveOmit<T extends object, K extends keyof T>(
   ...keys: Array<K | K[] | ReactiveOmitPredicate<T>>
 ): ReactiveOmitReturn<T, K> {
   const first = keys[0];
-  const predicate = typeof first === 'function'
+  const predicate = isFunction(first)
     ? first as ReactiveOmitPredicate<T>
     : undefined;
 
diff --git a/vue/toolkit/src/composables/reactivity/reactivePick/demo.vue b/vue/toolkit/src/composables/reactivity/reactivePick/demo.vue
index 72eaf78..36df55a 100644
--- a/vue/toolkit/src/composables/reactivity/reactivePick/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/reactivePick/demo.vue
@@ -15,47 +15,47 @@ const display = reactivePick(settings, 'brightness', 'contrast');
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="space-y-4 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card space-y-4 p-4">
+      <p class="demo-label">
         Picked view (two-way)
       </p>
 
       <label class="flex flex-col gap-1.5">
-        <span class="flex items-center justify-between text-sm text-(--fg)">
+        <span class="flex items-center justify-between text-sm text-fg">
           <span>brightness</span>
-          <span class="font-mono tabular-nums text-(--fg-muted)">{{ display.brightness }}</span>
+          <span class="font-mono tabular-nums text-fg-muted">{{ display.brightness }}</span>
         </span>
         <input
           v-model.number="display.brightness"
           type="range"
           min="0"
           max="100"
-          class="w-full accent-(--accent) cursor-pointer"
+          class="w-full accent-accent cursor-pointer"
         >
       </label>
 
       <label class="flex flex-col gap-1.5">
-        <span class="flex items-center justify-between text-sm text-(--fg)">
+        <span class="flex items-center justify-between text-sm text-fg">
           <span>contrast</span>
-          <span class="font-mono tabular-nums text-(--fg-muted)">{{ display.contrast }}</span>
+          <span class="font-mono tabular-nums text-fg-muted">{{ display.contrast }}</span>
         </span>
         <input
           v-model.number="display.contrast"
           type="range"
           min="0"
           max="100"
-          class="w-full accent-(--accent) cursor-pointer"
+          class="w-full accent-accent cursor-pointer"
         >
       </label>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+    <div class="demo-card p-4">
+      <p class="demo-label mb-2">
         Full source object
       </p>
-      <pre class="overflow-x-auto rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg)">{{ settings }}</pre>
-      <p class="mt-2 text-xs text-(--fg-subtle)">
+      <pre class="overflow-x-auto rounded-lg border border-border bg-bg-inset p-3 font-mono text-xs text-fg">{{ settings }}</pre>
+      <p class="mt-2 text-xs text-fg-subtle">
         Editing the picked view above writes straight back to the source.
       </p>
     </div>
diff --git a/vue/toolkit/src/composables/reactivity/refAutoReset/demo.vue b/vue/toolkit/src/composables/reactivity/refAutoReset/demo.vue
index 09717af..87df161 100644
--- a/vue/toolkit/src/composables/reactivity/refAutoReset/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/refAutoReset/demo.vue
@@ -19,17 +19,17 @@ async function copy() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="space-y-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card space-y-3 p-4">
+      <p class="demo-label">
         Live value
       </p>
-      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <span class="font-mono text-lg font-semibold tabular-nums text-(--fg)">{{ status }}</span>
+      <div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset p-3">
+        <span class="font-mono text-lg font-semibold tabular-nums text-fg">{{ status }}</span>
         <span
           class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
           :class="status === 'Idle'
-            ? 'border-(--border) bg-(--bg-elevated) text-(--fg-muted)'
+            ? 'border-border bg-bg-elevated text-fg-muted'
             : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
         >
           {{ status === 'Idle' ? 'reset' : 'active' }}
@@ -39,21 +39,21 @@ async function copy() {
       <div class="flex flex-wrap gap-2">
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="flash('Saved')"
         >
           Save
         </button>
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="flash('Synced')"
         >
           Sync
         </button>
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="flash('Uploading…')"
         >
           Upload
@@ -61,10 +61,10 @@ async function copy() {
       </div>
     </div>
 
-    <label class="flex flex-col gap-1.5 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <span class="flex items-center justify-between text-sm text-(--fg)">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">reset delay</span>
-        <span class="font-mono tabular-nums text-(--fg-muted)">{{ delay }}ms</span>
+    <label class="demo-card flex flex-col gap-1.5 p-4">
+      <span class="flex items-center justify-between text-sm text-fg">
+        <span class="demo-label">reset delay</span>
+        <span class="font-mono tabular-nums text-fg-muted">{{ delay }}ms</span>
       </span>
       <input
         v-model.number="delay"
@@ -72,15 +72,15 @@ async function copy() {
         min="500"
         max="4000"
         step="250"
-        class="w-full accent-(--accent) cursor-pointer"
+        class="w-full accent-accent cursor-pointer"
       >
     </label>
 
-    <div class="flex items-center justify-between rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <span class="text-sm text-(--fg)">Copy-to-clipboard pattern</span>
+    <div class="demo-card flex items-center justify-between p-4">
+      <span class="text-sm text-fg">Copy-to-clipboard pattern</span>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary"
         @click="copy"
       >
         {{ copied ? 'Copied!' : 'Copy' }}
diff --git a/vue/toolkit/src/composables/reactivity/refDebounced/demo.vue b/vue/toolkit/src/composables/reactivity/refDebounced/demo.vue
index 91d886e..98de935 100644
--- a/vue/toolkit/src/composables/reactivity/refDebounced/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/refDebounced/demo.vue
@@ -12,22 +12,22 @@ const pending = computed(() => search.value !== debounced.value);
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <label class="flex flex-col gap-1.5">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Type to search
       </span>
       <input
         v-model="search"
         placeholder="Start typing…"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
       >
     </label>
 
-    <label class="flex flex-col gap-1.5 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <span class="flex items-center justify-between text-sm text-(--fg)">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">debounce</span>
-        <span class="font-mono tabular-nums text-(--fg-muted)">{{ ms }}ms</span>
+    <label class="demo-card flex flex-col gap-1.5 p-4">
+      <span class="flex items-center justify-between text-sm text-fg">
+        <span class="demo-label">debounce</span>
+        <span class="font-mono tabular-nums text-fg-muted">{{ ms }}ms</span>
       </span>
       <input
         v-model.number="ms"
@@ -35,19 +35,19 @@ const pending = computed(() => search.value !== debounced.value);
         min="100"
         max="1500"
         step="50"
-        class="w-full accent-(--accent) cursor-pointer"
+        class="w-full accent-accent cursor-pointer"
       >
     </label>
 
     <div class="grid grid-cols-2 gap-3">
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
-        <p class="mb-1 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <div class="demo-card p-3">
+        <p class="demo-label mb-1">
           Source
         </p>
-        <p class="truncate font-mono text-sm text-(--fg)">{{ search || '—' }}</p>
+        <p class="truncate font-mono text-sm text-fg">{{ search || '—' }}</p>
       </div>
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
-        <p class="mb-1 flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <div class="demo-card p-3">
+        <p class="demo-label mb-1 flex items-center gap-1.5">
           Debounced
           <span
             v-if="pending"
@@ -55,7 +55,7 @@ const pending = computed(() => search.value !== debounced.value);
             aria-label="pending"
           />
         </p>
-        <p class="truncate font-mono text-sm text-(--accent-text)">{{ debounced || '—' }}</p>
+        <p class="truncate font-mono text-sm text-accent-text">{{ debounced || '—' }}</p>
       </div>
     </div>
 
diff --git a/vue/toolkit/src/composables/reactivity/refDefault/demo.vue b/vue/toolkit/src/composables/reactivity/refDefault/demo.vue
index 2b7750f..f11c543 100644
--- a/vue/toolkit/src/composables/reactivity/refDefault/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/refDefault/demo.vue
@@ -11,18 +11,18 @@ const name = refDefault(raw, fallback);
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="space-y-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card space-y-3 p-4">
+      <p class="demo-label">
         Resolved value
       </p>
-      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <span class="font-mono text-lg font-semibold text-(--fg)">{{ name }}</span>
+      <div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset p-3">
+        <span class="font-mono text-lg font-semibold text-fg">{{ name }}</span>
         <span
           class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
           :class="raw == null
             ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
-            : 'border-(--border) bg-(--bg-elevated) text-(--fg-muted)'"
+            : 'border-border bg-bg-elevated text-fg-muted'"
         >
           {{ raw == null ? 'using default' : 'from source' }}
         </span>
@@ -30,38 +30,38 @@ const name = refDefault(raw, fallback);
     </div>
 
     <label class="flex flex-col gap-1.5">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Source ref (writes pass through)
       </span>
       <div class="flex gap-2">
         <input
           v-model="name"
           placeholder="Type a name…"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="demo-input"
         >
         <button
           type="button"
-          class="inline-flex shrink-0 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn shrink-0 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           :disabled="raw == null"
           @click="raw = null"
         >
           Clear
         </button>
       </div>
-      <span class="font-mono text-xs text-(--fg-subtle)">
+      <span class="font-mono text-xs text-fg-subtle">
         raw.value = {{ raw === null ? 'null' : `"${raw}"` }}
       </span>
     </label>
 
-    <label class="flex flex-col gap-1.5 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+    <label class="demo-card flex flex-col gap-1.5 p-4">
+      <span class="demo-label">
         Reactive fallback
       </span>
       <input
         v-model="fallback"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
       >
-      <span class="text-xs text-(--fg-subtle)">
+      <span class="text-xs text-fg-subtle">
         Changes here update the resolved value while the source is empty.
       </span>
     </label>
diff --git a/vue/toolkit/src/composables/reactivity/refThrottled/demo.vue b/vue/toolkit/src/composables/reactivity/refThrottled/demo.vue
index ac0fc31..44f5b31 100644
--- a/vue/toolkit/src/composables/reactivity/refThrottled/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/refThrottled/demo.vue
@@ -53,27 +53,27 @@ onUnmounted(stop);
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="grid grid-cols-2 gap-3">
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-1">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Source</span>
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ source }}</span>
-        <span class="text-xs text-(--fg-muted)">{{ sourceUpdates }} updates</span>
+      <div class="demo-card p-4 flex flex-col gap-1">
+        <span class="demo-label">Source</span>
+        <span class="demo-stat text-3xl">{{ source }}</span>
+        <span class="text-xs text-fg-muted">{{ sourceUpdates }} updates</span>
       </div>
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-1">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Throttled</span>
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--accent-text)">{{ throttled }}</span>
-        <span class="text-xs text-(--fg-muted)">{{ throttledUpdates }} updates</span>
+      <div class="demo-card p-4 flex flex-col gap-1">
+        <span class="demo-label">Throttled</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-accent-text">{{ throttled }}</span>
+        <span class="text-xs text-fg-muted">{{ throttledUpdates }} updates</span>
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Lag behind source</span>
-      <span class="font-mono text-sm tabular-nums text-(--fg)">+{{ lag }}</span>
+    <div class="rounded-lg border border-border bg-bg-inset p-3 flex items-center justify-between">
+      <span class="demo-label">Lag behind source</span>
+      <span class="font-mono text-sm tabular-nums text-fg">+{{ lag }}</span>
     </div>
 
     <label class="flex flex-col gap-1.5">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Throttle window: {{ delay }}ms
       </span>
       <input
@@ -82,16 +82,16 @@ onUnmounted(stop);
         min="100"
         max="1500"
         step="100"
-        class="w-full accent-(--accent) cursor-pointer"
+        class="w-full accent-accent cursor-pointer"
       >
-      <span class="text-xs text-(--fg-subtle)">Reset to apply a new window</span>
+      <span class="text-xs text-fg-subtle">Reset to apply a new window</span>
     </label>
 
     <div class="flex gap-2">
       <button
         type="button"
         :disabled="running"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="start"
       >
         Run (60ms)
@@ -99,14 +99,14 @@ onUnmounted(stop);
       <button
         type="button"
         :disabled="!running"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="stop"
       >
         Pause
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="reset"
       >
         Reset
diff --git a/vue/toolkit/src/composables/reactivity/refThrottled/index.ts b/vue/toolkit/src/composables/reactivity/refThrottled/index.ts
index bd5d4a0..bdc4258 100644
--- a/vue/toolkit/src/composables/reactivity/refThrottled/index.ts
+++ b/vue/toolkit/src/composables/reactivity/refThrottled/index.ts
@@ -2,7 +2,7 @@ import { ref, toValue, watch } from 'vue';
 import type { MaybeRefOrGetter, Ref } from 'vue';
 import { createFilterWrapper, throttleFilter } from '@/utils/filters';
 
-export type RefThrottledReturn<T = any> = Ref<T>;
+export type RefThrottledReturn<T = unknown> = Ref<T>;
 
 /**
  * @name refThrottled
@@ -28,7 +28,7 @@ export type RefThrottledReturn<T = any> = Ref<T>;
  *
  * @since 0.0.15
  */
-export function refThrottled<T = any>(
+export function refThrottled<T = unknown>(
   source: MaybeRefOrGetter<T>,
   delay = 200,
   trailing = true,
diff --git a/vue/toolkit/src/composables/reactivity/refWithControl/demo.vue b/vue/toolkit/src/composables/reactivity/refWithControl/demo.vue
index f829e24..79dcf38 100644
--- a/vue/toolkit/src/composables/reactivity/refWithControl/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/refWithControl/demo.vue
@@ -43,30 +43,30 @@ function silentBump() {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-3">
       <div class="flex items-baseline justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Volume (tracked)</span>
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ volume }}</span>
+        <span class="demo-label">Volume (tracked)</span>
+        <span class="demo-stat text-3xl">{{ volume }}</span>
       </div>
       <div class="flex gap-2">
         <button
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn flex-1"
           @click="volume.value--"
         >
           - 1
         </button>
         <button
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          class="demo-btn-primary flex-1"
           @click="volume.value++"
         >
           + 1
         </button>
         <button
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn flex-1"
           @click="volume.value = 99"
         >
           Set 99
@@ -74,25 +74,25 @@ function silentBump() {
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 flex items-center justify-between">
       <div class="flex flex-col">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">peek() snapshot</span>
-        <span class="text-xs text-(--fg-subtle)">untracked read; lay() writes silently</span>
+        <span class="demo-label">peek() snapshot</span>
+        <span class="text-xs text-fg-subtle">untracked read; lay() writes silently</span>
       </div>
-      <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ peeked }}</span>
+      <span class="demo-stat text-2xl">{{ peeked }}</span>
     </div>
 
     <div class="flex gap-2">
       <button
         type="button"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn flex-1"
         @click="peek"
       >
         peek()
       </button>
       <button
         type="button"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn flex-1"
         @click="silentBump"
       >
         lay() +1 silent
@@ -100,16 +100,16 @@ function silentBump() {
     </div>
 
     <div class="flex flex-col gap-1.5">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Hooks log</span>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 min-h-24 flex flex-col gap-1">
-        <p v-if="!log.length" class="text-xs text-(--fg-subtle)">
+      <span class="demo-label">Hooks log</span>
+      <div class="rounded-lg border border-border bg-bg-inset p-3 min-h-24 flex flex-col gap-1">
+        <p v-if="!log.length" class="text-xs text-fg-subtle">
           Try setting volume to 99 to see onBeforeChange veto.
         </p>
         <p
           v-for="entry in log"
           :key="entry.id"
           class="font-mono text-xs tabular-nums"
-          :class="entry.vetoed ? 'text-red-600 dark:text-red-400' : 'text-(--fg-muted)'"
+          :class="entry.vetoed ? 'text-red-600 dark:text-red-400' : 'text-fg-muted'"
         >
           {{ entry.vetoed ? '✗' : '✓' }} {{ entry.message }}
         </p>
diff --git a/vue/toolkit/src/composables/reactivity/syncRef/demo.vue b/vue/toolkit/src/composables/reactivity/syncRef/demo.vue
index 539215c..2d09dbb 100644
--- a/vue/toolkit/src/composables/reactivity/syncRef/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/syncRef/demo.vue
@@ -26,43 +26,43 @@ onUnmounted(stop);
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Two-way sync + transform</span>
+      <span class="demo-label">Two-way sync + transform</span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
         :class="synced
           ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          : 'border-border bg-bg-inset text-fg-muted'"
       >
         <span
           class="size-1.5 rounded-full"
-          :class="synced ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+          :class="synced ? 'bg-emerald-500' : 'bg-fg-subtle'"
         />
         {{ synced ? 'live' : 'stopped' }}
       </span>
     </div>
 
     <div class="grid grid-cols-2 gap-3">
-      <label class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Celsius</span>
+      <label class="demo-card p-4 flex flex-col gap-2">
+        <span class="demo-label">Celsius</span>
         <input
           v-model.number="celsius"
           type="number"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-lg font-mono tabular-nums text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="w-full rounded-lg border border-border bg-bg px-3 py-2 text-lg font-mono tabular-nums text-fg transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring"
         >
       </label>
-      <label class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Fahrenheit</span>
+      <label class="demo-card p-4 flex flex-col gap-2">
+        <span class="demo-label">Fahrenheit</span>
         <input
           v-model.number="fahrenheit"
           type="number"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-lg font-mono tabular-nums text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="w-full rounded-lg border border-border bg-bg px-3 py-2 text-lg font-mono tabular-nums text-fg transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring"
         >
       </label>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
       {{ celsius }}°C ⇄ {{ fahrenheit }}°F
     </div>
 
@@ -72,19 +72,19 @@ onUnmounted(stop);
       min="-20"
       max="40"
       step="1"
-      class="w-full accent-(--accent) cursor-pointer"
+      class="w-full accent-accent cursor-pointer"
       aria-label="Celsius slider"
     >
 
     <button
       type="button"
       :disabled="!synced"
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+      class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
       @click="toggleSync"
     >
       Stop synchronization
     </button>
-    <p v-if="!synced" class="text-xs text-(--fg-subtle) -mt-2">
+    <p v-if="!synced" class="text-xs text-fg-subtle -mt-2">
       Watchers torn down — the two refs now drift independently.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/reactivity/toReactive/demo.vue b/vue/toolkit/src/composables/reactivity/toReactive/demo.vue
index 1838137..9296c71 100644
--- a/vue/toolkit/src/composables/reactivity/toReactive/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/toReactive/demo.vue
@@ -26,26 +26,26 @@ function loadPreset(p: Profile) {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-3">
       <label class="flex flex-col gap-1.5">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Name</span>
+        <span class="demo-label">Name</span>
         <input
           v-model="profile.name"
           type="text"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="demo-input"
         >
       </label>
       <label class="flex flex-col gap-1.5">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Role</span>
+        <span class="demo-label">Role</span>
         <input
           v-model="profile.role"
           type="text"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="demo-input"
         >
       </label>
       <label class="flex flex-col gap-1.5">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <span class="demo-label">
           Level: {{ profile.level }}
         </span>
         <input
@@ -54,30 +54,30 @@ function loadPreset(p: Profile) {
           min="1"
           max="10"
           step="1"
-          class="w-full accent-(--accent) cursor-pointer"
+          class="w-full accent-accent cursor-pointer"
         >
       </label>
     </div>
 
     <div class="flex flex-col gap-1.5">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">source.value (the backing ref)</span>
-      <pre class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg) overflow-x-auto">{{ JSON.stringify(source, null, 2) }}</pre>
+      <span class="demo-label">source.value (the backing ref)</span>
+      <pre class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-xs text-fg overflow-x-auto">{{ JSON.stringify(source, null, 2) }}</pre>
     </div>
 
     <div class="flex flex-col gap-1.5">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Reassign the whole ref</span>
+      <span class="demo-label">Reassign the whole ref</span>
       <div class="flex flex-wrap gap-2">
         <button
           v-for="preset in presets"
           :key="preset.name"
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="loadPreset(preset)"
         >
           {{ preset.name.split(' ')[0] }}
         </button>
       </div>
-      <p class="text-xs text-(--fg-subtle)">
+      <p class="text-xs text-fg-subtle">
         The proxy survives reassignment — fields above update without re-binding.
       </p>
     </div>
diff --git a/vue/toolkit/src/composables/reactivity/useCached/demo.vue b/vue/toolkit/src/composables/reactivity/useCached/demo.vue
index 8a22084..14dc8ab 100644
--- a/vue/toolkit/src/composables/reactivity/useCached/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/useCached/demo.vue
@@ -19,14 +19,14 @@ const samples = ['Hello', 'hello', 'HELLO', 'World', 'world!'];
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <label class="flex flex-col gap-1.5">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Source ref</span>
+      <span class="demo-label">Source ref</span>
       <input
         v-model="source"
         type="text"
         placeholder="Type to change the source"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
       >
     </label>
 
@@ -35,32 +35,32 @@ const samples = ['Hello', 'hello', 'HELLO', 'World', 'world!'];
         v-for="sample in samples"
         :key="sample"
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="source = sample"
       >
         {{ sample }}
       </button>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+    <div class="demo-card p-4 flex flex-col gap-3">
       <div class="flex items-center justify-between gap-3">
         <div class="flex flex-col">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Default cache</span>
-          <span class="text-xs text-(--fg-subtle)">a === b</span>
+          <span class="demo-label">Default cache</span>
+          <span class="text-xs text-fg-subtle">a === b</span>
         </div>
-        <span class="font-mono text-sm tabular-nums text-(--fg) truncate">"{{ cachedDefault }}"</span>
+        <span class="font-mono text-sm tabular-nums text-fg truncate">"{{ cachedDefault }}"</span>
       </div>
-      <div class="h-px bg-(--border)" />
+      <div class="h-px bg-border" />
       <div class="flex items-center justify-between gap-3">
         <div class="flex flex-col">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Case-insensitive cache</span>
-          <span class="text-xs text-(--fg-subtle)">toLowerCase() match</span>
+          <span class="demo-label">Case-insensitive cache</span>
+          <span class="text-xs text-fg-subtle">toLowerCase() match</span>
         </div>
-        <span class="font-mono text-sm tabular-nums text-(--accent-text) truncate">"{{ cachedInsensitive }}"</span>
+        <span class="font-mono text-sm tabular-nums text-accent-text truncate">"{{ cachedInsensitive }}"</span>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Toggle between <span class="font-mono">Hello</span>, <span class="font-mono">hello</span> and
       <span class="font-mono">HELLO</span>: the default cache follows every change, while the
       case-insensitive cache keeps its first stored casing.
diff --git a/vue/toolkit/src/composables/reactivity/useCloned/demo.vue b/vue/toolkit/src/composables/reactivity/useCloned/demo.vue
index 39ad7d0..bd07727 100644
--- a/vue/toolkit/src/composables/reactivity/useCloned/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/useCloned/demo.vue
@@ -22,9 +22,9 @@ function addTag() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">useCloned</span>
+      <span class="demo-label">useCloned</span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
         :class="isModified
@@ -40,40 +40,40 @@ function addTag() {
     </div>
 
     <div class="grid grid-cols-2 gap-3">
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-        <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Source</p>
-        <dl class="space-y-1.5 text-sm text-(--fg)">
+      <div class="demo-card p-4">
+        <p class="demo-label mb-2">Source</p>
+        <dl class="space-y-1.5 text-sm text-fg">
           <div class="flex justify-between gap-2">
-            <dt class="text-(--fg-muted)">name</dt>
+            <dt class="text-fg-muted">name</dt>
             <dd class="truncate font-medium">{{ original.name }}</dd>
           </div>
           <div class="flex justify-between gap-2">
-            <dt class="text-(--fg-muted)">role</dt>
+            <dt class="text-fg-muted">role</dt>
             <dd class="font-medium">{{ original.role }}</dd>
           </div>
           <div class="flex justify-between gap-2">
-            <dt class="text-(--fg-muted)">tags</dt>
-            <dd class="font-mono text-xs text-(--fg-muted)">{{ original.tags.length }}</dd>
+            <dt class="text-fg-muted">tags</dt>
+            <dd class="font-mono text-xs text-fg-muted">{{ original.tags.length }}</dd>
           </div>
         </dl>
       </div>
 
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-        <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Cloned (editable)</p>
-        <dl class="space-y-1.5 text-sm text-(--fg)">
+      <div class="demo-card p-4">
+        <p class="demo-label mb-2">Cloned (editable)</p>
+        <dl class="space-y-1.5 text-sm text-fg">
           <div class="flex justify-between gap-2">
-            <dt class="text-(--fg-muted)">name</dt>
+            <dt class="text-fg-muted">name</dt>
             <dd class="truncate font-medium">{{ cloned.name }}</dd>
           </div>
           <div class="flex justify-between gap-2">
-            <dt class="text-(--fg-muted)">role</dt>
+            <dt class="text-fg-muted">role</dt>
             <dd class="font-medium">{{ cloned.role }}</dd>
           </div>
           <div class="flex flex-wrap justify-end gap-1">
             <span
               v-for="tag in cloned.tags"
               :key="tag"
-              class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-inset) px-1.5 py-0.5 font-mono text-[0.65rem] text-(--fg-muted)"
+              class="inline-flex items-center rounded-md border border-border bg-bg-inset px-1.5 py-0.5 font-mono text-[0.65rem] text-fg-muted"
             >
               {{ tag }}
             </span>
@@ -85,21 +85,21 @@ function addTag() {
     <div class="flex flex-wrap gap-2">
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:border-(--border-strong) hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="bumpOriginal"
       >
         Cycle source role
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:border-(--border-strong) hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="addTag"
       >
         Edit clone
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="!isModified"
         @click="sync()"
       >
@@ -107,7 +107,7 @@ function addTag() {
       </button>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Editing the source auto-resyncs the clone. Editing the clone marks it modified without touching the source.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/reactivity/useDebounceFn/demo.vue b/vue/toolkit/src/composables/reactivity/useDebounceFn/demo.vue
index ddc4b6d..6b7dee7 100644
--- a/vue/toolkit/src/composables/reactivity/useDebounceFn/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/useDebounceFn/demo.vue
@@ -23,25 +23,25 @@ function onInput(event: Event) {
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">useDebounceFn</span>
+      <span class="demo-label">useDebounceFn</span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
         :class="runSearch.isPending.value
           ? 'border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-400'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          : 'border-border bg-bg-inset text-fg-muted'"
       >
         <span
           class="size-1.5 rounded-full transition"
-          :class="runSearch.isPending.value ? 'animate-pulse bg-sky-500' : 'bg-(--fg-subtle)'"
+          :class="runSearch.isPending.value ? 'animate-pulse bg-sky-500' : 'bg-fg-subtle'"
         />
         {{ runSearch.isPending.value ? 'Pending' : 'Settled' }}
       </span>
     </div>
 
     <div class="flex flex-col gap-2">
-      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="search">
+      <label class="demo-label" for="search">
         Type to search
       </label>
       <input
@@ -49,13 +49,13 @@ function onInput(event: Event) {
         :value="query"
         type="text"
         placeholder="Search the docs…"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
         @input="onInput"
       >
     </div>
 
     <div class="flex items-center gap-3">
-      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="delay">
+      <label class="demo-label" for="delay">
         Delay
       </label>
       <input
@@ -65,26 +65,26 @@ function onInput(event: Event) {
         min="0"
         max="1500"
         step="100"
-        class="flex-1 accent-(--accent)"
+        class="flex-1 accent-accent"
       >
-      <span class="w-16 text-right font-mono text-sm tabular-nums text-(--fg)">{{ delay }}ms</span>
+      <span class="w-16 text-right font-mono text-sm tabular-nums text-fg">{{ delay }}ms</span>
     </div>
 
     <div class="grid grid-cols-2 gap-3">
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Invocations</p>
-        <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ calls }}</p>
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <p class="demo-label">Invocations</p>
+        <p class="demo-stat mt-1 text-3xl">{{ calls }}</p>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last result</p>
-        <p class="mt-1 truncate font-mono text-sm text-(--fg)">{{ lastResult || '—' }}</p>
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <p class="demo-label">Last result</p>
+        <p class="mt-1 truncate font-mono text-sm text-fg">{{ lastResult || '—' }}</p>
       </div>
     </div>
 
     <div class="flex flex-wrap gap-2">
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:border-(--border-strong) hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="!runSearch.isPending.value"
         @click="runSearch.flush()"
       >
@@ -92,7 +92,7 @@ function onInput(event: Event) {
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:border-(--border-strong) hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="!runSearch.isPending.value"
         @click="runSearch.cancel()"
       >
@@ -100,9 +100,9 @@ function onInput(event: Event) {
       </button>
     </div>
 
-    <div v-if="log.length" class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Recent calls</p>
-      <ul class="space-y-1 font-mono text-xs text-(--fg-muted)">
+    <div v-if="log.length" class="rounded-lg border border-border bg-bg-inset p-3">
+      <p class="demo-label mb-2">Recent calls</p>
+      <ul class="space-y-1 font-mono text-xs text-fg-muted">
         <li v-for="(entry, i) in log" :key="i" class="truncate">{{ entry }}</li>
       </ul>
     </div>
diff --git a/vue/toolkit/src/composables/reactivity/usePrevious/demo.vue b/vue/toolkit/src/composables/reactivity/usePrevious/demo.vue
index dbe19dc..4ef0b11 100644
--- a/vue/toolkit/src/composables/reactivity/usePrevious/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/usePrevious/demo.vue
@@ -12,22 +12,22 @@ function pick(theme: string) {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">usePrevious</span>
+  <div class="demo-stack max-w-sm">
+    <span class="demo-label">usePrevious</span>
 
     <div class="grid grid-cols-2 gap-3">
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Current</p>
-        <p class="mt-1 truncate text-2xl font-bold text-(--fg)">{{ selected }}</p>
+      <div class="demo-card p-4">
+        <p class="demo-label">Current</p>
+        <p class="mt-1 truncate text-2xl font-bold text-fg">{{ selected }}</p>
       </div>
-      <div class="rounded-xl border border-(--border) bg-(--bg-inset) p-4">
-        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Previous</p>
-        <p class="mt-1 truncate text-2xl font-bold text-(--fg-muted)">{{ previous }}</p>
+      <div class="rounded-xl border border-border bg-bg-inset p-4">
+        <p class="demo-label">Previous</p>
+        <p class="mt-1 truncate text-2xl font-bold text-fg-muted">{{ previous }}</p>
       </div>
     </div>
 
     <div class="flex flex-col gap-2">
-      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Select a theme</p>
+      <p class="demo-label">Select a theme</p>
       <div class="flex flex-wrap gap-2">
         <button
           v-for="theme in themes"
@@ -35,8 +35,8 @@ function pick(theme: string) {
           type="button"
           class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
           :class="theme === selected
-            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
-            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:border-(--border-strong) hover:bg-(--bg-inset)'"
+            ? 'border-transparent bg-accent text-accent-fg hover:bg-accent-hover'
+            : 'border-border bg-bg-elevated text-fg hover:border-border-strong hover:bg-bg-inset'"
           @click="pick(theme)"
         >
           {{ theme }}
@@ -44,8 +44,8 @@ function pick(theme: string) {
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
-      Seeded with <span class="font-mono text-(--fg-muted)">"None"</span> as the initial previous value until the source first changes.
+    <p class="text-xs text-fg-subtle">
+      Seeded with <span class="font-mono text-fg-muted">"None"</span> as the initial previous value until the source first changes.
     </p>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/reactivity/useSyncRefs/demo.vue b/vue/toolkit/src/composables/reactivity/useSyncRefs/demo.vue
index 2261c7f..bc36a53 100644
--- a/vue/toolkit/src/composables/reactivity/useSyncRefs/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/useSyncRefs/demo.vue
@@ -15,11 +15,11 @@ const presets = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#0ea5e9'];
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
-    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">useSyncRefs</span>
+  <div class="demo-stack max-w-md">
+    <span class="demo-label">useSyncRefs</span>
 
     <div class="flex flex-col gap-2">
-      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="color">
+      <label class="demo-label" for="color">
         Source ref
       </label>
       <div class="flex items-center gap-2">
@@ -27,33 +27,33 @@ const presets = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#0ea5e9'];
           id="color"
           v-model="source"
           type="color"
-          class="h-9 w-12 shrink-0 cursor-pointer rounded-lg border border-(--border) bg-(--bg)"
+          class="h-9 w-12 shrink-0 cursor-pointer rounded-lg border border-border bg-bg"
         >
         <input
           v-model="source"
           type="text"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 font-mono text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="demo-input font-mono"
         >
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">Three independent target refs stay synced to the source:</p>
+    <p class="text-xs text-fg-subtle">Three independent target refs stay synced to the source:</p>
 
     <div class="grid grid-cols-3 gap-3">
-      <div class="flex flex-col items-center gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">swatch</span>
+      <div class="demo-card flex flex-col items-center gap-2 p-3">
+        <span class="demo-label">swatch</span>
         <span
-          class="size-10 rounded-lg border border-(--border-strong) shadow-sm transition"
+          class="size-10 rounded-lg border border-border-strong shadow-sm transition"
           :style="{ backgroundColor: swatch }"
         />
       </div>
-      <div class="flex flex-col items-center justify-center gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">label</span>
-        <span class="font-mono text-xs text-(--fg)">{{ label }}</span>
+      <div class="demo-card flex flex-col items-center justify-center gap-2 p-3">
+        <span class="demo-label">label</span>
+        <span class="font-mono text-xs text-fg">{{ label }}</span>
       </div>
-      <div class="flex flex-col items-center justify-center gap-2 rounded-xl border border-(--border) bg-(--bg-inset) p-3">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">hex</span>
-        <span class="font-mono text-xs uppercase text-(--fg)">{{ hex }}</span>
+      <div class="flex flex-col items-center justify-center gap-2 rounded-xl border border-border bg-bg-inset p-3">
+        <span class="demo-label">hex</span>
+        <span class="font-mono text-xs uppercase text-fg">{{ hex }}</span>
       </div>
     </div>
 
@@ -62,7 +62,7 @@ const presets = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#0ea5e9'];
         v-for="preset in presets"
         :key="preset"
         type="button"
-        class="size-7 rounded-md border border-(--border) transition hover:scale-110 active:scale-95 cursor-pointer"
+        class="size-7 rounded-md border border-border transition hover:scale-110 active:scale-95 cursor-pointer"
         :style="{ backgroundColor: preset }"
         :aria-label="`Set source to ${preset}`"
         @click="source = preset"
diff --git a/vue/toolkit/src/composables/reactivity/useThrottleFn/demo.vue b/vue/toolkit/src/composables/reactivity/useThrottleFn/demo.vue
index 392a0d0..ce400dd 100644
--- a/vue/toolkit/src/composables/reactivity/useThrottleFn/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/useThrottleFn/demo.vue
@@ -24,24 +24,24 @@ const ratio = () => (moves.value ? Math.round((fires.value / moves.value) * 100)
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
-    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">useThrottleFn</span>
+  <div class="demo-stack max-w-md">
+    <span class="demo-label">useThrottleFn</span>
 
     <div
-      class="relative h-40 w-full overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) touch-none"
+      class="relative h-40 w-full overflow-hidden rounded-xl border border-border bg-bg-inset touch-none"
       @pointermove="handlePointer"
     >
       <span
-        class="pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-(--accent-fg) bg-(--accent) shadow-md transition-all duration-150 ease-out"
+        class="pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-accent-fg bg-accent shadow-md transition-all duration-150 ease-out"
         :style="{ left: `${position.x}%`, top: `${position.y}%` }"
       />
-      <span class="pointer-events-none absolute inset-x-0 bottom-2 text-center text-xs text-(--fg-subtle)">
+      <span class="pointer-events-none absolute inset-x-0 bottom-2 text-center text-xs text-fg-subtle">
         Move your pointer over this area
       </span>
     </div>
 
     <div class="flex items-center gap-3">
-      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="window">
+      <label class="demo-label" for="window">
         Window
       </label>
       <input
@@ -51,40 +51,40 @@ const ratio = () => (moves.value ? Math.round((fires.value / moves.value) * 100)
         min="0"
         max="1000"
         step="50"
-        class="flex-1 accent-(--accent)"
+        class="flex-1 accent-accent"
       >
-      <span class="w-16 text-right font-mono text-sm tabular-nums text-(--fg)">{{ delay }}ms</span>
+      <span class="w-16 text-right font-mono text-sm tabular-nums text-fg">{{ delay }}ms</span>
     </div>
 
     <div class="grid grid-cols-3 gap-3">
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Events</p>
-        <p class="mt-1 font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ moves }}</p>
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <p class="demo-label">Events</p>
+        <p class="demo-stat mt-1 text-2xl">{{ moves }}</p>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Fired</p>
-        <p class="mt-1 font-mono text-2xl font-bold tabular-nums text-(--accent-text)">{{ fires }}</p>
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <p class="demo-label">Fired</p>
+        <p class="mt-1 font-mono text-2xl font-bold tabular-nums text-accent-text">{{ fires }}</p>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Ran</p>
-        <p class="mt-1 font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ ratio() }}%</p>
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <p class="demo-label">Ran</p>
+        <p class="demo-stat mt-1 text-2xl">{{ ratio() }}%</p>
       </div>
     </div>
 
     <div class="flex items-center justify-between gap-2">
-      <span class="rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 font-mono text-xs text-(--fg-muted)">
+      <span class="rounded-md border border-border bg-bg-inset px-2 py-0.5 font-mono text-xs text-fg-muted">
         x: {{ position.x }} · y: {{ position.y }}
       </span>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:border-(--border-strong) hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="onMove.flush()"
       >
         Flush trailing
       </button>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Leading + trailing throttling caps the handler to once per window — drag faster and watch the fired count lag behind events.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/reactivity/useThrottleFn/index.ts b/vue/toolkit/src/composables/reactivity/useThrottleFn/index.ts
index 7f41a9e..d9bd675 100644
--- a/vue/toolkit/src/composables/reactivity/useThrottleFn/index.ts
+++ b/vue/toolkit/src/composables/reactivity/useThrottleFn/index.ts
@@ -2,6 +2,7 @@ import { isRef, toValue } from 'vue';
 import type { MaybeRefOrGetter } from 'vue';
 import { isFunction, isObject, throttle } from '@robonen/stdlib';
 import type { AnyFunction } from '@robonen/stdlib';
+import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
 
 export interface UseThrottleFnOptions {
   /**
@@ -181,5 +182,9 @@ export function useThrottleFn<T extends AnyFunction>(
     throttled.flush();
   };
 
+  // Cancel any pending trailing invocation when the scope is disposed, so it
+  // can't fire after the component unmounts (mirrors useDebounceFn).
+  tryOnScopeDispose(wrapper.cancel);
+
   return wrapper;
 }
diff --git a/vue/toolkit/src/composables/reactivity/useToNumber/demo.vue b/vue/toolkit/src/composables/reactivity/useToNumber/demo.vue
index 80591a2..95b7de9 100644
--- a/vue/toolkit/src/composables/reactivity/useToNumber/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/useToNumber/demo.vue
@@ -23,14 +23,14 @@ const presets = ['42.50', '3.14159', '255.9', 'abc', '-12'];
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <label class="flex flex-col gap-1.5">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Source value</span>
+      <span class="demo-label">Source value</span>
       <input
         v-model="source"
         type="text"
         placeholder="Type a number…"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
       >
     </label>
 
@@ -39,36 +39,36 @@ const presets = ['42.50', '3.14159', '255.9', 'abc', '-12'];
         v-for="v in presets"
         :key="v"
         type="button"
-        class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) transition hover:bg-(--bg-elevated) hover:border-(--border-strong) cursor-pointer"
+        class="inline-flex items-center rounded-md border border-border bg-bg-inset px-2 py-0.5 text-xs font-medium text-fg-muted transition hover:bg-bg-elevated hover:border-border-strong cursor-pointer"
         @click="source = v"
       >
         {{ v }}
       </button>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) divide-y divide-(--border)">
+    <div class="demo-card divide-y divide-border">
       <div
         v-for="variant in variants"
         :key="variant.label"
         class="flex items-center justify-between gap-3 px-4 py-2.5"
       >
         <div class="flex flex-col">
-          <span class="font-mono text-sm text-(--fg)">{{ variant.label }}</span>
-          <span class="text-xs text-(--fg-subtle)">{{ variant.desc }}</span>
+          <span class="font-mono text-sm text-fg">{{ variant.label }}</span>
+          <span class="text-xs text-fg-subtle">{{ variant.desc }}</span>
         </div>
         <span
           class="font-mono text-lg font-semibold tabular-nums"
-          :class="Number.isNaN(variant.value) ? 'text-amber-600 dark:text-amber-400' : 'text-(--fg)'"
+          :class="Number.isNaN(variant.value) ? 'text-amber-600 dark:text-amber-400' : 'text-fg'"
         >
           {{ Number.isNaN(variant.value) ? 'NaN' : variant.value }}
         </span>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle) leading-relaxed">
-      One reactive source, four <span class="font-mono text-(--accent-text)">useToNumber</span>
-      instances. Try <span class="font-mono text-(--fg-muted)">abc</span> to see how
-      <span class="font-mono text-(--fg-muted)">nanToZero</span> and clamping tame invalid input.
+    <p class="text-xs text-fg-subtle leading-relaxed">
+      One reactive source, four <span class="font-mono text-accent-text">useToNumber</span>
+      instances. Try <span class="font-mono text-fg-muted">abc</span> to see how
+      <span class="font-mono text-fg-muted">nanToZero</span> and clamping tame invalid input.
     </p>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/reactivity/useToString/demo.vue b/vue/toolkit/src/composables/reactivity/useToString/demo.vue
index e1a3be3..4f75598 100644
--- a/vue/toolkit/src/composables/reactivity/useToString/demo.vue
+++ b/vue/toolkit/src/composables/reactivity/useToString/demo.vue
@@ -26,54 +26,54 @@ const rows = [
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Live source values</span>
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-3">
+      <span class="demo-label">Live source values</span>
 
       <div class="flex items-center justify-between gap-3">
-        <label class="text-sm text-(--fg)">count</label>
+        <label class="text-sm text-fg">count</label>
         <div class="flex items-center gap-2">
           <button
             type="button"
-            class="inline-flex h-7 w-7 items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+            class="inline-flex h-7 w-7 items-center justify-center rounded-lg border border-border bg-bg-elevated text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.98] cursor-pointer"
             @click="count--"
           >−</button>
-          <span class="font-mono text-sm tabular-nums text-(--fg) w-6 text-center">{{ count }}</span>
+          <span class="font-mono text-sm tabular-nums text-fg w-6 text-center">{{ count }}</span>
           <button
             type="button"
-            class="inline-flex h-7 w-7 items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+            class="inline-flex h-7 w-7 items-center justify-center rounded-lg border border-border bg-bg-elevated text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.98] cursor-pointer"
             @click="count++"
           >+</button>
         </div>
       </div>
 
       <div class="flex items-center justify-between gap-3">
-        <label class="text-sm text-(--fg)" for="ratio">ratio</label>
-        <input id="ratio" v-model.number="ratio" type="range" min="0" max="1" step="0.01" class="accent-(--accent) cursor-pointer">
+        <label class="text-sm text-fg" for="ratio">ratio</label>
+        <input id="ratio" v-model.number="ratio" type="range" min="0" max="1" step="0.01" class="accent-accent cursor-pointer">
       </div>
 
       <label class="flex items-center justify-between gap-3 cursor-pointer">
-        <span class="text-sm text-(--fg)">enabled</span>
-        <input v-model="enabled" type="checkbox" class="size-4 accent-(--accent) cursor-pointer">
+        <span class="text-sm text-fg">enabled</span>
+        <input v-model="enabled" type="checkbox" class="size-4 accent-accent cursor-pointer">
       </label>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) divide-y divide-(--border) font-mono text-sm">
+    <div class="rounded-lg border border-border bg-bg-inset divide-y divide-border font-mono text-sm">
       <div
         v-for="row in rows"
         :key="row.type"
         class="flex items-center gap-3 px-3 py-2"
       >
-        <span class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted) shrink-0">
+        <span class="inline-flex items-center rounded-md border border-border bg-bg-elevated px-2 py-0.5 text-xs font-medium text-fg-muted shrink-0">
           {{ row.type }}
         </span>
-        <span class="text-(--fg) truncate">"{{ row.value }}"</span>
+        <span class="text-fg truncate">"{{ row.value }}"</span>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle) leading-relaxed">
-      <span class="font-mono text-(--accent-text)">useToString</span> is
-      <span class="font-mono text-(--fg-muted)">computed(() =&gt; String(toValue(v)))</span> —
+    <p class="text-xs text-fg-subtle leading-relaxed">
+      <span class="font-mono text-accent-text">useToString</span> is
+      <span class="font-mono text-fg-muted">computed(() =&gt; String(toValue(v)))</span> —
       it stringifies refs, getters, and reactive objects alike.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/sensors/onKeyStroke/demo.vue b/vue/toolkit/src/composables/sensors/onKeyStroke/demo.vue
index 58a9d0f..76aa11b 100644
--- a/vue/toolkit/src/composables/sensors/onKeyStroke/demo.vue
+++ b/vue/toolkit/src/composables/sensors/onKeyStroke/demo.vue
@@ -44,13 +44,13 @@ onKeyStroke(
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       ref="capture"
       tabindex="0"
-      class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-3 outline-none transition focus:border-(--accent) focus:ring-2 focus:ring-(--ring)"
+      class="demo-card p-4 flex flex-col items-center gap-3 outline-none transition focus:border-accent focus:ring-2 focus:ring-ring"
     >
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Click here, then press keys / arrows
       </span>
 
@@ -60,37 +60,37 @@ onKeyStroke(
           :key="i"
           class="size-7 rounded-md border transition-colors"
           :class="(i - 1) % GRID === pos.x && Math.floor((i - 1) / GRID) === pos.y
-            ? 'bg-(--accent) border-transparent'
-            : 'bg-(--bg-inset) border-(--border)'"
+            ? 'bg-accent border-transparent'
+            : 'bg-bg-inset border-border'"
         />
       </div>
 
       <div class="flex items-center gap-2">
-        <span class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-inset) px-2.5 py-1 font-mono text-sm font-semibold text-(--fg)">
+        <span class="inline-flex items-center rounded-md border border-border bg-bg-inset px-2.5 py-1 font-mono text-sm font-semibold text-fg">
           {{ lastKey === ' ' ? 'Space' : (lastKey || '—') }}
         </span>
-        <span class="font-mono text-xs text-(--fg-subtle)">{{ lastCode || 'event.code' }}</span>
+        <span class="font-mono text-xs text-fg-subtle">{{ lastCode || 'event.code' }}</span>
       </div>
     </div>
 
-    <div class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2">
-      <label class="flex items-center gap-2 text-sm text-(--fg) cursor-pointer">
-        <input v-model="dedupe" type="checkbox" class="size-4 accent-(--accent) cursor-pointer">
+    <div class="flex items-center justify-between gap-3 rounded-lg border border-border bg-bg-inset px-3 py-2">
+      <label class="flex items-center gap-2 text-sm text-fg cursor-pointer">
+        <input v-model="dedupe" type="checkbox" class="size-4 accent-accent cursor-pointer">
         dedupe held keys
       </label>
-      <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ pressCount }} strokes</span>
+      <span class="font-mono text-xs tabular-nums text-fg-muted">{{ pressCount }} strokes</span>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 min-h-12">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Recent</span>
+    <div class="rounded-lg border border-border bg-bg-inset p-3 min-h-12">
+      <span class="demo-label">Recent</span>
       <div v-if="log.length" class="mt-2 flex flex-wrap gap-1.5">
         <span
           v-for="(k, i) in log"
           :key="i"
-          class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 font-mono text-xs text-(--fg-muted)"
+          class="inline-flex items-center rounded-md border border-border bg-bg-elevated px-2 py-0.5 font-mono text-xs text-fg-muted"
         >{{ k }}</span>
       </div>
-      <p v-else class="mt-1 text-sm text-(--fg-subtle)">No keys yet — focus the area above.</p>
+      <p v-else class="mt-1 text-sm text-fg-subtle">No keys yet — focus the area above.</p>
     </div>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/sensors/onKeyStroke/index.ts b/vue/toolkit/src/composables/sensors/onKeyStroke/index.ts
index 4d56a7e..d4c5931 100644
--- a/vue/toolkit/src/composables/sensors/onKeyStroke/index.ts
+++ b/vue/toolkit/src/composables/sensors/onKeyStroke/index.ts
@@ -90,6 +90,8 @@ export function onKeyStroke(key: KeyFilter, handler: (event: KeyboardEvent) => v
  */
 export function onKeyStroke(handler: (event: KeyboardEvent) => void, options?: OnKeyStrokeOptions): VoidFunction;
 
+// Overload implementation signature: positional args are dispatched manually
+// below; the public overloads above carry the real, type-safe signatures.
 export function onKeyStroke(...args: any[]): VoidFunction {
   let key: KeyFilter;
   let handler: (event: KeyboardEvent) => void;
diff --git a/vue/toolkit/src/composables/sensors/onLongPress/demo.vue b/vue/toolkit/src/composables/sensors/onLongPress/demo.vue
index 6e3ef92..a7d93a9 100644
--- a/vue/toolkit/src/composables/sensors/onLongPress/demo.vue
+++ b/vue/toolkit/src/composables/sensors/onLongPress/demo.vue
@@ -35,50 +35,50 @@ const progress = computed(() => Math.min(100, Math.round((lastDuration.value / D
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <button
       ref="pressTarget"
       type="button"
       class="select-none rounded-xl border px-4 py-8 text-center font-medium transition-colors duration-200 cursor-pointer active:scale-[0.99]"
       :class="triggered
-        ? 'border-transparent bg-(--accent) text-(--accent-fg)'
-        : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:border-(--border-strong)'"
+        ? 'border-transparent bg-accent text-accent-fg'
+        : 'border-border bg-bg-elevated text-fg hover:border-border-strong'"
     >
       <span class="block text-base font-semibold">
         {{ triggered ? 'Long press detected' : 'Press & hold me' }}
       </span>
-      <span class="mt-1 block text-xs" :class="triggered ? 'text-(--accent-fg)/80' : 'text-(--fg-subtle)'">
+      <span class="mt-1 block text-xs" :class="triggered ? 'text-accent-fg/80' : 'text-fg-subtle'">
         hold for {{ DELAY }}ms — a quick click counts as a tap
       </span>
     </button>
 
     <div class="grid grid-cols-2 gap-3">
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-1">
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ longPresses }}</span>
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">long presses</span>
+      <div class="demo-card p-4 flex flex-col items-center gap-1">
+        <span class="demo-stat text-3xl">{{ longPresses }}</span>
+        <span class="demo-label">long presses</span>
       </div>
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-1">
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ taps }}</span>
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">taps</span>
+      <div class="demo-card p-4 flex flex-col items-center gap-1">
+        <span class="demo-stat text-3xl">{{ taps }}</span>
+        <span class="demo-label">taps</span>
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-2">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last hold</span>
-        <span class="font-mono text-sm tabular-nums text-(--fg)">{{ lastDuration }}ms</span>
+        <span class="demo-label">Last hold</span>
+        <span class="font-mono text-sm tabular-nums text-fg">{{ lastDuration }}ms</span>
       </div>
-      <div class="h-1.5 w-full overflow-hidden rounded-full bg-(--bg-elevated)">
+      <div class="h-1.5 w-full overflow-hidden rounded-full bg-bg-elevated">
         <div
-          class="h-full rounded-full bg-(--accent) transition-[width] duration-200"
+          class="h-full rounded-full bg-accent transition-[width] duration-200"
           :style="{ width: `${progress}%` }"
         />
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle) leading-relaxed">
+    <p class="text-xs text-fg-subtle leading-relaxed">
       Moving more than ~10px while holding cancels the press. The
-      <span class="font-mono text-(--accent-text)">onMouseUp</span> callback tells taps from holds.
+      <span class="font-mono text-accent-text">onMouseUp</span> callback tells taps from holds.
     </p>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/sensors/onStartTyping/demo.vue b/vue/toolkit/src/composables/sensors/onStartTyping/demo.vue
index a5257ef..fef996f 100644
--- a/vue/toolkit/src/composables/sensors/onStartTyping/demo.vue
+++ b/vue/toolkit/src/composables/sensors/onStartTyping/demo.vue
@@ -26,25 +26,25 @@ function filter() {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       class="rounded-xl border border-dashed p-5 text-center transition-colors"
       :class="focused
-        ? 'border-(--accent) bg-(--accent-subtle)'
-        : 'border-(--border-strong) bg-(--bg-inset)'"
+        ? 'border-accent bg-accent-subtle'
+        : 'border-border-strong bg-bg-inset'"
     >
-      <p class="text-sm text-(--fg)">
+      <p class="text-sm text-fg">
         Start typing
         <span class="font-medium">anywhere</span> on the page
       </p>
-      <p class="mt-1 text-xs text-(--fg-subtle)">
+      <p class="mt-1 text-xs text-fg-subtle">
         the search box below focuses itself automatically
       </p>
       <span
         v-if="lastChar"
-        class="mt-3 inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+        class="mt-3 inline-flex items-center gap-1.5 rounded-md border border-border bg-bg-elevated px-2 py-0.5 text-xs font-medium text-fg-muted"
       >
-        captured <span class="font-mono text-(--fg)">{{ lastChar === ' ' ? 'Space' : lastChar }}</span>
+        captured <span class="font-mono text-fg">{{ lastChar === ' ' ? 'Space' : lastChar }}</span>
       </span>
     </div>
 
@@ -53,23 +53,23 @@ function filter() {
       v-model="query"
       type="text"
       placeholder="Search fruit…"
-      class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      class="demo-input"
       @input="filter"
       @focus="focused = true"
       @blur="focused = false"
     >
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 min-h-12">
+    <div class="rounded-lg border border-border bg-bg-inset p-2 min-h-12">
       <ul v-if="results.length" class="flex flex-col">
         <li
           v-for="fruit in results"
           :key="fruit"
-          class="rounded-md px-2 py-1.5 text-sm text-(--fg) transition-colors hover:bg-(--bg-elevated)"
+          class="rounded-md px-2 py-1.5 text-sm text-fg transition-colors hover:bg-bg-elevated"
         >
           {{ fruit }}
         </li>
       </ul>
-      <p v-else class="px-2 py-3 text-center text-sm text-(--fg-subtle)">
+      <p v-else class="px-2 py-3 text-center text-sm text-fg-subtle">
         No fruit matches "{{ query }}"
       </p>
     </div>
diff --git a/vue/toolkit/src/composables/sensors/useBattery/demo.vue b/vue/toolkit/src/composables/sensors/useBattery/demo.vue
index d2242d5..9463fd3 100644
--- a/vue/toolkit/src/composables/sensors/useBattery/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useBattery/demo.vue
@@ -16,7 +16,7 @@ const fillClass = computed(() => {
   if (charging.value) return 'bg-emerald-500';
   if (percent.value <= 20) return 'bg-red-500';
   if (percent.value <= 50) return 'bg-amber-500';
-  return 'bg-(--accent)';
+  return 'bg-accent';
 });
 
 function formatDuration(seconds: number): string {
@@ -32,51 +32,51 @@ const dischargingTimeLabel = computed(() => formatDuration(dischargingTime.value
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300">
       Battery Status API is not supported in this browser.
     </div>
 
     <template v-else>
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="demo-card p-4 flex flex-col gap-4">
         <div class="flex items-center justify-between">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Battery Status</span>
+          <span class="demo-label">Battery Status</span>
           <span
-            class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+            class="demo-badge"
           >
-            <span class="size-1.5 rounded-full transition" :class="charging ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+            <span class="size-1.5 rounded-full transition" :class="charging ? 'bg-emerald-500' : 'bg-fg-subtle'" />
             {{ statusLabel }}
           </span>
         </div>
 
         <!-- Battery silhouette: body + terminal cap, fill scales with level -->
         <div class="flex items-center gap-2">
-          <div class="relative h-14 flex-1 rounded-lg border-2 border-(--border-strong) bg-(--bg-inset) p-1">
+          <div class="relative h-14 flex-1 rounded-lg border-2 border-border-strong bg-bg-inset p-1">
             <div
               class="h-full rounded-sm transition-all duration-500"
               :class="fillClass"
               :style="{ width: `${Math.max(percent, 2)}%` }"
             />
-            <span class="absolute inset-0 flex items-center justify-center font-mono text-lg font-bold tabular-nums text-(--fg)">
+            <span class="demo-stat absolute inset-0 flex items-center justify-center text-lg">
               {{ percent }}%
             </span>
           </div>
-          <div class="h-6 w-1.5 rounded-r-sm bg-(--border-strong)" />
+          <div class="h-6 w-1.5 rounded-r-sm bg-border-strong" />
         </div>
       </div>
 
       <div class="grid grid-cols-2 gap-2">
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">Time to full</div>
-          <div class="font-mono text-base font-bold tabular-nums text-(--fg)">{{ chargingTimeLabel }}</div>
+        <div class="rounded-lg border border-border bg-bg-inset p-3">
+          <div class="text-[10px] uppercase tracking-wide text-fg-subtle">Time to full</div>
+          <div class="demo-stat text-base">{{ chargingTimeLabel }}</div>
         </div>
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">Time to empty</div>
-          <div class="font-mono text-base font-bold tabular-nums text-(--fg)">{{ dischargingTimeLabel }}</div>
+        <div class="rounded-lg border border-border bg-bg-inset p-3">
+          <div class="text-[10px] uppercase tracking-wide text-fg-subtle">Time to empty</div>
+          <div class="demo-stat text-base">{{ dischargingTimeLabel }}</div>
         </div>
       </div>
 
-      <p class="text-xs text-(--fg-subtle)">
+      <p class="text-xs text-fg-subtle">
         Plug in or unplug your charger to watch the charging state, level, and remaining time update live.
       </p>
     </template>
diff --git a/vue/toolkit/src/composables/sensors/useBodyScrollLock/demo.vue b/vue/toolkit/src/composables/sensors/useBodyScrollLock/demo.vue
index 8859740..9010f96 100644
--- a/vue/toolkit/src/composables/sensors/useBodyScrollLock/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useBodyScrollLock/demo.vue
@@ -28,15 +28,15 @@ const items = [
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Body scroll lock</span>
-      <p class="text-sm text-(--fg-muted)">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-3">
+      <span class="demo-label">Body scroll lock</span>
+      <p class="text-sm text-fg-muted">
         Open the dialog and try scrolling the page — the body is locked while it is open,
         scrollbar width compensated so nothing shifts.
       </p>
       <span
-        class="inline-flex w-fit items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+        class="demo-badge w-fit"
       >
         <span class="size-1.5 rounded-full transition" :class="open ? 'bg-amber-500' : 'bg-emerald-500'" />
         {{ open ? 'Scroll locked' : 'Scroll free' }}
@@ -45,7 +45,7 @@ const items = [
 
     <button
       type="button"
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+      class="demo-btn-primary"
       @click="openModal"
     >
       Open dialog
@@ -63,12 +63,12 @@ const items = [
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
         @click.self="closeModal"
       >
-        <div class="w-full max-w-sm rounded-xl border border-(--border) bg-(--bg-elevated) p-5 shadow-xl flex flex-col gap-4">
+        <div class="demo-stack demo-card max-w-sm p-5 shadow-xl">
           <div class="flex items-center justify-between">
-            <h3 class="text-base font-semibold text-(--fg)">Mailboxes</h3>
+            <h3 class="text-base font-semibold text-fg">Mailboxes</h3>
             <button
               type="button"
-              class="rounded-md px-2 py-0.5 text-sm text-(--fg-muted) transition hover:bg-(--bg-inset) cursor-pointer"
+              class="rounded-md px-2 py-0.5 text-sm text-fg-muted transition hover:bg-bg-inset cursor-pointer"
               @click="closeModal"
             >
               Close
@@ -78,12 +78,12 @@ const items = [
             <li
               v-for="item in items"
               :key="item"
-              class="rounded-md px-3 py-2 text-sm text-(--fg) transition hover:bg-(--bg-inset)"
+              class="rounded-md px-3 py-2 text-sm text-fg transition hover:bg-bg-inset"
             >
               {{ item }}
             </li>
           </ul>
-          <p class="text-xs text-(--fg-subtle)">The list scrolls, the page behind it does not.</p>
+          <p class="text-xs text-fg-subtle">The list scrolls, the page behind it does not.</p>
         </div>
       </div>
     </Transition>
diff --git a/vue/toolkit/src/composables/sensors/useClickOutside/demo.vue b/vue/toolkit/src/composables/sensors/useClickOutside/demo.vue
index a475cca..d420f90 100644
--- a/vue/toolkit/src/composables/sensors/useClickOutside/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useClickOutside/demo.vue
@@ -19,10 +19,10 @@ const options = ['Rename', 'Duplicate', 'Move to…', 'Archive'];
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Click outside to dismiss</span>
-      <p class="text-sm text-(--fg-muted)">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-3">
+      <span class="demo-label">Click outside to dismiss</span>
+      <p class="text-sm text-fg-muted">
         Open the menu, then click anywhere outside it to close. Clicks inside keep it open.
       </p>
     </div>
@@ -31,11 +31,11 @@ const options = ['Rename', 'Duplicate', 'Move to…', 'Archive'];
       <button
         ref="menu"
         type="button"
-        class="inline-flex w-full items-center justify-between gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.99] cursor-pointer"
+        class="inline-flex w-full items-center justify-between gap-1.5 rounded-lg border border-border bg-bg-elevated px-3 py-2 text-sm font-medium text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.99] cursor-pointer"
         @click="open = !open"
       >
         Document actions
-        <span class="text-(--fg-subtle) transition" :class="{ 'rotate-180': open }">▾</span>
+        <span class="text-fg-subtle transition" :class="{ 'rotate-180': open }">▾</span>
 
         <!-- The menu lives inside `target`, so clicks on its items count as inside -->
         <Transition
@@ -46,12 +46,12 @@ const options = ['Rename', 'Duplicate', 'Move to…', 'Archive'];
         >
           <div
             v-if="open"
-            class="absolute left-0 right-0 top-full z-10 mt-1 overflow-hidden rounded-lg border border-(--border) bg-(--bg-elevated) shadow-lg"
+            class="absolute left-0 right-0 top-full z-10 mt-1 overflow-hidden rounded-lg border border-border bg-bg-elevated shadow-lg"
           >
             <div
               v-for="option in options"
               :key="option"
-              class="px-3 py-2 text-left text-sm text-(--fg) transition hover:bg-(--bg-inset)"
+              class="px-3 py-2 text-left text-sm text-fg transition hover:bg-bg-inset"
             >
               {{ option }}
             </div>
@@ -60,8 +60,8 @@ const options = ['Rename', 'Duplicate', 'Move to…', 'Archive'];
       </button>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between font-mono text-sm text-(--fg) tabular-nums">
-      <span class="text-(--fg-subtle)">outside dismissals</span>
+    <div class="rounded-lg border border-border bg-bg-inset p-3 flex items-center justify-between font-mono text-sm text-fg tabular-nums">
+      <span class="text-fg-subtle">outside dismissals</span>
       <span class="font-bold">{{ dismissals }}</span>
     </div>
   </div>
diff --git a/vue/toolkit/src/composables/sensors/useDeviceMotion/demo.vue b/vue/toolkit/src/composables/sensors/useDeviceMotion/demo.vue
index 1be6faa..a0b7554 100644
--- a/vue/toolkit/src/composables/sensors/useDeviceMotion/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useDeviceMotion/demo.vue
@@ -39,19 +39,19 @@ const rotation = computed(() => [
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300">
       DeviceMotionEvent is not supported in this browser.
     </div>
 
     <template v-else>
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="demo-card p-4 flex flex-col gap-4">
         <div class="flex items-center justify-between">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Device motion</span>
+          <span class="demo-label">Device motion</span>
           <span
-            class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+            class="demo-badge"
           >
-            <span class="size-1.5 rounded-full transition" :class="permissionGranted ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+            <span class="size-1.5 rounded-full transition" :class="permissionGranted ? 'bg-emerald-500' : 'bg-fg-subtle'" />
             {{ permissionGranted ? 'Listening' : 'Idle' }}
           </span>
         </div>
@@ -59,38 +59,38 @@ const rotation = computed(() => [
         <!-- Live magnitude gauge from acceleration incl. gravity (m/s²) -->
         <div class="flex flex-col gap-1.5">
           <div class="flex items-baseline justify-between">
-            <span class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">|a| incl. gravity</span>
-            <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ magnitude.toFixed(2) }} m/s²</span>
+            <span class="text-[10px] uppercase tracking-wide text-fg-subtle">|a| incl. gravity</span>
+            <span class="font-mono text-sm tabular-nums text-fg-muted">{{ magnitude.toFixed(2) }} m/s²</span>
           </div>
-          <div class="h-2 overflow-hidden rounded-full bg-(--bg-inset)">
+          <div class="h-2 overflow-hidden rounded-full bg-bg-inset">
             <div
-              class="h-full rounded-full bg-(--accent) transition-all duration-150"
+              class="h-full rounded-full bg-accent transition-all duration-150"
               :style="{ width: `${Math.min(magnitude / 20 * 100, 100)}%` }"
             />
           </div>
         </div>
       </div>
 
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
-        <span class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">Acceleration (m/s²)</span>
+      <div class="demo-card p-4 flex flex-col gap-3">
+        <span class="text-[10px] uppercase tracking-wide text-fg-subtle">Acceleration (m/s²)</span>
         <div class="grid grid-cols-3 gap-2">
-          <div v-for="axis in axes" :key="axis.key" class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
-            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">{{ axis.label }}</div>
-            <div class="font-mono text-base font-bold tabular-nums text-(--fg)">{{ fmt(axis.value) }}</div>
+          <div v-for="axis in axes" :key="axis.key" class="rounded-lg border border-border bg-bg-inset p-2 text-center">
+            <div class="text-[10px] uppercase tracking-wide text-fg-subtle">{{ axis.label }}</div>
+            <div class="demo-stat text-base">{{ fmt(axis.value) }}</div>
           </div>
         </div>
 
-        <span class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">Rotation rate (deg/s)</span>
+        <span class="text-[10px] uppercase tracking-wide text-fg-subtle">Rotation rate (deg/s)</span>
         <div class="grid grid-cols-3 gap-2">
-          <div v-for="r in rotation" :key="r.key" class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
-            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">{{ r.label }}</div>
-            <div class="font-mono text-base font-bold tabular-nums text-(--fg)">{{ fmt(r.value) }}</div>
+          <div v-for="r in rotation" :key="r.key" class="rounded-lg border border-border bg-bg-inset p-2 text-center">
+            <div class="text-[10px] uppercase tracking-wide text-fg-subtle">{{ r.label }}</div>
+            <div class="demo-stat text-base">{{ fmt(r.value) }}</div>
           </div>
         </div>
 
         <div class="flex items-center justify-between text-xs">
-          <span class="text-(--fg-subtle)">Sampling interval</span>
-          <span class="font-mono tabular-nums text-(--fg-muted)">{{ interval ? `${interval} ms` : '—' }}</span>
+          <span class="text-fg-subtle">Sampling interval</span>
+          <span class="font-mono tabular-nums text-fg-muted">{{ interval ? `${interval} ms` : '—' }}</span>
         </div>
       </div>
 
@@ -98,12 +98,12 @@ const rotation = computed(() => [
       <button
         v-if="requirePermissions && !permissionGranted"
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary"
         @click="ensurePermissions"
       >
         Enable motion access
       </button>
-      <p v-else class="text-xs text-(--fg-subtle)">
+      <p v-else class="text-xs text-fg-subtle">
         Move or tilt your device to see acceleration and rotation update in real time.
       </p>
     </template>
diff --git a/vue/toolkit/src/composables/sensors/useDeviceOrientation/demo.vue b/vue/toolkit/src/composables/sensors/useDeviceOrientation/demo.vue
index 5fad36d..5374616 100644
--- a/vue/toolkit/src/composables/sensors/useDeviceOrientation/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useDeviceOrientation/demo.vue
@@ -24,17 +24,17 @@ const angles = computed(() => [
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300">
       DeviceOrientationEvent is not supported in this browser.
     </div>
 
     <template v-else>
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-4">
+      <div class="demo-card p-4 flex flex-col items-center gap-4">
         <div class="flex w-full items-center justify-between">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Device orientation</span>
+          <span class="demo-label">Device orientation</span>
           <span
-            class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+            class="demo-badge"
           >
             <span class="size-1.5 rounded-full transition" :class="isAbsolute ? 'bg-emerald-500' : 'bg-sky-500'" />
             {{ isAbsolute ? 'Absolute' : 'Relative' }}
@@ -43,29 +43,29 @@ const angles = computed(() => [
 
         <!-- Compass face + needle driven by alpha; card tilts via beta/gamma -->
         <div
-          class="relative flex size-40 items-center justify-center rounded-full border-2 border-(--border-strong) bg-(--bg-inset)"
+          class="relative flex size-40 items-center justify-center rounded-full border-2 border-border-strong bg-bg-inset"
           :style="tiltStyle"
         >
-          <span class="absolute top-1 text-[10px] font-bold text-(--fg-muted)">N</span>
-          <span class="absolute bottom-1 text-[10px] text-(--fg-subtle)">S</span>
-          <span class="absolute left-1.5 text-[10px] text-(--fg-subtle)">W</span>
-          <span class="absolute right-1.5 text-[10px] text-(--fg-subtle)">E</span>
+          <span class="absolute top-1 text-[10px] font-bold text-fg-muted">N</span>
+          <span class="absolute bottom-1 text-[10px] text-fg-subtle">S</span>
+          <span class="absolute left-1.5 text-[10px] text-fg-subtle">W</span>
+          <span class="absolute right-1.5 text-[10px] text-fg-subtle">E</span>
           <div
-            class="h-16 w-1 origin-bottom rounded-full bg-(--accent) transition-transform duration-150"
+            class="h-16 w-1 origin-bottom rounded-full bg-accent transition-transform duration-150"
             :style="{ transform: `rotate(${compassRotation}deg)` }"
           />
-          <div class="absolute size-2 rounded-full bg-(--border-strong)" />
+          <div class="absolute size-2 rounded-full bg-border-strong" />
         </div>
       </div>
 
       <div class="grid grid-cols-3 gap-2">
-        <div v-for="angle in angles" :key="angle.key" class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
-          <div class="font-mono text-base font-bold tabular-nums text-(--fg)">{{ fmt(angle.value) }}</div>
-          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">{{ angle.label }}</div>
+        <div v-for="angle in angles" :key="angle.key" class="rounded-lg border border-border bg-bg-inset p-2 text-center">
+          <div class="demo-stat text-base">{{ fmt(angle.value) }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-fg-subtle">{{ angle.label }}</div>
         </div>
       </div>
 
-      <p class="text-xs text-(--fg-subtle)">
+      <p class="text-xs text-fg-subtle">
         Tilt and rotate your device to move the compass needle and tilt the dial. Best viewed on a phone.
       </p>
     </template>
diff --git a/vue/toolkit/src/composables/sensors/useDevicePixelRatio/demo.vue b/vue/toolkit/src/composables/sensors/useDevicePixelRatio/demo.vue
index eb2612d..ecfe466 100644
--- a/vue/toolkit/src/composables/sensors/useDevicePixelRatio/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useDevicePixelRatio/demo.vue
@@ -19,25 +19,25 @@ const ratioLabel = computed(() => `${pixelRatio.value} dppx`);
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-4">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Device Pixel Ratio</span>
-        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
-          <span class="size-1.5 rounded-full bg-(--accent)" />
+        <span class="demo-label">Device Pixel Ratio</span>
+        <span class="demo-badge">
+          <span class="size-1.5 rounded-full bg-accent" />
           {{ classification }}
         </span>
       </div>
 
       <div class="flex items-end gap-2">
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ pixelRatio }}</span>
-        <span class="pb-1 text-sm text-(--fg-subtle)">{{ ratioLabel }}</span>
+        <span class="demo-stat text-3xl">{{ pixelRatio }}</span>
+        <span class="pb-1 text-sm text-fg-subtle">{{ ratioLabel }}</span>
       </div>
 
       <!-- Visualise how a single CSS pixel maps onto a grid of physical pixels -->
       <div class="flex items-center gap-3">
         <div
-          class="grid flex-shrink-0 gap-px rounded-md border border-(--border-strong) bg-(--bg-inset) p-1 transition-all"
+          class="grid flex-shrink-0 gap-px rounded-md border border-border-strong bg-bg-inset p-1 transition-all"
           :style="{
             gridTemplateColumns: `repeat(${Math.max(1, Math.round(pixelRatio))}, 0.75rem)`,
             gridTemplateRows: `repeat(${Math.max(1, Math.round(pixelRatio))}, 0.75rem)`,
@@ -46,18 +46,18 @@ const ratioLabel = computed(() => `${pixelRatio.value} dppx`);
           <span
             v-for="n in Math.max(1, Math.round(pixelRatio)) ** 2"
             :key="n"
-            class="size-3 rounded-[3px] bg-(--accent)/80"
+            class="size-3 rounded-[3px] bg-accent/80"
           />
         </div>
-        <p class="text-xs text-(--fg-muted)">
+        <p class="text-xs text-fg-muted">
           1 CSS pixel is rendered with about
-          <span class="font-mono font-semibold text-(--fg)">{{ physicalPerCss }}</span>
+          <span class="font-mono font-semibold text-fg">{{ physicalPerCss }}</span>
           physical pixels.
         </p>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Zoom the page (Cmd/Ctrl + and -) or drag this window to a monitor with a different scale to watch the ratio update live.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/sensors/useDevicesList/demo.vue b/vue/toolkit/src/composables/sensors/useDevicesList/demo.vue
index 929495e..7adc6f4 100644
--- a/vue/toolkit/src/composables/sensors/useDevicesList/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useDevicesList/demo.vue
@@ -45,7 +45,7 @@ function deviceLabel(device: MediaDeviceInfo, index: number, kind: string): stri
 </script>
 
 <template>
-  <div class="w-full max-w-md flex flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div
       v-if="!isSupported"
       class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300"
@@ -54,16 +54,16 @@ function deviceLabel(device: MediaDeviceInfo, index: number, kind: string): stri
     </div>
 
     <template v-else>
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="demo-card p-4 flex flex-col gap-4">
         <div class="flex items-center justify-between">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Media Devices</span>
+          <span class="demo-label">Media Devices</span>
           <span
-            class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium"
-            :class="permissionGranted ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'"
+            class="inline-flex items-center gap-1.5 rounded-md border border-border bg-bg-inset px-2 py-0.5 text-xs font-medium"
+            :class="permissionGranted ? 'text-emerald-600 dark:text-emerald-400' : 'text-fg-muted'"
           >
             <span
               class="size-1.5 rounded-full"
-              :class="permissionGranted ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+              :class="permissionGranted ? 'bg-emerald-500' : 'bg-fg-subtle'"
             />
             {{ permissionGranted ? 'Labels unlocked' : `${total} found` }}
           </span>
@@ -72,11 +72,11 @@ function deviceLabel(device: MediaDeviceInfo, index: number, kind: string): stri
         <div class="flex flex-col gap-3">
           <div v-for="group in groups" :key="group.key" class="flex flex-col gap-1.5">
             <div class="flex items-center justify-between">
-              <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">{{ group.label }}</span>
-              <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ group.devices.length }}</span>
+              <span class="demo-label">{{ group.label }}</span>
+              <span class="font-mono text-xs tabular-nums text-fg-muted">{{ group.devices.length }}</span>
             </div>
 
-            <p v-if="group.devices.length === 0" class="px-1 py-1 text-xs text-(--fg-subtle)">
+            <p v-if="group.devices.length === 0" class="px-1 py-1 text-xs text-fg-subtle">
               None detected
             </p>
 
@@ -84,9 +84,9 @@ function deviceLabel(device: MediaDeviceInfo, index: number, kind: string): stri
               <li
                 v-for="(device, index) in group.devices"
                 :key="device.deviceId || index"
-                class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 text-sm text-(--fg)"
+                class="flex items-center gap-2 rounded-lg border border-border bg-bg-inset px-3 py-2 text-sm text-fg"
               >
-                <span class="grid size-6 flex-shrink-0 place-items-center rounded-md bg-(--accent-subtle) font-mono text-xs font-bold text-(--accent-text)">
+                <span class="grid size-6 flex-shrink-0 place-items-center rounded-md bg-accent-subtle font-mono text-xs font-bold text-accent-text">
                   {{ group.icon }}
                 </span>
                 <span class="truncate">{{ deviceLabel(device, index, group.label) }}</span>
@@ -98,14 +98,14 @@ function deviceLabel(device: MediaDeviceInfo, index: number, kind: string): stri
 
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="permissionGranted || requesting"
         @click="grant"
       >
         {{ permissionGranted ? 'Permission granted' : requesting ? 'Requesting…' : 'Grant access to reveal names' }}
       </button>
 
-      <p class="text-xs text-(--fg-subtle)">
+      <p class="text-xs text-fg-subtle">
         Without permission, device names are hidden. Plug in or remove a device to watch the list re-enumerate automatically.
       </p>
     </template>
diff --git a/vue/toolkit/src/composables/sensors/useElementByPoint/demo.vue b/vue/toolkit/src/composables/sensors/useElementByPoint/demo.vue
index f6caec0..a71c21a 100644
--- a/vue/toolkit/src/composables/sensors/useElementByPoint/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useElementByPoint/demo.vue
@@ -45,7 +45,7 @@ const coords = computed(() => `${Math.round(x.value)}, ${Math.round(y.value)}`);
 </script>
 
 <template>
-  <div class="w-full max-w-md flex flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div
       v-if="!isSupported"
       class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300"
@@ -56,7 +56,7 @@ const coords = computed(() => `${Math.round(x.value)}, ${Math.round(y.value)}`);
     <template v-else>
       <!-- Probe surface: hover anywhere inside to feed live viewport coordinates -->
       <div
-        class="relative grid h-40 place-items-center overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset)"
+        class="relative grid h-40 place-items-center overflow-hidden rounded-xl border border-border bg-bg-inset"
         @mousemove="onMove"
         @mouseleave="onLeave"
       >
@@ -65,41 +65,41 @@ const coords = computed(() => `${Math.round(x.value)}, ${Math.round(y.value)}`);
             v-for="cell in ['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta']"
             :key="cell"
             :data-cell="cell"
-            class="grid place-items-center rounded-lg border border-(--border) bg-(--bg-elevated) text-xs font-medium text-(--fg-muted)"
+            class="grid place-items-center rounded-lg border border-border bg-bg-elevated text-xs font-medium text-fg-muted"
           >
             {{ cell }}
           </div>
         </div>
-        <span class="pointer-events-none relative rounded-md bg-(--bg)/70 px-2 py-1 text-xs text-(--fg-subtle) backdrop-blur">
+        <span class="pointer-events-none relative rounded-md bg-bg/70 px-2 py-1 text-xs text-fg-subtle backdrop-blur">
           {{ tracking ? 'Probing…' : 'Move your cursor here' }}
         </span>
       </div>
 
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums flex flex-col gap-1.5">
+      <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums flex flex-col gap-1.5">
         <div class="flex items-center justify-between">
-          <span class="text-(--fg-subtle)">point</span>
+          <span class="text-fg-subtle">point</span>
           <span>{{ coords }}</span>
         </div>
         <div class="flex items-center justify-between gap-3">
-          <span class="text-(--fg-subtle)">element</span>
-          <span class="truncate text-(--accent-text)">{{ elementInfo?.selector ?? '—' }}</span>
+          <span class="text-fg-subtle">element</span>
+          <span class="truncate text-accent-text">{{ elementInfo?.selector ?? '—' }}</span>
         </div>
         <div v-if="elementInfo?.text" class="flex items-center justify-between gap-3">
-          <span class="text-(--fg-subtle)">text</span>
-          <span class="truncate text-(--fg-muted)">{{ elementInfo.text }}</span>
+          <span class="text-fg-subtle">text</span>
+          <span class="truncate text-fg-muted">{{ elementInfo.text }}</span>
         </div>
       </div>
 
       <div class="flex items-center gap-2">
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="onToggle"
         >
-          <span class="size-1.5 rounded-full" :class="active ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+          <span class="size-1.5 rounded-full" :class="active ? 'bg-emerald-500' : 'bg-fg-subtle'" />
           {{ active ? 'Pause sampling' : 'Resume sampling' }}
         </button>
-        <span class="text-xs text-(--fg-subtle)">Sampled every animation frame</span>
+        <span class="text-xs text-fg-subtle">Sampled every animation frame</span>
       </div>
     </template>
   </div>
diff --git a/vue/toolkit/src/composables/sensors/useElementHover/demo.vue b/vue/toolkit/src/composables/sensors/useElementHover/demo.vue
index 0b0aa6a..52adf4e 100644
--- a/vue/toolkit/src/composables/sensors/useElementHover/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useElementHover/demo.vue
@@ -17,53 +17,53 @@ const isDelayedHovered = useElementHover(delayed, {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <!-- Instant: state flips the moment the pointer enters / leaves -->
     <div
       ref="instant"
-      class="flex flex-col gap-1 rounded-xl border bg-(--bg-elevated) p-4 transition-all duration-200"
+      class="flex flex-col gap-1 rounded-xl border bg-bg-elevated p-4 transition-all duration-200"
       :class="isInstantHovered
-        ? 'border-(--accent) ring-2 ring-(--ring) -translate-y-0.5'
-        : 'border-(--border)'"
+        ? 'border-accent ring-2 ring-ring -translate-y-0.5'
+        : 'border-border'"
     >
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Instant</span>
+        <span class="demo-label">Instant</span>
         <span
-          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium"
-          :class="isInstantHovered ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'"
+          class="inline-flex items-center gap-1.5 rounded-md border border-border bg-bg-inset px-2 py-0.5 text-xs font-medium"
+          :class="isInstantHovered ? 'text-emerald-600 dark:text-emerald-400' : 'text-fg-muted'"
         >
-          <span class="size-1.5 rounded-full" :class="isInstantHovered ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+          <span class="size-1.5 rounded-full" :class="isInstantHovered ? 'bg-emerald-500' : 'bg-fg-subtle'" />
           {{ isInstantHovered ? 'hovered' : 'idle' }}
         </span>
       </div>
-      <p class="text-sm text-(--fg-muted)">Hover this card to flip the state immediately.</p>
+      <p class="text-sm text-fg-muted">Hover this card to flip the state immediately.</p>
     </div>
 
     <!-- Delayed: enter/leave delays smooth out flicker -->
     <div
       ref="delayed"
-      class="flex flex-col gap-2 rounded-xl border bg-(--bg-elevated) p-4 transition-all duration-200"
+      class="flex flex-col gap-2 rounded-xl border bg-bg-elevated p-4 transition-all duration-200"
       :class="isDelayedHovered
-        ? 'border-(--accent) ring-2 ring-(--ring) -translate-y-0.5'
-        : 'border-(--border)'"
+        ? 'border-accent ring-2 ring-ring -translate-y-0.5'
+        : 'border-border'"
     >
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Delayed</span>
+        <span class="demo-label">Delayed</span>
         <span
-          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium"
-          :class="isDelayedHovered ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'"
+          class="inline-flex items-center gap-1.5 rounded-md border border-border bg-bg-inset px-2 py-0.5 text-xs font-medium"
+          :class="isDelayedHovered ? 'text-emerald-600 dark:text-emerald-400' : 'text-fg-muted'"
         >
-          <span class="size-1.5 rounded-full" :class="isDelayedHovered ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+          <span class="size-1.5 rounded-full" :class="isDelayedHovered ? 'bg-emerald-500' : 'bg-fg-subtle'" />
           {{ isDelayedHovered ? 'hovered' : 'idle' }}
         </span>
       </div>
-      <p class="text-sm text-(--fg-muted)">
-        Waits <span class="font-mono text-(--fg)">{{ delayEnter }}ms</span> to enter,
-        <span class="font-mono text-(--fg)">{{ delayLeave }}ms</span> to leave.
+      <p class="text-sm text-fg-muted">
+        Waits <span class="font-mono text-fg">{{ delayEnter }}ms</span> to enter,
+        <span class="font-mono text-fg">{{ delayLeave }}ms</span> to leave.
       </p>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Enter/leave delays debounce hover flicker — useful for tooltips and submenus that should not vanish the instant you cross a gap.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/sensors/useEscapeKey/demo.vue b/vue/toolkit/src/composables/sensors/useEscapeKey/demo.vue
index 6fc1d04..256137e 100644
--- a/vue/toolkit/src/composables/sensors/useEscapeKey/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useEscapeKey/demo.vue
@@ -42,18 +42,18 @@ watch(dialogOpen, (open) => {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-3">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Escape Stack</span>
-        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="demo-label">Escape Stack</span>
+        <span class="demo-badge">
           {{ (panelOpen ? 1 : 0) + (dialogOpen ? 1 : 0) }} open
         </span>
       </div>
 
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary"
         @click="panelOpen = true"
       >
         Open panel
@@ -62,15 +62,15 @@ watch(dialogOpen, (open) => {
       <!-- Outer layer -->
       <div
         v-if="panelOpen"
-        class="flex flex-col gap-3 rounded-lg border border-(--border-strong) bg-(--bg-inset) p-3"
+        class="flex flex-col gap-3 rounded-lg border border-border-strong bg-bg-inset p-3"
       >
-        <p class="text-sm text-(--fg)">
-          Panel open. Press <kbd class="rounded border border-(--border) bg-(--bg-elevated) px-1.5 py-0.5 font-mono text-xs text-(--fg)">Esc</kbd> to dismiss, or open a nested dialog on top.
+        <p class="text-sm text-fg">
+          Panel open. Press <kbd class="rounded border border-border bg-bg-elevated px-1.5 py-0.5 font-mono text-xs text-fg">Esc</kbd> to dismiss, or open a nested dialog on top.
         </p>
 
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="dialogOpen = true"
         >
           Open nested dialog
@@ -79,24 +79,24 @@ watch(dialogOpen, (open) => {
         <!-- Inner layer: topmost, so Escape closes this first -->
         <div
           v-if="dialogOpen"
-          class="flex items-center justify-between gap-2 rounded-lg border border-(--accent) bg-(--accent-subtle) p-3"
+          class="flex items-center justify-between gap-2 rounded-lg border border-accent bg-accent-subtle p-3"
         >
-          <p class="text-sm text-(--accent-text)">
+          <p class="text-sm text-accent-text">
             Nested dialog — Esc closes me before the panel.
           </p>
-          <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          <span class="inline-flex items-center gap-1.5 rounded-md border border-border bg-bg-elevated px-2 py-0.5 text-xs font-medium text-fg-muted">
             top
           </span>
         </div>
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) flex items-center justify-between">
-      <span class="text-(--fg-subtle)">last dismissed via Esc</span>
-      <span class="text-(--accent-text)">{{ lastDismissed ?? '—' }}</span>
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg flex items-center justify-between">
+      <span class="text-fg-subtle">last dismissed via Esc</span>
+      <span class="text-accent-text">{{ lastDismissed ?? '—' }}</span>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Only the topmost layer responds to a single Escape press, so nested dismissables close in the right order.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/sensors/useFocus/demo.vue b/vue/toolkit/src/composables/sensors/useFocus/demo.vue
index 56ee3ce..e58ab76 100644
--- a/vue/toolkit/src/composables/sensors/useFocus/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useFocus/demo.vue
@@ -9,9 +9,9 @@ const email = ref('ada@example.com');
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="space-y-2">
-      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <label class="demo-label">
         Newsletter email
       </label>
       <input
@@ -19,22 +19,22 @@ const email = ref('ada@example.com');
         v-model="email"
         type="email"
         placeholder="you@example.com"
-        class="w-full rounded-lg border bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:outline-none focus:ring-2 focus:ring-(--ring)"
-        :class="focused ? 'border-(--accent)' : 'border-(--border)'"
+        class="w-full rounded-lg border bg-bg px-3 py-2 text-sm text-fg placeholder:text-fg-subtle transition focus:outline-none focus:ring-2 focus:ring-ring"
+        :class="focused ? 'border-accent' : 'border-border'"
       >
     </div>
 
-    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
-      <span class="text-sm text-(--fg-muted)">Focus state</span>
+    <div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset px-3 py-2.5">
+      <span class="text-sm text-fg-muted">Focus state</span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
         :class="focused
           ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-          : 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          : 'border border-border bg-bg-inset text-fg-muted'"
       >
         <span
           class="size-1.5 rounded-full transition"
-          :class="focused ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+          :class="focused ? 'bg-emerald-500' : 'bg-fg-subtle'"
         />
         {{ focused ? 'Focused' : 'Blurred' }}
       </span>
@@ -44,7 +44,7 @@ const email = ref('ada@example.com');
       <button
         type="button"
         :disabled="focused"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="focused = true"
       >
         Focus input
@@ -52,14 +52,14 @@ const email = ref('ada@example.com');
       <button
         type="button"
         :disabled="!focused"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="focused = false"
       >
         Blur input
       </button>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       <code class="font-mono">focused</code> is writable &mdash; click the buttons or use Tab to drive it.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/sensors/useFocusWithin/demo.vue b/vue/toolkit/src/composables/sensors/useFocusWithin/demo.vue
index 5ecaefe..5979603 100644
--- a/vue/toolkit/src/composables/sensors/useFocusWithin/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useFocusWithin/demo.vue
@@ -9,18 +9,18 @@ const { focused } = useFocusWithin(form);
 <template>
   <div class="flex w-full max-w-sm flex-col gap-3">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Shipping address
       </span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
         :class="focused
           ? 'bg-sky-500/10 text-sky-600 dark:text-sky-400'
-          : 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          : 'border border-border bg-bg-inset text-fg-muted'"
       >
         <span
           class="size-1.5 rounded-full transition"
-          :class="focused ? 'bg-sky-500' : 'bg-(--fg-subtle)'"
+          :class="focused ? 'bg-sky-500' : 'bg-fg-subtle'"
         />
         {{ focused ? 'Editing' : 'Idle' }}
       </span>
@@ -28,39 +28,39 @@ const { focused } = useFocusWithin(form);
 
     <form
       ref="form"
-      class="space-y-3 rounded-xl border bg-(--bg-elevated) p-4 transition"
-      :class="focused ? 'border-(--accent) ring-2 ring-(--ring)' : 'border-(--border)'"
+      class="space-y-3 rounded-xl border bg-bg-elevated p-4 transition"
+      :class="focused ? 'border-accent ring-2 ring-ring' : 'border-border'"
       @submit.prevent
     >
       <input
         type="text"
         placeholder="Full name"
         value="Grace Hopper"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
       >
       <input
         type="text"
         placeholder="Street address"
         value="1701 Enterprise Ave"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
       >
       <div class="flex gap-3">
         <input
           type="text"
           placeholder="City"
           value="Arlington"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="demo-input"
         >
         <input
           type="text"
           placeholder="ZIP"
           value="22202"
-          class="w-28 rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="w-28 rounded-lg border border-border bg-bg px-3 py-2 text-sm text-fg placeholder:text-fg-subtle transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring"
         >
       </div>
     </form>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       The whole panel highlights while focus lives in <em>any</em> descendant field &mdash; tabbing between inputs stays "Editing".
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/sensors/useFps/demo.vue b/vue/toolkit/src/composables/sensors/useFps/demo.vue
index 11aaa63..d14d37c 100644
--- a/vue/toolkit/src/composables/sensors/useFps/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useFps/demo.vue
@@ -32,10 +32,10 @@ const barWidth = computed(() => `${Math.min(100, (fps.value / 60) * 100)}%`);
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4">
       <div class="flex items-baseline justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <span class="demo-label">
           Frames / second
         </span>
         <span class="inline-flex items-center gap-1.5 text-xs font-medium" :class="health.cls">
@@ -45,11 +45,11 @@ const barWidth = computed(() => `${Math.min(100, (fps.value / 60) * 100)}%`);
       </div>
 
       <div class="mt-1 flex items-baseline gap-2">
-        <span class="font-mono text-4xl font-bold tabular-nums text-(--fg)">{{ fps }}</span>
-        <span class="text-sm text-(--fg-subtle)">fps</span>
+        <span class="demo-stat text-4xl">{{ fps }}</span>
+        <span class="text-sm text-fg-subtle">fps</span>
       </div>
 
-      <div class="mt-3 h-1.5 overflow-hidden rounded-full bg-(--bg-inset)">
+      <div class="mt-3 h-1.5 overflow-hidden rounded-full bg-bg-inset">
         <div
           class="h-full rounded-full transition-[width] duration-150"
           :class="health.dot"
@@ -59,22 +59,22 @@ const barWidth = computed(() => `${Math.min(100, (fps.value / 60) * 100)}%`);
     </div>
 
     <div class="grid grid-cols-2 gap-3">
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Min</div>
-        <div class="font-mono text-xl font-bold tabular-nums text-(--fg)">
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <div class="demo-label">Min</div>
+        <div class="demo-stat text-xl">
           {{ Number.isFinite(min) ? min : '—' }}
         </div>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Max</div>
-        <div class="font-mono text-xl font-bold tabular-nums text-(--fg)">{{ max }}</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <div class="demo-label">Max</div>
+        <div class="demo-stat text-xl">{{ max }}</div>
       </div>
     </div>
 
     <div class="space-y-1.5">
       <div class="flex items-center justify-between text-xs">
-        <span class="font-medium uppercase tracking-wide text-(--fg-subtle)">Simulated load</span>
-        <span class="font-mono tabular-nums text-(--fg-muted)">{{ stress }} ms/frame</span>
+        <span class="font-medium uppercase tracking-wide text-fg-subtle">Simulated load</span>
+        <span class="font-mono tabular-nums text-fg-muted">{{ stress }} ms/frame</span>
       </div>
       <input
         v-model.number="stress"
@@ -82,21 +82,21 @@ const barWidth = computed(() => `${Math.min(100, (fps.value / 60) * 100)}%`);
         min="0"
         max="40"
         step="2"
-        class="w-full accent-(--accent)"
+        class="w-full accent-accent"
       >
     </div>
 
     <div class="flex gap-2">
       <button
         type="button"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn flex-1"
         @click="isActive ? pause() : resume()"
       >
         {{ isActive ? 'Pause' : 'Resume' }}
       </button>
       <button
         type="button"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn flex-1"
         @click="reset"
       >
         Reset min / max
diff --git a/vue/toolkit/src/composables/sensors/useGamepad/demo.vue b/vue/toolkit/src/composables/sensors/useGamepad/demo.vue
index 6b706ca..3b89456 100644
--- a/vue/toolkit/src/composables/sensors/useGamepad/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useGamepad/demo.vue
@@ -27,7 +27,7 @@ const faceButtons = computed(() => {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       v-if="!isSupported"
       class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center text-sm text-amber-700 dark:text-amber-300"
@@ -37,18 +37,18 @@ const faceButtons = computed(() => {
 
     <template v-else>
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <span class="demo-label">
           Gamepad
         </span>
         <span
           class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
           :class="hasPad
             ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-            : 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+            : 'border border-border bg-bg-inset text-fg-muted'"
         >
           <span
             class="size-1.5 rounded-full"
-            :class="hasPad ? 'bg-emerald-500 animate-pulse' : 'bg-(--fg-subtle)'"
+            :class="hasPad ? 'bg-emerald-500 animate-pulse' : 'bg-fg-subtle'"
           />
           {{ hasPad ? 'Connected' : 'Waiting' }}
         </span>
@@ -56,23 +56,23 @@ const faceButtons = computed(() => {
 
       <div
         v-if="!hasPad"
-        class="rounded-xl border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center"
+        class="rounded-xl border border-dashed border-border bg-bg-inset p-6 text-center"
       >
-        <p class="text-sm font-medium text-(--fg)">No controller detected</p>
-        <p class="mt-1 text-xs text-(--fg-subtle)">
+        <p class="text-sm font-medium text-fg">No controller detected</p>
+        <p class="mt-1 text-xs text-fg-subtle">
           Connect a gamepad and press any button to wake it.
         </p>
       </div>
 
       <template v-else-if="controller">
-        <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-          <div class="truncate text-xs text-(--fg-subtle)" :title="gamepad?.id">
+        <div class="demo-card p-4">
+          <div class="truncate text-xs text-fg-subtle" :title="gamepad?.id">
             {{ gamepad?.id }}
           </div>
 
           <div class="mt-3 grid grid-cols-2 gap-4">
             <div class="space-y-2">
-              <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+              <div class="demo-label">
                 Buttons
               </div>
               <div class="flex flex-wrap gap-1.5">
@@ -81,8 +81,8 @@ const faceButtons = computed(() => {
                   :key="b.key"
                   class="inline-flex size-7 items-center justify-center rounded-md border text-xs font-bold tabular-nums transition"
                   :class="b.pressed
-                    ? `border-(--accent) bg-(--accent-subtle) ${b.color}`
-                    : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+                    ? `border-accent bg-accent-subtle ${b.color}`
+                    : 'border-border bg-bg-inset text-fg-muted'"
                 >
                   {{ b.key }}
                 </span>
@@ -90,7 +90,7 @@ const faceButtons = computed(() => {
             </div>
 
             <div class="space-y-2">
-              <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+              <div class="demo-label">
                 Triggers
               </div>
               <div class="space-y-1.5">
@@ -99,10 +99,10 @@ const faceButtons = computed(() => {
                   :key="side"
                   class="flex items-center gap-2"
                 >
-                  <span class="w-6 font-mono text-xs text-(--fg-muted)">{{ side }}</span>
-                  <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-(--bg-inset)">
+                  <span class="w-6 font-mono text-xs text-fg-muted">{{ side }}</span>
+                  <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-bg-inset">
                     <div
-                      class="h-full rounded-full bg-(--accent) transition-[width]"
+                      class="h-full rounded-full bg-accent transition-[width]"
                       :style="{ width: `${t.value * 100}%` }"
                     />
                   </div>
@@ -117,13 +117,13 @@ const faceButtons = computed(() => {
               :key="side"
               class="space-y-2"
             >
-              <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+              <div class="demo-label">
                 {{ side }} stick
               </div>
-              <div class="relative aspect-square w-full rounded-lg border border-(--border) bg-(--bg-inset)">
+              <div class="relative aspect-square w-full rounded-lg border border-border bg-bg-inset">
                 <div
                   class="absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full transition-all"
-                  :class="stick.button.pressed ? 'bg-(--accent)' : 'bg-(--fg-muted)'"
+                  :class="stick.button.pressed ? 'bg-accent' : 'bg-fg-muted'"
                   :style="{ left: pct(stick.horizontal), top: pct(stick.vertical) }"
                 />
               </div>
@@ -133,7 +133,7 @@ const faceButtons = computed(() => {
       </template>
     </template>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       State polls every animation frame and stays paused while no pad is connected.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/sensors/useGeolocation/demo.vue b/vue/toolkit/src/composables/sensors/useGeolocation/demo.vue
index 4f7d46b..d506707 100644
--- a/vue/toolkit/src/composables/sensors/useGeolocation/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useGeolocation/demo.vue
@@ -24,7 +24,7 @@ function fmt(value: number | null, digits = 5): string {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       v-if="!isSupported"
       class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center text-sm text-amber-700 dark:text-amber-300"
@@ -34,54 +34,54 @@ function fmt(value: number | null, digits = 5): string {
 
     <template v-else>
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <span class="demo-label">
           Geolocation
         </span>
         <span
           class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
           :class="isActive
             ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-            : 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+            : 'border border-border bg-bg-inset text-fg-muted'"
         >
           <span
             class="size-1.5 rounded-full"
-            :class="isActive ? 'bg-emerald-500 animate-pulse' : 'bg-(--fg-subtle)'"
+            :class="isActive ? 'bg-emerald-500 animate-pulse' : 'bg-fg-subtle'"
           />
           {{ isActive ? 'Watching' : 'Idle' }}
         </span>
       </div>
 
       <div class="grid grid-cols-2 gap-3">
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Latitude</div>
-          <div class="mt-0.5 font-mono text-lg font-bold tabular-nums text-(--fg)">
+        <div class="rounded-lg border border-border bg-bg-inset p-3">
+          <div class="demo-label">Latitude</div>
+          <div class="demo-stat mt-0.5 text-lg">
             {{ ready ? fmt(coords.latitude) : '—' }}
           </div>
         </div>
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Longitude</div>
-          <div class="mt-0.5 font-mono text-lg font-bold tabular-nums text-(--fg)">
+        <div class="rounded-lg border border-border bg-bg-inset p-3">
+          <div class="demo-label">Longitude</div>
+          <div class="demo-stat mt-0.5 text-lg">
             {{ ready ? fmt(coords.longitude) : '—' }}
           </div>
         </div>
       </div>
 
-      <dl class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-sm">
+      <dl class="rounded-lg border border-border bg-bg-inset p-3 text-sm">
         <div class="flex items-center justify-between py-0.5">
-          <dt class="text-(--fg-muted)">Accuracy</dt>
-          <dd class="font-mono tabular-nums text-(--fg)">
+          <dt class="text-fg-muted">Accuracy</dt>
+          <dd class="font-mono tabular-nums text-fg">
             {{ ready ? `± ${Math.round(coords.accuracy)} m` : '—' }}
           </dd>
         </div>
         <div class="flex items-center justify-between py-0.5">
-          <dt class="text-(--fg-muted)">Heading</dt>
-          <dd class="font-mono tabular-nums text-(--fg)">
+          <dt class="text-fg-muted">Heading</dt>
+          <dd class="font-mono tabular-nums text-fg">
             {{ ready ? `${fmt(coords.heading, 0)}°` : '—' }}
           </dd>
         </div>
         <div class="flex items-center justify-between py-0.5">
-          <dt class="text-(--fg-muted)">Located at</dt>
-          <dd class="font-mono tabular-nums text-(--fg)">{{ located }}</dd>
+          <dt class="text-fg-muted">Located at</dt>
+          <dd class="font-mono tabular-nums text-fg">{{ located }}</dd>
         </div>
       </dl>
 
@@ -96,7 +96,7 @@ function fmt(value: number | null, digits = 5): string {
         <button
           v-if="!isActive"
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          class="demo-btn-primary flex-1"
           @click="resume"
         >
           {{ ready ? 'Resume watching' : 'Find my location' }}
@@ -104,14 +104,14 @@ function fmt(value: number | null, digits = 5): string {
         <button
           v-else
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn flex-1"
           @click="pause"
         >
           Stop watching
         </button>
       </div>
 
-      <p class="text-xs text-(--fg-subtle)">
+      <p class="text-xs text-fg-subtle">
         Requires permission &mdash; nothing is requested until you press the button.
       </p>
     </template>
diff --git a/vue/toolkit/src/composables/sensors/useGeolocation/index.ts b/vue/toolkit/src/composables/sensors/useGeolocation/index.ts
index 1417304..2af8012 100644
--- a/vue/toolkit/src/composables/sensors/useGeolocation/index.ts
+++ b/vue/toolkit/src/composables/sensors/useGeolocation/index.ts
@@ -206,15 +206,16 @@ export function useGeolocation(options: UseGeolocationOptions = {}): UseGeolocat
   }
 
   // Restart the watcher when reactive position options change while active.
+  // Watch the three primitive option getters directly (no per-run options object
+  // allocation, no deep traversal) — fires on any value change, equality-checked.
   watch(
-    () => resolveOptions(),
+    [() => toValue(enableHighAccuracy), () => toValue(maximumAge), () => toValue(timeout)],
     () => {
       if (isActive.value) {
         pause();
         resume();
       }
     },
-    { deep: true },
   );
 
   if (immediate)
diff --git a/vue/toolkit/src/composables/sensors/useIdle/demo.vue b/vue/toolkit/src/composables/sensors/useIdle/demo.vue
index f85d468..52dc23c 100644
--- a/vue/toolkit/src/composables/sensors/useIdle/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useIdle/demo.vue
@@ -28,10 +28,10 @@ const lastActiveLabel = computed(() =>
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4">
       <div class="flex items-center justify-between gap-3">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Status</span>
+        <span class="demo-label">Status</span>
         <span
           class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
           :class="idle
@@ -46,23 +46,23 @@ const lastActiveLabel = computed(() =>
         </span>
       </div>
 
-      <p class="mt-3 text-sm text-(--fg-muted)">
+      <p class="mt-3 text-sm text-fg-muted">
         Move your mouse, type, or scroll to stay active. After
-        <span class="font-medium text-(--fg)">{{ (timeout / 1000).toFixed(0) }}s</span>
+        <span class="font-medium text-fg">{{ (timeout / 1000).toFixed(0) }}s</span>
         without activity you go idle.
       </p>
     </div>
 
     <div class="grid grid-cols-2 gap-3">
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Inactive for</div>
-        <div class="mt-1 font-mono text-2xl font-bold tabular-nums text-(--fg)">
-          {{ secondsSinceActive }}<span class="text-base text-(--fg-subtle)">s</span>
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <div class="demo-label">Inactive for</div>
+        <div class="demo-stat mt-1 text-2xl">
+          {{ secondsSinceActive }}<span class="text-base text-fg-subtle">s</span>
         </div>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last active</div>
-        <div class="mt-1 font-mono text-2xl font-bold tabular-nums text-(--fg)">
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <div class="demo-label">Last active</div>
+        <div class="demo-stat mt-1 text-2xl">
           {{ lastActiveLabel }}
         </div>
       </div>
@@ -70,27 +70,27 @@ const lastActiveLabel = computed(() =>
 
     <div class="flex flex-wrap items-center gap-2">
       <button
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary"
         @click="reset()"
       >
         Reset timer
       </button>
       <button
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="!isPending"
         @click="stop()"
       >
         Stop
       </button>
       <button
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="isPending"
         @click="start()"
       >
         Start
       </button>
 
-      <span class="ml-auto inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-badge ml-auto">
         tracking: {{ isPending ? 'on' : 'off' }}
       </span>
     </div>
diff --git a/vue/toolkit/src/composables/sensors/useInfiniteScroll/demo.vue b/vue/toolkit/src/composables/sensors/useInfiniteScroll/demo.vue
index 89b6a86..3690d10 100644
--- a/vue/toolkit/src/composables/sensors/useInfiniteScroll/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useInfiniteScroll/demo.vue
@@ -43,24 +43,24 @@ const { isLoading } = useInfiniteScroll(
 <template>
   <div class="flex w-full max-w-sm flex-col gap-3">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Repositories</span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums">
+      <span class="demo-label">Repositories</span>
+      <span class="demo-badge tabular-nums">
         {{ items.length }} / {{ MAX_ITEMS }} loaded
       </span>
     </div>
 
     <div
       ref="scrollEl"
-      class="h-72 overflow-y-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-2"
+      class="demo-card h-72 overflow-y-auto p-2"
     >
       <ul class="flex flex-col gap-1.5">
         <li
           v-for="repo in items"
           :key="repo.id"
-          class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg) px-3 py-2"
+          class="flex items-center justify-between gap-3 rounded-lg border border-border bg-bg px-3 py-2"
         >
-          <span class="truncate font-mono text-sm text-(--fg)">{{ repo.name }}</span>
-          <span class="inline-flex items-center gap-1 text-xs font-medium tabular-nums text-(--fg-muted)">
+          <span class="truncate font-mono text-sm text-fg">{{ repo.name }}</span>
+          <span class="inline-flex items-center gap-1 text-xs font-medium tabular-nums text-fg-muted">
             <span class="text-amber-500">★</span>{{ repo.stars.toLocaleString() }}
           </span>
         </li>
@@ -68,22 +68,22 @@ const { isLoading } = useInfiniteScroll(
 
       <div
         v-if="isLoading"
-        class="flex items-center justify-center gap-2 py-4 text-sm text-(--fg-subtle)"
+        class="flex items-center justify-center gap-2 py-4 text-sm text-fg-subtle"
       >
-        <span class="size-3.5 animate-spin rounded-full border-2 border-(--border-strong) border-t-transparent" />
+        <span class="size-3.5 animate-spin rounded-full border-2 border-border-strong border-t-transparent" />
         Loading more…
       </div>
 
       <div
         v-else-if="!canLoadMore()"
-        class="py-4 text-center text-sm text-(--fg-subtle)"
+        class="py-4 text-center text-sm text-fg-subtle"
       >
         You've reached the end.
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
-      Scroll to within <span class="font-medium text-(--fg-muted)">24px</span> of the bottom to fetch the next page.
+    <p class="text-xs text-fg-subtle">
+      Scroll to within <span class="font-medium text-fg-muted">24px</span> of the bottom to fetch the next page.
     </p>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/sensors/useKeyModifier/demo.vue b/vue/toolkit/src/composables/sensors/useKeyModifier/demo.vue
index 8c445b2..94abc57 100644
--- a/vue/toolkit/src/composables/sensors/useKeyModifier/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useKeyModifier/demo.vue
@@ -24,22 +24,22 @@ const heldKeys = computed(() => [
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <p class="text-sm text-(--fg-muted)">
-      Toggle <span class="font-medium text-(--fg)">Caps Lock</span> / <span class="font-medium text-(--fg)">Num Lock</span>,
+  <div class="demo-stack max-w-sm">
+    <p class="text-sm text-fg-muted">
+      Toggle <span class="font-medium text-fg">Caps Lock</span> / <span class="font-medium text-fg">Num Lock</span>,
       or hold a modifier key, then press any key (or click here) to refresh state.
     </p>
 
     <div class="flex flex-col gap-2">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Lock keys</span>
+      <span class="demo-label">Lock keys</span>
       <div class="grid grid-cols-2 gap-2">
         <div
           v-for="key in lockKeys"
           :key="key.label"
           class="flex items-center justify-between gap-2 rounded-lg border px-3 py-2 transition"
           :class="key.state
-            ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
-            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+            ? 'border-accent bg-accent-subtle text-accent-text'
+            : 'border-border bg-bg-inset text-fg-muted'"
         >
           <span class="text-sm font-medium">{{ key.label }}</span>
           <span class="font-mono text-xs tabular-nums">
@@ -50,7 +50,7 @@ const heldKeys = computed(() => [
     </div>
 
     <div class="flex flex-col gap-2">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Held modifiers</span>
+      <span class="demo-label">Held modifiers</span>
       <div class="grid grid-cols-4 gap-2">
         <div
           v-for="key in heldKeys"
@@ -58,20 +58,20 @@ const heldKeys = computed(() => [
           class="flex flex-col items-center gap-1 rounded-lg border px-2 py-2.5 text-center transition"
           :class="key.state
             ? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-            : 'border-(--border) bg-(--bg-inset) text-(--fg-subtle)'"
+            : 'border-border bg-bg-inset text-fg-subtle'"
         >
           <span class="text-xs font-medium">{{ key.label }}</span>
           <span
             class="size-2 rounded-full transition"
-            :class="key.state ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+            :class="key.state ? 'bg-emerald-500' : 'bg-border-strong'"
           />
         </div>
       </div>
     </div>
 
-    <p class="rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 text-xs text-(--fg-subtle)">
-      Modifier state is read from <span class="font-mono text-(--fg-muted)">getModifierState</span>, so it stays
-      <span class="font-mono text-(--fg-muted)">null</span> until the first matching event arrives.
+    <p class="rounded-lg border border-border bg-bg-inset px-3 py-2 text-xs text-fg-subtle">
+      Modifier state is read from <span class="font-mono text-fg-muted">getModifierState</span>, so it stays
+      <span class="font-mono text-fg-muted">null</span> until the first matching event arrives.
     </p>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/sensors/useMagicKeys/demo.vue b/vue/toolkit/src/composables/sensors/useMagicKeys/demo.vue
index 8ac46f1..9a87cbf 100644
--- a/vue/toolkit/src/composables/sensors/useMagicKeys/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useMagicKeys/demo.vue
@@ -37,18 +37,18 @@ const combos = computed(() => [
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <p class="text-sm text-(--fg-muted)">
-      Press keys or try a combo — <span class="font-medium text-(--fg)">Ctrl + S</span>,
-      <span class="font-medium text-(--fg)">Cmd + K</span>, or
-      <span class="font-medium text-(--fg)">Ctrl + A</span>.
+  <div class="demo-stack max-w-sm">
+    <p class="text-sm text-fg-muted">
+      Press keys or try a combo — <span class="font-medium text-fg">Ctrl + S</span>,
+      <span class="font-medium text-fg">Cmd + K</span>, or
+      <span class="font-medium text-fg">Ctrl + A</span>.
     </p>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+    <div class="demo-card p-4">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Currently pressed</span>
+        <span class="demo-label">Currently pressed</span>
         <button
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-2.5 py-1 text-xs font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-border bg-bg-elevated px-2.5 py-1 text-xs font-medium text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           :disabled="!pressed.length"
           @click="reset()"
         >
@@ -60,11 +60,11 @@ const combos = computed(() => [
         <kbd
           v-for="key in pressed"
           :key="key"
-          class="inline-flex min-w-7 items-center justify-center rounded-md border border-(--border-strong) bg-(--bg-inset) px-2 py-1 font-mono text-xs font-semibold text-(--fg) shadow-sm"
+          class="inline-flex min-w-7 items-center justify-center rounded-md border border-border-strong bg-bg-inset px-2 py-1 font-mono text-xs font-semibold text-fg shadow-sm"
         >
           {{ key === ' ' ? 'Space' : key }}
         </kbd>
-        <span v-if="!pressed.length" class="text-sm text-(--fg-subtle)">No keys held</span>
+        <span v-if="!pressed.length" class="text-sm text-fg-subtle">No keys held</span>
       </div>
     </div>
 
@@ -74,19 +74,19 @@ const combos = computed(() => [
         :key="combo.label"
         class="flex flex-col items-center gap-1 rounded-lg border px-2 py-2.5 text-center text-xs font-medium transition"
         :class="combo.active
-          ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          ? 'border-accent bg-accent-subtle text-accent-text'
+          : 'border-border bg-bg-inset text-fg-muted'"
       >
         {{ combo.label }}
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg) tabular-nums">
-      <div class="mb-1.5 text-(--fg-subtle)">Triggered actions</div>
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-xs text-fg tabular-nums">
+      <div class="mb-1.5 text-fg-subtle">Triggered actions</div>
       <ul v-if="log.length" class="flex flex-col gap-0.5">
-        <li v-for="entry in log" :key="entry" class="text-(--fg-muted)">{{ entry }}</li>
+        <li v-for="entry in log" :key="entry" class="text-fg-muted">{{ entry }}</li>
       </ul>
-      <span v-else class="text-(--fg-subtle)">Waiting for a chord…</span>
+      <span v-else class="text-fg-subtle">Waiting for a chord…</span>
     </div>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/sensors/useMagicKeys/index.ts b/vue/toolkit/src/composables/sensors/useMagicKeys/index.ts
index 0cc6971..5cbc1a2 100644
--- a/vue/toolkit/src/composables/sensors/useMagicKeys/index.ts
+++ b/vue/toolkit/src/composables/sensors/useMagicKeys/index.ts
@@ -5,6 +5,10 @@ import { computed, reactive, shallowRef, toValue } from 'vue';
 import { useEventListener } from '@/composables/browser/useEventListener';
 import { defaultWindow } from '@/types';
 
+// Combo separator (`ctrl+a`, `ctrl_a`, `ctrl-a`). Non-global so it is safe to
+// reuse for both `.test()` (no lastIndex state) and `.split()`.
+const COMBO_SEPARATOR_RE = /* #__PURE__ */ /[+_-]/;
+
 export type UseMagicKeysAliasMap = Readonly<Record<string, string>>;
 
 /**
@@ -105,7 +109,7 @@ type KeyRefs = Record<string, Ref<boolean> | ShallowRef<boolean> | ComputedRef<b
  */
 export function useMagicKeys(options?: UseMagicKeysOptions<false>): MagicKeys<false>;
 export function useMagicKeys(options: UseMagicKeysOptions<true>): MagicKeys<true>;
-export function useMagicKeys(options: UseMagicKeysOptions<boolean> = {}): any {
+export function useMagicKeys(options: UseMagicKeysOptions<boolean> = {}): MagicKeys<boolean> {
   const {
     reactive: useReactive = false,
     target = defaultWindow,
@@ -132,17 +136,22 @@ export function useMagicKeys(options: UseMagicKeysOptions<boolean> = {}): any {
     reset,
   };
 
-  const refs: KeyRefs = useReactive ? reactive(obj as any) : (obj as any);
+  // `obj` seeds the proxy with `current`/`reset`; key refs are added lazily, so
+  // the seed shape genuinely differs from `KeyRefs` until the proxy populates it.
+  const refs: KeyRefs = useReactive
+    ? (reactive(obj) as unknown as KeyRefs)
+    : (obj as unknown as KeyRefs);
 
   function setRefs(key: string, value: boolean): void {
     // Touch the proxy so the ref is materialized for keys we actually track,
     // even if the consumer hasn't accessed them yet.
     if (!(key in refs))
-      void (proxy as any)[key];
+      void proxy[key];
 
     if (key in refs) {
       if (useReactive)
-        (refs as any)[key] = value;
+        // `reactive` unwraps the stored ref, so the slot is written as a raw boolean.
+        (refs as unknown as Record<string, boolean>)[key] = value;
       else
         (refs[key] as Ref<boolean>).value = value;
     }
@@ -209,9 +218,9 @@ export function useMagicKeys(options: UseMagicKeysOptions<boolean> = {}): any {
 
       // lazily create tracking ref for combos and single keys
       if (!(prop in refs)) {
-        if (/[+_-]/.test(prop)) {
-          const keys = prop.split(/[+_-]/g).map((i: string) => i.trim());
-          refs[prop] = computed(() => keys.map(key => toValue((proxy as any)[key])).every(Boolean));
+        if (COMBO_SEPARATOR_RE.test(prop)) {
+          const keys = prop.split(COMBO_SEPARATOR_RE).map((i: string) => i.trim());
+          refs[prop] = computed(() => keys.map(key => toValue(proxy[key])).every(Boolean));
         }
         else {
           refs[prop] = shallowRef(false);
@@ -223,5 +232,7 @@ export function useMagicKeys(options: UseMagicKeysOptions<boolean> = {}): any {
     },
   });
 
-  return proxy as any;
+  // The proxy is backed by `KeyRefs`; the public type is the richer `MagicKeys`
+  // facade (combos resolved on access), which the type system can't infer here.
+  return proxy as unknown as MagicKeys<boolean>;
 }
diff --git a/vue/toolkit/src/composables/sensors/useMouse/demo.vue b/vue/toolkit/src/composables/sensors/useMouse/demo.vue
index a7d39a4..0e522fe 100644
--- a/vue/toolkit/src/composables/sensors/useMouse/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useMouse/demo.vue
@@ -25,43 +25,43 @@ const inside = computed(() => relX.value > 0 || relY.value > 0);
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="grid grid-cols-3 gap-3">
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">page x</div>
-        <div class="mt-1 font-mono text-xl font-bold tabular-nums text-(--fg)">{{ Math.round(x) }}</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <div class="demo-label">page x</div>
+        <div class="demo-stat mt-1 text-xl">{{ Math.round(x) }}</div>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">page y</div>
-        <div class="mt-1 font-mono text-xl font-bold tabular-nums text-(--fg)">{{ Math.round(y) }}</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <div class="demo-label">page y</div>
+        <div class="demo-stat mt-1 text-xl">{{ Math.round(y) }}</div>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">source</div>
-        <div class="mt-1 font-mono text-xl font-bold tabular-nums text-(--fg)">{{ sourceType ?? '—' }}</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <div class="demo-label">source</div>
+        <div class="demo-stat mt-1 text-xl">{{ sourceType ?? '—' }}</div>
       </div>
     </div>
 
     <div class="flex flex-col gap-2">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Move inside this area</span>
+      <span class="demo-label">Move inside this area</span>
       <div
         ref="area"
-        class="relative h-40 w-full overflow-hidden rounded-xl border border-(--border) bg-(--bg-elevated)"
+        class="demo-card relative h-40 w-full overflow-hidden"
         style="background-image: radial-gradient(circle, var(--border) 1px, transparent 1px); background-size: 16px 16px;"
       >
         <div
-          class="pointer-events-none absolute size-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-(--accent) bg-(--accent-subtle) transition-opacity"
+          class="pointer-events-none absolute size-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-accent bg-accent-subtle transition-opacity"
           :class="inside ? 'opacity-100' : 'opacity-0'"
           :style="{ left: `${relX}px`, top: `${relY}px` }"
         />
         <div
           v-if="inside"
-          class="pointer-events-none absolute bottom-2 right-2 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 font-mono text-xs tabular-nums text-(--fg-muted)"
+          class="pointer-events-none absolute bottom-2 right-2 rounded-md border border-border bg-bg-inset px-2 py-0.5 font-mono text-xs tabular-nums text-fg-muted"
         >
           {{ Math.round(relX) }}, {{ Math.round(relY) }}
         </div>
         <span
           v-else
-          class="absolute inset-0 flex items-center justify-center text-sm text-(--fg-subtle)"
+          class="absolute inset-0 flex items-center justify-center text-sm text-fg-subtle"
         >
           Hover to track relative position
         </span>
diff --git a/vue/toolkit/src/composables/sensors/useMouse/index.ts b/vue/toolkit/src/composables/sensors/useMouse/index.ts
index 72fb0cc..d4900b3 100644
--- a/vue/toolkit/src/composables/sensors/useMouse/index.ts
+++ b/vue/toolkit/src/composables/sensors/useMouse/index.ts
@@ -8,6 +8,7 @@ import { unrefElement } from '@/composables/component/unrefElement';
 import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
 import { bypassFilter, createFilterWrapper } from '@/utils/filters';
 import type { ConfigurableEventFilter } from '@/utils/filters';
+import { isEventTarget } from '@robonen/platform/browsers';
 
 export type UseMouseCoordType = 'page' | 'client' | 'screen' | 'movement';
 export type UseMouseSourceType = 'mouse' | 'touch' | null;
@@ -172,7 +173,7 @@ export function useMouse(options: UseMouseOptions = {}): UseMouseReturn {
   // A raw window/document/EventTarget is used directly (fast, non-reactive path
   // in useEventListener). Refs/getters/element instances are resolved lazily via
   // a getter so the listeners re-bind when the underlying element changes.
-  const listenTarget = isTarget(target)
+  const listenTarget = isEventTarget(target)
     ? target
     : (): EventTarget | null | undefined => unrefElement(target as MaybeComputedElementRef) as EventTarget | null | undefined;
 
@@ -194,11 +195,3 @@ export function useMouse(options: UseMouseOptions = {}): UseMouseReturn {
 
   return { x, y, sourceType };
 }
-
-/**
- * `true` for an object that is itself an event target (window/document/element)
- * and should be attached to directly, rather than unwrapped from a ref/getter.
- */
-function isTarget(value: unknown): value is EventTarget {
-  return typeof value === 'object' && value !== null && 'addEventListener' in value;
-}
diff --git a/vue/toolkit/src/composables/sensors/useMouseInElement/demo.vue b/vue/toolkit/src/composables/sensors/useMouseInElement/demo.vue
index 772823e..e2dedd5 100644
--- a/vue/toolkit/src/composables/sensors/useMouseInElement/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useMouseInElement/demo.vue
@@ -21,28 +21,28 @@ const percentY = computed(() => elementHeight.value ? Math.round((clampedY.value
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       ref="area"
-      class="relative h-44 w-full overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) transition-colors"
-      :class="isOutside ? 'border-(--border)' : 'border-(--accent)'"
+      class="relative h-44 w-full overflow-hidden rounded-xl border border-border bg-bg-inset transition-colors"
+      :class="isOutside ? 'border-border' : 'border-accent'"
     >
       <!-- Spotlight that follows the cursor -->
       <div
-        class="pointer-events-none absolute size-32 -translate-x-1/2 -translate-y-1/2 rounded-full bg-(--accent)/15 blur-xl transition-opacity duration-200"
+        class="pointer-events-none absolute size-32 -translate-x-1/2 -translate-y-1/2 rounded-full bg-accent/15 blur-xl transition-opacity duration-200"
         :class="isOutside ? 'opacity-0' : 'opacity-100'"
         :style="{ left: `${clampedX}px`, top: `${clampedY}px` }"
       />
 
       <!-- Crosshair dot -->
       <div
-        class="pointer-events-none absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-(--accent-fg) bg-(--accent) transition-opacity duration-150"
+        class="pointer-events-none absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-accent-fg bg-accent transition-opacity duration-150"
         :class="isOutside ? 'opacity-0' : 'opacity-100'"
         :style="{ left: `${clampedX}px`, top: `${clampedY}px` }"
       />
 
       <span
-        class="pointer-events-none absolute inset-0 flex items-center justify-center text-sm font-medium text-(--fg-subtle) transition-opacity"
+        class="pointer-events-none absolute inset-0 flex items-center justify-center text-sm font-medium text-fg-subtle transition-opacity"
         :class="isOutside ? 'opacity-100' : 'opacity-0'"
       >
         Move your cursor here
@@ -50,32 +50,32 @@ const percentY = computed(() => elementHeight.value ? Math.round((clampedY.value
     </div>
 
     <div class="grid grid-cols-2 gap-2">
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">elementX</p>
-        <p class="mt-1 font-mono text-lg font-bold tabular-nums text-(--fg)">{{ Math.round(clampedX) }}<span class="text-sm font-normal text-(--fg-subtle)">px</span></p>
-        <p class="mt-0.5 text-xs text-(--fg-muted) tabular-nums">{{ percentX }}%</p>
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <p class="demo-label">elementX</p>
+        <p class="demo-stat mt-1 text-lg">{{ Math.round(clampedX) }}<span class="text-sm font-normal text-fg-subtle">px</span></p>
+        <p class="mt-0.5 text-xs text-fg-muted tabular-nums">{{ percentX }}%</p>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">elementY</p>
-        <p class="mt-1 font-mono text-lg font-bold tabular-nums text-(--fg)">{{ Math.round(clampedY) }}<span class="text-sm font-normal text-(--fg-subtle)">px</span></p>
-        <p class="mt-0.5 text-xs text-(--fg-muted) tabular-nums">{{ percentY }}%</p>
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <p class="demo-label">elementY</p>
+        <p class="demo-stat mt-1 text-lg">{{ Math.round(clampedY) }}<span class="text-sm font-normal text-fg-subtle">px</span></p>
+        <p class="mt-0.5 text-xs text-fg-muted tabular-nums">{{ percentY }}%</p>
       </div>
     </div>
 
-    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
-      <span class="text-sm text-(--fg-muted)">Cursor</span>
+    <div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset px-3 py-2.5">
+      <span class="text-sm text-fg-muted">Cursor</span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
         :class="isOutside
-          ? 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'
+          ? 'border border-border bg-bg-inset text-fg-muted'
           : 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
       >
-        <span class="size-1.5 rounded-full" :class="isOutside ? 'bg-(--fg-subtle)' : 'bg-emerald-500'" />
+        <span class="size-1.5 rounded-full" :class="isOutside ? 'bg-fg-subtle' : 'bg-emerald-500'" />
         {{ isOutside ? 'Outside' : 'Inside' }}
       </span>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Coordinates are relative to the box's top-left corner &mdash; observed via <code class="font-mono">useElementBounding</code>, so they stay correct as it moves or resizes.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/sensors/useMousePressed/demo.vue b/vue/toolkit/src/composables/sensors/useMousePressed/demo.vue
index 2fd2ec5..5842330 100644
--- a/vue/toolkit/src/composables/sensors/useMousePressed/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useMousePressed/demo.vue
@@ -19,47 +19,47 @@ const sourceLabel = {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       ref="pad"
       class="flex h-40 w-full cursor-pointer select-none items-center justify-center rounded-xl border-2 text-center transition-all duration-150"
       :class="pressed
-        ? 'scale-[0.98] border-(--accent) bg-(--accent)/10'
-        : 'border-(--border) bg-(--bg-inset) hover:border-(--border-strong)'"
+        ? 'scale-[0.98] border-accent bg-accent/10'
+        : 'border-border bg-bg-inset hover:border-border-strong'"
     >
       <div class="flex flex-col items-center gap-2">
         <span
           class="flex size-12 items-center justify-center rounded-full transition-all duration-150"
-          :class="pressed ? 'scale-110 bg-(--accent) text-(--accent-fg)' : 'bg-(--bg-elevated) text-(--fg-subtle)'"
+          :class="pressed ? 'scale-110 bg-accent text-accent-fg' : 'bg-bg-elevated text-fg-subtle'"
         >
           <span class="size-3 rounded-full bg-current" />
         </span>
-        <span class="text-sm font-medium" :class="pressed ? 'text-(--accent-text)' : 'text-(--fg-muted)'">
+        <span class="text-sm font-medium" :class="pressed ? 'text-accent-text' : 'text-fg-muted'">
           {{ pressed ? 'Holding…' : 'Press and hold' }}
         </span>
       </div>
     </div>
 
     <div class="grid grid-cols-3 gap-2">
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
-        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Pressed</p>
-        <p class="mt-1 text-sm font-semibold" :class="pressed ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg)'">
+      <div class="rounded-lg border border-border bg-bg-inset p-3 text-center">
+        <p class="demo-label">Pressed</p>
+        <p class="mt-1 text-sm font-semibold" :class="pressed ? 'text-emerald-600 dark:text-emerald-400' : 'text-fg'">
           {{ pressed ? 'true' : 'false' }}
         </p>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
-        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Source</p>
-        <p class="mt-1 font-mono text-sm font-semibold text-(--fg)">
+      <div class="rounded-lg border border-border bg-bg-inset p-3 text-center">
+        <p class="demo-label">Source</p>
+        <p class="mt-1 font-mono text-sm font-semibold text-fg">
           {{ sourceType ? sourceLabel[sourceType] : '—' }}
         </p>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
-        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Presses</p>
-        <p class="mt-1 font-mono text-sm font-bold tabular-nums text-(--fg)">{{ pressCount }}</p>
+      <div class="rounded-lg border border-border bg-bg-inset p-3 text-center">
+        <p class="demo-label">Presses</p>
+        <p class="demo-stat mt-1 text-sm">{{ pressCount }}</p>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Tracking is scoped to the pad via <code class="font-mono">target</code>, but release is global &mdash; let go anywhere and <code class="font-mono">pressed</code> flips back.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/sensors/useNetwork/demo.vue b/vue/toolkit/src/composables/sensors/useNetwork/demo.vue
index 39523da..55a6e5d 100644
--- a/vue/toolkit/src/composables/sensors/useNetwork/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useNetwork/demo.vue
@@ -31,7 +31,7 @@ function fmt(value: number | undefined, unit: string): string {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       class="flex items-center justify-between rounded-xl border p-4 transition-colors"
       :class="isOnline
@@ -52,46 +52,46 @@ function fmt(value: number | undefined, unit: string): string {
           <p class="text-sm font-semibold" :class="isOnline ? 'text-emerald-700 dark:text-emerald-300' : 'text-red-700 dark:text-red-300'">
             {{ isOnline ? 'Online' : 'Offline' }}
           </p>
-          <p class="text-xs text-(--fg-muted)">
+          <p class="text-xs text-fg-muted">
             {{ isOnline ? 'since' : 'at' }} {{ lastTransition }}
           </p>
         </div>
       </div>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-badge">
         {{ type }}
       </span>
     </div>
 
-    <div v-if="isSupported" class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+    <div v-if="isSupported" class="demo-card p-4">
       <div class="mb-3 flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Effective type</span>
-        <span class="font-mono text-sm font-semibold text-(--accent-text)">{{ effectiveType ?? 'unknown' }}</span>
+        <span class="demo-label">Effective type</span>
+        <span class="font-mono text-sm font-semibold text-accent-text">{{ effectiveType ?? 'unknown' }}</span>
       </div>
       <div class="flex gap-1">
         <span
           v-for="tier in 4"
           :key="tier"
           class="h-1.5 flex-1 rounded-full transition-colors"
-          :class="tier <= speedLevel ? 'bg-(--accent)' : 'bg-(--bg-inset)'"
+          :class="tier <= speedLevel ? 'bg-accent' : 'bg-bg-inset'"
         />
       </div>
 
       <dl class="mt-4 grid grid-cols-2 gap-3">
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-          <dt class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Downlink</dt>
-          <dd class="mt-1 font-mono text-sm font-semibold tabular-nums text-(--fg)">{{ fmt(downlink, ' Mbps') }}</dd>
+        <div class="rounded-lg border border-border bg-bg-inset p-3">
+          <dt class="demo-label">Downlink</dt>
+          <dd class="mt-1 font-mono text-sm font-semibold tabular-nums text-fg">{{ fmt(downlink, ' Mbps') }}</dd>
         </div>
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-          <dt class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">RTT</dt>
-          <dd class="mt-1 font-mono text-sm font-semibold tabular-nums text-(--fg)">{{ fmt(rtt, ' ms') }}</dd>
+        <div class="rounded-lg border border-border bg-bg-inset p-3">
+          <dt class="demo-label">RTT</dt>
+          <dd class="mt-1 font-mono text-sm font-semibold tabular-nums text-fg">{{ fmt(rtt, ' ms') }}</dd>
         </div>
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-          <dt class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Max downlink</dt>
-          <dd class="mt-1 font-mono text-sm font-semibold tabular-nums text-(--fg)">{{ fmt(downlinkMax, ' Mbps') }}</dd>
+        <div class="rounded-lg border border-border bg-bg-inset p-3">
+          <dt class="demo-label">Max downlink</dt>
+          <dd class="mt-1 font-mono text-sm font-semibold tabular-nums text-fg">{{ fmt(downlinkMax, ' Mbps') }}</dd>
         </div>
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-          <dt class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Save data</dt>
-          <dd class="mt-1 font-mono text-sm font-semibold text-(--fg)">{{ saveData === undefined ? '—' : (saveData ? 'on' : 'off') }}</dd>
+        <div class="rounded-lg border border-border bg-bg-inset p-3">
+          <dt class="demo-label">Save data</dt>
+          <dd class="mt-1 font-mono text-sm font-semibold text-fg">{{ saveData === undefined ? '—' : (saveData ? 'on' : 'off') }}</dd>
         </div>
       </dl>
     </div>
@@ -100,12 +100,12 @@ function fmt(value: number | undefined, unit: string): string {
       <p class="text-sm font-medium text-amber-700 dark:text-amber-400">
         Network Information API not supported
       </p>
-      <p class="mt-1 text-xs text-(--fg-muted)">
+      <p class="mt-1 text-xs text-fg-muted">
         Online status still works; connection details are unavailable in this browser.
       </p>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Toggle your device's connection (or DevTools network conditions) to watch the state react live.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/sensors/useOnline/demo.vue b/vue/toolkit/src/composables/sensors/useOnline/demo.vue
index f700f6d..6523b3f 100644
--- a/vue/toolkit/src/composables/sensors/useOnline/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useOnline/demo.vue
@@ -6,7 +6,7 @@ const online = useOnline();
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       class="flex flex-col items-center gap-3 rounded-xl border p-8 transition-colors duration-300"
       :class="online
@@ -29,14 +29,14 @@ const online = useOnline();
         >
           {{ online ? 'You are online' : 'You are offline' }}
         </p>
-        <p class="mt-0.5 text-xs text-(--fg-muted)">
+        <p class="mt-0.5 text-xs text-fg-muted">
           Reflects <code class="font-mono">navigator.onLine</code>
         </p>
       </div>
     </div>
 
-    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
-      <span class="text-sm text-(--fg-muted)"><code class="font-mono">online.value</code></span>
+    <div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset px-3 py-2.5">
+      <span class="text-sm text-fg-muted"><code class="font-mono">online.value</code></span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium"
         :class="online
@@ -48,8 +48,8 @@ const online = useOnline();
       </span>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
-      Disable Wi-Fi or flip DevTools to <span class="font-medium text-(--fg-muted)">Offline</span> and the banner updates instantly.
+    <p class="text-xs text-fg-subtle">
+      Disable Wi-Fi or flip DevTools to <span class="font-medium text-fg-muted">Offline</span> and the banner updates instantly.
     </p>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/sensors/usePageLeave/demo.vue b/vue/toolkit/src/composables/sensors/usePageLeave/demo.vue
index 0859c7f..fb236a4 100644
--- a/vue/toolkit/src/composables/sensors/usePageLeave/demo.vue
+++ b/vue/toolkit/src/composables/sensors/usePageLeave/demo.vue
@@ -14,30 +14,30 @@ const hasLeft = usePageLeave({
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       class="flex flex-col items-center gap-3 rounded-xl border p-8 transition-colors duration-300"
       :class="hasLeft
-        ? 'border-(--accent) bg-(--accent)/10'
-        : 'border-(--border) bg-(--bg-inset)'"
+        ? 'border-accent bg-accent/10'
+        : 'border-border bg-bg-inset'"
     >
       <span
         class="flex size-16 items-center justify-center rounded-full text-2xl transition-all duration-300"
-        :class="hasLeft ? 'scale-110 bg-(--accent) text-(--accent-fg)' : 'bg-(--bg-elevated) text-(--fg-subtle)'"
+        :class="hasLeft ? 'scale-110 bg-accent text-accent-fg' : 'bg-bg-elevated text-fg-subtle'"
       >
         {{ hasLeft ? '👋' : '👀' }}
       </span>
       <p
         class="text-base font-semibold transition-colors duration-300"
-        :class="hasLeft ? 'text-(--accent-text)' : 'text-(--fg)'"
+        :class="hasLeft ? 'text-accent-text' : 'text-fg'"
       >
         {{ hasLeft ? 'Come back!' : 'Pointer is on the page' }}
       </p>
     </div>
 
     <div class="grid grid-cols-2 gap-2">
-      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
-        <span class="text-sm text-(--fg-muted)">State</span>
+      <div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset px-3 py-2.5">
+        <span class="text-sm text-fg-muted">State</span>
         <span
           class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
           :class="hasLeft
@@ -48,14 +48,14 @@ const hasLeft = usePageLeave({
           {{ hasLeft ? 'Left' : 'Inside' }}
         </span>
       </div>
-      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
-        <span class="text-sm text-(--fg-muted)">Exits</span>
-        <span class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ leaveCount }}</span>
+      <div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset px-3 py-2.5">
+        <span class="text-sm text-fg-muted">Exits</span>
+        <span class="demo-stat text-sm">{{ leaveCount }}</span>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
-      Move your cursor out of the browser viewport &mdash; the classic <span class="font-medium text-(--fg-muted)">exit-intent</span> signal for save-cart prompts and the like.
+    <p class="text-xs text-fg-subtle">
+      Move your cursor out of the browser viewport &mdash; the classic <span class="font-medium text-fg-muted">exit-intent</span> signal for save-cart prompts and the like.
     </p>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/sensors/useParallax/demo.vue b/vue/toolkit/src/composables/sensors/useParallax/demo.vue
index 67d1264..9154443 100644
--- a/vue/toolkit/src/composables/sensors/useParallax/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useParallax/demo.vue
@@ -20,43 +20,43 @@ const fmt = (n: number) => (n >= 0 ? '+' : '') + n.toFixed(3);
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       ref="container"
-      class="relative grid place-items-center overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) p-8"
+      class="relative grid place-items-center overflow-hidden rounded-xl border border-border bg-bg-inset p-8"
     >
       <div
-        class="relative aspect-[4/3] w-full max-w-[16rem] rounded-xl border border-(--border-strong) bg-(--bg-elevated) shadow-xl transition-transform duration-75 ease-out will-change-transform"
+        class="relative aspect-[4/3] w-full max-w-[16rem] rounded-xl border border-border-strong bg-bg-elevated shadow-xl transition-transform duration-75 ease-out will-change-transform"
         :style="cardStyle"
       >
         <div class="absolute inset-0 grid place-items-center" :style="layer(8)">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          <span class="demo-label">
             depth 8
           </span>
         </div>
         <div class="absolute inset-0 grid place-items-center" :style="layer(24)">
-          <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">
+          <span class="demo-stat text-2xl">
             Parallax
           </span>
         </div>
         <div class="absolute bottom-3 right-3" :style="layer(40)">
-          <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          <span class="demo-badge">
             depth 40
           </span>
         </div>
       </div>
     </div>
 
-    <p class="text-center text-xs text-(--fg-subtle)">
+    <p class="text-center text-xs text-fg-subtle">
       Move your pointer over the panel &mdash; layers shift by depth.
     </p>
 
     <div class="space-y-2">
       <div class="flex items-center justify-between">
-        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <label class="demo-label">
           Intensity
         </label>
-        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ intensity }}&deg;</span>
+        <span class="font-mono text-xs tabular-nums text-fg-muted">{{ intensity }}&deg;</span>
       </div>
       <input
         v-model.number="intensity"
@@ -64,22 +64,22 @@ const fmt = (n: number) => (n >= 0 ? '+' : '') + n.toFixed(3);
         min="0"
         max="45"
         step="1"
-        class="w-full accent-(--accent)"
+        class="w-full accent-accent"
       >
     </div>
 
     <div class="grid grid-cols-3 gap-2">
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Roll</div>
-        <div class="mt-1 font-mono text-sm tabular-nums text-(--fg)">{{ fmt(roll) }}</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <div class="demo-label">Roll</div>
+        <div class="mt-1 font-mono text-sm tabular-nums text-fg">{{ fmt(roll) }}</div>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tilt</div>
-        <div class="mt-1 font-mono text-sm tabular-nums text-(--fg)">{{ fmt(tilt) }}</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <div class="demo-label">Tilt</div>
+        <div class="mt-1 font-mono text-sm tabular-nums text-fg">{{ fmt(tilt) }}</div>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Source</div>
-        <div class="mt-1 font-mono text-sm capitalize text-(--fg)">{{ source }}</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <div class="demo-label">Source</div>
+        <div class="mt-1 font-mono text-sm capitalize text-fg">{{ source }}</div>
       </div>
     </div>
   </div>
diff --git a/vue/toolkit/src/composables/sensors/usePointer/demo.vue b/vue/toolkit/src/composables/sensors/usePointer/demo.vue
index ac04c30..67f8932 100644
--- a/vue/toolkit/src/composables/sensors/usePointer/demo.vue
+++ b/vue/toolkit/src/composables/sensors/usePointer/demo.vue
@@ -15,10 +15,10 @@ const typeLabel = computed(() => pointerType.value ?? 'none');
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       ref="area"
-      class="relative h-44 touch-none overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) [background-image:radial-gradient(var(--border)_1px,transparent_1px)] [background-size:16px_16px]"
+      class="relative h-44 touch-none overflow-hidden rounded-xl border border-border bg-bg-inset [background-image:radial-gradient(var(--border)_1px,transparent_1px)] [background-size:16px_16px]"
     >
       <div
         v-if="isInside"
@@ -26,50 +26,50 @@ const typeLabel = computed(() => pointerType.value ?? 'none');
         :style="dotStyle"
       >
         <div
-          class="rounded-full bg-(--accent) opacity-80"
+          class="rounded-full bg-accent opacity-80"
           :style="{ width: `${12 + pressure * 40}px`, height: `${12 + pressure * 40}px` }"
         />
       </div>
       <div class="pointer-events-none absolute inset-0 grid place-items-center">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <span class="demo-label">
           {{ isInside ? 'Tracking' : 'Move your pointer here' }}
         </span>
       </div>
     </div>
 
     <div class="grid grid-cols-2 gap-2">
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm tabular-nums text-(--fg)">
-        <div class="font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Position</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm tabular-nums text-fg">
+        <div class="demo-label font-sans">Position</div>
         <div class="mt-1">{{ Math.round(x) }}, {{ Math.round(y) }}</div>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm tabular-nums text-(--fg)">
-        <div class="font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Pressure</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm tabular-nums text-fg">
+        <div class="demo-label font-sans">Pressure</div>
         <div class="mt-1">{{ pressure.toFixed(2) }}</div>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm tabular-nums text-(--fg)">
-        <div class="font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tilt X / Y</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm tabular-nums text-fg">
+        <div class="demo-label font-sans">Tilt X / Y</div>
         <div class="mt-1">{{ tiltX }} / {{ tiltY }}</div>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <div class="font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Type</div>
-        <div class="mt-1 font-mono text-sm capitalize text-(--fg)">{{ typeLabel }}</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <div class="demo-label font-sans">Type</div>
+        <div class="mt-1 font-mono text-sm capitalize text-fg">{{ typeLabel }}</div>
       </div>
     </div>
 
-    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
-      <span class="text-sm text-(--fg-muted)">Pointer inside</span>
+    <div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset px-3 py-2.5">
+      <span class="text-sm text-fg-muted">Pointer inside</span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
         :class="isInside
           ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-          : 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          : 'border border-border bg-bg-inset text-fg-muted'"
       >
-        <span class="size-1.5 rounded-full transition" :class="isInside ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+        <span class="size-1.5 rounded-full transition" :class="isInside ? 'bg-emerald-500' : 'bg-fg-subtle'" />
         {{ isInside ? 'Yes' : 'No' }}
       </span>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Pressure scales the dot. Pen tilt &amp; pressure show real values on supporting hardware.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/sensors/usePointer/index.ts b/vue/toolkit/src/composables/sensors/usePointer/index.ts
index caae530..d498b42 100644
--- a/vue/toolkit/src/composables/sensors/usePointer/index.ts
+++ b/vue/toolkit/src/composables/sensors/usePointer/index.ts
@@ -6,6 +6,7 @@ import type { ConfigurableWindow } from '@/types';
 import { useEventListener } from '@/composables/browser/useEventListener';
 import { unrefElement } from '@/composables/component/unrefElement';
 import type { MaybeComputedElementRef } from '@/composables/component/unrefElement';
+import { isEventTarget } from '@robonen/platform/browsers';
 
 export type UsePointerType = 'mouse' | 'touch' | 'pen';
 
@@ -119,7 +120,7 @@ export function usePointer(options: UsePointerOptions = {}): UsePointerReturn {
   // A raw window/document/EventTarget is used directly (fast, non-reactive path
   // in useEventListener). Refs/getters/element instances are resolved lazily via
   // a getter so the listeners re-bind when the underlying element changes.
-  const listenTarget = isTarget(target)
+  const listenTarget = isEventTarget(target)
     ? target
     : (): EventTarget | null | undefined => unrefElement(target as MaybeComputedElementRef) as EventTarget | null | undefined;
 
@@ -152,11 +153,3 @@ export function usePointer(options: UsePointerOptions = {}): UsePointerReturn {
     isInside,
   };
 }
-
-/**
- * `true` for an object that is itself an event target (window/document/element)
- * and should be attached to directly, rather than unwrapped from a ref/getter.
- */
-function isTarget(value: unknown): value is EventTarget {
-  return typeof value === 'object' && value !== null && 'addEventListener' in value;
-}
diff --git a/vue/toolkit/src/composables/sensors/usePointerLock/demo.vue b/vue/toolkit/src/composables/sensors/usePointerLock/demo.vue
index 48970f9..36851ab 100644
--- a/vue/toolkit/src/composables/sensors/usePointerLock/demo.vue
+++ b/vue/toolkit/src/composables/sensors/usePointerLock/demo.vue
@@ -31,21 +31,21 @@ async function toggle() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <template v-if="isSupported">
       <div
         ref="stage"
-        class="relative h-44 cursor-pointer select-none overflow-hidden rounded-xl border bg-(--bg-inset) transition"
-        :class="isLocked ? 'border-(--accent)' : 'border-(--border)'"
+        class="relative h-44 cursor-pointer select-none overflow-hidden rounded-xl border bg-bg-inset transition"
+        :class="isLocked ? 'border-accent' : 'border-border'"
         @click="toggle"
         @pointermove="onMove"
       >
         <div
-          class="pointer-events-none absolute size-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-(--accent-fg) bg-(--accent) shadow-lg transition-[box-shadow]"
+          class="pointer-events-none absolute size-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-accent-fg bg-accent shadow-lg transition-[box-shadow]"
           :style="{ left: `${pos.x}%`, top: `${pos.y}%` }"
         />
         <div class="pointer-events-none absolute inset-0 grid place-items-center">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          <span class="demo-label">
             {{ isLocked ? 'Locked — move your mouse' : 'Click to lock pointer' }}
           </span>
         </div>
@@ -55,30 +55,30 @@ async function toggle() {
         type="button"
         class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
         :class="isLocked
-          ? 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'
-          : 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'"
+          ? 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'
+          : 'border-transparent bg-accent text-accent-fg hover:bg-accent-hover'"
         @click="toggle"
       >
         {{ isLocked ? 'Release pointer (Esc)' : 'Lock pointer' }}
       </button>
 
-      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
-        <span class="text-sm text-(--fg-muted)">Lock state</span>
+      <div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset px-3 py-2.5">
+        <span class="text-sm text-fg-muted">Lock state</span>
         <span
           class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
           :class="isLocked
             ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-            : 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+            : 'border border-border bg-bg-inset text-fg-muted'"
         >
-          <span class="size-1.5 rounded-full transition" :class="isLocked ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+          <span class="size-1.5 rounded-full transition" :class="isLocked ? 'bg-emerald-500' : 'bg-fg-subtle'" />
           {{ isLocked ? 'Locked' : 'Unlocked' }}
         </span>
       </div>
 
-      <p class="text-xs text-(--fg-subtle)">
+      <p class="text-xs text-fg-subtle">
         While locked, the cursor is hidden and only relative
         <code class="font-mono">movementX/Y</code> drives the dot. Press
-        <kbd class="rounded border border-(--border) bg-(--bg-elevated) px-1 font-mono text-[0.7rem]">Esc</kbd>
+        <kbd class="rounded border border-border bg-bg-elevated px-1 font-mono text-[0.7rem]">Esc</kbd>
         to release.
       </p>
     </template>
@@ -90,7 +90,7 @@ async function toggle() {
       <span class="text-sm font-medium text-amber-600 dark:text-amber-400">
         Pointer Lock API not supported
       </span>
-      <span class="text-xs text-(--fg-subtle)">
+      <span class="text-xs text-fg-subtle">
         This browser cannot lock the pointer to an element.
       </span>
     </div>
diff --git a/vue/toolkit/src/composables/sensors/usePointerSwipe/demo.vue b/vue/toolkit/src/composables/sensors/usePointerSwipe/demo.vue
index cb13864..7a461f4 100644
--- a/vue/toolkit/src/composables/sensors/usePointerSwipe/demo.vue
+++ b/vue/toolkit/src/composables/sensors/usePointerSwipe/demo.vue
@@ -35,51 +35,51 @@ const cardStyle = computed(() => {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div
       ref="surface"
-      class="relative grid h-44 touch-none place-items-center overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) select-none"
+      class="relative grid h-44 touch-none place-items-center overflow-hidden rounded-xl border border-border bg-bg-inset select-none"
     >
       <div
-        class="grid size-24 place-items-center rounded-xl border border-(--border-strong) bg-(--bg-elevated) shadow-lg"
+        class="grid size-24 place-items-center rounded-xl border border-border-strong bg-bg-elevated shadow-lg"
         :class="isSwiping ? 'transition-none' : 'transition-transform duration-300 ease-out'"
         :style="cardStyle"
       >
-        <span class="font-mono text-3xl text-(--fg)">{{ arrows[direction] }}</span>
+        <span class="font-mono text-3xl text-fg">{{ arrows[direction] }}</span>
       </div>
-      <span class="pointer-events-none absolute bottom-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label pointer-events-none absolute bottom-2">
         Drag in any direction
       </span>
     </div>
 
     <div class="grid grid-cols-2 gap-2">
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Direction</div>
-        <div class="mt-1 font-mono text-sm capitalize text-(--fg)">{{ direction }}</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <div class="demo-label">Direction</div>
+        <div class="mt-1 font-mono text-sm capitalize text-fg">{{ direction }}</div>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Swiping</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <div class="demo-label">Swiping</div>
         <div
           class="mt-1 font-mono text-sm"
-          :class="isSwiping ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'"
+          :class="isSwiping ? 'text-emerald-600 dark:text-emerald-400' : 'text-fg-muted'"
         >
           {{ isSwiping ? 'active' : 'idle' }}
         </div>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm tabular-nums text-(--fg)">
-        <div class="font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Distance X / Y</div>
+      <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm tabular-nums text-fg">
+        <div class="demo-label font-sans">Distance X / Y</div>
         <div class="mt-1">{{ Math.round(distanceX) }} / {{ Math.round(distanceY) }}</div>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last swipe</div>
-        <div class="mt-1 font-mono text-sm capitalize text-(--fg)">
+      <div class="rounded-lg border border-border bg-bg-inset p-3">
+        <div class="demo-label">Last swipe</div>
+        <div class="mt-1 font-mono text-sm capitalize text-fg">
           {{ lastDirection }}
-          <span v-if="swipeCount" class="text-(--fg-subtle)">&times;{{ swipeCount }}</span>
+          <span v-if="swipeCount" class="text-fg-subtle">&times;{{ swipeCount }}</span>
         </div>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Threshold is <code class="font-mono">40px</code> &mdash; shorter drags resolve to
       <code class="font-mono">none</code>.
     </p>
diff --git a/vue/toolkit/src/composables/sensors/useScreenOrientation/demo.vue b/vue/toolkit/src/composables/sensors/useScreenOrientation/demo.vue
index 7245ebe..b2e3e73 100644
--- a/vue/toolkit/src/composables/sensors/useScreenOrientation/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useScreenOrientation/demo.vue
@@ -31,30 +31,30 @@ function release() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <template v-if="isSupported">
-      <div class="grid place-items-center rounded-xl border border-(--border) bg-(--bg-inset) p-6">
+      <div class="grid place-items-center rounded-xl border border-border bg-bg-inset p-6">
         <div
-          class="flex items-center justify-center rounded-lg border-2 border-(--border-strong) bg-(--bg-elevated) text-(--fg-subtle) transition-all duration-300"
+          class="flex items-center justify-center rounded-lg border-2 border-border-strong bg-bg-elevated text-fg-subtle transition-all duration-300"
           :class="isLandscape ? 'h-16 w-28' : 'h-28 w-16'"
         >
-          <div class="size-2 rounded-full bg-(--accent)" />
+          <div class="size-2 rounded-full bg-accent" />
         </div>
       </div>
 
       <div class="grid grid-cols-2 gap-2">
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Orientation</div>
-          <div class="mt-1 font-mono text-sm text-(--fg)">{{ orientation ?? '—' }}</div>
+        <div class="rounded-lg border border-border bg-bg-inset p-3">
+          <div class="demo-label">Orientation</div>
+          <div class="mt-1 font-mono text-sm text-fg">{{ orientation ?? '—' }}</div>
         </div>
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm tabular-nums text-(--fg)">
-          <div class="font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Angle</div>
+        <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm tabular-nums text-fg">
+          <div class="demo-label font-sans">Angle</div>
           <div class="mt-1">{{ angle }}&deg;</div>
         </div>
       </div>
 
       <div class="space-y-2">
-        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Lock to</div>
+        <div class="demo-label">Lock to</div>
         <div class="flex gap-2">
           <button
             v-for="type in locks"
@@ -62,8 +62,8 @@ function release() {
             type="button"
             class="inline-flex flex-1 items-center justify-center rounded-lg border px-3 py-1.5 text-sm font-medium capitalize transition active:scale-[0.98] cursor-pointer"
             :class="locked === type
-              ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
-              : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+              ? 'border-transparent bg-accent text-accent-fg hover:bg-accent-hover'
+              : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
             @click="applyLock(type)"
           >
             {{ type }}
@@ -72,7 +72,7 @@ function release() {
         <button
           type="button"
           :disabled="!locked"
-          class="inline-flex w-full items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="inline-flex w-full items-center justify-center rounded-lg border border-border bg-bg-elevated px-3 py-1.5 text-sm font-medium text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           @click="release"
         >
           Unlock
@@ -82,7 +82,7 @@ function release() {
       <p v-if="error" class="rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-600 dark:text-amber-400">
         {{ error }}
       </p>
-      <p v-else class="text-xs text-(--fg-subtle)">
+      <p v-else class="text-xs text-fg-subtle">
         Locking requires fullscreen on most devices and is typically a no-op on desktop.
       </p>
     </template>
@@ -94,7 +94,7 @@ function release() {
       <span class="text-sm font-medium text-amber-600 dark:text-amber-400">
         Screen Orientation API not supported
       </span>
-      <span class="text-xs text-(--fg-subtle)">
+      <span class="text-xs text-fg-subtle">
         This browser does not expose <code class="font-mono">screen.orientation</code>.
       </span>
     </div>
diff --git a/vue/toolkit/src/composables/sensors/useScroll/demo.vue b/vue/toolkit/src/composables/sensors/useScroll/demo.vue
index 07626c6..70a0dcc 100644
--- a/vue/toolkit/src/composables/sensors/useScroll/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useScroll/demo.vue
@@ -38,18 +38,18 @@ function arrowFor() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Scroll container</span>
+      <span class="demo-label">Scroll container</span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
         :class="isScrolling
           ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          : 'border-border bg-bg-inset text-fg-muted'"
       >
         <span
           class="size-1.5 rounded-full transition"
-          :class="isScrolling ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+          :class="isScrolling ? 'bg-emerald-500' : 'bg-fg-subtle'"
         />
         {{ isScrolling ? 'scrolling' : 'idle' }}
       </span>
@@ -57,23 +57,23 @@ function arrowFor() {
 
     <div
       ref="el"
-      class="h-48 overflow-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-2"
+      class="demo-card h-48 overflow-auto p-2"
     >
       <ul class="flex flex-col gap-1">
         <li
           v-for="item in items"
           :key="item.id"
-          class="flex items-center justify-between rounded-lg bg-(--bg-inset) px-3 py-2 text-sm text-(--fg)"
+          class="flex items-center justify-between rounded-lg bg-bg-inset px-3 py-2 text-sm text-fg"
         >
           <span class="font-medium">{{ item.label }}</span>
-          <span class="font-mono text-xs text-(--fg-subtle)">#{{ item.id }}</span>
+          <span class="font-mono text-xs text-fg-subtle">#{{ item.id }}</span>
         </li>
       </ul>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
       <div class="flex items-center justify-between">
-        <span class="text-(--fg-muted)">offset</span>
+        <span class="text-fg-muted">offset</span>
         <span>x {{ Math.round(x) }} · y {{ Math.round(y) }} {{ arrowFor() }}</span>
       </div>
     </div>
@@ -84,8 +84,8 @@ function arrowFor() {
         :key="edge"
         class="flex flex-1 flex-col items-center gap-1 rounded-lg border p-2 text-xs transition"
         :class="arrivedState[edge]
-          ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
-          : 'border-(--border) bg-(--bg-elevated) text-(--fg-subtle)'"
+          ? 'border-accent bg-accent-subtle text-accent-text'
+          : 'border-border bg-bg-elevated text-fg-subtle'"
       >
         <span class="font-medium uppercase tracking-wide">{{ edge }}</span>
         <span class="font-mono">{{ arrivedState[edge] ? 'arrived' : '—' }}</span>
@@ -95,7 +95,7 @@ function arrowFor() {
     <div class="flex gap-2">
       <button
         type="button"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="arrivedState.top"
         @click="scrollToTop"
       >
@@ -103,7 +103,7 @@ function arrowFor() {
       </button>
       <button
         type="button"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="arrivedState.bottom"
         @click="scrollToBottom"
       >
diff --git a/vue/toolkit/src/composables/sensors/useScrollLock/demo.vue b/vue/toolkit/src/composables/sensors/useScrollLock/demo.vue
index b857a99..3ffb088 100644
--- a/vue/toolkit/src/composables/sensors/useScrollLock/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useScrollLock/demo.vue
@@ -18,14 +18,14 @@ const lines = [
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Scroll lock</span>
+      <span class="demo-label">Scroll lock</span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
         :class="isLocked
           ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          : 'border-border bg-bg-inset text-fg-muted'"
       >
         {{ isLocked ? 'locked' : 'free' }}
       </span>
@@ -33,36 +33,36 @@ const lines = [
 
     <div
       ref="el"
-      class="h-44 overflow-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-4"
+      class="demo-card h-44 overflow-auto p-4"
     >
       <p
         v-for="(line, i) in lines"
         :key="i"
-        class="py-1.5 text-sm leading-relaxed text-(--fg)"
+        class="py-1.5 text-sm leading-relaxed text-fg"
       >
         {{ line }}
       </p>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       {{ isLocked ? 'Overflow is hidden — the panel above will not scroll.' : 'Try scrolling the panel, then lock it.' }}
     </p>
 
-    <div class="flex items-center gap-3 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+    <div class="flex items-center gap-3 rounded-lg border border-border bg-bg-inset p-3">
       <button
         type="button"
         role="switch"
         :aria-checked="isLocked"
-        class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-(--border) transition cursor-pointer focus:outline-none focus:ring-2 focus:ring-(--ring)"
-        :class="isLocked ? 'bg-(--accent)' : 'bg-(--bg-elevated)'"
+        class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-border transition cursor-pointer focus:outline-none focus:ring-2 focus:ring-ring"
+        :class="isLocked ? 'bg-accent' : 'bg-bg-elevated'"
         @click="isLocked = !isLocked"
       >
         <span
-          class="inline-block size-4 rounded-full bg-(--bg) shadow transition"
+          class="inline-block size-4 rounded-full bg-bg shadow transition"
           :class="isLocked ? 'translate-x-6' : 'translate-x-1'"
         />
       </button>
-      <span class="text-sm font-medium text-(--fg)">Lock scrolling</span>
+      <span class="text-sm font-medium text-fg">Lock scrolling</span>
     </div>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/sensors/useSwipe/demo.vue b/vue/toolkit/src/composables/sensors/useSwipe/demo.vue
index c311607..745df07 100644
--- a/vue/toolkit/src/composables/sensors/useSwipe/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useSwipe/demo.vue
@@ -28,46 +28,46 @@ const arrows: Record<string, string> = {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Swipe area (touch / drag)</span>
+  <div class="demo-stack max-w-sm">
+    <span class="demo-label">Swipe area (touch / drag)</span>
 
     <div
       ref="el"
-      class="relative flex h-40 touch-none select-none items-center justify-center overflow-hidden rounded-xl border border-(--border-strong) bg-(--bg-inset)"
+      class="relative flex h-40 touch-none select-none items-center justify-center overflow-hidden rounded-xl border border-border-strong bg-bg-inset"
     >
       <div
-        class="flex flex-col items-center gap-1 rounded-lg border border-(--border) bg-(--bg-elevated) px-6 py-4 shadow-sm"
+        class="flex flex-col items-center gap-1 rounded-lg border border-border bg-bg-elevated px-6 py-4 shadow-sm"
         :class="isSwiping ? 'transition-none' : 'transition-transform duration-300'"
         :style="{ transform: `translate(${offsetX}px, ${offsetY}px)` }"
       >
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ arrows[direction] }}</span>
-        <span class="text-xs text-(--fg-subtle)">{{ isSwiping ? 'swiping…' : 'swipe me' }}</span>
+        <span class="demo-stat text-3xl">{{ arrows[direction] }}</span>
+        <span class="text-xs text-fg-subtle">{{ isSwiping ? 'swiping…' : 'swipe me' }}</span>
       </div>
     </div>
 
     <div class="grid grid-cols-2 gap-2">
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
         <div class="flex items-center justify-between">
-          <span class="text-(--fg-muted)">Δx</span>
+          <span class="text-fg-muted">Δx</span>
           <span>{{ Math.round(lengthX) }}px</span>
         </div>
         <div class="mt-1 flex items-center justify-between">
-          <span class="text-(--fg-muted)">Δy</span>
+          <span class="text-fg-muted">Δy</span>
           <span>{{ Math.round(lengthY) }}px</span>
         </div>
       </div>
-      <div class="flex flex-col justify-center gap-1 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last swipe</span>
-        <span class="font-mono text-sm font-medium capitalize text-(--accent-text)">{{ lastDirection }}</span>
+      <div class="flex flex-col justify-center gap-1 rounded-lg border border-border bg-bg-inset p-3">
+        <span class="demo-label">Last swipe</span>
+        <span class="font-mono text-sm font-medium capitalize text-accent-text">{{ lastDirection }}</span>
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg-muted) tabular-nums">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-xs text-fg-muted tabular-nums">
       start ({{ Math.round(coordsStart.x) }}, {{ Math.round(coordsStart.y) }})
       → end ({{ Math.round(coordsEnd.x) }}, {{ Math.round(coordsEnd.y) }})
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       On a desktop, click and drag with touch emulation; on touch devices, swipe in any direction.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/sensors/useTextSelection/demo.vue b/vue/toolkit/src/composables/sensors/useTextSelection/demo.vue
index 14eb2ec..57071f6 100644
--- a/vue/toolkit/src/composables/sensors/useTextSelection/demo.vue
+++ b/vue/toolkit/src/composables/sensors/useTextSelection/demo.vue
@@ -17,39 +17,39 @@ const sample = 'Select any part of this paragraph with your cursor. '
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
-    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Select some text</span>
+  <div class="demo-stack max-w-md">
+    <span class="demo-label">Select some text</span>
 
-    <p class="select-text rounded-xl border border-(--border) bg-(--bg-elevated) p-4 text-sm leading-relaxed text-(--fg) selection:bg-(--accent) selection:text-(--accent-fg)">
+    <p class="demo-card select-text p-4 text-sm leading-relaxed text-fg selection:bg-accent selection:text-accent-fg">
       {{ sample }}
     </p>
 
     <div class="grid grid-cols-3 gap-2">
-      <div class="flex flex-col items-center gap-0.5 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ charCount }}</span>
-        <span class="text-xs text-(--fg-subtle)">chars</span>
+      <div class="flex flex-col items-center gap-0.5 rounded-lg border border-border bg-bg-inset p-3">
+        <span class="demo-stat text-2xl">{{ charCount }}</span>
+        <span class="text-xs text-fg-subtle">chars</span>
       </div>
-      <div class="flex flex-col items-center gap-0.5 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ wordCount }}</span>
-        <span class="text-xs text-(--fg-subtle)">words</span>
+      <div class="flex flex-col items-center gap-0.5 rounded-lg border border-border bg-bg-inset p-3">
+        <span class="demo-stat text-2xl">{{ wordCount }}</span>
+        <span class="text-xs text-fg-subtle">words</span>
       </div>
-      <div class="flex flex-col items-center gap-0.5 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-        <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ ranges.length }}</span>
-        <span class="text-xs text-(--fg-subtle)">ranges</span>
+      <div class="flex flex-col items-center gap-0.5 rounded-lg border border-border bg-bg-inset p-3">
+        <span class="demo-stat text-2xl">{{ ranges.length }}</span>
+        <span class="text-xs text-fg-subtle">ranges</span>
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Selected text</span>
-      <p v-if="text" class="mt-1.5 break-words font-mono text-sm text-(--accent-text)">
+    <div class="rounded-lg border border-border bg-bg-inset p-3">
+      <span class="demo-label">Selected text</span>
+      <p v-if="text" class="mt-1.5 break-words font-mono text-sm text-accent-text">
         “{{ text }}”
       </p>
-      <p v-else class="mt-1.5 font-mono text-sm text-(--fg-subtle)">
+      <p v-else class="mt-1.5 font-mono text-sm text-fg-subtle">
         Nothing selected yet.
       </p>
     </div>
 
-    <div v-if="rects.length" class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg-muted) tabular-nums">
+    <div v-if="rects.length" class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-xs text-fg-muted tabular-nums">
       first rect · {{ Math.round(rects[0]!.width) }} × {{ Math.round(rects[0]!.height) }} px
     </div>
   </div>
diff --git a/vue/toolkit/src/composables/state/createSharedComposable/demo.vue b/vue/toolkit/src/composables/state/createSharedComposable/demo.vue
index c94f87d..18bd1db 100644
--- a/vue/toolkit/src/composables/state/createSharedComposable/demo.vue
+++ b/vue/toolkit/src/composables/state/createSharedComposable/demo.vue
@@ -30,9 +30,9 @@ const Subscriber = defineComponent({
   setup(props) {
     const { count, setupId } = useSharedCounter();
     return () =>
-      h('div', { class: 'flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2' }, [
-        h('span', { class: 'text-sm font-medium text-(--fg)' }, props.label),
-        h('span', { class: 'font-mono text-sm tabular-nums text-(--accent-text)' }, `count ${count.value} · #${setupId}`),
+      h('div', { class: 'flex items-center justify-between rounded-lg border border-border bg-bg-inset px-3 py-2' }, [
+        h('span', { class: 'text-sm font-medium text-fg' }, props.label),
+        h('span', { class: 'font-mono text-sm tabular-nums text-accent-text' }, `count ${count.value} · #${setupId}`),
       ]);
   },
 });
@@ -52,15 +52,15 @@ function removeSubscriber() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Shared composable</span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-label">Shared composable</span>
+      <span class="demo-badge">
         {{ subscribers.length }} active
       </span>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+    <div class="demo-card p-3">
       <div v-if="subscribers.length" class="flex flex-col gap-2">
         <Subscriber
           v-for="name in subscribers"
@@ -68,12 +68,12 @@ function removeSubscriber() {
           :label="name"
         />
       </div>
-      <p v-else class="px-3 py-6 text-center text-sm text-(--fg-subtle)">
+      <p v-else class="px-3 py-6 text-center text-sm text-fg-subtle">
         No consumers — the shared scope is disposed and its interval cleared.
       </p>
     </div>
 
-    <p class="text-xs leading-relaxed text-(--fg-subtle)">
+    <p class="text-xs leading-relaxed text-fg-subtle">
       Every consumer reads the same count and the same setup id (<span class="font-mono">#</span>),
       proving a single instance and one interval back all of them. Remove every
       consumer to dispose the scope; adding one again creates a fresh instance.
@@ -82,7 +82,7 @@ function removeSubscriber() {
     <div class="flex gap-2">
       <button
         type="button"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="subscribers.length >= names.length"
         @click="addSubscriber"
       >
@@ -90,7 +90,7 @@ function removeSubscriber() {
       </button>
       <button
         type="button"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="!subscribers.length"
         @click="removeSubscriber"
       >
diff --git a/vue/toolkit/src/composables/state/useAppSharedState/demo.vue b/vue/toolkit/src/composables/state/useAppSharedState/demo.vue
index f014e3d..4d0b73d 100644
--- a/vue/toolkit/src/composables/state/useAppSharedState/demo.vue
+++ b/vue/toolkit/src/composables/state/useAppSharedState/demo.vue
@@ -21,26 +21,26 @@ const total = computed(() => alice.state.likes);
 </script>
 
 <template>
-  <div class="w-full max-w-md flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-1">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Shared likes</span>
-      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ total }}</span>
-      <span class="text-xs text-(--fg-subtle)">last reaction by {{ alice.state.lastBy }}</span>
+  <div class="demo-stack max-w-md">
+    <div class="demo-card p-4 flex flex-col items-center gap-1">
+      <span class="demo-label">Shared likes</span>
+      <span class="demo-stat text-3xl">{{ total }}</span>
+      <span class="text-xs text-fg-subtle">last reaction by {{ alice.state.lastBy }}</span>
     </div>
 
     <div class="grid grid-cols-2 gap-3">
       <!-- Consumer A -->
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="demo-card p-4 flex flex-col gap-3">
         <div class="flex items-center gap-2">
-          <span class="flex size-7 items-center justify-center rounded-full bg-(--accent-subtle) text-xs font-semibold text-(--accent-text)">A</span>
-          <span class="text-sm font-medium text-(--fg)">Alice’s panel</span>
+          <span class="flex size-7 items-center justify-center rounded-full bg-accent-subtle text-xs font-semibold text-accent-text">A</span>
+          <span class="text-sm font-medium text-fg">Alice’s panel</span>
         </div>
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center font-mono text-sm tabular-nums text-(--fg)">
+        <div class="rounded-lg border border-border bg-bg-inset p-3 text-center font-mono text-sm tabular-nums text-fg">
           reads {{ alice.state.likes }}
         </div>
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          class="demo-btn-primary"
           @click="alice.like('Alice')"
         >
           ♥ Like
@@ -48,17 +48,17 @@ const total = computed(() => alice.state.likes);
       </div>
 
       <!-- Consumer B -->
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="demo-card p-4 flex flex-col gap-3">
         <div class="flex items-center gap-2">
-          <span class="flex size-7 items-center justify-center rounded-full bg-(--accent-subtle) text-xs font-semibold text-(--accent-text)">B</span>
-          <span class="text-sm font-medium text-(--fg)">Bob’s panel</span>
+          <span class="flex size-7 items-center justify-center rounded-full bg-accent-subtle text-xs font-semibold text-accent-text">B</span>
+          <span class="text-sm font-medium text-fg">Bob’s panel</span>
         </div>
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center font-mono text-sm tabular-nums text-(--fg)">
+        <div class="rounded-lg border border-border bg-bg-inset p-3 text-center font-mono text-sm tabular-nums text-fg">
           reads {{ bob.state.likes }}
         </div>
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="bob.like('Bob')"
         >
           ♥ Like
@@ -66,8 +66,8 @@ const total = computed(() => alice.state.likes);
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
-      Both panels call <span class="font-mono text-(--fg-muted)">useStore()</span> independently yet share one
+    <p class="text-xs text-fg-subtle">
+      Both panels call <span class="font-mono text-fg-muted">useStore()</span> independently yet share one
       reactive instance — like in either column updates the other instantly.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/state/useAsyncState/demo.vue b/vue/toolkit/src/composables/state/useAsyncState/demo.vue
index 074d657..82885ef 100644
--- a/vue/toolkit/src/composables/state/useAsyncState/demo.vue
+++ b/vue/toolkit/src/composables/state/useAsyncState/demo.vue
@@ -48,16 +48,16 @@ function loadMissing() {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4 min-h-40">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-4 min-h-40">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Profile</span>
+        <span class="demo-label">Profile</span>
         <span
-          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+          class="demo-badge"
         >
           <span
             class="size-1.5 rounded-full transition"
-            :class="isLoading ? 'bg-amber-500 animate-pulse' : isReady ? 'bg-emerald-500' : error ? 'bg-red-500' : 'bg-(--fg-subtle)'"
+            :class="isLoading ? 'bg-amber-500 animate-pulse' : isReady ? 'bg-emerald-500' : error ? 'bg-red-500' : 'bg-fg-subtle'"
           />
           {{ isLoading ? 'Loading' : isReady ? 'Ready' : error ? 'Error' : 'Idle' }}
         </span>
@@ -65,10 +65,10 @@ function loadMissing() {
 
       <!-- Loading skeleton -->
       <div v-if="isLoading" class="flex items-center gap-3">
-        <div class="size-12 shrink-0 rounded-full bg-(--bg-inset) animate-pulse" />
+        <div class="size-12 shrink-0 rounded-full bg-bg-inset animate-pulse" />
         <div class="flex flex-1 flex-col gap-2">
-          <div class="h-3.5 w-2/3 rounded bg-(--bg-inset) animate-pulse" />
-          <div class="h-3 w-1/2 rounded bg-(--bg-inset) animate-pulse" />
+          <div class="h-3.5 w-2/3 rounded bg-bg-inset animate-pulse" />
+          <div class="h-3 w-1/2 rounded bg-bg-inset animate-pulse" />
         </div>
       </div>
 
@@ -82,26 +82,26 @@ function loadMissing() {
 
       <!-- Loaded data -->
       <div v-else-if="state" class="flex items-center gap-3">
-        <div class="flex size-12 shrink-0 items-center justify-center rounded-full bg-(--accent-subtle) text-lg font-semibold text-(--accent-text)">
+        <div class="flex size-12 shrink-0 items-center justify-center rounded-full bg-accent-subtle text-lg font-semibold text-accent-text">
           {{ state.name.charAt(0) }}
         </div>
         <div class="flex flex-1 flex-col">
-          <span class="font-semibold text-(--fg)">{{ state.name }}</span>
-          <span class="text-sm text-(--fg-muted)">{{ state.role }}</span>
-          <span class="font-mono text-xs tabular-nums text-(--fg-subtle)">{{ state.commits.toLocaleString() }} commits</span>
+          <span class="font-semibold text-fg">{{ state.name }}</span>
+          <span class="text-sm text-fg-muted">{{ state.role }}</span>
+          <span class="font-mono text-xs tabular-nums text-fg-subtle">{{ state.commits.toLocaleString() }} commits</span>
         </div>
       </div>
 
       <!-- Idle / empty -->
-      <div v-else class="flex flex-1 items-center justify-center text-sm text-(--fg-subtle)">
+      <div v-else class="flex flex-1 items-center justify-center text-sm text-fg-subtle">
         Press “Load” to fetch a profile.
       </div>
     </div>
 
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="profile-id">Profile id</label>
-        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">#{{ id }}</span>
+        <label class="demo-label" for="profile-id">Profile id</label>
+        <span class="font-mono text-xs tabular-nums text-fg-muted">#{{ id }}</span>
       </div>
       <input
         id="profile-id"
@@ -110,7 +110,7 @@ function loadMissing() {
         min="0"
         max="5"
         step="1"
-        class="w-full accent-(--accent) cursor-pointer"
+        class="w-full accent-accent cursor-pointer"
       >
     </div>
 
@@ -118,7 +118,7 @@ function loadMissing() {
       <button
         type="button"
         :disabled="isLoading"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="load"
       >
         {{ isLoading ? 'Loading…' : 'Load' }}
@@ -126,7 +126,7 @@ function loadMissing() {
       <button
         type="button"
         :disabled="isLoading"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="loadMissing"
       >
         Trigger error
diff --git a/vue/toolkit/src/composables/state/useAsyncState/index.ts b/vue/toolkit/src/composables/state/useAsyncState/index.ts
index 68239c5..a6a2c98 100644
--- a/vue/toolkit/src/composables/state/useAsyncState/index.ts
+++ b/vue/toolkit/src/composables/state/useAsyncState/index.ts
@@ -2,7 +2,7 @@ import { ref, shallowRef, watch } from 'vue';
 import type { Ref, ShallowRef, UnwrapRef } from 'vue';
 import { isFunction, sleep } from '@robonen/stdlib';
 
-export interface UseAsyncStateOptions<Shallow extends boolean, Data = any> {
+export interface UseAsyncStateOptions<Shallow extends boolean, Data = unknown> {
   delay?: number;
   shallow?: Shallow;
   immediate?: boolean;
@@ -12,7 +12,7 @@ export interface UseAsyncStateOptions<Shallow extends boolean, Data = any> {
   onSuccess?: (data: Data) => void;
 }
 
-export interface UseAsyncStateReturnBase<Data, Params extends any[], Shallow extends boolean> {
+export interface UseAsyncStateReturnBase<Data, Params extends unknown[], Shallow extends boolean> {
   state: Shallow extends true ? ShallowRef<Data> : Ref<UnwrapRef<Data>>;
   isLoading: Ref<boolean>;
   isReady: Ref<boolean>;
@@ -21,7 +21,7 @@ export interface UseAsyncStateReturnBase<Data, Params extends any[], Shallow ext
   executeImmediately: (...params: Params) => Promise<Data>;
 }
 
-export type UseAsyncStateReturn<Data, Params extends any[], Shallow extends boolean>
+export type UseAsyncStateReturn<Data, Params extends unknown[], Shallow extends boolean>
   = & UseAsyncStateReturnBase<Data, Params, Shallow>
     & PromiseLike<UseAsyncStateReturnBase<Data, Params, Shallow>>;
 
@@ -30,7 +30,7 @@ export type UseAsyncStateReturn<Data, Params extends any[], Shallow extends bool
  * @category State
  * @description A composable that provides a state for async operations without setup blocking
  */
-export function useAsyncState<Data, Params extends any[] = [], Shallow extends boolean = true>(
+export function useAsyncState<Data, Params extends unknown[] = [], Shallow extends boolean = true>(
   maybePromise: Promise<Data> | ((...args: Params) => Promise<Data>),
   initialState: Data,
   options?: UseAsyncStateOptions<Shallow, Data>,
@@ -50,7 +50,7 @@ export function useAsyncState<Data, Params extends any[] = [], Shallow extends b
   const isLoading = ref(false);
   const isReady = ref(false);
 
-  const execute = async (actualDelay = delay, ...params: any[]) => {
+  const execute = async (actualDelay = delay, ...params: unknown[]) => {
     if (resetOnExecute)
       state.value = initialState;
 
diff --git a/vue/toolkit/src/composables/state/useContextFactory/demo.vue b/vue/toolkit/src/composables/state/useContextFactory/demo.vue
index 2f3ede4..388a963 100644
--- a/vue/toolkit/src/composables/state/useContextFactory/demo.vue
+++ b/vue/toolkit/src/composables/state/useContextFactory/demo.vue
@@ -27,14 +27,14 @@ const ThemedCard = defineComponent({
       h(
         'div',
         {
-          class: 'rounded-lg border border-(--border) bg-(--bg-inset)',
+          class: 'rounded-lg border border-border bg-bg-inset',
           style: { padding: pad.value, borderLeft: `3px solid ${ctx.accent}` },
         },
         [
-          h('div', { class: 'text-sm font-medium text-(--fg)' }, 'Injected child'),
+          h('div', { class: 'text-sm font-medium text-fg' }, 'Injected child'),
           h(
             'div',
-            { class: 'font-mono text-xs tabular-nums text-(--fg-muted)' },
+            { class: 'font-mono text-xs tabular-nums text-fg-muted' },
             `accent ${ctx.accent} · ${ctx.density}`,
           ),
         ],
@@ -44,12 +44,12 @@ const ThemedCard = defineComponent({
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Provider (parent)</span>
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-4">
+      <span class="demo-label">Provider (parent)</span>
 
       <div class="flex flex-col gap-2">
-        <span class="text-xs text-(--fg-muted)">Accent</span>
+        <span class="text-xs text-fg-muted">Accent</span>
         <div class="flex gap-2">
           <button
             v-for="color in accents"
@@ -57,7 +57,7 @@ const ThemedCard = defineComponent({
             type="button"
             :aria-pressed="theme.accent === color"
             class="size-8 rounded-lg border-2 transition active:scale-[0.95] cursor-pointer"
-            :class="theme.accent === color ? 'border-(--accent) scale-110' : 'border-(--border) hover:border-(--border-strong)'"
+            :class="theme.accent === color ? 'border-accent scale-110' : 'border-border hover:border-border-strong'"
             :style="{ backgroundColor: color }"
             @click="theme.accent = color"
           />
@@ -65,14 +65,14 @@ const ThemedCard = defineComponent({
       </div>
 
       <div class="flex flex-col gap-2">
-        <span class="text-xs text-(--fg-muted)">Density</span>
+        <span class="text-xs text-fg-muted">Density</span>
         <div class="grid grid-cols-2 gap-2">
           <button
             type="button"
             class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
             :class="theme.density === 'cozy'
-              ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
-              : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+              ? 'border-transparent bg-accent text-accent-fg hover:bg-accent-hover'
+              : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
             @click="theme.density = 'cozy'"
           >
             Cozy
@@ -81,8 +81,8 @@ const ThemedCard = defineComponent({
             type="button"
             class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
             :class="theme.density === 'compact'
-              ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
-              : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+              ? 'border-transparent bg-accent text-accent-fg hover:bg-accent-hover'
+              : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
             @click="theme.density = 'compact'"
           >
             Compact
@@ -94,8 +94,8 @@ const ThemedCard = defineComponent({
     <!-- Descendant resolves the value through inject(), no props passed in -->
     <ThemedCard />
 
-    <p class="text-xs text-(--fg-subtle)">
-      The card reads context with <span class="font-mono text-(--fg-muted)">inject()</span> — change the controls above
+    <p class="text-xs text-fg-subtle">
+      The card reads context with <span class="font-mono text-fg-muted">inject()</span> — change the controls above
       and it updates without a single prop.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/state/useCounter/demo.vue b/vue/toolkit/src/composables/state/useCounter/demo.vue
index 01d7de8..b59fd60 100644
--- a/vue/toolkit/src/composables/state/useCounter/demo.vue
+++ b/vue/toolkit/src/composables/state/useCounter/demo.vue
@@ -14,11 +14,11 @@ const fillPercent = computed(() => ((count.value - MIN) / (MAX - MIN)) * 100);
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-4">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tickets</span>
-        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="demo-label">Tickets</span>
+        <span class="demo-badge">
           {{ MIN }} – {{ MAX }}
         </span>
       </div>
@@ -29,22 +29,22 @@ const fillPercent = computed(() => ((count.value - MIN) / (MAX - MIN)) * 100);
           type="button"
           :disabled="atMin"
           aria-label="Decrement"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) size-11 text-lg font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-border bg-bg-elevated size-11 text-lg font-medium text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           @click="decrement()"
         >
           −
         </button>
 
         <div class="flex flex-col items-center">
-          <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ count }}</span>
-          <span class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">in cart</span>
+          <span class="demo-stat text-3xl">{{ count }}</span>
+          <span class="text-[10px] uppercase tracking-wide text-fg-subtle">in cart</span>
         </div>
 
         <button
           type="button"
           :disabled="atMax"
           aria-label="Increment"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) size-11 text-lg font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-accent size-11 text-lg font-medium text-accent-fg transition hover:bg-accent-hover active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           @click="increment()"
         >
           +
@@ -52,42 +52,42 @@ const fillPercent = computed(() => ((count.value - MIN) / (MAX - MIN)) * 100);
       </div>
 
       <!-- Visual clamp feedback -->
-      <div class="h-2 overflow-hidden rounded-full border border-(--border) bg-(--bg-inset)">
+      <div class="h-2 overflow-hidden rounded-full border border-border bg-bg-inset">
         <div
-          class="h-full rounded-full bg-(--accent) transition-all duration-200"
+          class="h-full rounded-full bg-accent transition-all duration-200"
           :style="{ width: `${fillPercent}%` }"
         />
       </div>
     </div>
 
     <div class="flex flex-col gap-2">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Step actions</span>
+      <span class="demo-label">Step actions</span>
       <div class="grid grid-cols-3 gap-2">
         <button
           type="button"
           :disabled="atMax"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           @click="increment(5)"
         >
           +5
         </button>
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="set(MAX)"
         >
           Max
         </button>
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="reset()"
         >
           Reset
         </button>
       </div>
-      <p class="text-xs text-(--fg-subtle)">
-        Values are clamped to <span class="font-mono text-(--fg-muted)">{{ MIN }}–{{ MAX }}</span> — try +5 near the top.
+      <p class="text-xs text-fg-subtle">
+        Values are clamped to <span class="font-mono text-fg-muted">{{ MIN }}–{{ MAX }}</span> — try +5 near the top.
       </p>
     </div>
   </div>
diff --git a/vue/toolkit/src/composables/state/useCycleList/demo.vue b/vue/toolkit/src/composables/state/useCycleList/demo.vue
index b3a77c3..4772910 100644
--- a/vue/toolkit/src/composables/state/useCycleList/demo.vue
+++ b/vue/toolkit/src/composables/state/useCycleList/demo.vue
@@ -24,11 +24,11 @@ const position = computed(() => `${index.value + 1} / ${palette.length}`);
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-4">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Accent</span>
-        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums">
+        <span class="demo-label">Accent</span>
+        <span class="demo-badge tabular-nums">
           {{ position }}
         </span>
       </div>
@@ -36,12 +36,12 @@ const position = computed(() => `${index.value + 1} / ${palette.length}`);
       <!-- Live preview of the currently selected swatch -->
       <div class="flex items-center gap-4">
         <div
-          class="size-16 shrink-0 rounded-xl border border-(--border-strong) shadow-inner transition-colors duration-300"
+          class="size-16 shrink-0 rounded-xl border border-border-strong shadow-inner transition-colors duration-300"
           :style="{ backgroundColor: state.hex }"
         />
         <div class="flex flex-col gap-1">
-          <span class="text-lg font-semibold text-(--fg)">{{ state.name }}</span>
-          <span class="font-mono text-sm uppercase tabular-nums text-(--fg-muted)">{{ state.hex }}</span>
+          <span class="text-lg font-semibold text-fg">{{ state.name }}</span>
+          <span class="font-mono text-sm uppercase tabular-nums text-fg-muted">{{ state.hex }}</span>
         </div>
       </div>
 
@@ -49,14 +49,14 @@ const position = computed(() => `${index.value + 1} / ${palette.length}`);
       <div class="grid grid-cols-2 gap-2">
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="prev()"
         >
           ← Prev
         </button>
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          class="demo-btn-primary"
           @click="next()"
         >
           Next →
@@ -66,7 +66,7 @@ const position = computed(() => `${index.value + 1} / ${palette.length}`);
 
     <!-- index.value is writable: tap any swatch to jump straight to it -->
     <div class="flex flex-col gap-2">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Jump to</span>
+      <span class="demo-label">Jump to</span>
       <div class="flex flex-wrap gap-2">
         <button
           v-for="(swatch, i) in palette"
@@ -75,14 +75,14 @@ const position = computed(() => `${index.value + 1} / ${palette.length}`);
           :aria-pressed="i === index"
           :title="swatch.name"
           class="size-9 rounded-lg border-2 transition active:scale-[0.95] cursor-pointer"
-          :class="i === index ? 'border-(--accent) scale-110' : 'border-(--border) hover:border-(--border-strong)'"
+          :class="i === index ? 'border-accent scale-110' : 'border-border hover:border-border-strong'"
           :style="{ backgroundColor: swatch.hex }"
           @click="go(i)"
         />
       </div>
-      <p class="text-xs text-(--fg-subtle)">
-        Tabs call <span class="font-mono text-(--fg-muted)">go(i)</span>; arrows wrap around with
-        <span class="font-mono text-(--fg-muted)">next/prev</span>.
+      <p class="text-xs text-fg-subtle">
+        Tabs call <span class="font-mono text-fg-muted">go(i)</span>; arrows wrap around with
+        <span class="font-mono text-fg-muted">next/prev</span>.
       </p>
     </div>
   </div>
diff --git a/vue/toolkit/src/composables/state/useDebouncedRefHistory/demo.vue b/vue/toolkit/src/composables/state/useDebouncedRefHistory/demo.vue
index 24285c0..c62fe61 100644
--- a/vue/toolkit/src/composables/state/useDebouncedRefHistory/demo.vue
+++ b/vue/toolkit/src/composables/state/useDebouncedRefHistory/demo.vue
@@ -24,21 +24,21 @@ function formatTime(ts: number): string {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <label class="flex flex-col gap-1.5">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tracked draft</span>
+      <span class="demo-label">Tracked draft</span>
       <textarea
         v-model="message"
         rows="2"
         placeholder="Type fast — bursts collapse into one record"
-        class="w-full resize-none rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input resize-none"
       />
     </label>
 
     <label class="flex flex-col gap-1.5">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Debounce delay</span>
-        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ debounce }}ms</span>
+        <span class="demo-label">Debounce delay</span>
+        <span class="font-mono text-xs tabular-nums text-fg-muted">{{ debounce }}ms</span>
       </div>
       <input
         v-model.number="debounce"
@@ -46,7 +46,7 @@ function formatTime(ts: number): string {
         min="0"
         max="1200"
         step="100"
-        class="w-full accent-(--accent)"
+        class="w-full accent-accent"
       >
     </label>
 
@@ -54,7 +54,7 @@ function formatTime(ts: number): string {
       <button
         type="button"
         :disabled="!canUndo"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="undo"
       >
         Undo
@@ -62,24 +62,24 @@ function formatTime(ts: number): string {
       <button
         type="button"
         :disabled="!canRedo"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="redo"
       >
         Redo
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="clear"
       >
         Clear
       </button>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
+    <div class="demo-card p-4 flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">History</span>
-        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums">
+        <span class="demo-label">History</span>
+        <span class="demo-badge tabular-nums">
           {{ history.length }} records
         </span>
       </div>
@@ -87,10 +87,10 @@ function formatTime(ts: number): string {
         <li
           v-for="(record, i) in history"
           :key="record.timestamp"
-          class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-1.5"
+          class="flex items-center justify-between gap-3 rounded-lg border border-border bg-bg-inset px-3 py-1.5"
         >
-          <span class="truncate font-mono text-sm text-(--fg)">"{{ record.snapshot }}"</span>
-          <span class="shrink-0 font-mono text-xs tabular-nums" :class="i === 0 ? 'text-(--accent-text)' : 'text-(--fg-subtle)'">
+          <span class="truncate font-mono text-sm text-fg">"{{ record.snapshot }}"</span>
+          <span class="shrink-0 font-mono text-xs tabular-nums" :class="i === 0 ? 'text-accent-text' : 'text-fg-subtle'">
             {{ i === 0 ? 'now' : formatTime(record.timestamp) }}
           </span>
         </li>
diff --git a/vue/toolkit/src/composables/state/useId/demo.vue b/vue/toolkit/src/composables/state/useId/demo.vue
index c5ff319..fe95dc1 100644
--- a/vue/toolkit/src/composables/state/useId/demo.vue
+++ b/vue/toolkit/src/composables/state/useId/demo.vue
@@ -17,9 +17,9 @@ const email = ref('');
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2.5">
-      <label :for="fieldId" class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-2.5">
+      <label :for="fieldId" class="demo-label">
         Email
       </label>
       <input
@@ -28,38 +28,38 @@ const email = ref('');
         type="email"
         :aria-describedby="helpId"
         placeholder="ada@example.com"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
       >
-      <p :id="helpId" class="text-xs text-(--fg-subtle)">
+      <p :id="helpId" class="text-xs text-fg-subtle">
         The <span class="font-mono">label</span>, <span class="font-mono">input</span> and this hint are
         linked by generated ids — no hard-coded strings, no collisions.
       </p>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums flex flex-col gap-1.5">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums flex flex-col gap-1.5">
       <div class="flex items-center justify-between gap-3">
-        <span class="text-(--fg-subtle)">field</span>
+        <span class="text-fg-subtle">field</span>
         <span class="truncate">{{ fieldId }}</span>
       </div>
       <div class="flex items-center justify-between gap-3">
-        <span class="text-(--fg-subtle)">help</span>
+        <span class="text-fg-subtle">help</span>
         <span class="truncate">{{ helpId }}</span>
       </div>
     </div>
 
     <label class="flex flex-col gap-1.5">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Deterministic override</span>
+      <span class="demo-label">Deterministic override</span>
       <input
         v-model="userProvided"
         type="text"
         placeholder="Leave blank to auto-generate"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
       >
     </label>
 
-    <div class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Resolved</span>
-      <span class="truncate font-mono text-sm text-(--accent-text) tabular-nums">{{ resolvedId }}</span>
+    <div class="flex items-center justify-between gap-3 rounded-lg border border-border bg-bg-inset px-3 py-2.5">
+      <span class="demo-label">Resolved</span>
+      <span class="truncate font-mono text-sm text-accent-text tabular-nums">{{ resolvedId }}</span>
     </div>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/state/useInjectionStore/demo.vue b/vue/toolkit/src/composables/state/useInjectionStore/demo.vue
index a6f3bed..f9ed3c0 100644
--- a/vue/toolkit/src/composables/state/useInjectionStore/demo.vue
+++ b/vue/toolkit/src/composables/state/useInjectionStore/demo.vue
@@ -41,41 +41,41 @@ const Summary = defineComponent({
     return { injected };
   },
   template: `
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 flex items-center justify-between">
       <div class="flex flex-col">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Injected in child</span>
-        <span class="text-xs text-(--fg-subtle)">{{ injected.items.length }} items</span>
+        <span class="text-xs font-medium uppercase tracking-wide text-fg-subtle">Injected in child</span>
+        <span class="text-xs text-fg-subtle">{{ injected.items.length }} items</span>
       </div>
-      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">\${{ injected.total }}</span>
+      <span class="font-mono text-3xl font-bold tabular-nums text-fg">\${{ injected.total }}</span>
     </div>
   `,
 });
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Cart (provided here)</span>
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-2">
+      <span class="demo-label">Cart (provided here)</span>
       <ul class="flex flex-col gap-1.5">
         <li
           v-for="(item, i) in cart.items"
           :key="i"
-          class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-1.5"
+          class="flex items-center justify-between gap-3 rounded-lg border border-border bg-bg-inset px-3 py-1.5"
         >
-          <span class="truncate text-sm text-(--fg)">{{ item.name }}</span>
+          <span class="truncate text-sm text-fg">{{ item.name }}</span>
           <div class="flex shrink-0 items-center gap-2">
-            <span class="font-mono text-sm tabular-nums text-(--fg-muted)">${{ item.price }}</span>
+            <span class="font-mono text-sm tabular-nums text-fg-muted">${{ item.price }}</span>
             <button
               type="button"
               aria-label="Remove item"
-              class="rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+              class="rounded-md border border-border bg-bg-elevated px-2 py-0.5 text-xs font-medium text-fg-muted transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.98] cursor-pointer"
               @click="cart.remove(i)"
             >
               ✕
             </button>
           </div>
         </li>
-        <li v-if="!cart.items.length" class="rounded-lg border border-dashed border-(--border) px-3 py-4 text-center text-sm text-(--fg-subtle)">
+        <li v-if="!cart.items.length" class="rounded-lg border border-dashed border-border px-3 py-4 text-center text-sm text-fg-subtle">
           Cart is empty
         </li>
       </ul>
@@ -86,7 +86,7 @@ const Summary = defineComponent({
         v-model="draftName"
         type="text"
         placeholder="Item name"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
         @keydown.enter="addDraft"
       >
       <input
@@ -94,12 +94,12 @@ const Summary = defineComponent({
         type="number"
         min="0"
         aria-label="Price"
-        class="w-20 shrink-0 rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) tabular-nums transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="w-20 shrink-0 rounded-lg border border-border bg-bg px-3 py-2 text-sm text-fg tabular-nums transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring"
         @keydown.enter="addDraft"
       >
       <button
         type="button"
-        class="inline-flex shrink-0 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary shrink-0"
         @click="addDraft"
       >
         Add
@@ -108,7 +108,7 @@ const Summary = defineComponent({
 
     <Summary />
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       The parent calls <span class="font-mono">useProvidingState()</span>; the nested summary calls
       <span class="font-mono">useInjectedState()</span> and reads the very same reactive cart.
     </p>
diff --git a/vue/toolkit/src/composables/state/useInjectionStore/index.ts b/vue/toolkit/src/composables/state/useInjectionStore/index.ts
index b2e9716..815bc02 100644
--- a/vue/toolkit/src/composables/state/useInjectionStore/index.ts
+++ b/vue/toolkit/src/composables/state/useInjectionStore/index.ts
@@ -45,7 +45,7 @@ export interface useInjectionStoreOptions<Return> {
  *
  * @since 0.0.5
  */
-export function useInjectionStore<Args extends any[], Return>(
+export function useInjectionStore<Args extends unknown[], Return>(
   stateFactory: (...args: Args) => Return,
   options?: useInjectionStoreOptions<Return>,
 ) {
diff --git a/vue/toolkit/src/composables/state/useLastChanged/demo.vue b/vue/toolkit/src/composables/state/useLastChanged/demo.vue
index bda5dc7..384813b 100644
--- a/vue/toolkit/src/composables/state/useLastChanged/demo.vue
+++ b/vue/toolkit/src/composables/state/useLastChanged/demo.vue
@@ -34,38 +34,38 @@ const exactTime = computed(() =>
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <label class="flex flex-col gap-1.5">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Document title</span>
+      <span class="demo-label">Document title</span>
       <input
         v-model="title"
         type="text"
         placeholder="Edit to update the timestamp"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
       >
     </label>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+    <div class="demo-card p-4 flex flex-col gap-3">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last edited</span>
+        <span class="demo-label">Last edited</span>
         <span
           class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
           :class="lastChanged === null
-            ? 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'
+            ? 'border-border bg-bg-inset text-fg-muted'
             : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
         >
-          <span class="h-1.5 w-1.5 rounded-full" :class="lastChanged === null ? 'bg-(--fg-subtle)' : 'bg-emerald-500'" />
+          <span class="h-1.5 w-1.5 rounded-full" :class="lastChanged === null ? 'bg-fg-subtle' : 'bg-emerald-500'" />
           {{ lastChanged === null ? 'untouched' : 'edited' }}
         </span>
       </div>
 
-      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ relative }}</span>
+      <span class="demo-stat text-3xl">{{ relative }}</span>
 
-      <div class="h-px bg-(--border)" />
+      <div class="h-px bg-border" />
 
       <div class="flex items-center justify-between">
-        <span class="text-xs text-(--fg-subtle)">Timestamp</span>
-        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ exactTime }}</span>
+        <span class="text-xs text-fg-subtle">Timestamp</span>
+        <span class="font-mono text-sm tabular-nums text-fg-muted">{{ exactTime }}</span>
       </div>
     </div>
   </div>
diff --git a/vue/toolkit/src/composables/state/useLastChanged/index.ts b/vue/toolkit/src/composables/state/useLastChanged/index.ts
index d1a016e..487da35 100644
--- a/vue/toolkit/src/composables/state/useLastChanged/index.ts
+++ b/vue/toolkit/src/composables/state/useLastChanged/index.ts
@@ -30,7 +30,7 @@ export interface UseLastChangedOptions<
  */
 export function useLastChanged(source: WatchSource, options?: UseLastChangedOptions<false>): Ref<number | null>;
 export function useLastChanged(source: WatchSource, options: UseLastChangedOptions<true> | UseLastChangedOptions<boolean, number>): Ref<number>;
-export function useLastChanged(source: WatchSource, options: UseLastChangedOptions<boolean, any> = {}): Ref<number | null> | Ref<number> {
+export function useLastChanged(source: WatchSource, options: UseLastChangedOptions<boolean, number | null | undefined> = {}): Ref<number | null> | Ref<number> {
   const lastChanged = ref<number | null>(options.initialValue ?? null);
 
   watch(source, () => {
diff --git a/vue/toolkit/src/composables/state/useManualRefHistory/demo.vue b/vue/toolkit/src/composables/state/useManualRefHistory/demo.vue
index e0807f7..38fa4f5 100644
--- a/vue/toolkit/src/composables/state/useManualRefHistory/demo.vue
+++ b/vue/toolkit/src/composables/state/useManualRefHistory/demo.vue
@@ -20,15 +20,15 @@ function formatTime(ts: number): string {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-3">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Working value</span>
-        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">hue {{ hue }}°</span>
+        <span class="demo-label">Working value</span>
+        <span class="font-mono text-sm tabular-nums text-fg-muted">hue {{ hue }}°</span>
       </div>
 
       <div
-        class="h-16 w-full rounded-lg border border-(--border)"
+        class="h-16 w-full rounded-lg border border-border"
         :style="{ backgroundColor: `hsl(${hue} 72% 56%)` }"
       />
 
@@ -37,12 +37,12 @@ function formatTime(ts: number): string {
         type="range"
         min="0"
         max="360"
-        class="w-full accent-(--accent)"
+        class="w-full accent-accent"
       >
 
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary"
         @click="commit"
       >
         Commit snapshot
@@ -53,7 +53,7 @@ function formatTime(ts: number): string {
       <button
         type="button"
         :disabled="!canUndo"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="undo"
       >
         Undo
@@ -61,31 +61,31 @@ function formatTime(ts: number): string {
       <button
         type="button"
         :disabled="!canRedo"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="redo"
       >
         Redo
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="reset"
       >
         Reset
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="clear"
       >
         Clear
       </button>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
+    <div class="demo-card p-4 flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Committed snapshots</span>
-        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums">
+        <span class="demo-label">Committed snapshots</span>
+        <span class="demo-badge tabular-nums">
           {{ history.length }}
         </span>
       </div>
@@ -93,23 +93,23 @@ function formatTime(ts: number): string {
         <li
           v-for="(record, i) in history"
           :key="record.timestamp"
-          class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-1.5"
+          class="flex items-center justify-between gap-3 rounded-lg border border-border bg-bg-inset px-3 py-1.5"
         >
           <span class="flex items-center gap-2">
             <span
-              class="h-4 w-4 shrink-0 rounded-full border border-(--border)"
+              class="h-4 w-4 shrink-0 rounded-full border border-border"
               :style="{ backgroundColor: `hsl(${record.snapshot} 72% 56%)` }"
             />
-            <span class="font-mono text-sm tabular-nums text-(--fg)">{{ record.snapshot }}°</span>
+            <span class="font-mono text-sm tabular-nums text-fg">{{ record.snapshot }}°</span>
           </span>
-          <span class="shrink-0 font-mono text-xs tabular-nums" :class="i === 0 ? 'text-(--accent-text)' : 'text-(--fg-subtle)'">
+          <span class="shrink-0 font-mono text-xs tabular-nums" :class="i === 0 ? 'text-accent-text' : 'text-fg-subtle'">
             {{ i === 0 ? 'current' : formatTime(record.timestamp) }}
           </span>
         </li>
       </ol>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Unlike automatic history, nothing is recorded until you press
       <span class="font-mono">Commit snapshot</span>.
     </p>
diff --git a/vue/toolkit/src/composables/state/useOffsetPagination/demo.vue b/vue/toolkit/src/composables/state/useOffsetPagination/demo.vue
index 1f41534..dc69574 100644
--- a/vue/toolkit/src/composables/state/useOffsetPagination/demo.vue
+++ b/vue/toolkit/src/composables/state/useOffsetPagination/demo.vue
@@ -44,10 +44,10 @@ const rangeEnd = computed(() => Math.min(currentPage.value * currentPageSize.val
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <!-- Page size control -->
     <div class="flex items-center justify-between gap-3">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Per page
       </span>
       <div class="flex gap-1.5">
@@ -57,8 +57,8 @@ const rangeEnd = computed(() => Math.min(currentPage.value * currentPageSize.val
           type="button"
           class="inline-flex items-center justify-center rounded-lg border px-2.5 py-1 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
           :class="currentPageSize === size
-            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
-            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            ? 'border-transparent bg-accent text-accent-fg'
+            : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
           @click="currentPageSize = size"
         >
           {{ size }}
@@ -67,17 +67,17 @@ const rangeEnd = computed(() => Math.min(currentPage.value * currentPageSize.val
     </div>
 
     <!-- Records -->
-    <ul class="overflow-hidden rounded-xl border border-(--border) bg-(--bg-elevated)">
+    <ul class="demo-card overflow-hidden">
       <li
         v-for="user in pageItems"
         :key="user.id"
-        class="flex items-center gap-3 border-b border-(--border) px-4 py-2.5 last:border-b-0"
+        class="flex items-center gap-3 border-b border-border px-4 py-2.5 last:border-b-0"
       >
-        <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-(--accent-subtle) text-xs font-semibold text-(--accent-text)">
+        <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-accent-subtle text-xs font-semibold text-accent-text">
           {{ user.id }}
         </span>
-        <span class="flex-1 truncate text-sm font-medium text-(--fg)">{{ user.name }}</span>
-        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="flex-1 truncate text-sm font-medium text-fg">{{ user.name }}</span>
+        <span class="demo-badge">
           {{ user.role }}
         </span>
       </li>
@@ -85,14 +85,14 @@ const rangeEnd = computed(() => Math.min(currentPage.value * currentPageSize.val
 
     <!-- Footer + pager -->
     <div class="flex flex-wrap items-center justify-between gap-3">
-      <p class="text-sm text-(--fg-muted) tabular-nums">
+      <p class="text-sm text-fg-muted tabular-nums">
         {{ rangeStart }}–{{ rangeEnd }} of {{ total }}
       </p>
 
       <div class="flex flex-wrap items-center justify-center gap-1.5">
         <button
           type="button"
-          class="inline-flex items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="inline-flex items-center justify-center rounded-lg border border-border bg-bg-elevated px-3 py-1.5 text-sm font-medium text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           :disabled="isFirstPage"
           @click="previous"
         >
@@ -105,8 +105,8 @@ const rangeEnd = computed(() => Math.min(currentPage.value * currentPageSize.val
           type="button"
           class="inline-flex h-8 w-8 items-center justify-center rounded-lg border text-sm font-medium tabular-nums transition active:scale-[0.98] cursor-pointer"
           :class="page === currentPage
-            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
-            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            ? 'border-transparent bg-accent text-accent-fg'
+            : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
           :aria-current="page === currentPage ? 'page' : undefined"
           @click="select(page)"
         >
@@ -115,7 +115,7 @@ const rangeEnd = computed(() => Math.min(currentPage.value * currentPageSize.val
 
         <button
           type="button"
-          class="inline-flex items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="inline-flex items-center justify-center rounded-lg border border-border bg-bg-elevated px-3 py-1.5 text-sm font-medium text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           :disabled="isLastPage"
           @click="next"
         >
diff --git a/vue/toolkit/src/composables/state/useRefHistory/demo.vue b/vue/toolkit/src/composables/state/useRefHistory/demo.vue
index 2961035..6faab8c 100644
--- a/vue/toolkit/src/composables/state/useRefHistory/demo.vue
+++ b/vue/toolkit/src/composables/state/useRefHistory/demo.vue
@@ -26,17 +26,17 @@ function formatTime(ts: number): string {
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <!-- Source editor -->
     <div class="flex flex-col gap-2">
-      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <label class="demo-label">
         Tracked value
       </label>
       <input
         v-model="text"
         type="text"
         placeholder="Type to record history…"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
       >
     </div>
 
@@ -44,7 +44,7 @@ function formatTime(ts: number): string {
     <div class="flex flex-wrap items-center gap-2">
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="!canUndo"
         @click="undo"
       >
@@ -52,7 +52,7 @@ function formatTime(ts: number): string {
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="!canRedo"
         @click="redo"
       >
@@ -61,7 +61,7 @@ function formatTime(ts: number): string {
 
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="isTracking ? pause() : resume()"
       >
         {{ isTracking ? '❚❚ Pause' : '▶ Resume' }}
@@ -69,7 +69,7 @@ function formatTime(ts: number): string {
 
       <button
         type="button"
-        class="ml-auto inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn ml-auto"
         @click="clear"
       >
         Clear
@@ -87,29 +87,29 @@ function formatTime(ts: number): string {
         <span class="h-1.5 w-1.5 rounded-full" :class="isTracking ? 'bg-emerald-500' : 'bg-amber-500'" />
         {{ isTracking ? 'Tracking' : 'Paused' }}
       </span>
-      <span class="text-xs text-(--fg-subtle) tabular-nums">
+      <span class="text-xs text-fg-subtle tabular-nums">
         {{ history.length }} record{{ history.length === 1 ? '' : 's' }}
       </span>
     </div>
 
     <!-- History timeline -->
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-2">
+    <div class="demo-card p-2">
       <ul class="flex max-h-48 flex-col gap-1 overflow-y-auto">
         <li
           v-for="(record, i) in history"
           :key="record.timestamp + '-' + i"
           class="flex items-center gap-3 rounded-lg px-2 py-1.5 text-sm"
-          :class="i === 0 ? 'bg-(--accent-subtle)' : ''"
+          :class="i === 0 ? 'bg-accent-subtle' : ''"
         >
-          <span class="font-mono text-xs text-(--fg-subtle) tabular-nums">
+          <span class="font-mono text-xs text-fg-subtle tabular-nums">
             {{ formatTime(record.timestamp) }}
           </span>
-          <span class="flex-1 truncate" :class="i === 0 ? 'font-medium text-(--accent-text)' : 'text-(--fg-muted)'">
+          <span class="flex-1 truncate" :class="i === 0 ? 'font-medium text-accent-text' : 'text-fg-muted'">
             {{ record.snapshot || '(empty)' }}
           </span>
           <span
             v-if="i === 0"
-            class="text-xs font-medium text-(--accent-text)"
+            class="text-xs font-medium text-accent-text"
           >current</span>
         </li>
       </ul>
diff --git a/vue/toolkit/src/composables/state/useRefHistory/index.ts b/vue/toolkit/src/composables/state/useRefHistory/index.ts
index 7dd46d8..81dddaf 100644
--- a/vue/toolkit/src/composables/state/useRefHistory/index.ts
+++ b/vue/toolkit/src/composables/state/useRefHistory/index.ts
@@ -1,9 +1,11 @@
 import { computed, markRaw, ref, toRaw } from 'vue';
 import type { ComputedRef, Ref } from 'vue';
-import { isFunction } from '@robonen/stdlib';
+import { isFunction, timestamp } from '@robonen/stdlib';
 import { watchIgnorable } from '@/composables/watch/watchIgnorable';
+import { cloneFnDefault } from '@/composables/reactivity/useCloned';
 import type { UseRefHistoryRecord } from '@/composables/state/useManualRefHistory';
 import type { ConfigurableFlush } from '@/types';
+import { bypassFilter } from '@/utils';
 import type { ConfigurableEventFilter, EventFilter } from '@/utils';
 
 export interface UseRefHistoryOptions<Raw, Serialized = Raw> extends ConfigurableEventFilter, ConfigurableFlush {
@@ -121,23 +123,15 @@ export interface UseRefHistoryReturn<_Raw, Serialized> {
 
 const fnBypass = <T>(value: T): T => value;
 
-const bypassEventFilter: EventFilter = (invoke) => {
-  invoke();
-};
-
 function defaultDump<Raw, Serialized>(clone?: boolean | ((value: Raw) => Raw)): (value: Raw) => Serialized {
   if (!clone)
     return fnBypass as (value: Raw) => Serialized;
 
   const cloneFn = isFunction(clone)
     ? clone
-    : (value: Raw): Raw => {
-        // Unwrap reactive proxies before cloning — `structuredClone` chokes on them.
-        const raw = toRaw(value);
-        return typeof structuredClone === 'function'
-          ? structuredClone(raw)
-          : JSON.parse(JSON.stringify(raw));
-      };
+    // Unwrap reactive proxies before delegating to the shared structured/JSON
+    // clone — `structuredClone` chokes on a live reactive proxy.
+    : (value: Raw): Raw => cloneFnDefault(toRaw(value));
 
   return cloneFn as unknown as (value: Raw) => Serialized;
 }
@@ -183,7 +177,7 @@ export function useRefHistory<Raw, Serialized = Raw>(
   const parse = options.parse ?? (fnBypass as (value: Serialized) => Raw);
 
   const createRecord = (value: Raw): UseRefHistoryRecord<Serialized> =>
-    markRaw({ snapshot: dump(value), timestamp: Date.now() });
+    markRaw({ snapshot: dump(value), timestamp: timestamp() });
 
   const last = ref(createRecord(source.value)) as Ref<UseRefHistoryRecord<Serialized>>;
 
@@ -195,7 +189,7 @@ export function useRefHistory<Raw, Serialized = Raw>(
   // Compose the user filter with a pause gate. When paused, tracked changes are
   // dropped entirely (rather than queued), matching VueUse's `pause` semantics.
   const isTracking = ref(true);
-  const userFilter: EventFilter = eventFilter ?? bypassEventFilter;
+  const userFilter: EventFilter = eventFilter ?? bypassFilter;
   const composedFilter: EventFilter = (invoke) => {
     if (isTracking.value)
       userFilter(invoke);
diff --git a/vue/toolkit/src/composables/state/useStepper/demo.vue b/vue/toolkit/src/composables/state/useStepper/demo.vue
index 4dd9781..5e14d47 100644
--- a/vue/toolkit/src/composables/state/useStepper/demo.vue
+++ b/vue/toolkit/src/composables/state/useStepper/demo.vue
@@ -35,9 +35,9 @@ const {
           class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-semibold transition active:scale-[0.98] cursor-pointer"
           :class="[
             isCurrent(name)
-              ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+              ? 'border-transparent bg-accent text-accent-fg'
               : isBefore(name)
-                ? 'border-transparent bg-(--bg-elevated) text-(--fg-muted)'
+                ? 'border-transparent bg-bg-elevated text-fg-muted'
                 : 'border-transparent bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
           ]"
           :aria-current="isCurrent(name) ? 'step' : undefined"
@@ -50,20 +50,20 @@ const {
         <span
           v-if="i < stepNames.length - 1"
           class="mx-2 h-px flex-1 transition-colors"
-          :class="isBefore(name) ? 'bg-(--border)' : 'bg-(--accent)'"
+          :class="isBefore(name) ? 'bg-border' : 'bg-accent'"
         />
       </li>
     </ol>
 
     <!-- Current step content -->
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+    <div class="demo-card p-4">
+      <p class="demo-label">
         Step {{ index + 1 }} of {{ stepNames.length }}
       </p>
-      <h3 class="mt-1 text-lg font-semibold text-(--fg)">
+      <h3 class="mt-1 text-lg font-semibold text-fg">
         {{ current.title }}
       </h3>
-      <p class="mt-1 text-sm text-(--fg-muted)">
+      <p class="mt-1 text-sm text-fg-muted">
         {{ current.hint }}
       </p>
     </div>
@@ -72,7 +72,7 @@ const {
     <div class="flex items-center justify-between gap-3">
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="isFirst"
         @click="goToPrevious"
       >
@@ -81,7 +81,7 @@ const {
 
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="isLast"
         @click="goToNext"
       >
diff --git a/vue/toolkit/src/composables/state/useStepper/index.ts b/vue/toolkit/src/composables/state/useStepper/index.ts
index 1913de2..bd5c586 100644
--- a/vue/toolkit/src/composables/state/useStepper/index.ts
+++ b/vue/toolkit/src/composables/state/useStepper/index.ts
@@ -2,6 +2,11 @@ import { computed, ref } from 'vue';
 import type { ComputedRef, MaybeRef, Ref } from 'vue';
 import { isArray } from '@robonen/stdlib';
 
+/** Internal name of a step: an array element or a record key. */
+type StepName = string | number;
+/** Internal value of a step: the array element itself or a record value. */
+type StepValue = unknown;
+
 export interface UseStepperReturn<StepName, Steps, Step> {
   /** List of steps. */
   steps: Readonly<Ref<Steps>>;
@@ -67,24 +72,40 @@ export function useStepper<T extends string | number>(
   steps: MaybeRef<T[]>,
   initialStep?: T,
 ): UseStepperReturn<T, T[], T>;
-export function useStepper<T extends Record<string, any>>(
+export function useStepper<T extends Record<string, unknown>>(
   steps: MaybeRef<T>,
   initialStep?: keyof T,
 ): UseStepperReturn<Exclude<keyof T, symbol>, T, T[keyof T]>;
-export function useStepper(steps: any, initialStep?: any): UseStepperReturn<any, any, any> {
-  const stepsRef = ref<any>(steps);
+export function useStepper(
+  steps: MaybeRef<StepName[] | Record<string, StepValue>>,
+  initialStep?: StepName,
+): UseStepperReturn<StepName, StepName[] | Record<string, StepValue>, StepValue> {
+  const stepsRef = ref(steps) as Ref<StepName[] | Record<string, StepValue>>;
 
-  const stepNames = computed<any[]>(() =>
+  const stepNames = computed<StepName[]>(() =>
     isArray(stepsRef.value) ? stepsRef.value : Object.keys(stepsRef.value),
   );
 
-  const index = ref(stepNames.value.indexOf(initialStep ?? stepNames.value[0]));
+  // O(1) name -> index lookup, rebuilt only when the step list changes. Replaces
+  // repeated O(n) `stepNames.value.indexOf(step)` scans in the predicate helpers
+  // below (which are called per-render in templates). `?? -1` reproduces the
+  // exact `indexOf` sentinel for unknown steps.
+  const stepIndex = computed<Map<StepName, number>>(() => {
+    const map = new Map<StepName, number>();
+    const names = stepNames.value;
+    for (let i = 0; i < names.length; i++)
+      map.set(names[i]!, i);
+    return map;
+  });
+  const indexOfStep = (step: StepName): number => stepIndex.value.get(step) ?? -1;
 
-  const at = (at: number): any => {
+  const index = ref(stepNames.value.indexOf(initialStep ?? stepNames.value[0]!));
+
+  const at = (at: number): StepValue => {
     if (isArray(stepsRef.value))
       return stepsRef.value[at];
 
-    return stepsRef.value[stepNames.value[at]];
+    return stepsRef.value[stepNames.value[at]!];
   };
 
   const current = computed(() => at(index.value));
@@ -93,16 +114,18 @@ export function useStepper(steps: any, initialStep?: any): UseStepperReturn<any,
   const next = computed(() => stepNames.value[index.value + 1]);
   const previous = computed(() => stepNames.value[index.value - 1]);
 
-  const get = (step: any): any => {
-    if (!stepNames.value.includes(step))
+  const get = (step: StepName): StepValue | undefined => {
+    const i = indexOfStep(step);
+    if (i === -1)
       return;
 
-    return at(stepNames.value.indexOf(step));
+    return at(i);
   };
 
-  const goTo = (step: any): void => {
-    if (stepNames.value.includes(step))
-      index.value = stepNames.value.indexOf(step);
+  const goTo = (step: StepName): void => {
+    const i = indexOfStep(step);
+    if (i !== -1)
+      index.value = i;
   };
 
   const goToNext = (): void => {
@@ -119,13 +142,13 @@ export function useStepper(steps: any, initialStep?: any): UseStepperReturn<any,
     index.value--;
   };
 
-  const isNext = (step: any): boolean => stepNames.value.indexOf(step) === index.value + 1;
-  const isPrevious = (step: any): boolean => stepNames.value.indexOf(step) === index.value - 1;
-  const isCurrent = (step: any): boolean => stepNames.value.indexOf(step) === index.value;
-  const isBefore = (step: any): boolean => index.value < stepNames.value.indexOf(step);
-  const isAfter = (step: any): boolean => index.value > stepNames.value.indexOf(step);
+  const isNext = (step: StepName): boolean => indexOfStep(step) === index.value + 1;
+  const isPrevious = (step: StepName): boolean => indexOfStep(step) === index.value - 1;
+  const isCurrent = (step: StepName): boolean => indexOfStep(step) === index.value;
+  const isBefore = (step: StepName): boolean => index.value < indexOfStep(step);
+  const isAfter = (step: StepName): boolean => index.value > indexOfStep(step);
 
-  const goBackTo = (step: any): void => {
+  const goBackTo = (step: StepName): void => {
     if (isAfter(step))
       goTo(step);
   };
diff --git a/vue/toolkit/src/composables/state/useThrottledRefHistory/demo.vue b/vue/toolkit/src/composables/state/useThrottledRefHistory/demo.vue
index fd380a2..918e3f0 100644
--- a/vue/toolkit/src/composables/state/useThrottledRefHistory/demo.vue
+++ b/vue/toolkit/src/composables/state/useThrottledRefHistory/demo.vue
@@ -26,14 +26,14 @@ function formatTime(ts: number): string {
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <!-- Live value -->
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+    <div class="demo-card p-4">
       <div class="flex items-baseline justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <span class="demo-label">
           Live value
         </span>
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ value }}</span>
+        <span class="demo-stat text-3xl">{{ value }}</span>
       </div>
 
       <input
@@ -41,16 +41,16 @@ function formatTime(ts: number): string {
         type="range"
         min="0"
         max="100"
-        class="mt-3 w-full cursor-pointer accent-(--accent)"
+        class="mt-3 w-full cursor-pointer accent-accent"
       >
-      <p class="mt-2 text-xs text-(--fg-subtle)">
+      <p class="mt-2 text-xs text-fg-subtle">
         Drag the slider — only one snapshot is committed per {{ throttle }}ms.
       </p>
     </div>
 
     <!-- Throttle interval -->
     <div class="flex items-center justify-between gap-3">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Throttle
       </span>
       <div class="flex gap-1.5">
@@ -60,8 +60,8 @@ function formatTime(ts: number): string {
           type="button"
           class="inline-flex items-center justify-center rounded-lg border px-2.5 py-1 text-sm font-medium tabular-nums transition active:scale-[0.98] cursor-pointer"
           :class="throttle === ms
-            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
-            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            ? 'border-transparent bg-accent text-accent-fg'
+            : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
           @click="throttle = ms"
         >
           {{ ms }}ms
@@ -73,7 +73,7 @@ function formatTime(ts: number): string {
     <div class="flex items-center gap-2">
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="!canUndo"
         @click="undo"
       >
@@ -81,7 +81,7 @@ function formatTime(ts: number): string {
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="!canRedo"
         @click="redo"
       >
@@ -89,7 +89,7 @@ function formatTime(ts: number): string {
       </button>
       <button
         type="button"
-        class="ml-auto inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn ml-auto"
         @click="clear"
       >
         Clear
@@ -97,24 +97,24 @@ function formatTime(ts: number): string {
     </div>
 
     <!-- Committed snapshots -->
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-2">
+    <div class="demo-card p-2">
       <ul class="flex max-h-40 flex-col gap-1 overflow-y-auto">
         <li
           v-for="(record, i) in history"
           :key="record.timestamp + '-' + i"
           class="flex items-center gap-3 rounded-lg px-2 py-1.5 text-sm"
-          :class="i === 0 ? 'bg-(--accent-subtle)' : ''"
+          :class="i === 0 ? 'bg-accent-subtle' : ''"
         >
-          <span class="font-mono text-xs text-(--fg-subtle) tabular-nums">
+          <span class="font-mono text-xs text-fg-subtle tabular-nums">
             {{ formatTime(record.timestamp) }}
           </span>
           <span
             class="flex-1 font-mono tabular-nums"
-            :class="i === 0 ? 'font-medium text-(--accent-text)' : 'text-(--fg-muted)'"
+            :class="i === 0 ? 'font-medium text-accent-text' : 'text-fg-muted'"
           >
             {{ record.snapshot }}
           </span>
-          <span v-if="i === 0" class="text-xs font-medium text-(--accent-text)">latest</span>
+          <span v-if="i === 0" class="text-xs font-medium text-accent-text">latest</span>
         </li>
       </ul>
     </div>
diff --git a/vue/toolkit/src/composables/state/useToggle/demo.vue b/vue/toolkit/src/composables/state/useToggle/demo.vue
index 0f8772b..5cf93cb 100644
--- a/vue/toolkit/src/composables/state/useToggle/demo.vue
+++ b/vue/toolkit/src/composables/state/useToggle/demo.vue
@@ -12,53 +12,53 @@ const { value: theme, toggle: toggleTheme } = useToggle('light', {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <!-- Boolean toggle -->
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+    <div class="demo-card p-4">
+      <p class="demo-label">
         Boolean toggle
       </p>
 
       <div class="mt-3 flex items-center justify-between gap-3">
-        <span class="text-sm text-(--fg-muted)">Notifications</span>
+        <span class="text-sm text-fg-muted">Notifications</span>
 
         <button
           type="button"
           role="switch"
           :aria-checked="isOn"
-          class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-(--border) transition focus:outline-none focus:ring-2 focus:ring-(--ring)"
-          :class="isOn ? 'bg-(--accent)' : 'bg-(--bg-inset)'"
+          class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-border transition focus:outline-none focus:ring-2 focus:ring-ring"
+          :class="isOn ? 'bg-accent' : 'bg-bg-inset'"
           @click="toggle()"
         >
           <span
-            class="inline-block h-4 w-4 transform rounded-full bg-(--bg-elevated) shadow transition"
+            class="inline-block h-4 w-4 transform rounded-full bg-bg-elevated shadow transition"
             :class="isOn ? 'translate-x-6' : 'translate-x-1'"
           />
         </button>
       </div>
 
-      <div class="mt-3 rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm tabular-nums">
-        <span class="text-(--fg-subtle)">value: </span>
-        <span :class="isOn ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'">
+      <div class="mt-3 rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm tabular-nums">
+        <span class="text-fg-subtle">value: </span>
+        <span :class="isOn ? 'text-emerald-600 dark:text-emerald-400' : 'text-fg-muted'">
           {{ isOn }}
         </span>
       </div>
     </div>
 
     <!-- Custom truthy/falsy values -->
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+    <div class="demo-card p-4">
+      <p class="demo-label">
         Custom values
       </p>
 
       <div class="mt-3 flex items-center justify-between gap-3">
-        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="demo-badge">
           {{ theme === 'dark' ? '☽' : '☀' }} {{ theme }}
         </span>
 
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="toggleTheme()"
         >
           Toggle theme
@@ -68,7 +68,7 @@ const { value: theme, toggle: toggleTheme } = useToggle('light', {
       <div class="mt-3 flex gap-2">
         <button
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           :disabled="theme === 'light'"
           @click="toggleTheme('light')"
         >
@@ -76,7 +76,7 @@ const { value: theme, toggle: toggleTheme } = useToggle('light', {
         </button>
         <button
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn-primary flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           :disabled="theme === 'dark'"
           @click="toggleTheme('dark')"
         >
diff --git a/vue/toolkit/src/composables/storage/useCookie/demo.vue b/vue/toolkit/src/composables/storage/useCookie/demo.vue
index 1295553..9fc8a5c 100644
--- a/vue/toolkit/src/composables/storage/useCookie/demo.vue
+++ b/vue/toolkit/src/composables/storage/useCookie/demo.vue
@@ -45,33 +45,33 @@ const accepted = computed(() => Object.values(consent.value).filter(Boolean).len
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Cookie consent</span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
-        <span class="h-1.5 w-1.5 rounded-full" :class="isReady ? 'bg-emerald-500' : 'bg-(--fg-subtle) animate-pulse'" />
+      <span class="demo-label">Cookie consent</span>
+      <span class="demo-badge">
+        <span class="h-1.5 w-1.5 rounded-full" :class="isReady ? 'bg-emerald-500' : 'bg-fg-subtle animate-pulse'" />
         {{ supportsCookieStore ? 'Cookie Store API' : 'document.cookie' }}
       </span>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+    <div class="demo-card p-4 flex flex-col gap-3">
       <button
         v-for="category in categories"
         :key="category.key"
         type="button"
         class="flex items-center justify-between gap-3 rounded-lg border px-3 py-2 text-left transition active:scale-[0.99] cursor-pointer"
         :class="consent[category.key]
-          ? 'border-transparent bg-(--accent)/10'
-          : 'border-(--border) bg-(--bg-inset) hover:border-(--border-strong)'"
+          ? 'border-transparent bg-accent/10'
+          : 'border-border bg-bg-inset hover:border-border-strong'"
         @click="toggle(category.key)"
       >
         <span class="flex flex-col">
-          <span class="text-sm font-medium text-(--fg)">{{ category.label }}</span>
-          <span class="text-xs text-(--fg-subtle)">{{ category.hint }}</span>
+          <span class="text-sm font-medium text-fg">{{ category.label }}</span>
+          <span class="text-xs text-fg-subtle">{{ category.hint }}</span>
         </span>
         <span
           class="relative h-5 w-9 shrink-0 rounded-full transition"
-          :class="consent[category.key] ? 'bg-(--accent)' : 'bg-(--border-strong)'"
+          :class="consent[category.key] ? 'bg-accent' : 'bg-border-strong'"
         >
           <span
             class="absolute top-0.5 h-4 w-4 rounded-full bg-white shadow transition-all"
@@ -81,17 +81,17 @@ const accepted = computed(() => Object.values(consent.value).filter(Boolean).len
       </button>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-2 font-mono text-xs text-(--fg)">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 flex flex-col gap-2 font-mono text-xs text-fg">
       <div class="flex items-center justify-between">
-        <span class="text-(--fg-subtle)">second instance</span>
+        <span class="text-fg-subtle">second instance</span>
         <span>{{ accepted }}/{{ categories.length }} accepted · {{ JSON.stringify(mirror) }}</span>
       </div>
-      <div class="truncate text-(--fg-muted)" :title="rawCookie">
+      <div class="truncate text-fg-muted" :title="rawCookie">
         {{ rawCookie }}
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Both cards bind to the same cookie (24h Max-Age) — toggling one updates the other through cookie change events.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/storage/useCookie/index.ts b/vue/toolkit/src/composables/storage/useCookie/index.ts
index c4860a3..b2e495a 100644
--- a/vue/toolkit/src/composables/storage/useCookie/index.ts
+++ b/vue/toolkit/src/composables/storage/useCookie/index.ts
@@ -491,7 +491,7 @@ export function useCookie<T, Shallow extends boolean = true>(
     eventFilter,
     initOnMounted = false,
     onReady,
-    onError = console.error, // eslint-disable-line no-console
+    onError = console.error,
     window = defaultWindow,
     document = defaultDocument,
   } = options;
@@ -804,7 +804,9 @@ export function useCookie<T, Shallow extends boolean = true>(
         return;
 
       writeWithFilter(newValue as T);
-    }, { flush, deep });
+      // No deep traversal for a shallowRef: nested mutations aren't reactive
+      // there anyway, so deep would only waste a walk of the stored value.
+    }, { flush, deep: shallow ? false : deep });
 
     // Watch for reactive name changes
     stopNameWatch = watch(rawName, () => {
diff --git a/vue/toolkit/src/composables/storage/useLocalStorage/demo.vue b/vue/toolkit/src/composables/storage/useLocalStorage/demo.vue
index 334fb43..798b42a 100644
--- a/vue/toolkit/src/composables/storage/useLocalStorage/demo.vue
+++ b/vue/toolkit/src/composables/storage/useLocalStorage/demo.vue
@@ -31,29 +31,29 @@ function reset() {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Persisted settings</span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-label">Persisted settings</span>
+      <span class="demo-badge">
         localStorage
       </span>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+    <div class="demo-card p-4 flex flex-col gap-4">
       <label class="flex flex-col gap-1.5">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Username</span>
+        <span class="demo-label">Username</span>
         <input
           v-model="username"
           type="text"
           placeholder="your handle"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="demo-input"
         >
       </label>
 
       <label class="flex flex-col gap-1.5">
         <div class="flex items-center justify-between">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Font size</span>
-          <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ fontSize }}px</span>
+          <span class="demo-label">Font size</span>
+          <span class="font-mono text-sm tabular-nums text-fg-muted">{{ fontSize }}px</span>
         </div>
         <input
           v-model.number="fontSize"
@@ -61,20 +61,20 @@ function reset() {
           min="12"
           max="28"
           step="1"
-          class="w-full accent-(--accent)"
+          class="w-full accent-accent"
         >
       </label>
 
       <button
         type="button"
         :aria-pressed="darkMode"
-        class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 text-sm font-medium text-(--fg) transition hover:border-(--border-strong) cursor-pointer"
+        class="flex items-center justify-between rounded-lg border border-border bg-bg-inset px-3 py-2 text-sm font-medium text-fg transition hover:border-border-strong cursor-pointer"
         @click="darkMode = !darkMode"
       >
         <span>Dark mode</span>
         <span
           class="relative h-5 w-9 rounded-full transition"
-          :class="darkMode ? 'bg-(--accent)' : 'bg-(--border-strong)'"
+          :class="darkMode ? 'bg-accent' : 'bg-border-strong'"
         >
           <span
             class="absolute top-0.5 h-4 w-4 rounded-full bg-white transition-all"
@@ -85,17 +85,17 @@ function reset() {
     </div>
 
     <pre
-      class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs leading-relaxed text-(--fg) overflow-auto"
+      class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-xs leading-relaxed text-fg overflow-auto"
       :style="{ fontSize: `${fontSize}px` }"
     >{{ persistedJson }}</pre>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Edit anything, then reload the page or open a second tab — values stay in sync.
     </p>
 
     <button
       type="button"
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      class="demo-btn"
       @click="reset"
     >
       Reset to defaults
diff --git a/vue/toolkit/src/composables/storage/useSessionStorage/demo.vue b/vue/toolkit/src/composables/storage/useSessionStorage/demo.vue
index 186c5f7..1de4545 100644
--- a/vue/toolkit/src/composables/storage/useSessionStorage/demo.vue
+++ b/vue/toolkit/src/composables/storage/useSessionStorage/demo.vue
@@ -33,56 +33,56 @@ function clearDraft() {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Step {{ step }} of {{ totalSteps }}
       </span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-badge">
         sessionStorage
       </span>
     </div>
 
-    <div class="h-1.5 w-full overflow-hidden rounded-full bg-(--bg-inset)">
+    <div class="h-1.5 w-full overflow-hidden rounded-full bg-bg-inset">
       <div
-        class="h-full rounded-full bg-(--accent) transition-all duration-300"
+        class="h-full rounded-full bg-accent transition-all duration-300"
         :style="{ width: `${progress}%` }"
       />
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+    <div class="demo-card p-4 flex flex-col gap-4">
       <template v-if="step === 1">
         <label class="flex flex-col gap-1.5">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Full name</span>
+          <span class="demo-label">Full name</span>
           <input
             v-model="draft.name"
             type="text"
             placeholder="Grace Hopper"
-            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+            class="demo-input"
           >
         </label>
       </template>
 
       <template v-else-if="step === 2">
         <label class="flex flex-col gap-1.5">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Email</span>
+          <span class="demo-label">Email</span>
           <input
             v-model="draft.email"
             type="email"
             placeholder="grace@navy.mil"
-            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+            class="demo-input"
           >
         </label>
       </template>
 
       <template v-else>
         <label class="flex items-center justify-between gap-3 cursor-pointer">
-          <span class="text-sm text-(--fg)">Subscribe to the newsletter</span>
-          <input v-model="draft.newsletter" type="checkbox" class="h-4 w-4 accent-(--accent)">
+          <span class="text-sm text-fg">Subscribe to the newsletter</span>
+          <input v-model="draft.newsletter" type="checkbox" class="h-4 w-4 accent-accent">
         </label>
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-sm text-(--fg-muted)">
-          <p><span class="text-(--fg-subtle)">Name:</span> {{ draft.name || '—' }}</p>
-          <p><span class="text-(--fg-subtle)">Email:</span> {{ draft.email || '—' }}</p>
+        <div class="rounded-lg border border-border bg-bg-inset p-3 text-sm text-fg-muted">
+          <p><span class="text-fg-subtle">Name:</span> {{ draft.name || '—' }}</p>
+          <p><span class="text-fg-subtle">Email:</span> {{ draft.email || '—' }}</p>
         </div>
       </template>
     </div>
@@ -91,7 +91,7 @@ function clearDraft() {
       <button
         type="button"
         :disabled="step === 1"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="prev"
       >
         Back
@@ -99,20 +99,20 @@ function clearDraft() {
       <button
         type="button"
         :disabled="step === totalSteps"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="next"
       >
         Continue
       </button>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Reload the page — your step and draft are restored. Closing the tab clears them.
     </p>
 
     <button
       type="button"
-      class="self-start text-xs font-medium text-(--fg-muted) underline-offset-2 hover:underline cursor-pointer"
+      class="self-start text-xs font-medium text-fg-muted underline-offset-2 hover:underline cursor-pointer"
       @click="clearDraft"
     >
       Discard draft
diff --git a/vue/toolkit/src/composables/storage/useStorage/demo.vue b/vue/toolkit/src/composables/storage/useStorage/demo.vue
index 135f4b2..4e84c73 100644
--- a/vue/toolkit/src/composables/storage/useStorage/demo.vue
+++ b/vue/toolkit/src/composables/storage/useStorage/demo.vue
@@ -47,34 +47,34 @@ function removeTag(tag: string) {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Custom storage backend</span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-label">Custom storage backend</span>
+      <span class="demo-badge">
         in-memory
       </span>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tags (Set)</span>
+    <div class="demo-card p-4 flex flex-col gap-3">
+      <span class="demo-label">Tags (Set)</span>
 
       <div class="flex flex-wrap gap-1.5 min-h-7">
         <span
           v-for="tag in tagList"
           :key="tag"
-          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+          class="demo-badge"
         >
           {{ tag }}
           <button
             type="button"
-            class="text-(--fg-subtle) transition hover:text-(--fg) cursor-pointer"
+            class="text-fg-subtle transition hover:text-fg cursor-pointer"
             :aria-label="`Remove ${tag}`"
             @click="removeTag(tag)"
           >
             &times;
           </button>
         </span>
-        <span v-if="tagList.length === 0" class="text-xs text-(--fg-subtle)">No tags yet</span>
+        <span v-if="tagList.length === 0" class="text-xs text-fg-subtle">No tags yet</span>
       </div>
 
       <form class="flex items-center gap-2" @submit.prevent="addTag">
@@ -82,34 +82,34 @@ function removeTag(tag: string) {
           v-model="newTag.value"
           type="text"
           placeholder="add a tag…"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="demo-input"
         >
         <button
           type="submit"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          class="demo-btn-primary"
         >
           Add
         </button>
       </form>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex items-center justify-between">
+    <div class="demo-card p-4 flex items-center justify-between">
       <div class="flex flex-col gap-0.5">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Ticket #</span>
-        <span class="text-xs text-(--fg-subtle)">zero-padded serializer</span>
+        <span class="demo-label">Ticket #</span>
+        <span class="text-xs text-fg-subtle">zero-padded serializer</span>
       </div>
       <div class="flex items-center gap-3">
         <button
           type="button"
-          class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--border) bg-(--bg-inset) text-(--fg) transition hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border bg-bg-inset text-fg transition hover:border-border-strong active:scale-[0.98] cursor-pointer"
           @click="ticket = Math.max(0, ticket - 1)"
         >
           &minus;
         </button>
-        <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ ticket }}</span>
+        <span class="demo-stat text-2xl">{{ ticket }}</span>
         <button
           type="button"
-          class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--border) bg-(--bg-inset) text-(--fg) transition hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border bg-bg-inset text-fg transition hover:border-border-strong active:scale-[0.98] cursor-pointer"
           @click="ticket = ticket + 1"
         >
           +
@@ -118,10 +118,10 @@ function removeTag(tag: string) {
     </div>
 
     <div class="flex flex-col gap-1.5">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Raw store contents</span>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg) flex flex-col gap-1">
+      <span class="demo-label">Raw store contents</span>
+      <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-xs text-fg flex flex-col gap-1">
         <div v-for="[key, value] in storeEntries" :key="key" class="flex gap-2">
-          <span class="text-(--fg-subtle) shrink-0">{{ key }}</span>
+          <span class="text-fg-subtle shrink-0">{{ key }}</span>
           <span class="truncate">{{ value }}</span>
         </div>
       </div>
diff --git a/vue/toolkit/src/composables/storage/useStorage/index.ts b/vue/toolkit/src/composables/storage/useStorage/index.ts
index 5a02e15..88e694c 100644
--- a/vue/toolkit/src/composables/storage/useStorage/index.ts
+++ b/vue/toolkit/src/composables/storage/useStorage/index.ts
@@ -12,13 +12,13 @@ export interface StorageSerializer<T> {
   write: (value: T) => string;
 }
 
-export const StorageSerializers: Record<string, StorageSerializer<any>> & {
+export const StorageSerializers: Record<string, StorageSerializer<unknown>> & {
   boolean: StorageSerializer<boolean>;
   number: StorageSerializer<number>;
   string: StorageSerializer<string>;
-  object: StorageSerializer<any>;
-  map: StorageSerializer<Map<any, any>>;
-  set: StorageSerializer<Set<any>>;
+  object: StorageSerializer<unknown>;
+  map: StorageSerializer<Map<unknown, unknown>>;
+  set: StorageSerializer<Set<unknown>>;
   date: StorageSerializer<Date>;
 } = {
   boolean: {
@@ -35,15 +35,15 @@ export const StorageSerializers: Record<string, StorageSerializer<any>> & {
   },
   object: {
     read: (v: string) => JSON.parse(v),
-    write: (v: any) => JSON.stringify(v),
+    write: (v: unknown) => JSON.stringify(v),
   },
   map: {
     read: (v: string) => new Map(JSON.parse(v)),
-    write: (v: Map<any, any>) => JSON.stringify([...v.entries()]),
+    write: (v: Map<unknown, unknown>) => JSON.stringify([...v.entries()]),
   },
   set: {
     read: (v: string) => new Set(JSON.parse(v)),
-    write: (v: Set<any>) => JSON.stringify([...v]),
+    write: (v: Set<unknown>) => JSON.stringify([...v]),
   },
   date: {
     read: (v: string) => new Date(v),
@@ -112,15 +112,15 @@ export interface UseStorageOptions<T> extends ConfigurableFlush, ConfigurableWin
 export type UseStorageReturn<T> = RemovableRef<T>;
 
 export function guessSerializer<T>(value: T): StorageSerializer<T> {
-  if (isBoolean(value)) return StorageSerializers.boolean as any;
-  if (isNumber(value)) return StorageSerializers.number as any;
-  if (isString(value)) return StorageSerializers.string as any;
-  if (isMap(value)) return StorageSerializers.map as any;
-  if (isSet(value)) return StorageSerializers.set as any;
-  if (isDate(value)) return StorageSerializers.date as any;
-  if (isObject(value)) return StorageSerializers.object as any;
+  if (isBoolean(value)) return StorageSerializers.boolean as unknown as StorageSerializer<T>;
+  if (isNumber(value)) return StorageSerializers.number as unknown as StorageSerializer<T>;
+  if (isString(value)) return StorageSerializers.string as unknown as StorageSerializer<T>;
+  if (isMap(value)) return StorageSerializers.map as unknown as StorageSerializer<T>;
+  if (isSet(value)) return StorageSerializers.set as unknown as StorageSerializer<T>;
+  if (isDate(value)) return StorageSerializers.date as unknown as StorageSerializer<T>;
+  if (isObject(value)) return StorageSerializers.object as unknown as StorageSerializer<T>;
 
-  return StorageSerializers.object as any;
+  return StorageSerializers.object as unknown as StorageSerializer<T>;
 }
 
 export function shallowMerge<T>(stored: T, defaults: T): T {
@@ -175,7 +175,7 @@ export function useStorage<T>(
     window = defaultWindow,
     eventFilter,
     initOnMounted = false,
-    onError = console.error, // eslint-disable-line no-console
+    onError = console.error,
   } = options;
 
   const defaults = toValue(initialValue);
@@ -346,7 +346,7 @@ export function useStorage<T>(
     if (storage instanceof Storage)
       useEventListener(window, 'storage', onStorageEvent, { passive: true });
     else
-      useEventListener(window as any, customStorageEventName as any, onStorageCustomEvent as any);
+      useEventListener<CustomEvent<StorageEventLike>>(window, customStorageEventName, onStorageCustomEvent);
   }
 
   if (initOnMounted) {
diff --git a/vue/toolkit/src/composables/storage/useStorageAsync/demo.vue b/vue/toolkit/src/composables/storage/useStorageAsync/demo.vue
index 8423aac..74adf2a 100644
--- a/vue/toolkit/src/composables/storage/useStorageAsync/demo.vue
+++ b/vue/toolkit/src/composables/storage/useStorageAsync/demo.vue
@@ -42,18 +42,18 @@ async function update<K extends keyof typeof prefs.value>(key: K, value: (typeof
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Async preferences</span>
+      <span class="demo-label">Async preferences</span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
         :class="isReady
           ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          : 'border-border bg-bg-inset text-fg-muted'"
       >
         <span
           class="h-1.5 w-1.5 rounded-full"
-          :class="isReady ? 'bg-emerald-500' : 'bg-(--fg-subtle) animate-pulse'"
+          :class="isReady ? 'bg-emerald-500' : 'bg-fg-subtle animate-pulse'"
         />
         {{ isReady ? 'ready' : 'loading…' }}
       </span>
@@ -61,17 +61,17 @@ async function update<K extends keyof typeof prefs.value>(key: K, value: (typeof
 
     <div
       v-if="!isReady"
-      class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3"
+      class="demo-card p-4 flex flex-col gap-3"
     >
-      <div class="h-3 w-1/3 animate-pulse rounded bg-(--bg-inset)" />
-      <div class="h-9 w-full animate-pulse rounded-lg bg-(--bg-inset)" />
-      <div class="h-3 w-1/3 animate-pulse rounded bg-(--bg-inset)" />
-      <div class="h-9 w-full animate-pulse rounded-lg bg-(--bg-inset)" />
+      <div class="h-3 w-1/3 animate-pulse rounded bg-bg-inset" />
+      <div class="h-9 w-full animate-pulse rounded-lg bg-bg-inset" />
+      <div class="h-3 w-1/3 animate-pulse rounded bg-bg-inset" />
+      <div class="h-9 w-full animate-pulse rounded-lg bg-bg-inset" />
     </div>
 
-    <div v-else class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+    <div v-else class="demo-card p-4 flex flex-col gap-4">
       <div class="flex flex-col gap-2">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Theme</span>
+        <span class="demo-label">Theme</span>
         <div class="grid grid-cols-3 gap-1.5">
           <button
             v-for="t in themes"
@@ -79,8 +79,8 @@ async function update<K extends keyof typeof prefs.value>(key: K, value: (typeof
             type="button"
             class="rounded-lg border px-2 py-1.5 text-sm font-medium capitalize transition active:scale-[0.98] cursor-pointer"
             :class="prefs.theme === t
-              ? 'border-transparent bg-(--accent) text-(--accent-fg)'
-              : 'border-(--border) bg-(--bg-inset) text-(--fg) hover:border-(--border-strong)'"
+              ? 'border-transparent bg-accent text-accent-fg'
+              : 'border-border bg-bg-inset text-fg hover:border-border-strong'"
             @click="update('theme', t)"
           >
             {{ t }}
@@ -89,7 +89,7 @@ async function update<K extends keyof typeof prefs.value>(key: K, value: (typeof
       </div>
 
       <div class="flex flex-col gap-2">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Density</span>
+        <span class="demo-label">Density</span>
         <div class="grid grid-cols-2 gap-1.5">
           <button
             v-for="d in densities"
@@ -97,8 +97,8 @@ async function update<K extends keyof typeof prefs.value>(key: K, value: (typeof
             type="button"
             class="rounded-lg border px-2 py-1.5 text-sm font-medium capitalize transition active:scale-[0.98] cursor-pointer"
             :class="prefs.density === d
-              ? 'border-transparent bg-(--accent) text-(--accent-fg)'
-              : 'border-(--border) bg-(--bg-inset) text-(--fg) hover:border-(--border-strong)'"
+              ? 'border-transparent bg-accent text-accent-fg'
+              : 'border-border bg-bg-inset text-fg hover:border-border-strong'"
             @click="update('density', d)"
           >
             {{ d }}
@@ -107,17 +107,17 @@ async function update<K extends keyof typeof prefs.value>(key: K, value: (typeof
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) flex items-center justify-between">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg flex items-center justify-between">
       <span class="truncate">{{ JSON.stringify(prefs) }}</span>
       <span
         class="ml-2 shrink-0 text-xs transition"
-        :class="saving ? 'text-sky-600 dark:text-sky-400' : 'text-(--fg-subtle)'"
+        :class="saving ? 'text-sky-600 dark:text-sky-400' : 'text-fg-subtle'"
       >
         {{ saving ? 'saving…' : 'saved' }}
       </span>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Every change is written through the async backend with simulated latency.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/storage/useStorageAsync/index.ts b/vue/toolkit/src/composables/storage/useStorageAsync/index.ts
index a99450a..332d13c 100644
--- a/vue/toolkit/src/composables/storage/useStorageAsync/index.ts
+++ b/vue/toolkit/src/composables/storage/useStorageAsync/index.ts
@@ -123,7 +123,7 @@ export function useStorageAsync<T, Shallow extends boolean = true>(
     eventFilter,
     initOnMounted = false,
     onReady,
-    onError = console.error, // eslint-disable-line no-console
+    onError = console.error,
   } = options;
 
   const defaults = toValue(initialValue);
@@ -369,12 +369,12 @@ export function useStorageAsync<T, Shallow extends boolean = true>(
       }, { passive: true });
     }
     else {
-      useEventListener(window as any, customStorageEventName as any, ((ev: CustomEvent<StorageEventLike>) => {
+      useEventListener<CustomEvent<StorageEventLike>>(window, customStorageEventName, (ev) => {
         if (initOnMounted && !firstMounted)
           return;
 
         update(ev.detail);
-      }) as any);
+      });
     }
   }
 
@@ -402,7 +402,9 @@ export function useStorageAsync<T, Shallow extends boolean = true>(
           return;
 
         writeWithFilter(newValue as T);
-      }, { flush, deep });
+        // No deep traversal for a shallowRef: nested mutations aren't reactive
+        // there anyway, so deep would only waste a walk of the stored value.
+      }, { flush, deep: shallow ? false : deep });
 
       stopWatch = stop;
 
diff --git a/vue/toolkit/src/composables/utilities/createEventHook/demo.vue b/vue/toolkit/src/composables/utilities/createEventHook/demo.vue
index 015756a..da32c4c 100644
--- a/vue/toolkit/src/composables/utilities/createEventHook/demo.vue
+++ b/vue/toolkit/src/composables/utilities/createEventHook/demo.vue
@@ -58,20 +58,20 @@ onScopeDispose(unsubscribe);
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Event hook</span>
+      <span class="demo-label">Event hook</span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
         :class="listenerActive
           ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          : 'border-border bg-bg-inset text-fg-muted'"
       >
         {{ listenerActive ? '1 listener' : 'no listeners' }}
       </span>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+    <div class="demo-card p-4 flex flex-col gap-3">
       <div class="grid grid-cols-3 gap-1.5">
         <button
           v-for="lvl in levels"
@@ -79,8 +79,8 @@ onScopeDispose(unsubscribe);
           type="button"
           class="rounded-lg border px-2 py-1.5 text-xs font-medium uppercase tracking-wide transition active:scale-[0.98] cursor-pointer"
           :class="level === lvl
-            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
-            : 'border-(--border) bg-(--bg-inset) text-(--fg) hover:border-(--border-strong)'"
+            ? 'border-transparent bg-accent text-accent-fg'
+            : 'border-border bg-bg-inset text-fg hover:border-border-strong'"
           @click="level = lvl"
         >
           {{ lvl }}
@@ -92,11 +92,11 @@ onScopeDispose(unsubscribe);
           v-model="draft"
           type="text"
           placeholder="log message…"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="demo-input"
         >
         <button
           type="submit"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          class="demo-btn-primary"
         >
           Trigger
         </button>
@@ -104,7 +104,7 @@ onScopeDispose(unsubscribe);
 
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="listenerActive ? unsubscribe() : subscribe()"
       >
         {{ listenerActive ? 'Detach listener (off)' : 'Attach listener (on)' }}
@@ -112,19 +112,19 @@ onScopeDispose(unsubscribe);
     </div>
 
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Received events</span>
+      <span class="demo-label">Received events</span>
       <button
         v-if="entries.length"
         type="button"
-        class="text-xs font-medium text-(--fg-muted) underline-offset-2 hover:underline cursor-pointer"
+        class="text-xs font-medium text-fg-muted underline-offset-2 hover:underline cursor-pointer"
         @click="clearLog"
       >
         Clear
       </button>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-2 min-h-24">
-      <p v-if="!entries.length" class="text-sm text-(--fg-subtle)">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 flex flex-col gap-2 min-h-24">
+      <p v-if="!entries.length" class="text-sm text-fg-subtle">
         {{ listenerActive ? 'Trigger an event to see it here.' : 'Attach a listener, then trigger.' }}
       </p>
       <div
@@ -138,11 +138,11 @@ onScopeDispose(unsubscribe);
         >
           {{ entry.level }}
         </span>
-        <span class="truncate text-(--fg)">{{ entry.message }}</span>
+        <span class="truncate text-fg">{{ entry.message }}</span>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Detach the listener and trigger again — with no listeners the payload is dropped.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/utilities/createEventHook/index.ts b/vue/toolkit/src/composables/utilities/createEventHook/index.ts
index 65b4918..325f200 100644
--- a/vue/toolkit/src/composables/utilities/createEventHook/index.ts
+++ b/vue/toolkit/src/composables/utilities/createEventHook/index.ts
@@ -9,12 +9,12 @@ import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
  *
  * Listeners may be sync or async; async listeners are awaited by `trigger`.
  */
-export type EventHookListener<T = any>
+export type EventHookListener<T = unknown>
   = [T] extends [void]
-    ? () => any
-    : [T] extends [any[]]
-        ? (...args: T) => any
-        : (arg: T) => any;
+    ? () => unknown
+    : [T] extends [unknown[]]
+        ? (...args: T) => unknown
+        : (arg: T) => unknown;
 
 /**
  * Handle returned from {@link EventHook.on}. It is both a callable that removes
@@ -30,14 +30,14 @@ export interface EventHookOffHandle {
   off: () => void;
 }
 
-export type EventHookOn<T = any> = (listener: EventHookListener<T>) => EventHookOffHandle;
-export type EventHookOff<T = any> = (listener: EventHookListener<T>) => void;
-export type EventHookTrigger<T = any>
+export type EventHookOn<T = unknown> = (listener: EventHookListener<T>) => EventHookOffHandle;
+export type EventHookOff<T = unknown> = (listener: EventHookListener<T>) => void;
+export type EventHookTrigger<T = unknown>
   = [T] extends [void]
-    ? () => Promise<any[]>
-    : [T] extends [any[]]
-        ? (...args: T) => Promise<any[]>
-        : (arg: T) => Promise<any[]>;
+    ? () => Promise<unknown[]>
+    : [T] extends [unknown[]]
+        ? (...args: T) => Promise<unknown[]>
+        : (arg: T) => Promise<unknown[]>;
 
 export interface CreateEventHookOptions {
   /**
@@ -50,7 +50,7 @@ export interface CreateEventHookOptions {
   onError?: (error: unknown) => void;
 }
 
-export interface CreateEventHookReturn<T = any> {
+export interface CreateEventHookReturn<T = unknown> {
   /**
    * Register a listener. Returns a handle that removes the listener when
    * called (or via its `.off` method). The listener is also removed
@@ -107,7 +107,7 @@ export interface CreateEventHookReturn<T = any> {
  *
  * @since 0.0.15
  */
-export function createEventHook<T = any>(
+export function createEventHook<T = unknown>(
   options: CreateEventHookOptions = {},
 ): CreateEventHookReturn<T> {
   const { onError = noop } = options;
@@ -133,7 +133,7 @@ export function createEventHook<T = any>(
     return offHandle;
   };
 
-  const trigger = ((...args: any[]) => {
+  const trigger = ((...args: unknown[]) => {
     // Snapshot first: a listener that mutates the set during the trigger (e.g.
     // self-removal or registering a new one) must not affect the current pass.
     const snapshot = [...listeners];
diff --git a/vue/toolkit/src/composables/utilities/get/demo.vue b/vue/toolkit/src/composables/utilities/get/demo.vue
index 58a66db..8613b44 100644
--- a/vue/toolkit/src/composables/utilities/get/demo.vue
+++ b/vue/toolkit/src/composables/utilities/get/demo.vue
@@ -28,34 +28,34 @@ const keyedValue = computed(() => get(user, selectedKey.value));
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex flex-col gap-1">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">unwrap a ref</span>
+      <span class="demo-label">unwrap a ref</span>
       <div class="flex items-center gap-3">
         <input
           v-model.number="count"
           type="range"
           min="0"
           max="100"
-          class="h-2 flex-1 cursor-pointer appearance-none rounded-full bg-(--bg-inset) accent-(--accent)"
+          class="h-2 flex-1 cursor-pointer appearance-none rounded-full bg-bg-inset accent-accent"
         >
-        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ count }}</span>
+        <span class="font-mono text-sm tabular-nums text-fg-muted">{{ count }}</span>
       </div>
     </div>
 
     <div class="grid grid-cols-2 gap-3">
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">get(count)</p>
-        <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ countValue }}</p>
+      <div class="demo-card p-4">
+        <p class="demo-label">get(count)</p>
+        <p class="demo-stat mt-1 text-3xl">{{ countValue }}</p>
       </div>
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">get(getter)</p>
-        <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ doubledValue }}</p>
+      <div class="demo-card p-4">
+        <p class="demo-label">get(getter)</p>
+        <p class="demo-stat mt-1 text-3xl">{{ doubledValue }}</p>
       </div>
     </div>
 
     <div class="flex flex-col gap-2">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">read a single key</span>
+      <span class="demo-label">read a single key</span>
       <div class="flex flex-wrap gap-1.5">
         <button
           v-for="k in keys"
@@ -63,17 +63,17 @@ const keyedValue = computed(() => get(user, selectedKey.value));
           type="button"
           class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
           :class="selectedKey === k
-            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
-            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            ? 'border-transparent bg-accent text-accent-fg hover:bg-accent-hover'
+            : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
           @click="selectedKey = k"
         >
           {{ k }}
         </button>
       </div>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
-        <span class="text-(--fg-subtle)">get(user, '{{ selectedKey }}')</span>
-        <span class="px-2 text-(--fg-subtle)">→</span>
-        <span class="text-(--accent-text)">{{ JSON.stringify(keyedValue) }}</span>
+      <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
+        <span class="text-fg-subtle">get(user, '{{ selectedKey }}')</span>
+        <span class="px-2 text-fg-subtle">→</span>
+        <span class="text-accent-text">{{ JSON.stringify(keyedValue) }}</span>
       </div>
     </div>
   </div>
diff --git a/vue/toolkit/src/composables/utilities/isDefined/demo.vue b/vue/toolkit/src/composables/utilities/isDefined/demo.vue
index b991093..6dce3aa 100644
--- a/vue/toolkit/src/composables/utilities/isDefined/demo.vue
+++ b/vue/toolkit/src/composables/utilities/isDefined/demo.vue
@@ -33,9 +33,9 @@ function clear(): void {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
-    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">useIsDefined(profile)</span>
+  <div class="demo-stack max-w-sm">
+    <div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset p-3">
+      <span class="demo-label">useIsDefined(profile)</span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-semibold transition"
         :class="ready
@@ -47,16 +47,16 @@ function clear(): void {
       </span>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">narrowed read</p>
-      <p class="mt-1 text-base font-semibold text-(--fg)">{{ greeting }}</p>
+    <div class="demo-card p-4">
+      <p class="demo-label">narrowed read</p>
+      <p class="mt-1 text-base font-semibold text-fg">{{ greeting }}</p>
       <p
         v-if="isDefined(profile)"
-        class="mt-1 font-mono text-sm text-(--fg-muted)"
+        class="mt-1 font-mono text-sm text-fg-muted"
       >
         {{ profile.email }}
       </p>
-      <p v-else class="mt-1 text-sm italic text-(--fg-subtle)">
+      <p v-else class="mt-1 text-sm italic text-fg-subtle">
         Waiting for data…
       </p>
     </div>
@@ -64,7 +64,7 @@ function clear(): void {
     <div class="flex gap-2">
       <button
         type="button"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="ready"
         @click="load"
       >
@@ -72,7 +72,7 @@ function clear(): void {
       </button>
       <button
         type="button"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="!ready"
         @click="clear"
       >
diff --git a/vue/toolkit/src/composables/utilities/set/demo.vue b/vue/toolkit/src/composables/utilities/set/demo.vue
index 5a8ee86..7e06f30 100644
--- a/vue/toolkit/src/composables/utilities/set/demo.vue
+++ b/vue/toolkit/src/composables/utilities/set/demo.vue
@@ -20,7 +20,7 @@ const statuses = ['online', 'away', 'offline'] as const;
 const statusDot: Record<typeof statuses[number], string> = {
   online: 'bg-emerald-500',
   away: 'bg-amber-500',
-  offline: 'bg-(--fg-subtle)',
+  offline: 'bg-fg-subtle',
 };
 
 function rename(): void {
@@ -35,26 +35,26 @@ function rename(): void {
   <div class="flex w-full max-w-sm flex-col gap-5">
     <div class="flex flex-col gap-2">
       <div class="flex items-baseline justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">set(volume, n)</span>
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ volume }}</span>
+        <span class="demo-label">set(volume, n)</span>
+        <span class="demo-stat text-3xl">{{ volume }}</span>
       </div>
-      <div class="h-2 w-full overflow-hidden rounded-full bg-(--bg-inset)">
+      <div class="h-2 w-full overflow-hidden rounded-full bg-bg-inset">
         <div
-          class="h-full rounded-full bg-(--accent) transition-[width] duration-200"
+          class="h-full rounded-full bg-accent transition-[width] duration-200"
           :style="{ width: `${volume}%` }"
         />
       </div>
       <div class="flex gap-2">
         <button
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn flex-1"
           @click="nudge(-10)"
         >
           −10
         </button>
         <button
           type="button"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn flex-1"
           @click="nudge(10)"
         >
           +10
@@ -62,15 +62,15 @@ function rename(): void {
       </div>
     </div>
 
-    <div class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+    <div class="demo-card flex flex-col gap-3 p-4">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">set(profile, key, value)</span>
-        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="demo-label">set(profile, key, value)</span>
+        <span class="demo-badge">
           <span class="size-2 rounded-full" :class="statusDot[profile.status]" />
           {{ profile.status }}
         </span>
       </div>
-      <p class="font-mono text-lg font-semibold text-(--fg)">{{ profile.name }}</p>
+      <p class="font-mono text-lg font-semibold text-fg">{{ profile.name }}</p>
       <div class="flex flex-wrap gap-1.5">
         <button
           v-for="s in statuses"
@@ -78,8 +78,8 @@ function rename(): void {
           type="button"
           class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
           :class="profile.status === s
-            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
-            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            ? 'border-transparent bg-accent text-accent-fg hover:bg-accent-hover'
+            : 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
           @click="set(profile, 'status', s)"
         >
           {{ s }}
@@ -87,7 +87,7 @@ function rename(): void {
       </div>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary"
         @click="rename"
       >
         Set next name
diff --git a/vue/toolkit/src/composables/utilities/useEventBus/demo.vue b/vue/toolkit/src/composables/utilities/useEventBus/demo.vue
index 999823e..a481a68 100644
--- a/vue/toolkit/src/composables/utilities/useEventBus/demo.vue
+++ b/vue/toolkit/src/composables/utilities/useEventBus/demo.vue
@@ -58,18 +58,18 @@ function reset(): void {
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div class="flex items-center gap-2">
       <input
         v-model="draft"
         type="text"
         placeholder="Type a message…"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
         @keydown.enter="send"
       >
       <button
         type="button"
-        class="inline-flex shrink-0 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-2 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="inline-flex shrink-0 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-accent px-3 py-2 text-sm font-medium text-accent-fg transition hover:bg-accent-hover active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="!draft.trim()"
         @click="send"
       >
@@ -78,18 +78,18 @@ function reset(): void {
     </div>
 
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">received via bus</span>
+      <span class="demo-label">received via bus</span>
       <div class="flex gap-2">
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="demo-btn"
           @click="pingOnce"
         >
           once()
         </button>
         <button
           type="button"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           :disabled="log.length === 0"
           @click="reset"
         >
@@ -98,22 +98,22 @@ function reset(): void {
       </div>
     </div>
 
-    <div class="flex max-h-56 flex-col gap-2 overflow-y-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
-      <p v-if="log.length === 0" class="py-6 text-center text-sm italic text-(--fg-subtle)">
+    <div class="demo-card flex max-h-56 flex-col gap-2 overflow-y-auto p-3">
+      <p v-if="log.length === 0" class="py-6 text-center text-sm italic text-fg-subtle">
         No events yet — emit one above.
       </p>
       <div
         v-for="entry in log"
         :key="entry.id"
-        class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2"
+        class="flex items-center gap-2 rounded-lg border border-border bg-bg-inset px-3 py-2"
       >
         <span
-          class="inline-flex shrink-0 items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium"
-          :class="entry.from === 'You' ? 'text-(--accent-text)' : 'text-(--fg-muted)'"
+          class="inline-flex shrink-0 items-center gap-1.5 rounded-md border border-border bg-bg-elevated px-2 py-0.5 text-xs font-medium"
+          :class="entry.from === 'You' ? 'text-accent-text' : 'text-fg-muted'"
         >
           {{ entry.from }}
         </span>
-        <span class="min-w-0 flex-1 truncate text-sm text-(--fg)">{{ entry.text }}</span>
+        <span class="min-w-0 flex-1 truncate text-sm text-fg">{{ entry.text }}</span>
         <span
           v-if="entry.once"
           class="shrink-0 rounded-md border border-sky-500/30 bg-sky-500/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase text-sky-600 dark:text-sky-400"
diff --git a/vue/toolkit/src/composables/utilities/useEventBus/index.ts b/vue/toolkit/src/composables/utilities/useEventBus/index.ts
index 953ecb6..1176fb4 100644
--- a/vue/toolkit/src/composables/utilities/useEventBus/index.ts
+++ b/vue/toolkit/src/composables/utilities/useEventBus/index.ts
@@ -6,7 +6,7 @@ import { tryOnScopeDispose } from '@/composables/lifecycle/tryOnScopeDispose';
  * A listener invoked when its bus emits. Receives the emitted `event`
  * value and an optional `payload`.
  */
-export type EventBusListener<T = unknown, P = any>
+export type EventBusListener<T = unknown, P = unknown>
   = (event: T, payload?: P) => void;
 
 /**
@@ -77,7 +77,7 @@ const CHANNEL = '*';
  * lazily populated, side-effect-free at import time, and SSR-safe (no global
  * access — a `Map` works identically on server and client).
  */
-const registry = new Map<EventBusIdentifier<any>, PubSub<{ '*': EventBusListener }>>();
+const registry = new Map<EventBusIdentifier<unknown>, PubSub<{ '*': EventBusListener }>>();
 
 /**
  * @name useEventBus
@@ -112,7 +112,7 @@ const registry = new Map<EventBusIdentifier<any>, PubSub<{ '*': EventBusListener
  *
  * @since 0.0.15
  */
-export function useEventBus<T = unknown, P = any>(
+export function useEventBus<T = unknown, P = unknown>(
   key: EventBusIdentifier<T>,
 ): UseEventBusReturn<T, P> {
   function getBus(): PubSub<{ '*': EventBusListener }> {
diff --git a/vue/toolkit/src/composables/utilities/useMemoize/demo.vue b/vue/toolkit/src/composables/utilities/useMemoize/demo.vue
index d8e3a0f..f8685ed 100644
--- a/vue/toolkit/src/composables/utilities/useMemoize/demo.vue
+++ b/vue/toolkit/src/composables/utilities/useMemoize/demo.vue
@@ -66,22 +66,22 @@ function clearAll(): void {
 </script>
 
 <template>
-  <div class="flex w-full max-w-md flex-col gap-4">
+  <div class="demo-stack max-w-md">
     <div class="grid grid-cols-2 gap-3">
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">resolver runs</p>
-        <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ runs }}</p>
+      <div class="demo-card p-4">
+        <p class="demo-label">resolver runs</p>
+        <p class="demo-stat mt-1 text-3xl">{{ runs }}</p>
       </div>
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">cached keys</p>
-        <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ cacheSize }}</p>
+      <div class="demo-card p-4">
+        <p class="demo-label">cached keys</p>
+        <p class="demo-stat mt-1 text-3xl">{{ cacheSize }}</p>
       </div>
     </div>
 
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">fib(n)</span>
-        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">key: {{ fib.generateKey(input) }}</span>
+        <span class="demo-label">fib(n)</span>
+        <span class="font-mono text-sm tabular-nums text-fg-muted">key: {{ fib.generateKey(input) }}</span>
       </div>
       <div class="flex items-center gap-3">
         <input
@@ -89,37 +89,37 @@ function clearAll(): void {
           type="range"
           min="0"
           max="40"
-          class="h-2 flex-1 cursor-pointer appearance-none rounded-full bg-(--bg-inset) accent-(--accent)"
+          class="h-2 flex-1 cursor-pointer appearance-none rounded-full bg-bg-inset accent-accent"
         >
-        <span class="w-8 text-right font-mono text-sm tabular-nums text-(--fg)">{{ input }}</span>
+        <span class="w-8 text-right font-mono text-sm tabular-nums text-fg">{{ input }}</span>
       </div>
     </div>
 
     <div class="flex flex-wrap gap-2">
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        class="demo-btn-primary"
         @click="compute()"
       >
         Compute
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="compute(true)"
       >
         load (force)
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="evictCurrent"
       >
         delete(n)
       </button>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         :disabled="cacheSize === 0 && history.length === 0"
         @click="clearAll"
       >
@@ -127,19 +127,19 @@ function clearAll(): void {
       </button>
     </div>
 
-    <div class="flex max-h-44 flex-col gap-2 overflow-y-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
-      <p v-if="history.length === 0" class="py-5 text-center text-sm italic text-(--fg-subtle)">
+    <div class="demo-card flex max-h-44 flex-col gap-2 overflow-y-auto p-3">
+      <p v-if="history.length === 0" class="py-5 text-center text-sm italic text-fg-subtle">
         Compute a value — repeat the same n to see a cache hit.
       </p>
       <div
         v-for="entry in history"
         :key="entry.id"
-        class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 font-mono text-sm tabular-nums text-(--fg)"
+        class="flex items-center gap-2 rounded-lg border border-border bg-bg-inset px-3 py-2 font-mono text-sm tabular-nums text-fg"
       >
-        <span class="text-(--fg-subtle)">fib({{ entry.n }})</span>
-        <span class="text-(--fg-subtle)">=</span>
-        <span class="min-w-0 flex-1 truncate text-(--accent-text)">{{ entry.value }}</span>
-        <span class="text-xs text-(--fg-subtle)">{{ entry.computedAt }}</span>
+        <span class="text-fg-subtle">fib({{ entry.n }})</span>
+        <span class="text-fg-subtle">=</span>
+        <span class="min-w-0 flex-1 truncate text-accent-text">{{ entry.value }}</span>
+        <span class="text-xs text-fg-subtle">{{ entry.computedAt }}</span>
         <span
           class="shrink-0 rounded-md border px-1.5 py-0.5 text-[10px] font-semibold uppercase"
           :class="entry.hit
diff --git a/vue/toolkit/src/composables/utilities/useSupported/demo.vue b/vue/toolkit/src/composables/utilities/useSupported/demo.vue
index 9e438e6..4a46624 100644
--- a/vue/toolkit/src/composables/utilities/useSupported/demo.vue
+++ b/vue/toolkit/src/composables/utilities/useSupported/demo.vue
@@ -19,11 +19,11 @@ const supportedCount = computed(() => checks.filter(c => c.supported.value).leng
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-4">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Browser features</span>
-        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="demo-label">Browser features</span>
+        <span class="demo-badge">
           {{ supportedCount }} / {{ checks.length }} available
         </span>
       </div>
@@ -32,9 +32,9 @@ const supportedCount = computed(() => checks.filter(c => c.supported.value).leng
         <li
           v-for="check in checks"
           :key="check.name"
-          class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 text-sm"
+          class="flex items-center justify-between rounded-lg border border-border bg-bg-inset px-3 py-2 text-sm"
         >
-          <span class="font-mono text-(--fg)">{{ check.name }}</span>
+          <span class="font-mono text-fg">{{ check.name }}</span>
           <span
             v-if="check.supported.value"
             class="inline-flex items-center gap-1.5 text-xs font-medium text-emerald-600 dark:text-emerald-400"
@@ -44,17 +44,17 @@ const supportedCount = computed(() => checks.filter(c => c.supported.value).leng
           </span>
           <span
             v-else
-            class="inline-flex items-center gap-1.5 text-xs font-medium text-(--fg-subtle)"
+            class="inline-flex items-center gap-1.5 text-xs font-medium text-fg-subtle"
           >
-            <span class="size-1.5 rounded-full bg-(--border-strong)" />
+            <span class="size-1.5 rounded-full bg-border-strong" />
             Unavailable
           </span>
         </li>
       </ul>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
-      Each check is SSR-safe: the result is <span class="font-mono text-(--fg-muted)">false</span> during
+    <p class="text-xs text-fg-subtle">
+      Each check is SSR-safe: the result is <span class="font-mono text-fg-muted">false</span> during
       server render and resolves on the client after mount.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/watch/until/demo.vue b/vue/toolkit/src/composables/watch/until/demo.vue
index 6dd41e8..7303205 100644
--- a/vue/toolkit/src/composables/watch/until/demo.vue
+++ b/vue/toolkit/src/composables/watch/until/demo.vue
@@ -45,11 +45,11 @@ function reset() {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-4">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Live source</span>
-        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="demo-label">Live source</span>
+        <span class="demo-badge">
           target = {{ TARGET }}
         </span>
       </div>
@@ -58,16 +58,16 @@ function reset() {
         <button
           type="button"
           aria-label="Decrement"
-          class="inline-flex items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) size-11 text-lg font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="inline-flex items-center justify-center rounded-lg border border-border bg-bg-elevated size-11 text-lg font-medium text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.98] cursor-pointer"
           @click="count--"
         >
           −
         </button>
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ count }}</span>
+        <span class="demo-stat text-3xl">{{ count }}</span>
         <button
           type="button"
           aria-label="Increment"
-          class="inline-flex items-center justify-center rounded-lg border border-transparent bg-(--accent) size-11 text-lg font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          class="inline-flex items-center justify-center rounded-lg border border-transparent bg-accent size-11 text-lg font-medium text-accent-fg transition hover:bg-accent-hover active:scale-[0.98] cursor-pointer"
           @click="count++"
         >
           +
@@ -78,7 +78,7 @@ function reset() {
         <button
           type="button"
           :disabled="status === 'waiting'"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           @click="awaitTarget"
         >
           await toBe({{ TARGET }})
@@ -86,7 +86,7 @@ function reset() {
         <button
           type="button"
           :disabled="status === 'waiting'"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           @click="awaitChanges"
         >
           changedTimes(3)
@@ -94,27 +94,27 @@ function reset() {
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-1.5">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 flex flex-col gap-1.5">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Promise log</span>
+        <span class="demo-label">Promise log</span>
         <span
           class="text-xs font-medium"
           :class="{
-            'text-(--fg-subtle)': status === 'idle',
+            'text-fg-subtle': status === 'idle',
             'text-amber-600 dark:text-amber-400': status === 'waiting',
             'text-emerald-600 dark:text-emerald-400': status === 'reached',
             'text-red-600 dark:text-red-400': status === 'timeout',
           }"
         >{{ status }}</span>
       </div>
-      <p v-if="!log.length" class="font-mono text-xs text-(--fg-subtle)">
+      <p v-if="!log.length" class="font-mono text-xs text-fg-subtle">
         Press a button, then change the value above.
       </p>
       <p
         v-for="(line, i) in log"
         v-else
         :key="i"
-        class="font-mono text-xs text-(--fg)"
+        class="font-mono text-xs text-fg"
         :class="{ 'opacity-50': i > 0 }"
       >
         {{ line }}
@@ -123,7 +123,7 @@ function reset() {
 
     <button
       type="button"
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      class="demo-btn"
       @click="reset"
     >
       Reset
diff --git a/vue/toolkit/src/composables/watch/until/index.ts b/vue/toolkit/src/composables/watch/until/index.ts
index 99bbde1..a4c84c8 100644
--- a/vue/toolkit/src/composables/watch/until/index.ts
+++ b/vue/toolkit/src/composables/watch/until/index.ts
@@ -98,16 +98,16 @@ function createUntil<T>(r: WatchSource<T> | MaybeRefOrGetter<T>, isNot = false):
       );
     });
 
-    const promises = [watcher];
-    if (timeout !== null && timeout !== undefined) {
-      promises.push(
-        promiseTimeout(timeout, throwOnTimeout)
-          .then(() => toValue(r as MaybeRefOrGetter<T>))
-          .finally(() => stop?.()),
-      );
-    }
+    // No timeout → the watcher promise is the whole race; skip the array + Promise.race.
+    if (timeout === null || timeout === undefined)
+      return watcher;
 
-    return Promise.race(promises);
+    return Promise.race([
+      watcher,
+      promiseTimeout(timeout, throwOnTimeout)
+        .then(() => toValue(r as MaybeRefOrGetter<T>))
+        .finally(() => stop?.()),
+    ]);
   }
 
   function toBe<P>(value: MaybeRefOrGetter<P | T>, options?: UntilToMatchOptions): Promise<T> {
@@ -137,16 +137,16 @@ function createUntil<T>(r: WatchSource<T> | MaybeRefOrGetter<T>, isNot = false):
       );
     });
 
-    const promises = [watcher];
-    if (timeout !== null && timeout !== undefined) {
-      promises.push(
-        promiseTimeout(timeout, throwOnTimeout)
-          .then(() => toValue(r as MaybeRefOrGetter<T>))
-          .finally(() => stop?.()),
-      );
-    }
+    // No timeout → the watcher promise is the whole race; skip the array + Promise.race.
+    if (timeout === null || timeout === undefined)
+      return watcher;
 
-    return Promise.race(promises);
+    return Promise.race([
+      watcher,
+      promiseTimeout(timeout, throwOnTimeout)
+        .then(() => toValue(r as MaybeRefOrGetter<T>))
+        .finally(() => stop?.()),
+    ]);
   }
 
   function toBeTruthy(options?: UntilToMatchOptions): Promise<T> {
diff --git a/vue/toolkit/src/composables/watch/watchDebounced/demo.vue b/vue/toolkit/src/composables/watch/watchDebounced/demo.vue
index 37eaf4d..230baca 100644
--- a/vue/toolkit/src/composables/watch/watchDebounced/demo.vue
+++ b/vue/toolkit/src/composables/watch/watchDebounced/demo.vue
@@ -30,9 +30,9 @@ const savings = () =>
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex flex-col gap-2">
-      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="wd-search">
+      <label class="demo-label" for="wd-search">
         Search
       </label>
       <input
@@ -40,15 +40,15 @@ const savings = () =>
         v-model="query"
         type="text"
         placeholder="Start typing…"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
         @input="onInput"
       >
     </div>
 
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Debounce</span>
-        <span class="font-mono text-xs text-(--fg-muted) tabular-nums">{{ debounce }}ms</span>
+        <span class="demo-label">Debounce</span>
+        <span class="font-mono text-xs text-fg-muted tabular-nums">{{ debounce }}ms</span>
       </div>
       <input
         v-model.number="debounce"
@@ -56,35 +56,35 @@ const savings = () =>
         min="0"
         max="1200"
         step="50"
-        class="w-full accent-(--accent) cursor-pointer"
+        class="w-full accent-accent cursor-pointer"
       >
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-1">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Settled query</span>
-      <span class="font-mono text-sm text-(--fg) truncate">{{ settledQuery || '—' }}</span>
+    <div class="rounded-lg border border-border bg-bg-inset p-3 flex flex-col gap-1">
+      <span class="demo-label">Settled query</span>
+      <span class="font-mono text-sm text-fg truncate">{{ settledQuery || '—' }}</span>
     </div>
 
     <div class="grid grid-cols-3 gap-2 text-center">
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
-        <div class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ keystrokes }}</div>
-        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">keystrokes</div>
+      <div class="demo-card p-3">
+        <div class="demo-stat text-2xl">{{ keystrokes }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-fg-subtle">keystrokes</div>
       </div>
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
-        <div class="font-mono text-2xl font-bold tabular-nums text-(--accent-text)">{{ fetches }}</div>
-        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">fetches</div>
+      <div class="demo-card p-3">
+        <div class="font-mono text-2xl font-bold tabular-nums text-accent-text">{{ fetches }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-fg-subtle">fetches</div>
       </div>
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+      <div class="demo-card p-3">
         <div class="font-mono text-2xl font-bold tabular-nums text-emerald-600 dark:text-emerald-400">
           {{ savings() }}%
         </div>
-        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">saved</div>
+        <div class="text-[10px] uppercase tracking-wide text-fg-subtle">saved</div>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
-      Callback fires <span class="font-mono text-(--fg-muted)">{{ debounce }}ms</span> after you stop typing,
-      capped by a <span class="font-mono text-(--fg-muted)">maxWait: 1500</span> ceiling.
+    <p class="text-xs text-fg-subtle">
+      Callback fires <span class="font-mono text-fg-muted">{{ debounce }}ms</span> after you stop typing,
+      capped by a <span class="font-mono text-fg-muted">maxWait: 1500</span> ceiling.
     </p>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/watch/watchDebounced/index.ts b/vue/toolkit/src/composables/watch/watchDebounced/index.ts
index fd48114..73c3ba1 100644
--- a/vue/toolkit/src/composables/watch/watchDebounced/index.ts
+++ b/vue/toolkit/src/composables/watch/watchDebounced/index.ts
@@ -1,6 +1,7 @@
 import { watch } from 'vue';
 import type {
   MaybeRefOrGetter,
+  MultiWatchSources,
   WatchCallback,
   WatchHandle,
   WatchOptions,
@@ -8,20 +9,7 @@ import type {
 } from 'vue';
 import { createFilterWrapper, debounceFilter } from '@/utils/filters';
 import type { ConfigurableEventFilter, EventFilter } from '@/utils/filters';
-
-type MultiWatchSources = Array<WatchSource<unknown> | object>;
-
-type MapSources<T> = {
-  [K in keyof T]: T[K] extends WatchSource<infer V> ? V : T[K] extends object ? T[K] : never;
-};
-
-type MapOldSources<T, Immediate> = {
-  [K in keyof T]: T[K] extends WatchSource<infer V>
-    ? Immediate extends true ? V | undefined : V
-    : T[K] extends object
-      ? Immediate extends true ? T[K] | undefined : T[K]
-      : never;
-};
+import type { MapOldSources, MapSources } from '@/types/watch';
 
 export interface WatchDebouncedOptions<Immediate> extends WatchOptions<Immediate>, ConfigurableEventFilter {
   /**
diff --git a/vue/toolkit/src/composables/watch/watchIgnorable/demo.vue b/vue/toolkit/src/composables/watch/watchIgnorable/demo.vue
index d43b8b1..77cffbe 100644
--- a/vue/toolkit/src/composables/watch/watchIgnorable/demo.vue
+++ b/vue/toolkit/src/composables/watch/watchIgnorable/demo.vue
@@ -29,17 +29,17 @@ function save() {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="wi-text">
+        <label class="demo-label" for="wi-text">
           Draft
         </label>
         <span
           class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
           :class="dirty
             ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
-            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+            : 'border-border bg-bg-inset text-fg-muted'"
         >
           <span
             class="size-1.5 rounded-full"
@@ -52,14 +52,14 @@ function save() {
         id="wi-text"
         v-model="text"
         rows="2"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition resize-none focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input resize-none"
       />
     </div>
 
     <div class="grid grid-cols-2 gap-2">
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        class="demo-btn"
         @click="normalize"
       >
         Normalize (ignored)
@@ -67,27 +67,27 @@ function save() {
       <button
         type="button"
         :disabled="!dirty"
-        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="save"
       >
         Save
       </button>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-2">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 flex flex-col gap-2">
       <div class="flex items-center justify-between text-sm">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tracked edits</span>
-        <span class="font-mono text-(--fg) tabular-nums">{{ trackedEdits }}</span>
+        <span class="demo-label">Tracked edits</span>
+        <span class="font-mono text-fg tabular-nums">{{ trackedEdits }}</span>
       </div>
       <div class="flex items-center justify-between gap-3 text-sm">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last change</span>
-        <span class="font-mono text-xs text-(--fg-muted) truncate">{{ lastChange }}</span>
+        <span class="demo-label">Last change</span>
+        <span class="font-mono text-xs text-fg-muted truncate">{{ lastChange }}</span>
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
-      Typing counts as an edit; <span class="font-mono text-(--fg-muted)">Normalize</span> writes the same
-      ref inside <span class="font-mono text-(--fg-muted)">ignoreUpdates()</span> and the watcher stays silent.
+    <p class="text-xs text-fg-subtle">
+      Typing counts as an edit; <span class="font-mono text-fg-muted">Normalize</span> writes the same
+      ref inside <span class="font-mono text-fg-muted">ignoreUpdates()</span> and the watcher stays silent.
     </p>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/watch/watchIgnorable/index.ts b/vue/toolkit/src/composables/watch/watchIgnorable/index.ts
index ea59bbc..4987f44 100644
--- a/vue/toolkit/src/composables/watch/watchIgnorable/index.ts
+++ b/vue/toolkit/src/composables/watch/watchIgnorable/index.ts
@@ -1,23 +1,10 @@
 import { watch } from 'vue';
-import type { WatchCallback, WatchOptions, WatchSource, WatchStopHandle } from 'vue';
+import type { MultiWatchSources, WatchCallback, WatchOptions, WatchSource, WatchStopHandle } from 'vue';
 import { noop } from '@robonen/stdlib';
 import type { AnyFunction } from '@robonen/stdlib';
 import { bypassFilter, createFilterWrapper } from '@/utils';
 import type { ConfigurableEventFilter } from '@/utils';
-
-type MultiWatchSources = Array<WatchSource<unknown> | object>;
-
-type MapSources<T> = {
-  [K in keyof T]: T[K] extends WatchSource<infer V> ? V : T[K] extends object ? T[K] : never;
-};
-
-type MapOldSources<T, Immediate> = {
-  [K in keyof T]: T[K] extends WatchSource<infer V>
-    ? Immediate extends true ? V | undefined : V
-    : T[K] extends object
-      ? Immediate extends true ? T[K] | undefined : T[K]
-      : never;
-};
+import type { MapOldSources, MapSources } from '@/types/watch';
 
 export interface WatchWithFilterOptions<Immediate> extends WatchOptions<Immediate>, ConfigurableEventFilter {}
 
@@ -80,7 +67,7 @@ export function watchIgnorable<T extends object, Immediate extends Readonly<bool
 ): WatchIgnorableReturn;
 
 export function watchIgnorable<Immediate extends Readonly<boolean> = false>(
-  source: any,
+  source: WatchSource<unknown> | MultiWatchSources | object,
   cb: AnyFunction,
   options: WatchWithFilterOptions<Immediate> = {},
 ): WatchIgnorableReturn {
@@ -106,7 +93,7 @@ export function watchIgnorable<Immediate extends Readonly<boolean> = false>(
 
     stop = watch(
       source,
-      (...args: any[]) => {
+      (...args: unknown[]) => {
         if (!ignore)
           filteredCb(...args);
       },
@@ -147,7 +134,7 @@ export function watchIgnorable<Immediate extends Readonly<boolean> = false>(
     disposables.push(
       watch(
         source,
-        (...args: any[]) => {
+        (...args: unknown[]) => {
           const ignore = ignoreCounter > 0 && ignoreCounter === syncCounter;
           ignoreCounter = 0;
           syncCounter = 0;
diff --git a/vue/toolkit/src/composables/watch/watchOnce/demo.vue b/vue/toolkit/src/composables/watch/watchOnce/demo.vue
index a814661..b0b1557 100644
--- a/vue/toolkit/src/composables/watch/watchOnce/demo.vue
+++ b/vue/toolkit/src/composables/watch/watchOnce/demo.vue
@@ -31,31 +31,31 @@ function onInput() {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
+    <div class="demo-card p-4 flex flex-col gap-4">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Volume</span>
-        <span class="font-mono text-sm text-(--fg) tabular-nums">{{ volume }}</span>
+        <span class="demo-label">Volume</span>
+        <span class="font-mono text-sm text-fg tabular-nums">{{ volume }}</span>
       </div>
       <input
         v-model.number="volume"
         type="range"
         min="0"
         max="100"
-        class="w-full accent-(--accent) cursor-pointer"
+        class="w-full accent-accent cursor-pointer"
         @input="onInput"
       >
     </div>
 
     <div
-      class="rounded-lg border bg-(--bg-inset) p-3 flex items-center justify-between transition"
-      :class="firstTouch === null ? 'border-(--border)' : 'border-emerald-500/30'"
+      class="rounded-lg border bg-bg-inset p-3 flex items-center justify-between transition"
+      :class="firstTouch === null ? 'border-border' : 'border-emerald-500/30'"
     >
       <div class="flex flex-col">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">First captured value</span>
+        <span class="demo-label">First captured value</span>
         <span
           class="font-mono text-2xl font-bold tabular-nums"
-          :class="firstTouch === null ? 'text-(--fg-subtle)' : 'text-emerald-600 dark:text-emerald-400'"
+          :class="firstTouch === null ? 'text-fg-subtle' : 'text-emerald-600 dark:text-emerald-400'"
         >
           {{ firstTouch === null ? '—' : firstTouch }}
         </span>
@@ -64,28 +64,28 @@ function onInput() {
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
         :class="armed
           ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          : 'border-border bg-bg-inset text-fg-muted'"
       >
-        <span class="size-1.5 rounded-full" :class="armed ? 'bg-amber-500 animate-pulse' : 'bg-(--border-strong)'" />
+        <span class="size-1.5 rounded-full" :class="armed ? 'bg-amber-500 animate-pulse' : 'bg-border-strong'" />
         {{ armed ? 'Armed' : 'Spent' }}
       </span>
     </div>
 
-    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-sm">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Total drags</span>
-      <span class="font-mono text-(--fg) tabular-nums">{{ totalChanges }}</span>
+    <div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset p-3 text-sm">
+      <span class="demo-label">Total drags</span>
+      <span class="font-mono text-fg tabular-nums">{{ totalChanges }}</span>
     </div>
 
     <button
       type="button"
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      class="demo-btn"
       @click="arm"
     >
       Re-arm watcher
     </button>
 
-    <p class="text-xs text-(--fg-subtle)">
-      Drag the slider — only the <span class="font-mono text-(--fg-muted)">first</span> change is captured,
+    <p class="text-xs text-fg-subtle">
+      Drag the slider — only the <span class="font-mono text-fg-muted">first</span> change is captured,
       then the watcher stops. Total drags keeps climbing to prove it.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/watch/watchOnce/index.ts b/vue/toolkit/src/composables/watch/watchOnce/index.ts
index be78bf0..0f61733 100644
--- a/vue/toolkit/src/composables/watch/watchOnce/index.ts
+++ b/vue/toolkit/src/composables/watch/watchOnce/index.ts
@@ -1,19 +1,6 @@
 import { watch } from 'vue';
-import type { WatchCallback, WatchHandle, WatchOptions, WatchSource } from 'vue';
-
-type MultiWatchSources = Array<WatchSource<unknown> | object>;
-
-type MapSources<T> = {
-  [K in keyof T]: T[K] extends WatchSource<infer V> ? V : T[K] extends object ? T[K] : never;
-};
-
-type MapOldSources<T, Immediate> = {
-  [K in keyof T]: T[K] extends WatchSource<infer V>
-    ? Immediate extends true ? V | undefined : V
-    : T[K] extends object
-      ? Immediate extends true ? T[K] | undefined : T[K]
-      : never;
-};
+import type { MultiWatchSources, WatchCallback, WatchHandle, WatchOptions, WatchSource } from 'vue';
+import type { MapOldSources, MapSources } from '@/types/watch';
 
 export type WatchOnceOptions<Immediate = boolean> = Omit<WatchOptions<Immediate>, 'once'>;
 
diff --git a/vue/toolkit/src/composables/watch/watchPausable/demo.vue b/vue/toolkit/src/composables/watch/watchPausable/demo.vue
index e9332e2..369f670 100644
--- a/vue/toolkit/src/composables/watch/watchPausable/demo.vue
+++ b/vue/toolkit/src/composables/watch/watchPausable/demo.vue
@@ -25,9 +25,9 @@ function handleStop() {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex flex-col gap-1.5">
-      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <label class="demo-label">
         Watched source
       </label>
       <input
@@ -35,7 +35,7 @@ function handleStop() {
         :disabled="stopped"
         type="text"
         placeholder="Type to trigger the watcher"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring) disabled:opacity-40"
+        class="demo-input disabled:opacity-40"
       >
     </div>
 
@@ -43,14 +43,14 @@ function handleStop() {
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
         :class="stopped
-          ? 'border-(--border) bg-(--bg-inset) text-(--fg-subtle)'
+          ? 'border-border bg-bg-inset text-fg-subtle'
           : isActive
             ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
             : 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'"
       >
         <span
           class="size-1.5 rounded-full"
-          :class="stopped ? 'bg-(--fg-subtle)' : isActive ? 'bg-emerald-500' : 'bg-amber-500'"
+          :class="stopped ? 'bg-fg-subtle' : isActive ? 'bg-emerald-500' : 'bg-amber-500'"
         />
         {{ stopped ? 'Stopped' : isActive ? 'Watching' : 'Paused' }}
       </span>
@@ -59,7 +59,7 @@ function handleStop() {
         <button
           v-if="isActive"
           :disabled="stopped"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           @click="pause"
         >
           Pause
@@ -67,14 +67,14 @@ function handleStop() {
         <button
           v-else
           :disabled="stopped"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           @click="resume"
         >
           Resume
         </button>
         <button
           :disabled="stopped"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          class="demo-btn disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
           @click="handleStop"
         >
           Stop
@@ -82,26 +82,26 @@ function handleStop() {
       </div>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <div class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+    <div class="demo-card p-4">
+      <div class="demo-label mb-2">
         Sync log
       </div>
       <ul v-if="syncs.length" class="flex flex-col gap-1.5">
         <li
           v-for="entry in syncs"
           :key="entry.id"
-          class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2"
+          class="flex items-center gap-2 rounded-lg border border-border bg-bg-inset px-3 py-2"
         >
-          <span class="font-mono text-xs text-(--fg-subtle) tabular-nums">{{ entry.at }}</span>
-          <span class="truncate font-mono text-sm text-(--fg)">{{ entry.value || '—' }}</span>
+          <span class="font-mono text-xs text-fg-subtle tabular-nums">{{ entry.at }}</span>
+          <span class="truncate font-mono text-sm text-fg">{{ entry.value || '—' }}</span>
         </li>
       </ul>
-      <p v-else class="py-2 text-sm text-(--fg-subtle)">
+      <p v-else class="py-2 text-sm text-fg-subtle">
         Edit the field above to record a sync.
       </p>
     </div>
 
-    <p class="text-xs text-(--fg-muted)">
+    <p class="text-xs text-fg-muted">
       While paused, source changes are ignored — no entry is logged until you resume.
     </p>
   </div>
diff --git a/vue/toolkit/src/composables/watch/watchPausable/index.ts b/vue/toolkit/src/composables/watch/watchPausable/index.ts
index 510aa37..d6b9014 100644
--- a/vue/toolkit/src/composables/watch/watchPausable/index.ts
+++ b/vue/toolkit/src/composables/watch/watchPausable/index.ts
@@ -9,16 +9,7 @@ import type {
 } from 'vue';
 import { bypassFilter, createFilterWrapper } from '@/utils/filters';
 import type { ConfigurableEventFilter, EventFilter } from '@/utils/filters';
-
-type MapSources<T> = {
-  [K in keyof T]: T[K] extends WatchSource<infer V> ? V : never;
-};
-
-type MapOldSources<T, Immediate> = {
-  [K in keyof T]: T[K] extends WatchSource<infer V>
-    ? Immediate extends true ? V | undefined : V
-    : never;
-};
+import type { MapOldSources, MapSources } from '@/types/watch';
 
 export interface UseWatchPausableOptions<Immediate>
   extends WatchOptions<Immediate>, ConfigurableEventFilter {
@@ -89,8 +80,8 @@ export function watchPausable<T extends object, Immediate extends Readonly<boole
   options?: UseWatchPausableOptions<Immediate>,
 ): UseWatchPausableReturn;
 export function watchPausable<Immediate extends Readonly<boolean> = false>(
-  source: any,
-  cb: any,
+  source: WatchSource<unknown> | MultiWatchSources | object,
+  cb: AnyFunction,
   options: UseWatchPausableOptions<Immediate> = {},
 ): UseWatchPausableReturn {
   const {
diff --git a/vue/toolkit/src/composables/watch/watchThrottled/demo.vue b/vue/toolkit/src/composables/watch/watchThrottled/demo.vue
index e9aad8e..4911172 100644
--- a/vue/toolkit/src/composables/watch/watchThrottled/demo.vue
+++ b/vue/toolkit/src/composables/watch/watchThrottled/demo.vue
@@ -17,54 +17,54 @@ watchThrottled(volume, (value) => {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex flex-col gap-2">
       <div class="flex items-baseline justify-between">
-        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <label class="demo-label">
           Live value
         </label>
-        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ volume }}</span>
+        <span class="demo-stat text-3xl">{{ volume }}</span>
       </div>
       <input
         v-model.number="volume"
         type="range"
         min="0"
         max="100"
-        class="w-full cursor-pointer accent-(--accent)"
+        class="w-full cursor-pointer accent-accent"
       >
-      <p class="text-xs text-(--fg-muted)">
+      <p class="text-xs text-fg-muted">
         Drag rapidly — updates fire continuously, but the throttled callback only commits at most once per interval.
       </p>
     </div>
 
     <div class="grid grid-cols-2 gap-3">
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <div class="demo-card p-4">
+        <div class="demo-label">
           Saved (throttled)
         </div>
         <div
           class="mt-1 font-mono text-3xl font-bold tabular-nums transition-colors duration-150"
-          :class="flash ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg)'"
+          :class="flash ? 'text-emerald-600 dark:text-emerald-400' : 'text-fg'"
         >
           {{ saved }}
         </div>
       </div>
-      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <div class="demo-card p-4">
+        <div class="demo-label">
           Commits
         </div>
-        <div class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">
+        <div class="demo-stat mt-1 text-3xl">
           {{ saveCount }}
         </div>
       </div>
     </div>
 
-    <div class="flex flex-col gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+    <div class="demo-card flex flex-col gap-2 p-4">
       <div class="flex items-baseline justify-between">
-        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        <label class="demo-label">
           Throttle interval
         </label>
-        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ throttle }} ms</span>
+        <span class="font-mono text-sm tabular-nums text-fg-muted">{{ throttle }} ms</span>
       </div>
       <input
         v-model.number="throttle"
@@ -72,9 +72,9 @@ watchThrottled(volume, (value) => {
         min="0"
         max="2000"
         step="100"
-        class="w-full cursor-pointer accent-(--accent)"
+        class="w-full cursor-pointer accent-accent"
       >
-      <p class="text-xs text-(--fg-muted)">
+      <p class="text-xs text-fg-muted">
         The interval is reactive — change it and the next throttle window adapts immediately.
       </p>
     </div>
diff --git a/vue/toolkit/src/composables/watch/watchThrottled/index.ts b/vue/toolkit/src/composables/watch/watchThrottled/index.ts
index bd27521..8dfe9ca 100644
--- a/vue/toolkit/src/composables/watch/watchThrottled/index.ts
+++ b/vue/toolkit/src/composables/watch/watchThrottled/index.ts
@@ -1,21 +1,8 @@
 import { watch } from 'vue';
-import type { MaybeRefOrGetter, WatchCallback, WatchHandle, WatchOptions, WatchSource } from 'vue';
+import type { MaybeRefOrGetter, MultiWatchSources, WatchCallback, WatchHandle, WatchOptions, WatchSource } from 'vue';
 import { createFilterWrapper, throttleFilter } from '@/utils/filters';
 import type { EventFilter } from '@/utils/filters';
-
-type MultiWatchSources = Array<WatchSource<unknown> | object>;
-
-type MapSources<T> = {
-  [K in keyof T]: T[K] extends WatchSource<infer V> ? V : T[K] extends object ? T[K] : never;
-};
-
-type MapOldSources<T, Immediate> = {
-  [K in keyof T]: T[K] extends WatchSource<infer V>
-    ? Immediate extends true ? V | undefined : V
-    : T[K] extends object
-      ? Immediate extends true ? T[K] | undefined : T[K]
-      : never;
-};
+import type { MapOldSources, MapSources } from '@/types/watch';
 
 export interface WatchThrottledOptions<Immediate> extends WatchOptions<Immediate> {
   /**
@@ -84,13 +71,18 @@ export function watchThrottled(
     throttle = 0,
     trailing = true,
     leading = true,
-    eventFilter = throttleFilter(throttle, trailing, leading),
+    eventFilter,
     ...watchOptions
   } = options as WatchThrottledOptions<boolean> & { eventFilter?: EventFilter };
 
+  // Honour a caller-supplied eventFilter if present; otherwise build a throttle
+  // filter from the timing options (built lazily so a custom filter skips it).
+  const filter: EventFilter = eventFilter
+    ?? throttleFilter(throttle, trailing, leading);
+
   return watch(
     source,
-    createFilterWrapper(eventFilter, cb),
+    createFilterWrapper(filter, cb),
     watchOptions,
   );
 }
diff --git a/vue/toolkit/src/composables/watch/whenever/demo.vue b/vue/toolkit/src/composables/watch/whenever/demo.vue
index f0640ff..169f17d 100644
--- a/vue/toolkit/src/composables/watch/whenever/demo.vue
+++ b/vue/toolkit/src/composables/watch/whenever/demo.vue
@@ -25,22 +25,22 @@ whenever(() => code.value.length >= 12, () => {
 </script>
 
 <template>
-  <div class="flex w-full max-w-sm flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex flex-col gap-1.5">
-      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <label class="demo-label">
         Access code
       </label>
       <input
         v-model="code"
         type="text"
         placeholder="Enter at least 6 characters"
-        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        class="demo-input"
       >
       <div class="flex items-center justify-between text-xs">
-        <span class="text-(--fg-subtle)">{{ code.length }} / 6 chars</span>
+        <span class="text-fg-subtle">{{ code.length }} / 6 chars</span>
         <span
           class="font-medium"
-          :class="isValid ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-subtle)'"
+          :class="isValid ? 'text-emerald-600 dark:text-emerald-400' : 'text-fg-subtle'"
         >
           {{ isValid ? 'valid' : 'too short' }}
         </span>
@@ -54,27 +54,27 @@ whenever(() => code.value.length >= 12, () => {
       Reached 12+ characters — this fired exactly once.
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
-      <div class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+    <div class="demo-card p-4">
+      <div class="demo-label mb-2">
         Became valid at
       </div>
       <ul v-if="events.length" class="flex flex-col gap-1.5">
         <li
           v-for="event in events"
           :key="event.id"
-          class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2"
+          class="flex items-center gap-2 rounded-lg border border-border bg-bg-inset px-3 py-2"
         >
           <span class="size-1.5 rounded-full bg-emerald-500" />
-          <span class="font-mono text-sm text-(--fg) tabular-nums">{{ event.at }}</span>
+          <span class="font-mono text-sm text-fg tabular-nums">{{ event.at }}</span>
         </li>
       </ul>
-      <p v-else class="py-2 text-sm text-(--fg-subtle)">
+      <p v-else class="py-2 text-sm text-fg-subtle">
         The callback only runs when the source turns truthy — type a valid code to log an event, then clear it and try again.
       </p>
     </div>
 
-    <p class="text-xs text-(--fg-muted)">
-      Unlike a plain <code class="rounded bg-(--bg-inset) px-1 py-0.5 font-mono">watch</code>, the callback skips every falsy transition.
+    <p class="text-xs text-fg-muted">
+      Unlike a plain <code class="rounded bg-bg-inset px-1 py-0.5 font-mono">watch</code>, the callback skips every falsy transition.
     </p>
   </div>
 </template>
diff --git a/vue/toolkit/src/types/watch.ts b/vue/toolkit/src/types/watch.ts
new file mode 100644
index 0000000..f9fca33
--- /dev/null
+++ b/vue/toolkit/src/types/watch.ts
@@ -0,0 +1,26 @@
+import type { WatchSource } from 'vue';
+
+/**
+ * Map a tuple of watch sources to the tuple of their resolved values, as passed
+ * to a `WatchCallback`'s `value` argument. Mirrors Vue's own (non-exported)
+ * `MapSources`: a `WatchSource<V>` resolves to `V`, while a plain reactive
+ * object is passed through unchanged.
+ *
+ * Shared by the array-source overloads of the `watch*` composables.
+ */
+export type MapSources<T> = {
+  [K in keyof T]: T[K] extends WatchSource<infer V> ? V : T[K] extends object ? T[K] : never;
+};
+
+/**
+ * Like {@link MapSources} but for the `oldValue` argument: when `Immediate` is
+ * `true` each entry is additionally `| undefined` (no previous value on the
+ * first, immediate run).
+ */
+export type MapOldSources<T, Immediate> = {
+  [K in keyof T]: T[K] extends WatchSource<infer V>
+    ? Immediate extends true ? V | undefined : V
+    : T[K] extends object
+      ? Immediate extends true ? T[K] | undefined : T[K]
+      : never;
+};
diff --git a/vue/toolkit/src/utils/filters.ts b/vue/toolkit/src/utils/filters.ts
index 55ed493..b300ce9 100644
--- a/vue/toolkit/src/utils/filters.ts
+++ b/vue/toolkit/src/utils/filters.ts
@@ -142,7 +142,7 @@ export function createFilterWrapper<T extends AnyFunction>(
 ): (...args: Parameters<T>) => Promise<Awaited<ReturnType<T>>> {
   // Promises scheduled but not yet resolved by an invocation. The filter may
   // drop intermediate invokes (debounce) — they all settle on the next real one.
-  let pending: Array<{ resolve: (value: any) => void; reject: (reason?: unknown) => void }> = [];
+  let pending: Array<{ resolve: (value: Awaited<ReturnType<T>>) => void; reject: (reason?: unknown) => void }> = [];
 
   function wrapper(this: unknown, ...args: Parameters<T>) {
     return new Promise<Awaited<ReturnType<T>>>((resolve, reject) => {
diff --git a/vue/toolkit/src/utils/lifecycle.ts b/vue/toolkit/src/utils/lifecycle.ts
new file mode 100644
index 0000000..b251f7d
--- /dev/null
+++ b/vue/toolkit/src/utils/lifecycle.ts
@@ -0,0 +1,51 @@
+import { nextTick } from 'vue';
+import type { ComponentInternalInstance } from 'vue';
+import type { VoidFunction } from '@robonen/stdlib';
+import { getLifeCycleTarger } from './components';
+
+/**
+ * Shared options for the `tryOn*` lifecycle helpers.
+ */
+export interface TryOnLifecycleOptions {
+  /**
+   * Run the callback synchronously when invoked outside a component instance
+   * (i.e. when there is no lifecycle hook to defer to). When `false`, the
+   * callback is scheduled on the next microtask via `nextTick`.
+   *
+   * @default true
+   */
+  sync?: boolean;
+  /**
+   * The component instance the lifecycle hook should be bound to. Defaults to
+   * the current active instance.
+   */
+  target?: ComponentInternalInstance;
+}
+
+/**
+ * The shape shared by Vue's lifecycle registrars (`onMounted`, `onBeforeMount`, …):
+ * a callback plus an optional target instance.
+ */
+type LifecycleHook = (hook: VoidFunction, target?: ComponentInternalInstance | null) => void;
+
+/**
+ * Register `fn` on the given Vue lifecycle `hook` when called inside a component
+ * instance; otherwise run it immediately (or on the next tick when `sync` is
+ * `false`). Factored out so the `tryOnMounted` / `tryOnBeforeMount` helpers share
+ * one implementation of the instance-resolution and fallback branching.
+ */
+export function runTryOnLifecycle(
+  hook: LifecycleHook,
+  fn: VoidFunction,
+  options: TryOnLifecycleOptions = {},
+): void {
+  const { sync = true, target } = options;
+  const instance = getLifeCycleTarger(target);
+
+  if (instance)
+    hook(fn, instance);
+  else if (sync)
+    fn();
+  else
+    nextTick(fn);
+}