@twentyfirstmedia/pro 0.1.1 → 0.2.1

package/dist/scoped.css

@@ -62,6 +62,10 @@
   --dur-enter: var(--duration-base);
   --dur-slow: var(--duration-base);
   --stagger-step: 0ms;
+  --dur-exit: var(--duration-fast);
+  --motion-time: 1;
+  --motion-travel: 1;
+  --motion-blur: 0px;
   --ease-out: var(--ease-standard);
   --ease-spring: var(--ease-standard);
   --ease-in-out: var(--ease-standard);
@@ -268,6 +272,20 @@
   --on-frame-danger: var(--danger);
   --scrim: rgba(0,0,0,0.62);
   --scrim-strong: var(--scrim);
+  --glass: color-mix(in srgb, var(--card) 72%, transparent);
+  --glass-strong: color-mix(in srgb, var(--card) 88%, transparent);
+  --glass-control: color-mix(in srgb, var(--foreground) 7%, transparent);
+  --glass-well: color-mix(in srgb, var(--foreground) 5%, transparent);
+  --glass-hover: color-mix(in srgb, var(--foreground) 9%, transparent);
+  --glass-border: color-mix(in srgb, var(--foreground) 14%, transparent);
+  --glass-highlight: rgba(255, 255, 255, 0.07);
+  --glass-sheen: transparent;
+  --ambient-base: var(--background);
+  --ambient-1: color-mix(in oklab, var(--chart-1) 30%, var(--background));
+  --ambient-2: color-mix(in oklab, var(--chart-4) 26%, var(--background));
+  --ambient-3: color-mix(in oklab, var(--chart-2) 22%, var(--background));
+  --ambient-4: color-mix(in oklab, var(--foreground) 8%, var(--background));
+  --ambient-scrim: rgba(9, 9, 11, 0.55);
   --bg-000: var(--background);
   --bg-100: var(--card);
   --bg-200: var(--muted);
@@ -325,6 +343,7 @@
   --shadow-lift: none;
   --shadow-float: 0 16px 40px rgba(0,0,0,0.55);
   --shadow-overlay: 0 16px 40px rgba(0,0,0,0.55);
+  --shadow-glass: 0 12px 32px rgba(0, 0, 0, 0.5);
   --button-radius: var(--radius-1);
   --field-radius: var(--radius-1);
   --badge-radius: var(--radius-1);
@@ -334,6 +353,8 @@
   --panel-shadow: none;
   --panel-pad: var(--space-4);
   --panel-gap: 1px;
+  --glass-filter: blur(16px) saturate(120%) brightness(0.8);
+  --glass-tint: 40%;
   color-scheme: dark;
 }
 @media (prefers-color-scheme: dark) {
@@ -399,6 +420,20 @@
     --on-frame-danger: var(--danger);
     --scrim: rgba(0,0,0,0.62);
     --scrim-strong: var(--scrim);
+    --glass: color-mix(in srgb, var(--card) 72%, transparent);
+    --glass-strong: color-mix(in srgb, var(--card) 88%, transparent);
+    --glass-control: color-mix(in srgb, var(--foreground) 7%, transparent);
+    --glass-well: color-mix(in srgb, var(--foreground) 5%, transparent);
+    --glass-hover: color-mix(in srgb, var(--foreground) 9%, transparent);
+    --glass-border: color-mix(in srgb, var(--foreground) 14%, transparent);
+    --glass-highlight: rgba(255, 255, 255, 0.07);
+    --glass-sheen: transparent;
+    --ambient-base: var(--background);
+    --ambient-1: color-mix(in oklab, var(--chart-1) 30%, var(--background));
+    --ambient-2: color-mix(in oklab, var(--chart-4) 26%, var(--background));
+    --ambient-3: color-mix(in oklab, var(--chart-2) 22%, var(--background));
+    --ambient-4: color-mix(in oklab, var(--foreground) 8%, var(--background));
+    --ambient-scrim: rgba(9, 9, 11, 0.55);
     --bg-000: var(--background);
     --bg-100: var(--card);
     --bg-200: var(--muted);
@@ -456,6 +491,7 @@
     --shadow-lift: none;
     --shadow-float: 0 16px 40px rgba(0,0,0,0.55);
     --shadow-overlay: 0 16px 40px rgba(0,0,0,0.55);
+    --shadow-glass: 0 12px 32px rgba(0, 0, 0, 0.5);
     --button-radius: var(--radius-1);
     --field-radius: var(--radius-1);
     --badge-radius: var(--radius-1);
@@ -465,6 +501,8 @@
     --panel-shadow: none;
     --panel-pad: var(--space-4);
     --panel-gap: 1px;
+    --glass-filter: blur(16px) saturate(120%) brightness(0.8);
+    --glass-tint: 40%;
     color-scheme: dark;
   }
 }
@@ -531,6 +569,20 @@
     --on-frame-danger: var(--danger);
     --scrim: rgba(17,17,20,0.36);
     --scrim-strong: var(--scrim);
+    --glass: color-mix(in srgb, var(--card) 74%, transparent);
+    --glass-strong: color-mix(in srgb, var(--card) 88%, transparent);
+    --glass-control: color-mix(in srgb, var(--card) 55%, transparent);
+    --glass-well: color-mix(in srgb, var(--foreground) 5%, transparent);
+    --glass-hover: color-mix(in srgb, var(--foreground) 7%, transparent);
+    --glass-border: color-mix(in srgb, var(--foreground) 12%, transparent);
+    --glass-highlight: rgba(255, 255, 255, 0.7);
+    --glass-sheen: transparent;
+    --ambient-base: var(--background);
+    --ambient-1: color-mix(in oklab, var(--chart-1) 22%, var(--background));
+    --ambient-2: color-mix(in oklab, var(--chart-4) 18%, var(--background));
+    --ambient-3: color-mix(in oklab, var(--chart-2) 16%, var(--background));
+    --ambient-4: color-mix(in oklab, var(--foreground) 6%, var(--background));
+    --ambient-scrim: rgba(246, 246, 247, 0.4);
     --bg-000: var(--background);
     --bg-100: var(--card);
     --bg-200: var(--muted);
@@ -588,6 +640,7 @@
     --shadow-lift: none;
     --shadow-float: 0 16px 40px rgba(17,17,20,0.12);
     --shadow-overlay: 0 16px 40px rgba(17,17,20,0.12);
+    --shadow-glass: 0 8px 24px rgba(17, 17, 20, 0.1);
     --button-radius: var(--radius-1);
     --field-radius: var(--radius-1);
     --badge-radius: var(--radius-1);
@@ -597,6 +650,8 @@
     --panel-shadow: none;
     --panel-pad: var(--space-4);
     --panel-gap: 1px;
+    --glass-filter: blur(16px) saturate(130%) brightness(1.04);
+    --glass-tint: 40%;
     color-scheme: light;
   }
 }
@@ -662,6 +717,20 @@
   --on-frame-danger: var(--danger);
   --scrim: rgba(0,0,0,0.62);
   --scrim-strong: var(--scrim);
+  --glass: color-mix(in srgb, var(--card) 72%, transparent);
+  --glass-strong: color-mix(in srgb, var(--card) 88%, transparent);
+  --glass-control: color-mix(in srgb, var(--foreground) 7%, transparent);
+  --glass-well: color-mix(in srgb, var(--foreground) 5%, transparent);
+  --glass-hover: color-mix(in srgb, var(--foreground) 9%, transparent);
+  --glass-border: color-mix(in srgb, var(--foreground) 14%, transparent);
+  --glass-highlight: rgba(255, 255, 255, 0.07);
+  --glass-sheen: transparent;
+  --ambient-base: var(--background);
+  --ambient-1: color-mix(in oklab, var(--chart-1) 30%, var(--background));
+  --ambient-2: color-mix(in oklab, var(--chart-4) 26%, var(--background));
+  --ambient-3: color-mix(in oklab, var(--chart-2) 22%, var(--background));
+  --ambient-4: color-mix(in oklab, var(--foreground) 8%, var(--background));
+  --ambient-scrim: rgba(9, 9, 11, 0.55);
   --bg-000: var(--background);
   --bg-100: var(--card);
   --bg-200: var(--muted);
@@ -719,6 +788,7 @@
   --shadow-lift: none;
   --shadow-float: 0 16px 40px rgba(0,0,0,0.55);
   --shadow-overlay: 0 16px 40px rgba(0,0,0,0.55);
+  --shadow-glass: 0 12px 32px rgba(0, 0, 0, 0.5);
   --button-radius: var(--radius-1);
   --field-radius: var(--radius-1);
   --badge-radius: var(--radius-1);
@@ -728,6 +798,8 @@
   --panel-shadow: none;
   --panel-pad: var(--space-4);
   --panel-gap: 1px;
+  --glass-filter: blur(16px) saturate(120%) brightness(0.8);
+  --glass-tint: 40%;
   color-scheme: dark;
 }
 :where([data-kit="pro"][data-theme="light"], [data-kit="pro"] [data-theme="light"], [data-kit="pro"].light, [data-kit="pro"] .light) {
@@ -792,6 +864,20 @@
   --on-frame-danger: var(--danger);
   --scrim: rgba(17,17,20,0.36);
   --scrim-strong: var(--scrim);
+  --glass: color-mix(in srgb, var(--card) 74%, transparent);
+  --glass-strong: color-mix(in srgb, var(--card) 88%, transparent);
+  --glass-control: color-mix(in srgb, var(--card) 55%, transparent);
+  --glass-well: color-mix(in srgb, var(--foreground) 5%, transparent);
+  --glass-hover: color-mix(in srgb, var(--foreground) 7%, transparent);
+  --glass-border: color-mix(in srgb, var(--foreground) 12%, transparent);
+  --glass-highlight: rgba(255, 255, 255, 0.7);
+  --glass-sheen: transparent;
+  --ambient-base: var(--background);
+  --ambient-1: color-mix(in oklab, var(--chart-1) 22%, var(--background));
+  --ambient-2: color-mix(in oklab, var(--chart-4) 18%, var(--background));
+  --ambient-3: color-mix(in oklab, var(--chart-2) 16%, var(--background));
+  --ambient-4: color-mix(in oklab, var(--foreground) 6%, var(--background));
+  --ambient-scrim: rgba(246, 246, 247, 0.4);
   --bg-000: var(--background);
   --bg-100: var(--card);
   --bg-200: var(--muted);
@@ -849,6 +935,7 @@
   --shadow-lift: none;
   --shadow-float: 0 16px 40px rgba(17,17,20,0.12);
   --shadow-overlay: 0 16px 40px rgba(17,17,20,0.12);
+  --shadow-glass: 0 8px 24px rgba(17, 17, 20, 0.1);
   --button-radius: var(--radius-1);
   --field-radius: var(--radius-1);
   --badge-radius: var(--radius-1);
@@ -858,6 +945,8 @@
   --panel-shadow: none;
   --panel-pad: var(--space-4);
   --panel-gap: 1px;
+  --glass-filter: blur(16px) saturate(130%) brightness(1.04);
+  --glass-tint: 40%;
   color-scheme: light;
 }
 @media (pointer: coarse) {
@@ -883,6 +972,70 @@
   --density-font-size: 14px;
   --density-line-height: 20px;
 }
+:where([data-kit="pro"][data-motion="expressive"], [data-kit="pro"] [data-motion="expressive"]) {
+  --dur-enter: 360ms;
+  --dur-slow: 560ms;
+  --dur-exit: 140ms;
+  --stagger-step: 45ms;
+  --motion-time: 1;
+  --motion-travel: 0.8;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-blur: 0px;
+}
+:where([data-kit="pro"][data-motion="off"], [data-kit="pro"] [data-motion="off"]) {
+  --duration-fast: 0ms;
+  --duration-base: 0ms;
+  --dur-fast: 0ms;
+  --dur-base: 0ms;
+  --dur-enter: 0ms;
+  --dur-slow: 0ms;
+  --dur-exit: 0ms;
+  --stagger-step: 0ms;
+  --motion-time: 0;
+  --motion-travel: 0;
+  --motion-blur: 0px;
+}
+@media (prefers-reduced-motion: reduce) {
+  :where([data-kit="pro"], [data-kit="pro"][data-motion], [data-kit="pro"] [data-motion], [data-kit="pro"][data-theme], [data-kit="pro"] [data-theme]) {
+    --duration-fast: 0ms;
+    --duration-base: 0ms;
+    --dur-fast: 0ms;
+    --dur-base: 0ms;
+    --dur-enter: 0ms;
+    --dur-slow: 0ms;
+    --dur-exit: 0ms;
+    --stagger-step: 0ms;
+    --motion-time: 0;
+    --motion-travel: 0;
+    --motion-blur: 0px;
+  }
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  :where([data-kit="pro"], [data-kit="pro"][data-theme], [data-kit="pro"] [data-theme], [data-kit="pro"].dark, [data-kit="pro"] .dark, [data-kit="pro"].light, [data-kit="pro"] .light) {
+    --glass: var(--glass-strong);
+  }
+}
+@media (prefers-contrast: more) {
+  :where([data-kit="pro"], [data-kit="pro"][data-theme], [data-kit="pro"] [data-theme], [data-kit="pro"].dark, [data-kit="pro"] .dark, [data-kit="pro"].light, [data-kit="pro"] .light) {
+    --glass: var(--glass-strong);
+  }
+}
+@media (prefers-reduced-transparency: reduce) {
+  :where([data-kit="pro"], [data-kit="pro"][data-theme], [data-kit="pro"] [data-theme], [data-kit="pro"].dark, [data-kit="pro"] .dark, [data-kit="pro"].light, [data-kit="pro"] .light) {
+    --glass: var(--card);
+    --glass-strong: var(--popover);
+    --glass-sheen: transparent;
+    --glass-filter: none;
+  }
+}
+@media (forced-colors: active) {
+  :where([data-kit="pro"], [data-kit="pro"][data-theme], [data-kit="pro"] [data-theme], [data-kit="pro"].dark, [data-kit="pro"] .dark, [data-kit="pro"].light, [data-kit="pro"] .light) {
+    --glass: var(--card);
+    --glass-strong: var(--popover);
+    --glass-sheen: transparent;
+    --glass-filter: none;
+  }
+}
 
 /* 01-foundation.css */
 /* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
@@ -1429,18 +1582,23 @@
   box-shadow: none;
 }
 :where([data-kit="pro"]) .tf-bg-sky {
+  --tint: var(--sky);
   background: var(--sky);
 }
 :where([data-kit="pro"]) .tf-bg-mint {
+  --tint: var(--mint);
   background: var(--mint);
 }
 :where([data-kit="pro"]) .tf-bg-lilac {
+  --tint: var(--lilac);
   background: var(--lilac);
 }
 :where([data-kit="pro"]) .tf-bg-butter {
+  --tint: var(--butter);
   background: var(--butter);
 }
 :where([data-kit="pro"]) .tf-bg-blush {
+  --tint: var(--blush);
   background: var(--blush);
 }
 :where([data-kit="pro"]) .tf-bg-surface {
@@ -1862,7 +2020,7 @@
 @keyframes tf-pro-rise {
   from {
     opacity: 0;
-    transform: translateY(14px) scale(0.985);
+    transform: translateY(calc(14px * var(--motion-travel))) scale(0.985);
   }
   to {
     opacity: 1;
@@ -1880,7 +2038,7 @@
 @keyframes tf-pro-drop {
   from {
     opacity: 0;
-    transform: translateY(-10px);
+    transform: translateY(calc(-10px * var(--motion-travel)));
   }
   to {
     opacity: 1;
@@ -1890,7 +2048,7 @@
 @keyframes tf-pro-slide-in {
   from {
     opacity: 0;
-    transform: translateX(24px);
+    transform: translateX(calc(24px * var(--motion-travel)));
   }
   to {
     opacity: 1;
@@ -1900,7 +2058,8 @@
 @keyframes tf-pro-slide-up {
   from {
     opacity: 0;
-    transform: translate(0, 28px) scale(0.9);
+    transform: translate(calc(0px * var(--motion-travel)), calc(28px * var(--motion-travel)))
+      scale(0.9);
   }
   to {
     opacity: 1;
@@ -1959,47 +2118,60 @@
 }
 
 :where([data-kit="pro"]) .tf-in {
+  --enter-delay: var(--d, 0ms);
   animation: tf-pro-rise var(--dur-enter) var(--ease-out) both;
-  animation-delay: var(--d, 0ms);
+  animation-delay: var(--enter-delay);
 }
 :where([data-kit="pro"]) .tf-stagger > * {
   animation: tf-pro-rise var(--dur-enter) var(--ease-out) both;
 }
 :where([data-kit="pro"]) .tf-stagger > :nth-child(1) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 0);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 0);
+  animation-delay: var(--enter-delay);
 }
 :where([data-kit="pro"]) .tf-stagger > :nth-child(2) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 1);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 1);
+  animation-delay: var(--enter-delay);
 }
 :where([data-kit="pro"]) .tf-stagger > :nth-child(3) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 2);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 2);
+  animation-delay: var(--enter-delay);
 }
 :where([data-kit="pro"]) .tf-stagger > :nth-child(4) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 3);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 3);
+  animation-delay: var(--enter-delay);
 }
 :where([data-kit="pro"]) .tf-stagger > :nth-child(5) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 4);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 4);
+  animation-delay: var(--enter-delay);
 }
 :where([data-kit="pro"]) .tf-stagger > :nth-child(6) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 5);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 5);
+  animation-delay: var(--enter-delay);
 }
 :where([data-kit="pro"]) .tf-stagger > :nth-child(7) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 6);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 6);
+  animation-delay: var(--enter-delay);
 }
 :where([data-kit="pro"]) .tf-stagger > :nth-child(8) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 7);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 7);
+  animation-delay: var(--enter-delay);
 }
 :where([data-kit="pro"]) .tf-stagger > :nth-child(9) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 8);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 8);
+  animation-delay: var(--enter-delay);
 }
 :where([data-kit="pro"]) .tf-stagger > :nth-child(10) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 9);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 9);
+  animation-delay: var(--enter-delay);
 }
 :where([data-kit="pro"]) .tf-stagger > :nth-child(11) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 10);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 10);
+  animation-delay: var(--enter-delay);
 }
 :where([data-kit="pro"]) .tf-stagger > :nth-child(n + 12) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 11);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 11);
+  animation-delay: var(--enter-delay);
 }
 :where([data-kit="pro"]) .tf-topbar {
   animation: tf-pro-drop var(--dur-enter) var(--ease-out) both;
@@ -2009,32 +2181,32 @@
 }
 :where([data-kit="pro"]) .tf-panel.tf-side {
   animation: tf-pro-slide-in var(--dur-enter) var(--ease-out) both;
-  animation-delay: 160ms;
+  animation-delay: calc(160ms * var(--motion-time));
 }
 :where([data-kit="pro"]) .tf-dock {
   animation: tf-pro-slide-up var(--dur-enter) var(--ease-spring) both;
-  animation-delay: 420ms;
+  animation-delay: calc(420ms * var(--motion-time));
 }
 :where([data-kit="pro"]) .tf-dock .tf-dock-btn {
   animation: tf-pro-pop var(--dur-base) var(--ease-spring) both;
 }
 :where([data-kit="pro"]) .tf-dock .tf-dock-btn:nth-child(1) {
-  animation-delay: 520ms;
+  animation-delay: calc(520ms * var(--motion-time));
 }
 :where([data-kit="pro"]) .tf-dock .tf-dock-btn:nth-child(2) {
-  animation-delay: 570ms;
+  animation-delay: calc(570ms * var(--motion-time));
 }
 :where([data-kit="pro"]) .tf-dock .tf-dock-btn:nth-child(3) {
-  animation-delay: 620ms;
+  animation-delay: calc(620ms * var(--motion-time));
 }
 :where([data-kit="pro"]) .tf-dock .tf-dock-btn:nth-child(4) {
-  animation-delay: 670ms;
+  animation-delay: calc(670ms * var(--motion-time));
 }
 :where([data-kit="pro"]) .tf-dock .tf-dock-btn:nth-child(5) {
-  animation-delay: 720ms;
+  animation-delay: calc(720ms * var(--motion-time));
 }
 :where([data-kit="pro"]) .tf-dock .tf-dock-btn:nth-child(n + 6) {
-  animation-delay: 770ms;
+  animation-delay: calc(770ms * var(--motion-time));
 }
 :where([data-kit="pro"]) .tf-rail-btn {
   animation: tf-pro-pop var(--dur-base) var(--ease-spring) both;
@@ -2071,7 +2243,7 @@
 :where([data-kit="pro"]) .tf-progress > span {
   transform-origin: left;
   animation: tf-pro-grow-x var(--dur-slow) var(--ease-out) both;
-  animation-delay: 200ms;
+  animation-delay: calc(var(--enter-delay, 0ms) + calc(200ms * var(--motion-time)));
 }
 
 /* Sliding tab indicator */
@@ -2150,6 +2322,7 @@
   transform-box: fill-box;
   transform-origin: bottom;
   animation: tf-pro-grow-y var(--dur-slow) var(--ease-out) both;
+  animation-delay: var(--enter-delay, 0ms);
 }
 :where([data-kit="pro"]) .tf-bar-ink {
   fill: var(--primary);
@@ -2177,7 +2350,7 @@
   stroke-dasharray: 1;
   stroke-dashoffset: 1;
   animation: tf-pro-draw var(--dur-slow) var(--ease-out) forwards;
-  animation-delay: 150ms;
+  animation-delay: calc(var(--enter-delay, 0ms) + calc(150ms * var(--motion-time)));
 }
 :where([data-kit="pro"]) .tf-line-ink {
   stroke: var(--primary);
@@ -2200,7 +2373,7 @@
 :where([data-kit="pro"]) .tf-area {
   opacity: 0;
   animation: tf-pro-fade var(--dur-slow) var(--ease-out) forwards;
-  animation-delay: 500ms;
+  animation-delay: calc(var(--enter-delay, 0ms) + calc(500ms * var(--motion-time)));
 }
 :where([data-kit="pro"]) .tf-area-sky {
   fill: var(--sky);
@@ -2221,7 +2394,7 @@
   fill: var(--surface);
   stroke-width: 2.5;
   animation: tf-pro-pop var(--dur-base) var(--ease-spring) both;
-  animation-delay: 900ms;
+  animation-delay: calc(var(--enter-delay, 0ms) + calc(900ms * var(--motion-time)));
   transform-box: fill-box;
   transform-origin: center;
 }
@@ -2650,6 +2823,22 @@
   }
 }
 
+/* the same for an app that turns motion off: data-motion="off" */
+:where([data-kit="pro"])[data-motion="off"] *,
+:where([data-kit="pro"]) [data-motion="off"] *,
+:where([data-kit="pro"])[data-motion="off"] *::before,
+:where([data-kit="pro"]) [data-motion="off"] *::before,
+:where([data-kit="pro"])[data-motion="off"] *::after,
+:where([data-kit="pro"]) [data-motion="off"] *::after {
+  animation-duration: 1ms !important;
+  animation-delay: 0ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 1ms !important;
+}
+:where([data-kit="pro"])[data-motion="off"] .tf-line, :where([data-kit="pro"]) [data-motion="off"] .tf-line {
+  stroke-dashoffset: 0;
+}
+
 /* ───────── Refinements ───────── */
 :where([data-kit="pro"]) .tf-nav-label {
   white-space: nowrap;
@@ -2681,7 +2870,7 @@
 :where([data-kit="pro"]) .tf-area {
   opacity: 0;
   animation: tf-pro-area-in var(--dur-slow) var(--ease-out) forwards;
-  animation-delay: 500ms;
+  animation-delay: calc(var(--enter-delay, 0ms) + calc(500ms * var(--motion-time)));
 }
 @keyframes tf-pro-area-in {
   to {
@@ -3243,7 +3432,7 @@
 }
 @keyframes tf-pro-drawer-in {
   from {
-    transform: translateX(40px);
+    transform: translateX(calc(40px * var(--motion-travel)));
     opacity: 0;
   }
   to {
@@ -4118,7 +4307,7 @@
   box-shadow:
     var(--shadow-float), 0 0 0 var(--line-width) var(--line),
     0 0 0 1px var(--line);
-  animation: tf-pop var(--dur-base) var(--ease-spring) both;
+  animation: tf-pro-pop var(--dur-base) var(--ease-spring) both;
   transform-origin: top left;
 }
 :where([data-kit="pro"]) .tf-popover.tf-pop-end {
@@ -5118,7 +5307,7 @@
   color: var(--on-frame);
   box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
   font: 500 13px/18px var(--font-sans);
-  animation: tf-slide-up var(--dur-base) var(--ease-spring) both;
+  animation: tf-pro-slide-up var(--dur-base) var(--ease-spring) both;
   margin-bottom: 8px;
 }
 :where([data-kit="pro"]) .tf-bulkbar > b {
@@ -5218,7 +5407,8 @@
 :where([data-kit="pro"]) .tf-seg-bar {
   transform-box: fill-box;
   transform-origin: bottom;
-  animation: tf-grow-y var(--dur-slow) var(--ease-out) both;
+  animation: tf-pro-grow-y var(--dur-slow) var(--ease-out) both;
+  animation-delay: var(--enter-delay, 0ms);
   transition: opacity var(--dur-fast);
 }
 :where([data-kit="pro"]) .tf-chart g.dim .tf-seg-bar {
@@ -5264,7 +5454,7 @@
 :where([data-kit="pro"]) .tf-area2 {
   opacity: 0;
   animation: tf-pro-area2-in var(--dur-slow) var(--ease-out) forwards;
-  animation-delay: 400ms;
+  animation-delay: calc(var(--enter-delay, 0ms) + calc(400ms * var(--motion-time)));
 }
 @keyframes tf-pro-area2-in {
   to {
@@ -5326,7 +5516,7 @@
   height: 20px;
   border-radius: var(--radius-1);
   background: var(--surface-sunken);
-  animation: tf-fade var(--dur-base) var(--ease-out) both;
+  animation: tf-pro-fade var(--dur-base) var(--ease-out) both;
   transition: box-shadow var(--dur-fast);
 }
 :where([data-kit="pro"]) .tf-heat-cell.l1 {
@@ -5501,6 +5691,23 @@
     display: none;
   }
 }
+/* the same for an app that turns motion off: data-motion="off" */
+:where([data-kit="pro"])[data-motion="off"] .tf-seg-bar,
+:where([data-kit="pro"]) [data-motion="off"] .tf-seg-bar,
+:where([data-kit="pro"])[data-motion="off"] .tf-area2,
+:where([data-kit="pro"]) [data-motion="off"] .tf-area2,
+:where([data-kit="pro"])[data-motion="off"] .tf-heat-cell,
+:where([data-kit="pro"]) [data-motion="off"] .tf-heat-cell,
+:where([data-kit="pro"])[data-motion="off"] .tf-tooltip,
+:where([data-kit="pro"]) [data-motion="off"] .tf-tooltip,
+:where([data-kit="pro"])[data-motion="off"] .tf-popover,
+:where([data-kit="pro"]) [data-motion="off"] .tf-popover {
+  animation: none !important;
+  opacity: 1;
+}
+:where([data-kit="pro"])[data-motion="off"] .tf-toast-timer, :where([data-kit="pro"]) [data-motion="off"] .tf-toast-timer {
+  display: none;
+}
 @media (max-width: 640px) {
   :where([data-kit="pro"]) .tf-dp {
     flex-direction: column;
@@ -5663,7 +5870,7 @@
   gap: 12px;
   align-items: flex-start;
   min-width: 0;
-  animation: tf-rise var(--dur-base) var(--ease-out) both;
+  animation: tf-pro-rise var(--dur-base) var(--ease-out) both;
 }
 :where([data-kit="pro"]) .tf-msg.me {
   flex-direction: row-reverse;
@@ -5879,7 +6086,7 @@
   border-radius: var(--radius-full);
   background: var(--mint-ink);
   box-shadow: 0 0 0 2px var(--surface);
-  animation: tf-pulse 1.8s ease-out infinite;
+  animation: tf-pro-pulse 1.8s ease-out infinite;
 }
 
 /* Tool calls, reasoning, approvals */
@@ -6026,7 +6233,7 @@
 :where([data-kit="pro"]) .tf-reason.live .tf-reason-head {
   background: linear-gradient(90deg, var(--surface-sunken), var(--line), var(--surface-sunken));
   background-size: 200% 100%;
-  animation: tf-shimmer 1.6s linear infinite;
+  animation: tf-pro-shimmer 1.6s linear infinite;
 }
 :where([data-kit="pro"]) .tf-reason-head:focus-visible {
   outline: 2px solid var(--focus);
@@ -6404,7 +6611,7 @@
 }
 :where([data-kit="pro"]) .tf-trace-row.is-running .tf-trace-bar i {
   background: var(--sky-ink);
-  animation: tf-pulse 1.4s ease-in-out infinite;
+  animation: tf-pro-pulse 1.4s ease-in-out infinite;
 }
 :where([data-kit="pro"]) .tf-trace-bar em {
   position: absolute;
@@ -7270,6 +7477,19 @@
     animation: none !important;
   }
 }
+/* the same for an app that turns motion off: data-motion="off" */
+:where([data-kit="pro"])[data-motion="off"] .tf-msg,
+:where([data-kit="pro"]) [data-motion="off"] .tf-msg,
+:where([data-kit="pro"])[data-motion="off"] .tf-caret,
+:where([data-kit="pro"]) [data-motion="off"] .tf-caret,
+:where([data-kit="pro"])[data-motion="off"] .tf-typing i,
+:where([data-kit="pro"]) [data-motion="off"] .tf-typing i,
+:where([data-kit="pro"])[data-motion="off"] .tf-spin,
+:where([data-kit="pro"]) [data-motion="off"] .tf-spin,
+:where([data-kit="pro"])[data-motion="off"] .tf-reason.live .tf-reason-head,
+:where([data-kit="pro"]) [data-motion="off"] .tf-reason.live .tf-reason-head {
+  animation: none !important;
+}
 
 /* 04-status-agents-operations.css */
 /* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
@@ -7287,7 +7507,7 @@
   border-radius: var(--radius-full);
 }
 :where([data-kit="pro"]) .tf-shape-pulse {
-  animation: tf-pulse 1.8s ease-out infinite;
+  animation: tf-pro-pulse 1.8s ease-out infinite;
 }
 :where([data-kit="pro"]) .tf-shape-diamond {
   width: 7px;
@@ -7668,7 +7888,7 @@
   border-radius: var(--radius-full);
   border: 2px solid var(--line-strong);
   border-top-color: var(--ink);
-  animation: tf-spin 0.8s linear infinite;
+  animation: tf-pro-spin 0.8s linear infinite;
   flex: none;
 }
 :where([data-kit="pro"]) .tf-spinner.lg {
@@ -8844,7 +9064,7 @@
 }
 :where([data-kit="pro"]) .tf-stage.st-running::after {
   background: var(--info);
-  animation: tf-pulse 1.4s ease-in-out infinite;
+  animation: tf-pro-pulse 1.4s ease-in-out infinite;
 }
 :where([data-kit="pro"]) .tf-stage.st-danger::after {
   background: var(--danger);
@@ -9441,6 +9661,17 @@
     animation: none !important;
   }
 }
+/* the same for an app that turns motion off: data-motion="off" */
+:where([data-kit="pro"])[data-motion="off"] .tf-shape-pulse,
+:where([data-kit="pro"]) [data-motion="off"] .tf-shape-pulse,
+:where([data-kit="pro"])[data-motion="off"] .tf-voice-wave i,
+:where([data-kit="pro"]) [data-motion="off"] .tf-voice-wave i,
+:where([data-kit="pro"])[data-motion="off"] .tf-stage.st-running::after,
+:where([data-kit="pro"]) [data-motion="off"] .tf-stage.st-running::after,
+:where([data-kit="pro"])[data-motion="off"] .tf-log-line.fresh,
+:where([data-kit="pro"]) [data-motion="off"] .tf-log-line.fresh {
+  animation: none !important;
+}
 :where([data-kit="pro"]) .tf-approval-mail {
   padding: 12px 16px;
   border-radius: var(--radius-md);
@@ -9796,7 +10027,7 @@
 @keyframes tf-pro-fresh {
   0% {
     background: var(--surface-sunken);
-    transform: translateY(-4px);
+    transform: translateY(calc(-4px * var(--motion-travel)));
     opacity: 0;
   }
   15% {
@@ -11525,7 +11756,7 @@
   background: var(--surface);
   box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
   overflow: hidden;
-  animation: tf-pop var(--dur-base) var(--ease-spring) both;
+  animation: tf-pro-pop var(--dur-base) var(--ease-spring) both;
   transform-origin: bottom right;
 }
 :where([data-kit="pro"]) .tf-launch-head {
@@ -11700,6 +11931,17 @@
     animation: none;
   }
 }
+/* the same for an app that turns motion off: data-motion="off" */
+:where([data-kit="pro"])[data-motion="off"] .tf-live-dot,
+:where([data-kit="pro"]) [data-motion="off"] .tf-live-dot,
+:where([data-kit="pro"])[data-motion="off"] .tf-map-bubble.pulse::after,
+:where([data-kit="pro"]) [data-motion="off"] .tf-map-bubble.pulse::after,
+:where([data-kit="pro"])[data-motion="off"] .tf-map-pin.pulse::after,
+:where([data-kit="pro"]) [data-motion="off"] .tf-map-pin.pulse::after,
+:where([data-kit="pro"])[data-motion="off"] .tf-livefeed-row.fresh,
+:where([data-kit="pro"]) [data-motion="off"] .tf-livefeed-row.fresh {
+  animation: none;
+}
 :where([data-kit="pro"]) .tf-map-world {
   position: absolute;
   inset: 0;
@@ -11817,7 +12059,7 @@
   padding: 0 20px 20px;
   font: 500 14px/20px var(--font-sans);
   color: var(--ink-muted);
-  animation: tf-fade var(--dur-base) var(--ease-out) both;
+  animation: tf-pro-fade var(--dur-base) var(--ease-out) both;
 }
 :where([data-kit="pro"]) .tf-accordion.flush {
   gap: 0;
@@ -11950,6 +12192,8 @@
 }
 :where([data-kit="pro"]) .tf-togglegroup {
   display: inline-flex;
+  flex-wrap: wrap;
+  width: fit-content;
   align-items: center;
   gap: 4px;
   padding: 4px;
@@ -12072,7 +12316,7 @@
   box-shadow:
     var(--shadow-float), 0 0 0 var(--line-width) var(--line),
     0 0 0 1px var(--line);
-  animation: tf-fade var(--dur-base) var(--ease-out) both;
+  animation: tf-pro-fade var(--dur-base) var(--ease-out) both;
 }
 :where([data-kit="pro"]) .tf-hovercard.tf-hc-top {
   top: auto;
@@ -12397,7 +12641,7 @@
   box-shadow:
     var(--shadow-float), 0 0 0 var(--line-width) var(--line),
     0 0 0 1px var(--line);
-  animation: tf-drop var(--dur-base) var(--ease-out) both;
+  animation: tf-pro-drop var(--dur-base) var(--ease-out) both;
 }
 :where([data-kit="pro"]) .tf-navmenu-panel.with-feature {
   grid-template-columns: 200px minmax(0, 1fr);
@@ -12612,19 +12856,19 @@
 @keyframes tf-pro-sheet-left {
   from {
     opacity: 0;
-    transform: translateX(-24px);
+    transform: translateX(calc(-24px * var(--motion-travel)));
   }
 }
 @keyframes tf-pro-sheet-top {
   from {
     opacity: 0;
-    transform: translateY(-24px);
+    transform: translateY(calc(-24px * var(--motion-travel)));
   }
 }
 @keyframes tf-pro-sheet-bottom {
   from {
     opacity: 0;
-    transform: translateY(24px);
+    transform: translateY(calc(24px * var(--motion-travel)));
   }
 }
 
@@ -13354,6 +13598,615 @@
   box-sizing: border-box;
 }
 
+/* 08-glass.css */
+/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
+/* Glass: translucent surfaces for UI that floats over content (maps, 3D scenes, video, photos).
+ *
+ * A glass surface shows a blurred, colour-lifted view of what is behind it, with a light edge on
+ * top. What sits on it reads the glass tokens too (inputs, chips, tab tracks, hover highlights,
+ * nested cards), so the surface stays one piece of glass instead of opaque blocks on glass.
+ *
+ * - `.tf-glass` (the `surface="glass"` prop) makes one surface glass.
+ * - `[data-surface="glass"]` (`<UIProvider surface="glass">`) makes every top-level surface and
+ *   every floating layer inside it glass. Surfaces nested in a surface stay clear instead of
+ *   stacking glass on glass; `.tf-solid` (`surface="solid"`) opts one surface out.
+ *
+ * Floating layers (menus, popovers, dialogs, drawers) use the stronger `--glass-strong` fill: they
+ * carry more text. The fills are opaque enough for 4.5:1 body text over any backdrop; reduced
+ * transparency, high contrast and forced colours fall back to solid surfaces.
+ */
+
+/* the surface itself */
+:where([data-kit="pro"]) .tf-glass:not(.tf-solid),
+:where([data-kit="pro"])[data-surface="glass"]
+  :is(
+    .tf-panel,
+    .tf-card,
+    .tf-stat,
+    .tf-dock,
+    .tf-sidebar,
+    .tf-map-legend,
+    .tf-map-ctl,
+    .tf-map-pop
+  ):not(
+    :is(
+        .tf-panel,
+        .tf-card,
+        .tf-stat,
+        .tf-dock,
+        .tf-sidebar,
+        .tf-popover,
+        .tf-menu,
+        .tf-hovercard,
+        .tf-selectmenu-list,
+        .tf-navmenu-panel,
+        .tf-palette,
+        .tf-modal,
+        .tf-drawer,
+        .tf-glass
+      )
+      *
+  ):not(.tf-solid),
+:where([data-kit="pro"]) [data-surface="glass"]
+  :is(
+    .tf-panel,
+    .tf-card,
+    .tf-stat,
+    .tf-dock,
+    .tf-sidebar,
+    .tf-map-legend,
+    .tf-map-ctl,
+    .tf-map-pop
+  ):not(
+    :is(
+        .tf-panel,
+        .tf-card,
+        .tf-stat,
+        .tf-dock,
+        .tf-sidebar,
+        .tf-popover,
+        .tf-menu,
+        .tf-hovercard,
+        .tf-selectmenu-list,
+        .tf-navmenu-panel,
+        .tf-palette,
+        .tf-modal,
+        .tf-drawer,
+        .tf-glass
+      )
+      *
+  ):not(.tf-solid),
+:where([data-kit="pro"])[data-surface="glass"]
+  :is(
+    .tf-popover,
+    .tf-menu:not(.tf-menu-static),
+    .tf-hovercard,
+    .tf-selectmenu-list,
+    .tf-navmenu-panel,
+    .tf-palette,
+    .tf-modal,
+    .tf-drawer
+  ):not(.tf-solid),
+:where([data-kit="pro"]) [data-surface="glass"]
+  :is(
+    .tf-popover,
+    .tf-menu:not(.tf-menu-static),
+    .tf-hovercard,
+    .tf-selectmenu-list,
+    .tf-navmenu-panel,
+    .tf-palette,
+    .tf-modal,
+    .tf-drawer
+  ):not(.tf-solid) {
+  --glass-fill: var(--glass);
+  background:
+    linear-gradient(to bottom, var(--glass-sheen), transparent 56px) border-box,
+    linear-gradient(var(--glass-tinted), var(--glass-tinted)) border-box,
+    var(--glass-fill);
+  --glass-tinted: color-mix(in srgb, var(--tint, transparent) var(--glass-tint), transparent);
+  -webkit-backdrop-filter: var(--glass-filter);
+  backdrop-filter: var(--glass-filter);
+  border-color: var(--glass-border);
+  box-shadow:
+    inset 0 1px 0 0 var(--glass-highlight),
+    inset 0 0 0 1px var(--glass-border),
+    var(--shadow-glass);
+  color: var(--foreground);
+  /* what sits on the glass */
+  --surface: var(--glass-control);
+  --secondary: var(--glass-control);
+  --bg-100: var(--glass-control);
+  --surface-sunken: var(--glass-well);
+  --muted: var(--glass-well);
+  --canvas: var(--glass-well);
+  --bg-200: var(--glass-well);
+  --accent: var(--glass-hover);
+  --bg-300: var(--glass-hover);
+  /* the faintest text steps up one shade: glass gives up some contrast to what is behind */
+  --ink-subtle: var(--muted-foreground);
+  --fg-300: var(--muted-foreground);
+}
+
+/* floating layers carry more text: a stronger fill */
+:where([data-kit="pro"]) :is(
+  .tf-popover,
+  .tf-menu,
+  .tf-hovercard,
+  .tf-selectmenu-list,
+  .tf-navmenu-panel,
+  .tf-palette,
+  .tf-modal,
+  .tf-drawer
+).tf-glass,
+  :where([data-kit="pro"])[data-surface="glass"]
+  :is(
+    .tf-popover,
+    .tf-menu:not(.tf-menu-static),
+    .tf-hovercard,
+    .tf-selectmenu-list,
+    .tf-navmenu-panel,
+    .tf-palette,
+    .tf-modal,
+    .tf-drawer
+  ):not(.tf-solid),
+  :where([data-kit="pro"]) [data-surface="glass"]
+  :is(
+    .tf-popover,
+    .tf-menu:not(.tf-menu-static),
+    .tf-hovercard,
+    .tf-selectmenu-list,
+    .tf-navmenu-panel,
+    .tf-palette,
+    .tf-modal,
+    .tf-drawer
+  ):not(.tf-solid) {
+  --glass-fill: var(--glass-strong);
+}
+
+/* Controls floating on their own (not on a surface) become small glass pills: a search field or
+   zoom buttons over a map */
+:where([data-kit="pro"])[data-surface="glass"]
+  :is(
+    .tf-search,
+    .tf-seg,
+    .tf-btngroup,
+    .tf-iconbtn-soft,
+    .tf-iconbtn-outline,
+    .tf-btn-secondary,
+    .tf-chip:not([aria-pressed="true"])
+  ):not(
+    :is(
+        .tf-panel,
+        .tf-card,
+        .tf-dock,
+        .tf-popover,
+        .tf-menu,
+        .tf-hovercard,
+        .tf-selectmenu-list,
+        .tf-navmenu-panel,
+        .tf-palette,
+        .tf-modal,
+        .tf-drawer,
+        .tf-glass,
+        .tf-btngroup,
+        .tf-map-ctl,
+        .tf-topbar
+      )
+      *
+  ):not(.tf-solid),
+    :where([data-kit="pro"]) [data-surface="glass"]
+  :is(
+    .tf-search,
+    .tf-seg,
+    .tf-btngroup,
+    .tf-iconbtn-soft,
+    .tf-iconbtn-outline,
+    .tf-btn-secondary,
+    .tf-chip:not([aria-pressed="true"])
+  ):not(
+    :is(
+        .tf-panel,
+        .tf-card,
+        .tf-dock,
+        .tf-popover,
+        .tf-menu,
+        .tf-hovercard,
+        .tf-selectmenu-list,
+        .tf-navmenu-panel,
+        .tf-palette,
+        .tf-modal,
+        .tf-drawer,
+        .tf-glass,
+        .tf-btngroup,
+        .tf-map-ctl,
+        .tf-topbar
+      )
+      *
+  ):not(.tf-solid) {
+  background:
+    linear-gradient(to bottom, var(--glass-sheen), transparent) border-box,
+    var(--glass);
+  -webkit-backdrop-filter: var(--glass-filter);
+  backdrop-filter: var(--glass-filter);
+  box-shadow:
+    inset 0 1px 0 0 var(--glass-highlight),
+    inset 0 0 0 1px var(--glass-border),
+    var(--shadow-glass);
+  color: var(--foreground);
+  --surface: var(--glass-control);
+  --secondary: var(--glass-control);
+  --surface-sunken: var(--glass-well);
+  --bg-200: var(--glass-well);
+  --accent: var(--glass-hover);
+  --bg-300: var(--glass-hover);
+}
+:where([data-kit="pro"])[data-surface="glass"]
+  :is(.tf-iconbtn-soft, .tf-iconbtn-outline, .tf-btn-secondary, .tf-chip):not(
+    :is(.tf-panel, .tf-card, .tf-dock, .tf-popover, .tf-menu, .tf-modal, .tf-drawer, .tf-glass) *
+  ):not(.tf-solid):not([aria-pressed="true"]):hover, :where([data-kit="pro"]) [data-surface="glass"]
+  :is(.tf-iconbtn-soft, .tf-iconbtn-outline, .tf-btn-secondary, .tf-chip):not(
+    :is(.tf-panel, .tf-card, .tf-dock, .tf-popover, .tf-menu, .tf-modal, .tf-drawer, .tf-glass) *
+  ):not(.tf-solid):not([aria-pressed="true"]):hover {
+  background:
+    linear-gradient(var(--glass-hover), var(--glass-hover)) border-box,
+    var(--glass);
+}
+
+/* AppShell on glass: the same layout as the solid shell, the frame turned to glass. Top bar and
+   rail sit on it without a fill of their own, the sheet clears so the backdrop shows through,
+   and everything drawn on the frame (nav, user, rail) reads the glass colours */
+:where([data-kit="pro"])[data-surface="glass"] .tf-shell, :where([data-kit="pro"]) [data-surface="glass"] .tf-shell {
+  background:
+    linear-gradient(to bottom, var(--glass-sheen), transparent 56px) border-box,
+    var(--glass);
+  -webkit-backdrop-filter: var(--glass-filter);
+  backdrop-filter: var(--glass-filter);
+  box-shadow:
+    inset 0 1px 0 0 var(--glass-highlight),
+    inset 0 0 0 1px var(--glass-border),
+    var(--shadow-glass);
+  --frame: var(--glass);
+  --frame-hover: var(--glass-hover);
+  --frame-active: var(--glass-hover);
+  --frame-strong: var(--glass-control);
+  --on-frame: var(--foreground);
+  --on-frame-muted: var(--muted-foreground);
+}
+:where([data-kit="pro"])[data-surface="glass"] .tf-shell .tf-sheet, :where([data-kit="pro"]) [data-surface="glass"] .tf-shell .tf-sheet {
+  background: transparent;
+}
+:where([data-kit="pro"])[data-surface="glass"] .tf-shell .tf-topbar, :where([data-kit="pro"]) [data-surface="glass"] .tf-shell .tf-topbar {
+  background: transparent;
+}
+
+/* switch knobs stay solid on glass */
+:where([data-kit="pro"]) .tf-glass .tf-switch::after,
+:where([data-kit="pro"])[data-surface="glass"] .tf-switch::after,
+:where([data-kit="pro"]) [data-surface="glass"] .tf-switch::after {
+  background: var(--card);
+}
+
+/* Reduced transparency, more contrast, forced colours and browsers without backdrop blur switch
+   the glass tokens themselves (see tokens.css). Forced colours drop shadows, so glass keeps an
+   edge there. */
+@media (forced-colors: active) {
+  :where([data-kit="pro"]) .tf-glass,
+  :where([data-kit="pro"])[data-surface="glass"]
+    :is(
+      .tf-panel,
+      .tf-card,
+      .tf-stat,
+      .tf-dock,
+      .tf-sidebar,
+      .tf-map-legend,
+      .tf-map-ctl,
+      .tf-map-pop
+    ),
+  :where([data-kit="pro"]) [data-surface="glass"]
+    :is(
+      .tf-panel,
+      .tf-card,
+      .tf-stat,
+      .tf-dock,
+      .tf-sidebar,
+      .tf-map-legend,
+      .tf-map-ctl,
+      .tf-map-pop
+    ) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+}
+
+/* FloatingLayout: UI along the edges of a full-bleed background */
+:where([data-kit="pro"]) .tf-floating {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  border-radius: var(--radius-lg);
+  background: var(--surface-sunken);
+  container: tf-floating / inline-size;
+}
+:where([data-kit="pro"]) .tf-floating-bg {
+  position: absolute;
+  inset: 0;
+}
+:where([data-kit="pro"]) .tf-floating-bg > * {
+  width: 100%;
+  height: 100%;
+}
+:where([data-kit="pro"]) .tf-floating-ui {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 320px) minmax(0, 1fr) minmax(0, 340px);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-template-areas:
+    "top top top"
+    "start . end"
+    "bottom bottom bottom";
+  gap: var(--space-4);
+  padding: var(--space-4);
+  overflow-y: auto;
+  /* the background stays usable between the slots */
+  pointer-events: none;
+}
+:where([data-kit="pro"]) .tf-floating-ui > * {
+  pointer-events: auto;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-floating-top {
+  grid-area: top;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+}
+:where([data-kit="pro"]) .tf-floating-start {
+  grid-area: start;
+  align-self: start;
+}
+:where([data-kit="pro"]) .tf-floating-end {
+  grid-area: end;
+  align-self: start;
+}
+:where([data-kit="pro"]) .tf-floating-bottom {
+  grid-area: bottom;
+  justify-self: center;
+}
+:where([data-kit="pro"]) .tf-floating-ui > :is(.tf-floating-top, .tf-floating-bottom) {
+  pointer-events: none;
+}
+:where([data-kit="pro"]) .tf-floating-ui > :is(.tf-floating-top, .tf-floating-bottom) > * {
+  pointer-events: auto;
+}
+@container tf-floating (max-width: 720px) {
+  /* on a phone the layout grows with its slots and the background fills behind them */
+  :where([data-kit="pro"]) .tf-floating-ui {
+    position: relative;
+    min-height: inherit;
+    overflow: visible;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto auto minmax(120px, 1fr) auto auto;
+    grid-template-areas:
+      "top"
+      "start"
+      "."
+      "end"
+      "bottom";
+    gap: var(--space-3);
+    padding: var(--space-3);
+  }
+}
+
+/* 09-motion.css */
+/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
+/* Motion: leaving layers, reveal on scroll, page transitions, the expressive level.
+ *
+ * Levels come from `data-motion` (tokens.css): "standard", "expressive" (longer, staggered page
+ * entrances, more travel) and "off". The reader's reduced-motion setting always means off. Only
+ * transform, opacity and (expressive Halo) a short blur move; everything else stays put.
+ */
+
+/* ── Leaving: layers animate out for --dur-exit, then unmount (usePresence) ── */
+@keyframes tf-pro-out {
+  to {
+    opacity: 0;
+    translate: 0 calc(6px * var(--motion-travel));
+    scale: 0.98;
+  }
+}
+@keyframes tf-pro-out-fade {
+  to {
+    opacity: 0;
+  }
+}
+@keyframes tf-pro-out-right {
+  to {
+    opacity: 0;
+    translate: calc(40px * var(--motion-travel)) 0;
+  }
+}
+@keyframes tf-pro-out-left {
+  to {
+    opacity: 0;
+    translate: calc(-40px * var(--motion-travel)) 0;
+  }
+}
+@keyframes tf-pro-out-up {
+  to {
+    opacity: 0;
+    translate: 0 calc(-40px * var(--motion-travel));
+  }
+}
+@keyframes tf-pro-out-down {
+  to {
+    opacity: 0;
+    translate: 0 calc(16px * var(--motion-travel));
+  }
+}
+:where([data-kit="pro"])[data-closing], :where([data-kit="pro"]) [data-closing] {
+  pointer-events: none;
+}
+:where([data-kit="pro"]) .tf-popover[data-closing],
+:where([data-kit="pro"]) .tf-hovercard[data-closing],
+:where([data-kit="pro"]) .tf-modal-wrap[data-closing] .tf-modal,
+:where([data-kit="pro"]) .tf-overlay[data-closing] :is(.tf-modal, .tf-confirm),
+:where([data-kit="pro"]) .tf-palette-wrap[data-closing] .tf-palette {
+  animation: tf-pro-out var(--dur-exit) var(--ease-in-out) forwards;
+}
+:where([data-kit="pro"]) .tf-tooltip[data-closing],
+:where([data-kit="pro"]) .tf-modal-wrap[data-closing] .tf-backdrop,
+:where([data-kit="pro"]) .tf-overlay[data-closing] .tf-backdrop,
+:where([data-kit="pro"]) .tf-palette-wrap[data-closing],
+:where([data-kit="pro"]) .tf-drawer-wrap[data-closing] {
+  animation: tf-pro-out-fade var(--dur-exit) var(--ease-in-out) forwards;
+}
+:where([data-kit="pro"]) .tf-drawer-wrap[data-closing] .tf-drawer {
+  animation: tf-pro-out-right var(--dur-exit) var(--ease-in-out) forwards;
+}
+:where([data-kit="pro"]) .tf-drawer-wrap[data-closing] .tf-drawer.side-left {
+  animation-name: tf-pro-out-left;
+}
+:where([data-kit="pro"]) .tf-drawer-wrap[data-closing] .tf-drawer.side-top {
+  animation-name: tf-pro-out-up;
+}
+:where([data-kit="pro"]) .tf-drawer-wrap[data-closing] .tf-drawer.side-bottom,
+:where([data-kit="pro"]) .tf-toast[data-closing] {
+  animation: tf-pro-out-down var(--dur-exit) var(--ease-in-out) forwards;
+}
+
+/* ── Reveal: a Stagger below the fold waits until it scrolls into view ── */
+:where([data-kit="pro"]) .tf-stagger[data-reveal="waiting"] > *,
+:where([data-kit="pro"]) .tf-stagger[data-reveal="waiting"] > * * {
+  animation-play-state: paused;
+}
+
+/* ── Page transitions (startViewTransition, Next.js and React view transitions) ── */
+@keyframes tf-pro-vt-out {
+  to {
+    opacity: 0;
+    translate: 0 calc(-6px * var(--motion-travel));
+  }
+}
+@keyframes tf-pro-vt-in {
+  from {
+    opacity: 0;
+    translate: 0 calc(10px * var(--motion-travel));
+  }
+}
+:where([data-kit="pro"])::view-transition-old(root) {
+  animation: tf-pro-vt-out var(--dur-base) var(--ease-in-out) both;
+}
+:where([data-kit="pro"])::view-transition-new(root) {
+  animation: tf-pro-vt-in var(--dur-enter) var(--ease-out) both;
+}
+
+/* ── Expressive: things come into focus as they rise (Halo; Pro keeps a blur of 0) ── */
+@keyframes tf-pro-focus-in {
+  from {
+    filter: blur(var(--motion-blur));
+  }
+  to {
+    filter: none;
+  }
+}
+:where([data-kit="pro"])[data-motion="expressive"] :is(.tf-stagger > *, .tf-in), :where([data-kit="pro"]) [data-motion="expressive"] :is(.tf-stagger > *, .tf-in) {
+  animation-name: tf-pro-rise, tf-pro-focus-in;
+}
+:where([data-kit="pro"])[data-motion="expressive"] .tf-topbar, :where([data-kit="pro"]) [data-motion="expressive"] .tf-topbar {
+  animation-name: tf-pro-drop, tf-pro-focus-in;
+}
+
+/* 10-ambient.css */
+/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
+/* Ambient: a calm, living background for glass UI. Soft colour fields from the kit (pastels in
+ * Halo, a faint aurora in Pro) drift slowly; a photo or video can take their place under a scrim.
+ * The drift only moves (transform), stops with motion off and pauses off screen.
+ */
+:where([data-kit="pro"]) :where(:has(> .tf-ambient:not(.fixed))) {
+  position: relative;
+  isolation: isolate;
+}
+:where([data-kit="pro"]) .tf-ambient {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  overflow: hidden;
+  background: var(--ambient-base);
+  pointer-events: none;
+}
+:where([data-kit="pro"]) .tf-ambient.fixed {
+  position: fixed;
+}
+:where([data-kit="pro"]) .tf-ambient-field {
+  position: absolute;
+  width: 75%;
+  aspect-ratio: 1;
+  border-radius: var(--radius-1);
+  background: radial-gradient(closest-side, var(--field), transparent);
+  animation: tf-pro-ambient-drift 34s var(--ease-in-out) infinite alternate;
+}
+:where([data-kit="pro"]) .tf-ambient-field:nth-child(1) {
+  top: -30%;
+  left: -15%;
+}
+:where([data-kit="pro"]) .tf-ambient-field:nth-child(2) {
+  top: -10%;
+  right: -25%;
+  animation-duration: 41s;
+  animation-direction: alternate-reverse;
+}
+:where([data-kit="pro"]) .tf-ambient-field:nth-child(3) {
+  bottom: -35%;
+  left: 10%;
+  animation-duration: 47s;
+}
+:where([data-kit="pro"]) .tf-ambient-field:nth-child(4) {
+  bottom: -25%;
+  right: -10%;
+  animation-duration: 38s;
+  animation-direction: alternate-reverse;
+}
+:where([data-kit="pro"]) .tf-ambient-field:nth-child(n + 5) {
+  top: 20%;
+  left: 30%;
+  width: 55%;
+  animation-duration: 52s;
+}
+@keyframes tf-pro-ambient-drift {
+  to {
+    translate: 12% 9%;
+    scale: 1.15;
+  }
+}
+:where([data-kit="pro"]) .tf-ambient.still .tf-ambient-field,
+:where([data-kit="pro"]) .tf-ambient[data-paused] .tf-ambient-field {
+  animation-play-state: paused;
+}
+:where([data-kit="pro"]) .tf-ambient-media {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+:where([data-kit="pro"]) .tf-ambient.media::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--ambient-scrim);
+}
+@media (prefers-reduced-motion: reduce) {
+  :where([data-kit="pro"]) .tf-ambient-field {
+    animation: none;
+  }
+}
+:where([data-kit="pro"])[data-motion="off"] .tf-ambient-field, :where([data-kit="pro"]) [data-motion="off"] .tf-ambient-field {
+  animation: none;
+}
+
 /* 90-pro-look.css */
 /* Pro look ("Clean Dark Pro", reference/pro): monochrome surfaces on a visible 1px hairline grid,
    square corners (2px on controls), Geist and Geist Mono, colour only for state, dense by default.