@hanzo/ui 8.27.44 → 8.27.45

package/dist/styles.css

@@ -1332,13 +1332,8 @@
    src/glass.css and are inlined here by scripts/compose-theme.mjs — one home,
    two entry points (`@hanzo/ui/theme.css` and `@hanzo/ui/glass.css`), so a host
    that wants only the chrome material does not have to take the token layer
-   with it.
-
-   They used to be four `.elevation-*` rules reading `var(--hz-elevation-N, …)`.
-   Nothing in this repo, in @hanzo/design or in any consumer ever DEFINED an
-   `--hz-elevation-*` variable, so every one of those resolved to its fallback:
-   an indirection through a name that does not exist, with a hardcoded shadow
-   behind it, next to a design system that publishes real ones. */
+   with it. The ladder reads @hanzo/design's own shadows, never a private
+   variable nothing defines. */
 
 /* ── Prose ───────────────────────────────────────────────────────────────────
    What `<ApplyTypography>` turns on: running text — a heading, a byline, a
@@ -1352,12 +1347,13 @@
    @hanzo/design ramp, which is where every other surface already reads them —
    so prose and a Button now round to the same scale instead of two.
 
-   Scoped under `.hz-prose` and applied with `>` only one level down, so a nested
-   component keeps its own type. */
-.hz-prose {
-  /* One implicit column with a gap — a grid states the stack without also
-     having to state a direction to run in. */
-  display: grid;
+   Scoped under `[data-slot='prose']` and applied with `>` only one level down,
+   so a nested component keeps its own type. The content arrives as bare tags
+   (a CMS field, an .mdx file), which is the one case a prop cannot reach: the
+   rules have to select by tag from the container. */
+[data-slot='prose'] {
+  display: flex;
+  flex-direction: column;
   gap: var(--space-3, 0.75rem);
   color: var(--foreground);
   font-family: var(--font-sans), sans-serif;
@@ -1365,8 +1361,8 @@
   line-height: var(--leading-base, var(--leading-normal));
 }
 
-.hz-prose > h1, .hz-prose > h2, .hz-prose > h3,
-.hz-prose > h4, .hz-prose > h5, .hz-prose > h6 {
+[data-slot='prose'] > h1, [data-slot='prose'] > h2, [data-slot='prose'] > h3,
+[data-slot='prose'] > h4, [data-slot='prose'] > h5, [data-slot='prose'] > h6 {
   font-family: var(--font-display, var(--font-sans)), sans-serif;
   font-weight: 606;
   line-height: var(--leading-tight);
@@ -1374,37 +1370,37 @@
   margin: 0;
 }
 
-.hz-prose > h1 { font-size: var(--text-4xl) }
-.hz-prose > h2 { font-size: var(--text-3xl) }
-.hz-prose > h3 { font-size: var(--text-2xl) }
-.hz-prose > h4 { font-size: var(--text-xl) }
-.hz-prose > h5 { font-size: var(--text-lg) }
+[data-slot='prose'] > h1 { font-size: var(--text-4xl) }
+[data-slot='prose'] > h2 { font-size: var(--text-3xl) }
+[data-slot='prose'] > h3 { font-size: var(--text-2xl) }
+[data-slot='prose'] > h4 { font-size: var(--text-xl) }
+[data-slot='prose'] > h5 { font-size: var(--text-lg) }
 /* h6 is the byline rung: heading TAG, body weight and colour, because that is
    what a byline is — subordinate text that happens to sit in the heading
    stack. */
-.hz-prose > h6 {
+[data-slot='prose'] > h6 {
   font-size: var(--text-base);
   font-weight: 497;
   color: var(--muted-foreground);
 }
 
-.hz-prose > p { margin: 0 }
+[data-slot='prose'] > p { margin: 0 }
 /* The marker is RESTORED here. `base.css` takes it off every list in the
    document, because a nav and a card grid are both lists and neither wants one.
    Authored prose is the one place it belongs. Setting only the indent leaves an
    indented list with nothing at the start of the line. */
-.hz-prose > ul, .hz-prose ul ul { list-style: disc }
-.hz-prose > ol, .hz-prose ol ol { list-style: decimal }
-.hz-prose ul, .hz-prose ol { margin: 0; padding-inline-start: 1.5em }
-.hz-prose li { margin-block: 0.25em }
-.hz-prose li::marker { color: var(--muted-foreground) }
+[data-slot='prose'] > ul, [data-slot='prose'] ul ul { list-style: disc }
+[data-slot='prose'] > ol, [data-slot='prose'] ol ol { list-style: decimal }
+[data-slot='prose'] ul, [data-slot='prose'] ol { margin: 0; padding-inline-start: 1.5em }
+[data-slot='prose'] li { margin-block: 0.25em }
+[data-slot='prose'] li::marker { color: var(--muted-foreground) }
 
 /* A code block is a SURFACE, not just a change of typeface. Without the panel
    it sits directly on the page ground and reads as body text that happens to be
    monospaced — which is exactly what a reader scanning for the command must not
    have to work out. `pre` already scrolls inside itself (base.css); this gives
    it the ground to scroll on. */
-.hz-prose > pre {
+[data-slot='prose'] > pre {
   margin: 0;
   padding: var(--space-4, 1rem);
   border: 1px solid var(--border);
@@ -1415,97 +1411,61 @@
 }
 /* Inside a block the panel IS the surface, so the inline treatment would draw a
    second one around every line. */
-.hz-prose > pre code { background: none; padding: 0; border: 0; font-size: inherit }
-.hz-prose :not(pre) > code {
+[data-slot='prose'] > pre code { background: none; padding: 0; border: 0; font-size: inherit }
+[data-slot='prose'] :not(pre) > code {
   padding: 0.15em 0.35em;
   border-radius: calc(var(--radius, 0.5rem) / 2);
   background: var(--muted);
 }
-.hz-prose > blockquote {
+[data-slot='prose'] > blockquote {
   margin: 0;
   padding-inline-start: 1em;
   border-inline-start: 2px solid var(--border);
   color: var(--muted-foreground);
 }
-.hz-prose code {
+[data-slot='prose'] code {
   font-family: var(--font-mono), ui-monospace, monospace;
   font-size: 0.9em;
 }
-.hz-prose a { color: inherit; text-decoration: underline }
-.hz-prose strong { font-weight: 606 }
-.hz-prose :where(img, video) { max-width: 100%; height: auto }
+[data-slot='prose'] a { color: inherit; text-decoration: underline }
+[data-slot='prose'] strong { font-weight: 606 }
+[data-slot='prose'] :where(img, video) { max-width: 100%; height: auto }
 
 /* The named rungs. `responsive` is the default and is the only one that moves
    with the viewport — a t-shirt size is a DECISION, so it stays put. */
-.hz-prose-sm { font-size: var(--text-sm); gap: var(--space-3, 0.75rem) }
-.hz-prose-sm > h1 { font-size: var(--text-3xl) }
-.hz-prose-sm > h2 { font-size: var(--text-2xl) }
-.hz-prose-sm > h3 { font-size: var(--text-xl) }
-.hz-prose-sm > p  { font-size: var(--text-sm) }
-
-.hz-prose-lg { font-size: var(--text-lg); gap: var(--space-5, 1.25rem) }
-.hz-prose-lg > h1 { font-size: var(--text-5xl) }
-.hz-prose-lg > h2 { font-size: var(--text-4xl) }
-.hz-prose-lg > h3 { font-size: var(--text-3xl) }
-.hz-prose-lg > p  { font-size: var(--text-lg) }
-
-.hz-prose-xl { font-size: var(--text-lg); gap: var(--space-6, 1.5rem) }
-.hz-prose-xl > h1 { font-size: var(--text-6xl) }
-.hz-prose-xl > h2 { font-size: var(--text-5xl) }
-.hz-prose-xl > h3 { font-size: var(--text-4xl) }
-.hz-prose-xl > p  { font-size: var(--text-lg) }
+[data-slot='prose'][data-size='sm'] { font-size: var(--text-sm); gap: var(--space-3, 0.75rem) }
+[data-slot='prose'][data-size='sm'] > h1 { font-size: var(--text-3xl) }
+[data-slot='prose'][data-size='sm'] > h2 { font-size: var(--text-2xl) }
+[data-slot='prose'][data-size='sm'] > h3 { font-size: var(--text-xl) }
+[data-slot='prose'][data-size='sm'] > p  { font-size: var(--text-sm) }
+
+[data-slot='prose'][data-size='lg'] { font-size: var(--text-lg); gap: var(--space-5, 1.25rem) }
+[data-slot='prose'][data-size='lg'] > h1 { font-size: var(--text-5xl) }
+[data-slot='prose'][data-size='lg'] > h2 { font-size: var(--text-4xl) }
+[data-slot='prose'][data-size='lg'] > h3 { font-size: var(--text-3xl) }
+[data-slot='prose'][data-size='lg'] > p  { font-size: var(--text-lg) }
+
+[data-slot='prose'][data-size='xl'] { font-size: var(--text-lg); gap: var(--space-6, 1.5rem) }
+[data-slot='prose'][data-size='xl'] > h1 { font-size: var(--text-6xl) }
+[data-slot='prose'][data-size='xl'] > h2 { font-size: var(--text-5xl) }
+[data-slot='prose'][data-size='xl'] > h3 { font-size: var(--text-4xl) }
+[data-slot='prose'][data-size='xl'] > p  { font-size: var(--text-lg) }
 
 /* Responsive: start at the small rung and climb. Written as min-width so the
    phone case is the unprefixed one and needs no query at all. */
 @media (min-width: 640px) {
-  .hz-prose-responsive { gap: var(--space-4, 1rem) }
+  [data-slot='prose'][data-size='responsive'] { gap: var(--space-4, 1rem) }
 }
 @media (min-width: 1024px) {
-  .hz-prose-responsive { font-size: var(--text-lg); gap: var(--space-5, 1.25rem) }
-  .hz-prose-responsive > h1 { font-size: var(--text-5xl) }
-  .hz-prose-responsive > h2 { font-size: var(--text-4xl) }
-  .hz-prose-responsive > h3 { font-size: var(--text-3xl) }
+  [data-slot='prose'][data-size='responsive'] { font-size: var(--text-lg); gap: var(--space-5, 1.25rem) }
+  [data-slot='prose'][data-size='responsive'] > h1 { font-size: var(--text-5xl) }
+  [data-slot='prose'][data-size='responsive'] > h2 { font-size: var(--text-4xl) }
+  [data-slot='prose'][data-size='responsive'] > h3 { font-size: var(--text-3xl) }
 }
 @media (min-width: 1280px) {
-  .hz-prose-responsive { gap: var(--space-6, 1.5rem) }
-  .hz-prose-responsive > h1 { font-size: var(--text-6xl) }
-  .hz-prose-responsive > h2 { font-size: var(--text-5xl) }
-}
-
-/* The two things a style PROP cannot say, because neither is a property of an
-   element: a keyframe, and a scrollbar. */
-
-/* Skeleton's pulse. Opacity only — animating a colour or a size would repaint
-   or reflow every frame for a placeholder nobody is looking at. */
-@keyframes hz-pulse {
-  50% { opacity: 0.5 }
-}
-.hz-pulse { animation: hz-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite }
-
-/* A carousel scrolls but must not show a bar: the arrows and the snap already
-   say it scrolls, and a bar that appears mid-drag shifts the slides under the
-   pointer. Firefox reads the property, WebKit the pseudo-element, and the
-   property rides on the component so only this half needs a sheet. */
-.hz-scroller::-webkit-scrollbar { display: none }
-
-/* The drawn caret in a one-time-code box. The real one is hidden, because it
-   would sit at the left edge of an invisible full-width field rather than in
-   the box the next keystroke lands in. */
-@keyframes hz-caret {
-  0%, 49% { opacity: 1 }
-  50%, 100% { opacity: 0 }
-}
-.hz-caret {
-  background: var(--foreground);
-  animation: hz-caret 1s steps(1) infinite;
-}
-
-/* Motion is a preference, and all of the above is decoration. A caret that does
-   not blink is still a caret; one that does can trigger a migraine. */
-@media (prefers-reduced-motion: reduce) {
-  .hz-pulse { animation: none }
-  .hz-caret { animation: none }
-  .hz-scroller { scroll-behavior: auto }
+  [data-slot='prose'][data-size='responsive'] { gap: var(--space-6, 1.5rem) }
+  [data-slot='prose'][data-size='responsive'] > h1 { font-size: var(--text-6xl) }
+  [data-slot='prose'][data-size='responsive'] > h2 { font-size: var(--text-5xl) }
 }
 
 /* Glass — the material floating chrome is made of, and the ladder it stands on.
@@ -1754,73 +1714,6 @@
   border-bottom-right-radius: 0 !important;
 }
 
-/* ── The crease — the valley where one sheet lies over another ───────────────
-   The ladder lifts a sheet with a drop that falls STRAIGHT DOWN: design's rule
-   is one light, above, and `check-tokens.mjs` fails the build on a sideways
-   offset. That is right, and it means the ladder has nothing to say about a
-   VERTICAL seam — and an app shell is nothing but vertical seams. A rail beside
-   a sidebar beside a pane, each a step apart on the ladder, still reads as three
-   abutting rectangles with lines ruled between them, because the only mark at
-   the seam is the hairline.
-
-   What a real sheet lays on the one beneath it, side by side under a light from
-   above, is not a cast shadow — it is the valley going dark. Ambient occlusion
-   has no direction of its own, which is both why it is honest here and why it is
-   NOT spelled as a --shadow-*: those are directional by definition and this is
-   not one.
-
-   A PSEUDO-ELEMENT, at z-index -1 inside an isolated stacking context, so it
-   paints above the sheet's own fill and below every child. That ordering is the
-   whole reason it is not a `background-image` (which `.fold` already claims on
-   this same element, !important, so the two would silently fight) and not an
-   inset `box-shadow` (which `.elevation-*` claims, likewise).
-
-   No side named -> both edges, which is what a pane with a neighbour on each
-   hand needs. Name one and the other stops being drawn. */
-:root {
-  --crease-ink: rgb(0 0 0 / .28);
-  --crease-depth: 20px;
-}
-
-.light, :root.t_light, .t_light {
-  /* On white the valley is a smudge, not a shadow — the same redistribution the
-     drops make, and for the same reason. */
-  --crease-ink: rgb(0 0 0 / .05);
-}
-
-.hz-crease {
-  position: relative;
-  /* Without this the -1 escapes and paints behind an ancestor's fill, which is
-     indistinguishable from the crease not being there at all. */
-  isolation: isolate;
-}
-
-.hz-crease::before,
-.hz-crease::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: var(--crease-depth);
-  z-index: -1;
-  pointer-events: none;
-}
-
-.hz-crease::before {
-  left: 0;
-  background-image: linear-gradient(to right, var(--crease-ink), transparent);
-}
-
-.hz-crease::after {
-  right: 0;
-  background-image: linear-gradient(to left, var(--crease-ink), transparent);
-}
-
-.hz-crease[data-crease="left"]::after,
-.hz-crease[data-crease="right"]::before {
-  content: none;
-}
-
 /* ── The scrim ──────────────────────────────────────────────────────────────
    The dim that makes a floating panel read as floating rather than as more
    page. gui's overlay dims TWICE — a translucent ground under a further
@@ -1868,135 +1761,6 @@
   border-top: 1px solid var(--borderColor, var(--border));
 }
 
-/* ── The composer prism — the ONE ring on any Hanzo surface ──────────────────
-   The composer is where you talk to Hanzo, so it is the thing that should look
-   alive, and it earns that with MOTION and LIGHT rather than hue. Every other
-   pixel of chrome stays monochrome; there is no second exemption, and the two
-   attempts to grant one (a violet ring, then a full-wheel rainbow) each made
-   the surface wearing it the only colour in the product.
-
-   THIS LIVES HERE BECAUSE IT WAS DECLARED TWICE AND DRIFTED. hanzo.chat's
-   client/src/style.css and hanzo.app's assets/globals.css each carried a copy,
-   each calling itself "the ONE prism on any Hanzo surface". chat fixed the ring
-   to be a rim; hanzo.app's copy kept drawing a filled DISC and never got the
-   fix — invisible until a glass panel sat in it, at which point the whole
-   spectrum washed up through the composer's interior. chat also quieted the
-   halo (0.5 with a pulse -> 0.22, no pulse); hanzo.app kept the loud one. Two
-   copies of one look is how that happens, and neither app could see the other
-   was wrong.
-
-   Structure: `.hz-composer` is a 1.5px-padded host; its direct child is the
-   panel. ::before is the ring, ::after the halo. Both are MASKED to exclude the
-   panel's footprint, so the ring is a rim BY CONSTRUCTION and the panel is free
-   to be any material — opaque, glass, anything. The stops are declared once and
-   read by both, because duplicated they drift on the first palette change and
-   nobody notices which half moved. */
-
-/* `@property` is what lets a conic angle animate. Where it is unsupported the
-   ring is simply static, which is a fine floor. */
-@property --hz-angle {
-  syntax: "<angle>";
-  initial-value: 0deg;
-  inherits: false;
-}
-
-:root {
-  /* One sweep, closing on the stop it opened with — a conic gradient whose
-     first and last stop differ shows a hard seam.
-
-     LUMINANCE, NOT HUE. Four saturated stops at 0.40-0.48 alpha, swept around
-     a rounded RECTANGLE, do not distribute evenly: the long top and bottom
-     edges each take a wide angular slice and the short sides almost none, so
-     one edge wore a bright blue while the opposite wore a burnt orange — a
-     ring that highlights half the box and reads as sitting off-centre. White
-     at two close alphas removes the bright arc entirely, drops the peak from
-     0.48 to 0.18, and keeps the slow drift as a sheen. hanzo.chat and
-     hanzo.app both declare exactly these stops; this is the package catching
-     up to its consumers — the copies must not drift again, and this file is
-     the home. */
-  --hz-spectrum: rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.18),
-    rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.18),
-    rgba(255, 255, 255, 0.1);
-}
-
-@keyframes hzComposerSpin {
-  to {
-    --hz-angle: 360deg;
-  }
-}
-
-.hz-composer {
-  position: relative;
-  isolation: isolate;
-  padding: 1.5px;
-}
-
-/* The ring DRAWS A RING. `padding` is its thickness; the two-layer mask keeps
-   paint outside it — `content-box` is the hole, the full box the plate, and
-   `exclude` leaves the lip. */
-.hz-composer::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  padding: 1.5px;
-  border-radius: inherit;
-  background: conic-gradient(from var(--hz-angle), var(--hz-spectrum));
-  animation: hzComposerSpin 10s linear infinite;
-  -webkit-mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask-composite: exclude;
-  /* After the standard shorthand: WebKit aliases `mask` onto `-webkit-mask`, so
-     declaring this first lets the shorthand reset it to `source-over` — the
-     filled disc again, on exactly the browsers too old to have `mask-composite`
-     at all. */
-  -webkit-mask-composite: xor;
-  z-index: 0;
-  pointer-events: none;
-}
-
-/* The halo lights the air AROUND the box and nothing behind it. */
-.hz-composer::after {
-  content: "";
-  position: absolute;
-  inset: -6px;
-  padding: 6px;
-  /* Concentric with the box, NOT `inherit`: the halo lives 6px outside, so an
-     inherited corner on this larger box curves too tight and reads as a second,
-     mismatched rounding just outside the panel. */
-  border-radius: calc(1.5rem + 6px);
-  background: conic-gradient(from var(--hz-angle), var(--hz-spectrum));
-  filter: blur(16px);
-  opacity: 0.22;
-  animation: hzComposerSpin 10s linear infinite;
-  -webkit-mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask-composite: exclude;
-  -webkit-mask-composite: xor;
-  z-index: -1;
-  pointer-events: none;
-}
-
-/* The panel sits above ring and halo. */
-.hz-composer > * {
-  position: relative;
-  z-index: 1;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .hz-composer::before,
-  .hz-composer::after {
-    animation: none;
-  }
-}
-
 /* FOCUS RINGS THE CONTROL A PERSON SEES, WHICH IS THE WHOLE COMPOSER.
 
    `Composer` is a bordered box holding a field above a toolbar row, so it reads
@@ -2028,6 +1792,319 @@
   --outlineColor: transparent;
 }
 
+/* @hanzo/ui motion — the calm, restrained animation vocabulary the Hanzo
+   surfaces share. One place defines the easing; components carry the name.
+
+   Import once at the app root:  import '@hanzo/ui/styles/motion.css'
+
+   ── KEYED ON `data-motion`, NEVER ON A CLASS ─────────────────────────────────
+   A component says what it does with one attribute — `data-motion="rise"` — and
+   this sheet says how. The paint (a caret's ink, a skeleton's gradient) is the
+   component's own gui props; what is left here is what no prop can say: a
+   keyframe, a transition a preference can switch off, and the preference
+   itself. Every animation is off under `prefers-reduced-motion: reduce`.
+
+     rise     enter: fade up 10px over 400ms           FadeIn, Timeline, tooltips
+     fade     opacity eases 240ms                      SlideOver's scrim
+     slide    transform eases 260ms                    SlideOver's panel
+     drag     a row eases into place while one is held Reorder
+     pulse    opacity dims and returns, 2s             Pulse, StatusDot, Skeleton
+     blink    on/off, 1s                               Caret
+     shimmer  a highlight sweeps a placeholder         product Skeleton
+     unfold   a sheet turns open about its hinge       unfold()                 */
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+[data-motion='rise'] {
+  animation: rise 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
+  will-change: transform, opacity;
+}
+
+[data-motion='fade'] {
+  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: opacity;
+}
+
+[data-motion='slide'] {
+  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform;
+}
+
+[data-motion='drag'] {
+  touch-action: none;
+  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes dim {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+[data-motion='pulse'] {
+  animation: dim 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes blink {
+  0%,
+  49% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+
+[data-motion='blink'] {
+  animation: blink 1s steps(1) infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -160px 0;
+  }
+  100% {
+    background-position: 160px 0;
+  }
+}
+
+[data-motion='shimmer'] {
+  animation: shimmer 1.2s ease-in-out infinite;
+}
+
+/* Unfold — how a sheet arrives. A panel that appears by fading is a rectangle
+   switching on; a sheet of paper TURNS OPEN about the edge it is hinged on. The
+   hinge is the only knob and the angle follows it, so a turn cannot open the
+   wrong way. `perspective()` inside the transform puts the vanishing point at
+   the sheet's own centre. Seven degrees over 220ms. */
+@keyframes unfold {
+  from {
+    opacity: 0;
+    transform: perspective(1600px) rotateY(var(--turn, -7deg));
+  }
+  to {
+    opacity: 1;
+    transform: perspective(1600px) rotateY(0deg);
+  }
+}
+
+[data-motion='unfold'] {
+  animation: unfold 220ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
+  transform-origin: left center;
+  will-change: transform, opacity;
+}
+
+[data-motion='unfold'][data-hinge='right'] {
+  transform-origin: right center;
+  --turn: 7deg;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-motion] {
+    animation: none;
+    transition: none;
+  }
+}
+
+/* ── Layout guarantee ──────────────────────────────────────────────────────────
+   Structural, so attached to a data attribute: it is the thing the primitive
+   PROMISES, and a class can be lost by forgetting to pass it on. */
+
+/* Media fills the ratio box instead of setting its own size. Without this an
+   <img> renders at its intrinsic pixel size and either overflows the frame or
+   sits letterboxed inside it, and the ratio the caller asked for is decoration.
+   `display:block` kills the inline-baseline gap under the image. */
+[data-ratio] > img,
+[data-ratio] > video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   Scrollbars, on the surfaces this package scrolls.
+
+   Left to the platform this is not neutral: Linux/GTK Chrome draws a wide track
+   with STEPPER ARROWS at both ends, so a dark product grows two grey buttons per
+   scroll region. Windows draws a wide light track. macOS overlays a thin one,
+   which is the behaviour the other two should have had.
+
+   THE TWO HALVES MUST NOT BE DECLARED TOGETHER, and that is the whole subtlety.
+   Chromium supports both the standard properties and the `::-webkit-scrollbar`
+   pseudo-elements — but the moment `scrollbar-width` or `scrollbar-color` is
+   anything other than `auto`, it takes the standard path and DISCARDS the entire
+   webkit block. Shipping both is how 8.1.19 removed nothing: measured headed on
+   Linux, as-shipped gave a 10px gutter with arrows, while the authored webkit
+   rule alone gives 8px with none. Isolated: webkit-only 8px no arrows;
+   standard-only 10px arrows; both together 10px arrows.
+
+   Neither half is redundant, so neither can simply be deleted — Firefox
+   implements ONLY the standard properties, Safari ONLY the webkit ones. They are
+   separated by engine instead: the webkit block applies wherever the selector is
+   understood, and the standard properties apply only where it is not.
+
+   And it is invisible headless. Chromium's headless shell paints OVERLAY
+   scrollbars, so nothing is drawn, `offsetWidth - clientWidth` is 0 on a blank
+   page, and `getComputedStyle(el, '::-webkit-scrollbar-button').display` happily
+   reports `none` for a rule that never ran. This must be checked headed.
+   ───────────────────────────────────────────────────────────────────────────── */
+
+/* Firefox and anything else with no webkit pseudo-elements. */
+@supports not selector(::-webkit-scrollbar) {
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+) {
+    scrollbar-width: thin;
+    scrollbar-color: rgb(255 255 255 / 0.18) transparent;
+  }
+  .t_light :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+) { scrollbar-color: rgb(0 0 0 / 0.20) transparent; }
+}
+
+/* Chromium and Safari.
+   The first rule is the load-bearing one and it is a RESET, not a style.
+   @hanzo/design sets `scrollbar-color` and `scrollbar-width` on `:where(html)`
+   (theme.css), and both INHERIT — so every element in the document already
+   carries a non-`auto` value, Chromium takes the standard path, and the whole
+   webkit block below is discarded before it is read. Nothing declared here can
+   win until the inherited value is put back to `auto` on the element itself.
+   That is why the arrows survived 8.1.19: the competing declaration was one
+   level up and inherited, not a rule anyone would find in this file. */
+@supports selector(::-webkit-scrollbar) {
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+) {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
+
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+)::-webkit-scrollbar { width: 8px; height: 8px; }
+
+  /* The steppers. This is the rule that removes the arrows, and the reason the
+     two halves had to be separated at all. */
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
+
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+)::-webkit-scrollbar-track { background: transparent; }
+
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+)::-webkit-scrollbar-thumb {
+    background: rgb(255 255 255 / 0.18);
+    border-radius: 999px;
+    /* A transparent border with background-clip keeps the thumb off the very
+       edge without a track colour doing it, so it reads as an overlay rather
+       than a channel. */
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+)::-webkit-scrollbar-thumb:hover {
+    background: rgb(255 255 255 / 0.30);
+    background-clip: content-box;
+  }
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+)::-webkit-scrollbar-corner { background: transparent; }
+
+  .t_light :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+)::-webkit-scrollbar-thumb {
+    background: rgb(0 0 0 / 0.20);
+    background-clip: content-box;
+  }
+}
+
+/* A carousel scrolls but shows no bar: the arrows and the snap already say it
+   scrolls, and a bar appearing mid-drag shifts the slides under the pointer.
+   Firefox reads `scrollbar-width`, which the component sets; WebKit reads only
+   the pseudo-element, which no prop can reach. */
+[data-slot='carousel-content']::-webkit-scrollbar { display: none; }
+
+/* The textarea's resize grip is the other platform artefact in the same family:
+   a diagonal hatch drawn by the UA that matches nothing. A composer that grows
+   with its content does not need one. */
+:where([data-slot='textarea'], [data-slot='composer-field']) { resize: none; }
+
 [stylesheet-group="0"]{}
 body{margin:0;}
 button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
@@ -2246,10 +2323,10 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
    is what gives it presence — so only the elements that set paragraphs are
    capped. A max-width can never make something wider, so this is safe inside a
    card or a column that is already narrower. */
-.hz-prose > p,
-.hz-prose > ul,
-.hz-prose > ol,
-.hz-prose > blockquote {
+[data-slot='prose'] > p,
+[data-slot='prose'] > ul,
+[data-slot='prose'] > ol,
+[data-slot='prose'] > blockquote {
   max-width: var(--measure);
 }
 
@@ -2326,14 +2403,14 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
 }
 
 /* ── Prose meets a control ────────────────────────────────────────────────
-   `.hz-prose a` is underlined on purpose: in running text an underline is what
+   `[data-slot='prose'] a` is underlined on purpose: in running text an underline is what
    marks a link. A link wearing a button is not running text — it already reads
    as a control from its fill and its border — so the underline is noise inside
    it. Measured on every call to action across the lux slides, each of which
    sits inside prose. */
-.hz-prose [data-slot="button"] a,
-.hz-prose a[data-slot="button"],
-.hz-prose button a {
+[data-slot='prose'] [data-slot="button"] a,
+[data-slot='prose'] a[data-slot="button"],
+[data-slot='prose'] button a {
   text-decoration: none;
 }
 
@@ -2342,22 +2419,22 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
    a 52px display line and a 17px sub-head: 8px under the display line read as
    the byline touching it. `em` here is the heading's own size, so the ratio
    holds at every rung. A caller setting its own margin still wins. */
-.hz-prose > h1 { margin-block-end: .5em }
-.hz-prose > h2 { margin-block-end: .55em }
-.hz-prose > h3 { margin-block-end: .6em }
-.hz-prose > h4,
-.hz-prose > h5,
-.hz-prose > h6 { margin-block-end: .75em }
+[data-slot='prose'] > h1 { margin-block-end: .5em }
+[data-slot='prose'] > h2 { margin-block-end: .55em }
+[data-slot='prose'] > h3 { margin-block-end: .6em }
+[data-slot='prose'] > h4,
+[data-slot='prose'] > h5,
+[data-slot='prose'] > h6 { margin-block-end: .75em }
 
 /* Space ABOVE a heading is larger than the space below it — that asymmetry is
    what groups a heading with the text it introduces rather than the text it
    follows. Not applied to the first child, which has nothing to separate from. */
-.hz-prose > h1:not(:first-child) { margin-block-start: 1.1em }
-.hz-prose > h2:not(:first-child) { margin-block-start: 1.2em }
-.hz-prose > h3:not(:first-child),
-.hz-prose > h4:not(:first-child),
-.hz-prose > h5:not(:first-child),
-.hz-prose > h6:not(:first-child) { margin-block-start: 1.4em }
+[data-slot='prose'] > h1:not(:first-child) { margin-block-start: 1.1em }
+[data-slot='prose'] > h2:not(:first-child) { margin-block-start: 1.2em }
+[data-slot='prose'] > h3:not(:first-child),
+[data-slot='prose'] > h4:not(:first-child),
+[data-slot='prose'] > h5:not(:first-child),
+[data-slot='prose'] > h6:not(:first-child) { margin-block-start: 1.4em }
 
 /* ── The line-height a converted box inherits ─────────────────────────────
    gui's Stack stamps its own leading, which is right for a native view and
@@ -2396,34 +2473,28 @@ a svg,
   flex-shrink: 0;
 }
 
-/* @hanzo/ui motion primitives — the calm, restrained animation vocabulary the
-   Hanzo surfaces share. One place defines the easing; components apply the class.
-   `className` forwards to the underlying DOM node on web, so the browser
-   transitions the Gui-driven inline width/transform/opacity. Every animation is
-   guarded by `prefers-reduced-motion: reduce`.
+/* @hanzo/ui motion — the calm, restrained animation vocabulary the Hanzo
+   surfaces share. One place defines the easing; components carry the name.
 
    Import once at the app root:  import '@hanzo/ui/styles/motion.css'
 
-   ── EVERY CLASS HERE IS `hz-` PREFIXED, and it was not always ────────────────
-   This sheet used to claim `.row`, `.skeleton`, `.fade`, `.mono`, `.drag` and
-   `.tnum` — six of the most ordinary words in anyone's CSS — at the document
-   level, in a package an app imports once at its root. An app with its own
-   `.row` did not get a warning; it got whichever rule the cascade preferred, in
-   a stylesheet it never opened. A library's utility classes are its namespace,
-   so they carry its name.
-
-   The unprefixed selectors are kept as aliases on the SAME rule so nothing
-   breaks mid-flight, and are REMOVED IN 8.2.0. Nothing in this package emits
-   them any more — they exist only for a consumer who typed
-   `className="skeleton"` against the old sheet. (The target was 8.1.0, and
-   8.1.0 went out carrying additions instead. Moving the date is the honest
-   edit: shipping the version a comment says removed something, without
-   removing it, is how a deprecation note stops being read.) Keyframe names are prefixed too
-   and have no alias: nothing outside this file ever referenced them.  */
-
-/* Fade-up entrance — <FadeIn> applies the class + a per-item stagger delay.
-   ~0.4s ease-out, small upward travel (matches the hanzo.ai marketing feel). */
-@keyframes hz-fade-up {
+   ── KEYED ON `data-motion`, NEVER ON A CLASS ─────────────────────────────────
+   A component says what it does with one attribute — `data-motion="rise"` — and
+   this sheet says how. The paint (a caret's ink, a skeleton's gradient) is the
+   component's own gui props; what is left here is what no prop can say: a
+   keyframe, a transition a preference can switch off, and the preference
+   itself. Every animation is off under `prefers-reduced-motion: reduce`.
+
+     rise     enter: fade up 10px over 400ms           FadeIn, Timeline, tooltips
+     fade     opacity eases 240ms                      SlideOver's scrim
+     slide    transform eases 260ms                    SlideOver's panel
+     drag     a row eases into place while one is held Reorder
+     pulse    opacity dims and returns, 2s             Pulse, StatusDot, Skeleton
+     blink    on/off, 1s                               Caret
+     shimmer  a highlight sweeps a placeholder         product Skeleton
+     unfold   a sheet turns open about its hinge       unfold()                 */
+
+@keyframes rise {
   from {
     opacity: 0;
     transform: translateY(10px);
@@ -2434,122 +2505,37 @@ a svg,
   }
 }
 
-.hz-fade-up {
-  animation: hz-fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
+[data-motion='rise'] {
+  animation: rise 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
   will-change: transform, opacity;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .hz-fade-up {
-    animation: none;
-  }
-}
-
-/* Shell chrome motion — sidebar collapse (width) and the Linear-style two-level
-   nav slide (transform); backdrop cross-fade behind a SlideOver / dialog. */
-.hz-collapse {
-  transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
-  will-change: width;
+[data-motion='fade'] {
+  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: opacity;
 }
 
-.hz-slide {
+[data-motion='slide'] {
   transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform;
 }
 
-.hz-fade {
-  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
-  will-change: opacity;
-}
-
-/* Drag-to-reorder — a pinned row while it is being dragged (pointer DnD). The
-   lifted row gets a subtle lift; siblings ease into place via `.hz-slide`. */
-.hz-drag {
+[data-motion='drag'] {
   touch-action: none;
   transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.hz-drag[data-dragging='true'] {
-  transition: none;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
-  opacity: 0.96;
-  cursor: grabbing;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .hz-collapse,
-  .hz-slide,
-  .hz-fade,
-  .hz-drag {
-    transition: none;
-  }
-}
-
-/* Living-overview motion — the "videogame-like" living dashboard. The count-up +
-   live sparkline are driven in JS (rAF, gated by prefers-reduced-motion in the
-   hooks); these are the pure-CSS bits: a loading shimmer, a live-feed pulse, and
-   a brief highlight when a freshly-arrived row lands. */
 
-/* Skeleton shimmer — an honest "loading", never fabricated content. */
-@keyframes hz-shimmer {
-  0% {
-    background-position: -160px 0;
-  }
-  100% {
-    background-position: 160px 0;
-  }
-}
-
-.hz-skeleton {
-  background-color: var(--color3, rgba(128, 128, 128, 0.14));
-  background-image: linear-gradient(
-    90deg,
-    transparent 0%,
-    var(--color4, rgba(128, 128, 128, 0.22)) 50%,
-    transparent 100%
-  );
-  background-size: 160px 100%;
-  background-repeat: no-repeat;
-  animation: hz-shimmer 1.2s ease-in-out infinite;
-}
-
-/* Live-feed pulse — the "Live" dot on a streaming panel.
-
-   NAMED APART FROM THE SKELETON'S. Both sheets shipped a `@keyframes hz-pulse`
-   and `styles.css` concatenates them, so the later one — this one — won for
-   every consumer and `.hz-pulse` animated a placeholder by RESIZING it. That is
-   the thing theme.css's own comment forbids: "animating a colour or a size
-   would repaint or reflow every frame for a placeholder nobody is looking at".
-   Nothing referenced this keyframe by name, which is why it went unnoticed. */
-@keyframes hz-live {
-  0%,
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.45;
-    transform: scale(0.82);
-  }
-}
-
-/* THE TWO CLASSES THE COMPONENTS STAMP, in the sheet a host imports.
-   `skeleton.js` emits `hz-pulse` and `input-otp.js` emits `hz-caret`, and their
-   rules lived only in theme.css — the sheet that inlines the whole design system
-   and which a host with its own tokens cannot take. So every host either mounted
-   110KB it did not want or wrote these two rules by hand; hanzo.ai carried them
-   for exactly that reason. A library that stamps a class owns its rule, and this
-   is the sheet it owns it in. */
-@keyframes hz-dim {
+@keyframes dim {
   50% {
     opacity: 0.5;
   }
 }
 
-.hz-pulse {
-  animation: hz-dim 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+[data-motion='pulse'] {
+  animation: dim 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
-@keyframes hz-blink {
+@keyframes blink {
   0%,
   49% {
     opacity: 1;
@@ -2560,138 +2546,32 @@ a svg,
   }
 }
 
-.hz-caret {
-  background: var(--foreground);
-  animation: hz-blink 1s steps(1) infinite;
-}
-
-/* Entrance for a freshly-arrived activity row (staggerless — one row at a time). */
-@keyframes hz-row-in {
-  from {
-    opacity: 0;
-    transform: translateY(-6px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.hz-row-in {
-  animation: hz-row-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
+[data-motion='blink'] {
+  animation: blink 1s steps(1) infinite;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .hz-skeleton {
-    animation: none;
-  }
-  .hz-row-in {
-    animation: none;
-  }
-  .hz-pulse {
-    animation: none;
+@keyframes shimmer {
+  0% {
+    background-position: -160px 0;
   }
-  .hz-caret {
-    animation: none;
+  100% {
+    background-position: 160px 0;
   }
 }
 
-/* ── Typography + surface classes the product layer's components reference ──────
-   DataTable/Metric typeset numeric cells with `hz-mono`/`hz-tnum`; ComboBox and
-   SelectMenu paint their popovers with `hz-paper hz-menu-in`; DataTable rows use
-   `hz-row`. They travel WITH the components (this is the package's one
-   stylesheet) so any host that imports `@hanzo/ui/styles/motion.css` renders them
-   correctly. The elevation/ring variables fall back to sane values, so a host
-   that defines its own `--hz-*` theme tokens (the console does) still wins. */
-
-.hz-tnum {
-  font-variant-numeric: tabular-nums;
-  font-feature-settings: 'tnum' 1;
-}
-
-/* Data/numeric face — Zen Mono + tabular figures for metric values, prices, IDs
-   and counts, so numbers read as precise, column-aligned data. */
-.hz-mono {
-  font-family: var(--font-mono, 'Zen Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  font-variant-numeric: tabular-nums;
-  font-feature-settings: 'tnum' 1;
-  letter-spacing: -0.01em;
-}
-
-/* Paper — a ringed sheet: the ladder's lit edge and drop, plus a hairline all
-   the way round. The three values are reached by their real names. They used to
-   be `--hz-ring` / `--hz-paper-highlight` / `--hz-elevation-3`, none of which is
-   defined in this repo, in @hanzo/design or in any consumer — so all three
-   resolved to hardcoded fallbacks, and the comment above promising that "a host
-   that defines its own --hz-* tokens still wins" described a hook nobody could
-   reach.
-
-   The drop is rung 2's, by the ladder's own name. It read `--shadow-lg` — a
-   t-shirt size @hanzo/brand also declares, for a white canvas, winning on load
-   order — so paper lost its drop on dark exactly the way the rungs did. The
-   fallback stays because this sheet ships on its own: a host that imports
-   motion.css without glass.css has no ladder to read. */
-.hz-paper {
-  box-shadow: var(--shadow-inset-hairline, inset 0 0 0 1px rgb(255 255 255 / .10)),
-    var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
-    var(--glass-shadow-2, 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55));
+[data-motion='shimmer'] {
+  animation: shimmer 1.2s ease-in-out infinite;
 }
 
-@keyframes hz-menu-in {
+/* Unfold — how a sheet arrives. A panel that appears by fading is a rectangle
+   switching on; a sheet of paper TURNS OPEN about the edge it is hinged on. The
+   hinge is the only knob and the angle follows it, so a turn cannot open the
+   wrong way. `perspective()` inside the transform puts the vanishing point at
+   the sheet's own centre. Seven degrees over 220ms. */
+@keyframes unfold {
   from {
     opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.hz-menu-in {
-  animation: hz-menu-in 140ms ease-out both;
-  will-change: opacity;
-}
-
-.hz-row {
-  transition: background-color 140ms ease-out;
-}
-
-/* AND WHAT IT TRANSITIONS TO. Stating the transition without the destination
-   left every host to invent the affordance — a row that announces it responds
-   and then does not. The colour is @hanzo/design's `--surface-card-quiet`,
-   which carries a value in both themes, so this needs nothing of the host it
-   has not already mounted. */
-.hz-row:hover {
-  background-color: var(--surface-card-quiet);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .hz-menu-in {
-    animation: none;
-  }
-}
-
-/* ── Unfold — how a sheet arrives ─────────────────────────────────────────────
-   A panel that appears by fading is a rectangle switching on. A sheet of paper
-   arrives by TURNING OPEN about the edge it is hinged on, so its near edge swings
-   toward the reader and its far edge stays put — which is the one motion that
-   says "this was already here, folded" rather than "this was drawn just now".
-
-   The hinge is the ONLY thing that varies, so it is the only knob: a drawer
-   coming off the left wall turns about its left edge, a pane folding in from the
-   right about its right. The angle follows the hinge — a sheet swings toward you
-   from whichever side it is held — so naming the hinge sets both, and there is no
-   way to ask for a turn that opens the wrong way.
-
-   `perspective()` inside the transform rather than on a parent: the vanishing
-   point is then the sheet's own centre, so the turn reads at any size and the
-   caller does not have to own a 3D context it did not ask for.
-
-   Seven degrees over 220ms. Enough to see the plane; short of the swinging-door
-   effect that makes a workspace feel like a slideshow. */
-@keyframes hz-unfold {
-  from {
-    opacity: 0;
-    transform: perspective(1600px) rotateY(var(--hz-turn, -7deg));
+    transform: perspective(1600px) rotateY(var(--turn, -7deg));
   }
   to {
     opacity: 1;
@@ -2699,37 +2579,27 @@ a svg,
   }
 }
 
-.hz-unfold {
-  animation: hz-unfold 220ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
+[data-motion='unfold'] {
+  animation: unfold 220ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
   transform-origin: left center;
   will-change: transform, opacity;
 }
 
-.hz-unfold[data-hinge="right"] {
+[data-motion='unfold'][data-hinge='right'] {
   transform-origin: right center;
-  --hz-turn: 7deg;
+  --turn: 7deg;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .hz-unfold {
+  [data-motion] {
     animation: none;
+    transition: none;
   }
 }
 
-/* ── Layout guarantees ─────────────────────────────────────────────────────────
-   Two rules, both structural. They are attached to `data-slot` rather than to a
-   class because they are not styling a caller can opt out of — they are the
-   thing the primitive PROMISES, and a class can be overwritten by forgetting to
-   pass it on. */
-
-/* A grid item's initial `min-width` is `auto`, which floors the track at the
-   item's min-content width. One long unbroken string — a hash, a URL, a wide
-   <pre> — then pushes its own column wider and squeezes every sibling, which is
-   the ragged row Grid exists to prevent. The track sizing in grid.tsx is only
-   honoured once this floor is gone. */
-[data-slot='grid'] > * {
-  min-width: 0;
-}
+/* ── Layout guarantee ──────────────────────────────────────────────────────────
+   Structural, so attached to a data attribute: it is the thing the primitive
+   PROMISES, and a class can be lost by forgetting to pass it on. */
 
 /* Media fills the ratio box instead of setting its own size. Without this an
    <img> renders at its intrinsic pixel size and either overflows the frame or
@@ -2905,32 +2775,17 @@ a svg,
   }
 }
 
+/* A carousel scrolls but shows no bar: the arrows and the snap already say it
+   scrolls, and a bar appearing mid-drag shifts the slides under the pointer.
+   Firefox reads `scrollbar-width`, which the component sets; WebKit reads only
+   the pseudo-element, which no prop can reach. */
+[data-slot='carousel-content']::-webkit-scrollbar { display: none; }
+
 /* The textarea's resize grip is the other platform artefact in the same family:
    a diagonal hatch drawn by the UA that matches nothing. A composer that grows
    with its content does not need one. */
 :where([data-slot='textarea'], [data-slot='composer-field']) { resize: none; }
 
-/* A top-level nav item.
- *
- * `navigationMenuTriggerStyle()` returns this name, so a trigger with no rule
- * behind it is bare text separated only by the list's gap.
- *
- * Padding rather than a wider gap: the padding is also the hit area, and a nav
- * item wants a target bigger than its glyphs. */
-.hz-nav-menu-trigger {
-  padding-inline: 0.75rem;
-  padding-block: 0.5rem;
-  border-radius: var(--radius, 0.5rem);
-  color: var(--muted-foreground);
-  transition: color 150ms, background-color 150ms;
-}
-
-.hz-nav-menu-trigger:hover,
-.hz-nav-menu-trigger[data-state='open'] {
-  color: var(--foreground);
-  background: var(--muted);
-}
-
 ._ovs-contain {overscroll-behavior:contain;}
 .t_unmounted .is_View, .t_unmounted .is_Text { transition: none !important; }
 .is_View { display: flex; align-items: stretch; flex-direction: column; flex-basis: auto; box-sizing: border-box; min-height: 0; min-width: 0; flex-shrink: 0; }
@@ -3141,12 +2996,16 @@ a svg,
 :root ._WebkitBoxOrient-vertical{-webkit-box-orient:vertical;}
 :root ._WebkitLineClamp-2{-webkit-line-clamp:2;}
 :root ._WebkitLineClamp-3{-webkit-line-clamp:3;}
+:root ._aspectRatio-1{aspect-ratio:1;}
 :root ._aspectRatio-1--6{aspect-ratio:1.6;}
 :root ._aspectRatio-1--77777777771627090080{aspect-ratio:1.7777777777777777;}
 :root ._b-0px{bottom:0px;}
 :root ._b-c-space-4{bottom:var(--c-space-4);}
 :root:root:root:root  ._background-0focus-hover:focus{background:var(--hover) !important;}
 @media (hover) {:root:root  ._background-0hover-hover:hover{background:var(--hover) !important;}}
+:root ._backgroundImage-linear-grad1137497498{background-image:linear-gradient(90deg, transparent 0%, var(--color4, rgba(128, 128, 128, 0.22)) 50%, transparent 100%);}
+:root ._backgroundRepeat-no-repeat{background-repeat:no-repeat;}
+:root ._backgroundSize-160px1001029{background-size:160px 100%;}
 :root ._bblr-0px{border-bottom-left-radius:0px;}
 :root ._bblr-100000px{border-bottom-left-radius:100000px;}
 :root ._bblr-1000px{border-bottom-left-radius:1000px;}
@@ -3164,6 +3023,7 @@ a svg,
 :root ._bblr-c-radius-5{border-bottom-left-radius:var(--c-radius-5);}
 :root ._bblr-c-radius-6{border-bottom-left-radius:var(--c-radius-6);}
 :root ._bblr-c-radius-tr3728{border-bottom-left-radius:var(--c-radius-true);}
+:root ._bblr-radius-full604151108{border-bottom-left-radius:var(--radius-full, 9999px);}
 :root ._bblr-radius-lg0--71290927033{border-bottom-left-radius:var(--radius-lg, 0.75rem);}
 :root ._bbrr-0px{border-bottom-right-radius:0px;}
 :root ._bbrr-100000px{border-bottom-right-radius:100000px;}
@@ -3182,12 +3042,14 @@ a svg,
 :root ._bbrr-c-radius-5{border-bottom-right-radius:var(--c-radius-5);}
 :root ._bbrr-c-radius-6{border-bottom-right-radius:var(--c-radius-6);}
 :root ._bbrr-c-radius-tr3728{border-bottom-right-radius:var(--c-radius-true);}
+:root ._bbrr-radius-full604151108{border-bottom-right-radius:var(--radius-full, 9999px);}
 :root ._bbrr-radius-lg0--71290927033{border-bottom-right-radius:var(--radius-lg, 0.75rem);}
 :root ._bbs-solid._bbs-solid{border-bottom-style:solid;}
 :root:root:root  ._bg-0active-background:active{background-color:var(--background) !important;}
 :root:root:root  ._bg-0active-backgroundF3405682:active{background-color:var(--backgroundFocus) !important;}
 :root:root:root  ._bg-0active-backgroundP3496915:active{background-color:var(--backgroundPress) !important;}
 :root:root:root  ._bg-0active-hover:active{background-color:var(--hover) !important;}
+:root:root:root  ._bg-0active-primary:active{background-color:var(--primary) !important;}
 :root:root:root  ._bg-0active-raised:active{background-color:var(--raised) !important;}
 :root:root:root:root  ._bg-0focus-backgroundH3423444:focus{background-color:var(--backgroundHover) !important;}
 :root:root:root:root  ._bg-0focus-edge:focus{background-color:var(--edge) !important;}
@@ -3200,6 +3062,7 @@ a svg,
 @media (hover) {:root:root  ._bg-0hover-edge:hover{background-color:var(--edge) !important;}}
 @media (hover) {:root:root  ._bg-0hover-hover:hover{background-color:var(--hover) !important;}}
 @media (hover) {:root:root  ._bg-0hover-panel:hover{background-color:var(--panel) !important;}}
+@media (hover) {:root:root  ._bg-0hover-primary:hover{background-color:var(--primary) !important;}}
 @media (hover) {:root:root  ._bg-0hover-raised:hover{background-color:var(--raised) !important;}}
 @media (hover) {:root:root  ._bg-0hover-rim:hover{background-color:var(--rim) !important;}}
 @media (hover) {:root:root  ._bg-0hover-transparent:hover{background-color:transparent !important;}}
@@ -3210,6 +3073,7 @@ a svg,
 :root ._bg-borderColor{background-color:var(--borderColor);}
 :root ._bg-color12{background-color:var(--color12);}
 :root ._bg-color3{background-color:var(--color3);}
+:root ._bg-color3rgba11269896602{background-color:var(--color3, rgba(128, 128, 128, 0.14));}
 :root ._bg-color5{background-color:var(--color5);}
 :root ._bg-edge{background-color:var(--edge);}
 :root ._bg-faint{background-color:var(--faint);}
@@ -3218,6 +3082,7 @@ a svg,
 :root ._bg-hover{background-color:var(--hover);}
 :root ._bg-ink{background-color:var(--ink);}
 :root ._bg-panel{background-color:var(--panel);}
+:root ._bg-primary{background-color:var(--primary);}
 :root ._bg-quiet{background-color:var(--quiet);}
 :root ._bg-raised{background-color:var(--raised);}
 :root ._bg-red9{background-color:var(--red9);}
@@ -3349,6 +3214,7 @@ a svg,
 :root ._btlr-c-radius-5{border-top-left-radius:var(--c-radius-5);}
 :root ._btlr-c-radius-6{border-top-left-radius:var(--c-radius-6);}
 :root ._btlr-c-radius-tr3728{border-top-left-radius:var(--c-radius-true);}
+:root ._btlr-radius-full604151108{border-top-left-radius:var(--radius-full, 9999px);}
 :root ._btlr-radius-lg0--71290927033{border-top-left-radius:var(--radius-lg, 0.75rem);}
 :root ._btrr-0px{border-top-right-radius:0px;}
 :root ._btrr-100000px{border-top-right-radius:100000px;}
@@ -3367,6 +3233,7 @@ a svg,
 :root ._btrr-c-radius-5{border-top-right-radius:var(--c-radius-5);}
 :root ._btrr-c-radius-6{border-top-right-radius:var(--c-radius-6);}
 :root ._btrr-c-radius-tr3728{border-top-right-radius:var(--c-radius-true);}
+:root ._btrr-radius-full604151108{border-top-right-radius:var(--radius-full, 9999px);}
 :root ._btrr-radius-lg0--71290927033{border-top-right-radius:var(--radius-lg, 0.75rem);}
 :root ._bts-solid._bts-solid{border-top-style:solid;}
 :root ._btw-0px._btw-0px{border-top-width:0px;}
@@ -3405,6 +3272,7 @@ a svg,
 @media (min-width: 768px){:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root ._dsp-_md_none{display:none;}}
 :root ._dsp-block{display:block;}
 :root ._dsp-flex{display:flex;}
+:root ._dsp-grid{display:grid;}
 :root ._dsp-inline-flex{display:inline-flex;}
 :root ._dsp-none{display:none;}
 :root ._fb-0px{flex-basis:0px;}
@@ -3439,6 +3307,7 @@ a svg,
 :root ._fwr-nowrap{flex-wrap:nowrap;}
 :root ._fwr-wrap{flex-wrap:wrap;}
 :root ._gap-0px{gap:0px;}
+:root ._gap-12px{gap:12px;}
 :root ._gap-16px{gap:16px;}
 :root ._gap-1px{gap:1px;}
 :root ._gap-24px{gap:24px;}
@@ -3458,6 +3327,19 @@ a svg,
 :root ._gap-c-space-6{gap:var(--c-space-6);}
 :root ._gap-calc6pxvar-1380234971{gap:calc(6px * var(--radius-scale, 1));}
 :root ._gap-calc8pxvar-1380234971{gap:calc(8px * var(--radius-scale, 1));}
+:root ._gap-space-312px1396{gap:var(--space-3, 12px);}
+:root ._gridColumn-1-132241{grid-column:1 / -1;}
+:root ._gridColumn-span232{grid-column:span 2;}
+:root ._gridRow-2432241{grid-row:2 / 4;}
+:root ._gridRow-span232{grid-row:span 2;}
+:root ._gridTemplateColumns-2fr1fr32{grid-template-columns:2fr 1fr;}
+:root ._gridTemplateColumns-repeat31fr1234957{grid-template-columns:repeat(3, 1fr);}
+:root ._gridTemplateColumns-repeat3minm577740846{grid-template-columns:repeat(3, minmax(0, 1fr));}
+:root ._gridTemplateColumns-repeatauto-1305671373{grid-template-columns:repeat(auto-fill, minmax(min(280px, 100%), 1fr));}
+:root ._gridTemplateColumns-repeatauto-827335640{grid-template-columns:repeat(auto-fill, minmax(max(min(160px, 100%), calc((100% - 3 * var(--space-3, 12px)) / 4)), 1fr));}
+:root ._gridTemplateColumns-repeatauto-924020196{grid-template-columns:repeat(auto-fill, minmax(min(900px, 100%), 1fr));}
+:root ._gridTemplateColumns-repeatauto-998993489{grid-template-columns:repeat(auto-fill, minmax(min(240px, 100%), 1fr));}
+:root ._gridTemplateRows-repeat2minm577740846{grid-template-rows:repeat(2, minmax(0, 1fr));}
 :root ._grow-0{flex-grow:0;}
 :root ._grow-1{flex-grow:1;}
 :root ._grow-50{flex-grow:50;}
@@ -3607,6 +3489,7 @@ a svg,
 :root ._o-0--6{opacity:0.6;}
 :root ._o-0--7{opacity:0.7;}
 :root ._o-0--8{opacity:0.8;}
+:root:root:root  ._o-0active-0--85:active{opacity:0.85 !important;}
 @media (hover) {:root:root  ._o-0hover-0--8:hover{opacity:0.8 !important;}}
 @media (hover) {:root:root  ._o-0hover-0--9:hover{opacity:0.9 !important;}}
 @media (hover) {:root:root  ._o-0hover-0--92:hover{opacity:0.92 !important;}}