@rinzai/zen 0.3.2 → 0.4.1

package/dist/theme.css

@@ -0,0 +1,888 @@
+/*
+ * Zen's theme for Tailwind: tokens, custom utilities (glass, glow-edge, …) and
+ * component styles. Nothing here styles an app's own elements; that's the
+ * opt-in base.css.
+ */
+
+/* Default theme, layered so an app's own (unlayered) token overrides always win. */
+@import './variables.css' layer(base);
+
+@custom-variant dark (&:is(.dark *, [data-theme='dark'] *));
+@custom-variant light (&:is(.light *, [data-theme='light'] *));
+
+/*
+ * inline: utilities use oklch(var(--primary)) directly rather than through
+ * --color-primary, so tokens set on any element (applyTheme's target, a .light
+ * section) recolour everything inside it, not only when set on :root.
+ */
+@theme inline {
+    --color-border: oklch(var(--border));
+    --color-input: oklch(var(--input));
+    --color-ring: oklch(var(--ring));
+    --color-background: oklch(var(--background));
+    --color-foreground: oklch(var(--foreground));
+
+    --color-primary: oklch(var(--primary));
+    --color-primary-foreground: oklch(var(--primary-foreground));
+
+    --color-secondary: oklch(var(--secondary));
+    --color-secondary-foreground: oklch(var(--secondary-foreground));
+
+    --color-destructive: oklch(var(--destructive));
+    --color-destructive-foreground: oklch(var(--destructive-foreground));
+
+    --color-muted: oklch(var(--muted));
+    --color-muted-foreground: oklch(var(--muted-foreground));
+
+    --color-accent: oklch(var(--accent));
+    --color-accent-foreground: oklch(var(--accent-foreground));
+
+    --color-popover: oklch(var(--popover));
+    --color-popover-foreground: oklch(var(--popover-foreground));
+
+    --color-card: oklch(var(--card));
+    --color-card-foreground: oklch(var(--card-foreground));
+
+    --color-glow: oklch(var(--glow));
+    --color-glow-2: oklch(var(--glow-2));
+
+    --color-tint: oklch(var(--tint));
+
+    --radius-lg: var(--radius);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-sm: calc(var(--radius) - 4px);
+
+    --font-sans: 'Inter Variable', Inter, ui-sans-serif, system-ui, sans-serif;
+
+    --ease-out-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
+
+    --animate-accordion-down: accordion-down 0.2s ease-out;
+    --animate-accordion-up: accordion-up 0.2s ease-out;
+
+    @keyframes accordion-down {
+        from {
+            height: 0;
+        }
+        to {
+            height: var(--accordion-content-height);
+        }
+    }
+    @keyframes accordion-up {
+        from {
+            height: var(--accordion-content-height);
+        }
+        to {
+            height: 0;
+        }
+    }
+}
+
+/* ───────────────────────── Glass surfaces ───────────────────────── */
+
+/*
+ * Tinted glass without a live blur: a backdrop that animates would force a
+ * blur to be recomputed every frame under every card. Overlays that sit above
+ * content (dialogs, popups, toasts) add `glass-blur`.
+ */
+@utility glass {
+    background: linear-gradient(180deg, oklch(var(--card) / 0.82), oklch(var(--card) / 0.7));
+    border: 1px solid oklch(var(--tint) / 0.07);
+    box-shadow:
+        inset 0 1px 0 hsl(0 0% 100% / 0.06),
+        var(--glass-shadow);
+}
+
+/*
+ * Border that lights up near the pointer. <Backdrop> writes the pointer
+ * position into each element's --gx/--gy, so neighbouring cards light up
+ * consistently as if from one light source.
+ */
+/*
+ * The pointer position for glow-edge, per element. Not inherited: Backdrop
+ * updates it every pointer or scroll frame, and an inherited property would
+ * restyle everything inside the card each time. The edge layer takes it
+ * explicitly (inherit) instead.
+ */
+@property --gx {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: -999px;
+}
+@property --gy {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: -999px;
+}
+
+@utility glow-edge {
+    position: relative;
+    isolation: isolate;
+    &::before {
+        content: '';
+        --gx: inherit;
+        --gy: inherit;
+        position: absolute;
+        /* Inside the box (over its 1px border), so it never causes overflow or scrollbars. */
+        inset: 0;
+        border-radius: inherit;
+        padding: 1px;
+        background: radial-gradient(
+            360px circle at var(--gx, -999px) var(--gy, -999px),
+            oklch(var(--glow) / calc(0.7 * var(--glow-strength))),
+            oklch(var(--glow-2) / calc(0.2 * var(--glow-strength))) 40%,
+            transparent 65%
+        );
+        -webkit-mask:
+            linear-gradient(#000 0 0) content-box,
+            linear-gradient(#000 0 0);
+        -webkit-mask-composite: xor;
+        mask:
+            linear-gradient(#000 0 0) content-box exclude,
+            linear-gradient(#000 0 0);
+        pointer-events: none;
+        z-index: 1;
+    }
+}
+
+/*
+ * Built from Tailwind's backdrop utilities, which emit the standard and -webkit-
+ * properties correctly. Phones: a live blur over scrolling content is the main
+ * cause of jank, so touch screens get a solid tint instead.
+ */
+@utility glass-blur {
+    @apply backdrop-blur-[18px] backdrop-saturate-140;
+    /* !: glass's `background` shorthand would otherwise reset the colour. */
+    @apply pointer-coarse:bg-card/96! pointer-coarse:backdrop-filter-none;
+    @apply [@media(hover:none)]:bg-card/96! [@media(hover:none)]:backdrop-filter-none;
+}
+
+@utility text-glow {
+    text-shadow: 0 0 18px oklch(var(--glow) / calc(0.55 * var(--glow-strength)));
+}
+
+/* Gradient headline text. */
+@utility text-aurora {
+    background: linear-gradient(100deg, oklch(0.98 0 0), oklch(var(--primary)) 85%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    /* Light theme: start from the ink colour, since near-white would vanish. */
+    &:where(.light *, [data-theme='light'] *) {
+        background-image: linear-gradient(100deg, oklch(var(--foreground)), oklch(var(--primary)) 85%);
+    }
+}
+
+/* ───────────────────────── Lite graphics ───────────────────────── */
+
+/*
+ * Without hardware acceleration (html[data-zen-graphics='lite'], set by
+ * utils/graphics.ts) every blur, full-screen mask and animation is drawn on the
+ * CPU each frame. Keep the look, drop the cost: solid tints instead of live
+ * blur (as on phones), a still backdrop, no pointer light. The OS "reduce
+ * transparency" setting gets the same tints.
+ */
+html[data-zen-graphics='lite'] .glass-blur {
+    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none !important;
+    background: oklch(var(--card) / 0.96) !important;
+}
+html[data-zen-graphics='lite'] .zen__header {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background-color: oklch(var(--background) / 0.95);
+}
+html[data-zen-graphics='lite'] .zen__dialog::backdrop {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+}
+html[data-zen-graphics='lite'] :is(.zen-aurora, .zen-dots--ambient) {
+    animation: none;
+    will-change: auto;
+}
+html[data-zen-graphics='lite'] :is(.zen-topo--lit, .zen-dots--lit) {
+    display: none;
+}
+@media (prefers-reduced-transparency: reduce) {
+    .glass-blur {
+        -webkit-backdrop-filter: none !important;
+        backdrop-filter: none !important;
+        background: oklch(var(--card) / 0.96) !important;
+    }
+    .zen__header {
+        -webkit-backdrop-filter: none;
+        backdrop-filter: none;
+        background-color: oklch(var(--background) / 0.95);
+    }
+}
+
+/*
+ * Sticky table cells: clear glass at rest; frosted while content passes under
+ * their edge (TableContainer sets data-under-*), so it blurs instead of showing
+ * through. Where there's no blur (no GPU, touch, reduced transparency), solid.
+ * No transition: animating every sticky cell's frost costs frames mid-scroll.
+ */
+.zen__table-container[data-under-top] .zen__sticky-top,
+.zen__table-container[data-under-left] .zen__sticky-left,
+.zen__table-container[data-under-bottom] .zen__sticky-bottom {
+    background-color: oklch(var(--card) / 0.6);
+    -webkit-backdrop-filter: blur(18px) saturate(1.4);
+    backdrop-filter: blur(18px) saturate(1.4);
+}
+html[data-zen-graphics='lite'] .zen__table-container[data-under-top] .zen__sticky-top,
+html[data-zen-graphics='lite'] .zen__table-container[data-under-left] .zen__sticky-left,
+html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__sticky-bottom {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background-color: oklch(var(--card));
+}
+@media (hover: none), (pointer: coarse), (prefers-reduced-transparency: reduce) {
+    .zen__table-container[data-under-top] .zen__sticky-top,
+    .zen__table-container[data-under-left] .zen__sticky-left,
+    .zen__table-container[data-under-bottom] .zen__sticky-bottom {
+        -webkit-backdrop-filter: none;
+        backdrop-filter: none;
+        background-color: oklch(var(--card));
+    }
+}
+
+/* ───────────────────────── Code ───────────────────────── */
+
+/*
+ * Syntax colours for CodeBlock, in the --sh-* variables sugar-high reads
+ * (other highlighters can map their own classes to these).
+ */
+.zen__code-block {
+    --sh-class: oklch(var(--primary));
+    --sh-identifier: oklch(var(--foreground));
+    --sh-sign: oklch(var(--muted-foreground));
+    --sh-property: oklch(0.8 0.1 250);
+    --sh-entity: oklch(0.78 0.12 200);
+    --sh-jsxliterals: oklch(var(--foreground) / 0.85);
+    --sh-string: oklch(0.8 0.12 150);
+    --sh-keyword: oklch(0.75 0.14 330);
+    --sh-comment: oklch(var(--muted-foreground) / 0.8);
+}
+:is(.light, [data-theme='light']) .zen__code-block {
+    --sh-property: oklch(0.5 0.15 250);
+    --sh-entity: oklch(0.5 0.12 200);
+    --sh-string: oklch(0.5 0.14 150);
+    --sh-keyword: oklch(0.5 0.2 330);
+}
+
+/* ───────────────────────── Backdrop: contours / dots + light ───────────────────────── */
+
+.zen-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    overflow: hidden;
+    pointer-events: none;
+    background: oklch(var(--background));
+}
+
+/*
+ * Slow-moving aurora glows: three soft lights in one layer. They drift along an
+ * ease-in-out path in small steps (about 6 a second, a pixel or two each,
+ * invisible on a soft glow) rather than every frame, and they are painted as
+ * gradients of one element instead of three large layers of their own: extra
+ * full-screen layers are what the GPU pays for on every frame, and anything
+ * moving behind the page makes the whole screen redraw, blurs included.
+ * (--zen-*-dx/dy/s: each light's drift and scale, animated below. Every step lasts
+ * exactly 1/6s in all three, so they repaint together, about 6 times a second.)
+ */
+@property --zen-a-dx {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+}
+@property --zen-a-dy {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+}
+@property --zen-a-s {
+    syntax: '<number>';
+    inherits: false;
+    initial-value: 1;
+}
+@property --zen-b-dx {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+}
+@property --zen-b-dy {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+}
+@property --zen-b-s {
+    syntax: '<number>';
+    inherits: false;
+    initial-value: 1;
+}
+@property --zen-c-dx {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+}
+@property --zen-c-dy {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+}
+@property --zen-c-s {
+    syntax: '<number>';
+    inherits: false;
+    initial-value: 1;
+}
+.zen-aurora {
+    position: absolute;
+    inset: 0;
+    /* Faded as one layer, like the separate glows it replaces were, so it renders the same. */
+    opacity: calc(0.16 * var(--glow-strength));
+    background-repeat: no-repeat;
+    /* Last listed is drawn first: a, then b, then c on top. */
+    background-image:
+        radial-gradient(
+            circle calc(22.5vmax * var(--zen-c-s)) at calc(40% + 22.5vmax + var(--zen-c-dx))
+                calc(30% + 22.5vmax + var(--zen-c-dy)),
+            oklch(var(--glow) / 0.6),
+            transparent
+        ),
+        radial-gradient(
+            circle calc(35vmax * var(--zen-b-s)) at calc(100% - 10vmax + var(--zen-b-dx)) calc(100% + var(--zen-b-dy)),
+            oklch(var(--glow-2) / 0.7),
+            transparent
+        ),
+        radial-gradient(
+            circle calc(35vmax * var(--zen-a-s)) at calc(25vmax + var(--zen-a-dx)) calc(-13vmax + var(--zen-a-dy)),
+            oklch(var(--glow) / 0.9),
+            transparent
+        );
+    animation:
+        zen-aurora-a 38s steps(19) infinite alternate,
+        zen-aurora-b 46s steps(23) infinite alternate,
+        zen-aurora-c 52s steps(26) infinite alternate;
+}
+
+/*
+ * Contour lines (image from <Backdrop topoSrc>), faint everywhere… The image
+ * is used as a mask over the tint, so its strokes are white on dark and ink
+ * on light.
+ */
+.zen-topo {
+    position: absolute;
+    inset: 0;
+    background: oklch(var(--tint));
+    -webkit-mask: var(--zen-topo) center / cover no-repeat;
+    mask: var(--zen-topo) center / cover no-repeat;
+    opacity: calc(0.1 * var(--topo-strength));
+}
+/* …and lit up around the pointer, tinted with the glow colour. */
+.zen-topo--lit {
+    opacity: calc(0.6 * var(--topo-strength) * var(--glow-strength));
+    background: none;
+    transition: opacity 200ms;
+}
+/*
+ * The light is a box the size of its gradient that Backdrop moves to the
+ * pointer (left/top), not a full-screen gradient re-aimed at it, so a pointer
+ * move repaints only where the light was and is. It starts off-screen.
+ */
+.zen-light {
+    position: absolute;
+    left: -9999px;
+    top: -9999px;
+}
+.zen-topo--lit > .zen-light {
+    width: 840px;
+    height: 840px;
+    margin: -420px 0 0 -420px;
+    background: radial-gradient(
+        420px circle at center,
+        oklch(var(--glow) / 0.9),
+        oklch(var(--glow-2) / 0.3) 45%,
+        transparent 70%
+    );
+}
+
+/*
+ * Dot grid: a dense 12px grid of 1px dots, barely there; the aurora's drifting
+ * colours show through the same dot mask; near the pointer a small light
+ * brings the dots up in the glow colour.
+ */
+.zen-dots {
+    position: absolute;
+    inset: 0;
+    opacity: var(--topo-strength);
+    background-image: radial-gradient(circle, oklch(var(--muted-foreground) / 0.13) 1px, transparent 1px);
+    background-size: 12px 12px;
+}
+.zen-dots--ambient,
+.zen-dots--lit {
+    background-size: auto;
+    -webkit-mask: radial-gradient(circle, #000 1px, transparent 1px) 0 0 / 12px 12px;
+    mask: radial-gradient(circle, #000 1px, transparent 1px) 0 0 / 12px 12px;
+}
+/* Only a faint tint (never as bright as the pointer light, so it can't be mistaken for it). */
+.zen-dots--ambient {
+    opacity: min(0.6, calc(1.1 * var(--topo-strength) * var(--glow-strength)));
+    background-image:
+        radial-gradient(60vmax 45vmax at 15% 10%, oklch(var(--glow) / 0.45), transparent 75%),
+        radial-gradient(55vmax 42vmax at 90% 95%, oklch(var(--glow-2) / 0.4), transparent 75%);
+    background-repeat: no-repeat;
+    /* The colours drift; the dot mask stays put, so these dots never slide off the grid. */
+    animation: zen-dots-drift 60s steps(360) infinite alternate;
+}
+.zen-dots--lit {
+    opacity: min(1, calc(100 * var(--topo-strength) * var(--glow-strength)));
+    background-image: none;
+    transition: opacity 200ms;
+}
+/* The dots' pointer light: a box moved to the pointer, like the contour light. */
+.zen-dots--lit > .zen-light {
+    width: 220px;
+    height: 220px;
+    margin: -110px 0 0 -110px;
+    background-image: radial-gradient(
+        110px circle at center,
+        oklch(var(--glow)),
+        oklch(var(--glow) / 0.35) 45%,
+        transparent 75%
+    );
+}
+/* Pointer left the window: the lights fade out where they are. */
+.zen-backdrop[data-pointer='out'] .zen-dots--lit,
+.zen-backdrop[data-pointer='out'] .zen-topo--lit {
+    opacity: 0;
+}
+
+/* Vignette so content edges stay calm. */
+.zen-vignette {
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(ellipse at 50% 20%, transparent 40%, oklch(var(--background) / 0.85) 100%);
+}
+
+/* Phones: a still background (no drifting glows, no pointer light) keeps scrolling smooth. */
+@media (hover: none), (pointer: coarse) {
+    .zen-aurora {
+        animation: none;
+        will-change: auto;
+    }
+    .zen-topo--lit,
+    .zen-dots--lit {
+        display: none;
+    }
+    .zen-dots--ambient {
+        animation: none;
+    }
+}
+
+@keyframes zen-aurora-a {
+    0% {
+        --zen-a-dx: 0vmax;
+        --zen-a-dy: 0vmax;
+        --zen-a-s: 1;
+    }
+    8.3333% {
+        --zen-a-dx: 0.1633vmax;
+        --zen-a-dy: 0.1088vmax;
+        --zen-a-s: 1.0014;
+    }
+    16.6667% {
+        --zen-a-dx: 0.6736vmax;
+        --zen-a-dy: 0.449vmax;
+        --zen-a-s: 1.0056;
+    }
+    25% {
+        --zen-a-dx: 1.5499vmax;
+        --zen-a-dy: 1.0333vmax;
+        --zen-a-s: 1.0129;
+    }
+    33.3333% {
+        --zen-a-dx: 2.7813vmax;
+        --zen-a-dy: 1.8542vmax;
+        --zen-a-s: 1.0232;
+    }
+    41.6667% {
+        --zen-a-dx: 4.3059vmax;
+        --zen-a-dy: 2.8706vmax;
+        --zen-a-s: 1.0359;
+    }
+    50% {
+        --zen-a-dx: 6vmax;
+        --zen-a-dy: 4vmax;
+        --zen-a-s: 1.05;
+    }
+    58.3333% {
+        --zen-a-dx: 7.6941vmax;
+        --zen-a-dy: 5.1294vmax;
+        --zen-a-s: 1.0641;
+    }
+    66.6667% {
+        --zen-a-dx: 9.2187vmax;
+        --zen-a-dy: 6.1458vmax;
+        --zen-a-s: 1.0768;
+    }
+    75% {
+        --zen-a-dx: 10.4501vmax;
+        --zen-a-dy: 6.9667vmax;
+        --zen-a-s: 1.0871;
+    }
+    83.3333% {
+        --zen-a-dx: 11.3264vmax;
+        --zen-a-dy: 7.551vmax;
+        --zen-a-s: 1.0944;
+    }
+    91.6667% {
+        --zen-a-dx: 11.8367vmax;
+        --zen-a-dy: 7.8912vmax;
+        --zen-a-s: 1.0986;
+    }
+    100% {
+        --zen-a-dx: 12vmax;
+        --zen-a-dy: 8vmax;
+        --zen-a-s: 1.1;
+    }
+}
+@keyframes zen-aurora-b {
+    0% {
+        --zen-b-dx: -0vmax;
+        --zen-b-dy: -0vmax;
+        --zen-b-s: 1;
+    }
+    8.3333% {
+        --zen-b-dx: -0.1905vmax;
+        --zen-b-dy: -0.0816vmax;
+        --zen-b-s: 0.9993;
+    }
+    16.6667% {
+        --zen-b-dx: -0.7858vmax;
+        --zen-b-dy: -0.3368vmax;
+        --zen-b-s: 0.9972;
+    }
+    25% {
+        --zen-b-dx: -1.8083vmax;
+        --zen-b-dy: -0.775vmax;
+        --zen-b-s: 0.9935;
+    }
+    33.3333% {
+        --zen-b-dx: -3.2448vmax;
+        --zen-b-dy: -1.3906vmax;
+        --zen-b-s: 0.9884;
+    }
+    41.6667% {
+        --zen-b-dx: -5.0236vmax;
+        --zen-b-dy: -2.153vmax;
+        --zen-b-s: 0.9821;
+    }
+    50% {
+        --zen-b-dx: -7vmax;
+        --zen-b-dy: -3vmax;
+        --zen-b-s: 0.975;
+    }
+    58.3333% {
+        --zen-b-dx: -8.9764vmax;
+        --zen-b-dy: -3.847vmax;
+        --zen-b-s: 0.9679;
+    }
+    66.6667% {
+        --zen-b-dx: -10.7552vmax;
+        --zen-b-dy: -4.6094vmax;
+        --zen-b-s: 0.9616;
+    }
+    75% {
+        --zen-b-dx: -12.1917vmax;
+        --zen-b-dy: -5.225vmax;
+        --zen-b-s: 0.9565;
+    }
+    83.3333% {
+        --zen-b-dx: -13.2142vmax;
+        --zen-b-dy: -5.6632vmax;
+        --zen-b-s: 0.9528;
+    }
+    91.6667% {
+        --zen-b-dx: -13.8095vmax;
+        --zen-b-dy: -5.9184vmax;
+        --zen-b-s: 0.9507;
+    }
+    100% {
+        --zen-b-dx: -14vmax;
+        --zen-b-dy: -6vmax;
+        --zen-b-s: 0.95;
+    }
+}
+@keyframes zen-aurora-c {
+    0% {
+        --zen-c-dx: -0vmax;
+        --zen-c-dy: 0vmax;
+        --zen-c-s: 1;
+    }
+    8.3333% {
+        --zen-c-dx: -0.136vmax;
+        --zen-c-dy: 0.0816vmax;
+        --zen-c-s: 1.002;
+    }
+    16.6667% {
+        --zen-c-dx: -0.5613vmax;
+        --zen-c-dy: 0.3368vmax;
+        --zen-c-s: 1.0084;
+    }
+    25% {
+        --zen-c-dx: -1.2916vmax;
+        --zen-c-dy: 0.775vmax;
+        --zen-c-s: 1.0194;
+    }
+    33.3333% {
+        --zen-c-dx: -2.3177vmax;
+        --zen-c-dy: 1.3906vmax;
+        --zen-c-s: 1.0348;
+    }
+    41.6667% {
+        --zen-c-dx: -3.5883vmax;
+        --zen-c-dy: 2.153vmax;
+        --zen-c-s: 1.0538;
+    }
+    50% {
+        --zen-c-dx: -5vmax;
+        --zen-c-dy: 3vmax;
+        --zen-c-s: 1.075;
+    }
+    58.3333% {
+        --zen-c-dx: -6.4117vmax;
+        --zen-c-dy: 3.847vmax;
+        --zen-c-s: 1.0962;
+    }
+    66.6667% {
+        --zen-c-dx: -7.6823vmax;
+        --zen-c-dy: 4.6094vmax;
+        --zen-c-s: 1.1152;
+    }
+    75% {
+        --zen-c-dx: -8.7084vmax;
+        --zen-c-dy: 5.225vmax;
+        --zen-c-s: 1.1306;
+    }
+    83.3333% {
+        --zen-c-dx: -9.4387vmax;
+        --zen-c-dy: 5.6632vmax;
+        --zen-c-s: 1.1416;
+    }
+    91.6667% {
+        --zen-c-dx: -9.864vmax;
+        --zen-c-dy: 5.9184vmax;
+        --zen-c-s: 1.148;
+    }
+    100% {
+        --zen-c-dx: -10vmax;
+        --zen-c-dy: 6vmax;
+        --zen-c-s: 1.15;
+    }
+}
+@keyframes zen-dots-drift {
+    to {
+        background-position:
+            6vmax 4vmax,
+            -6vmax -3vmax;
+    }
+}
+
+/* ───────────────────────── Motion ───────────────────────── */
+
+/* Popovers flip to stay on screen where anchor positioning is supported. */
+@supports (position-area: block-end) {
+    .zen__popover {
+        position-try-options:
+            flip-block,
+            flip-inline,
+            flip-block flip-inline;
+        position-visibility: anchors-visible;
+    }
+}
+
+/* Popovers scale and fade in from their top-layer entry, and back out. */
+.zen__popover {
+    transition:
+        opacity 150ms,
+        scale 150ms,
+        overlay 150ms allow-discrete,
+        display 150ms allow-discrete;
+}
+.zen__dialog {
+    transition:
+        opacity 200ms var(--ease-out-soft),
+        scale 200ms var(--ease-out-soft),
+        overlay 200ms allow-discrete,
+        display 200ms allow-discrete;
+}
+.zen__dialog::backdrop {
+    transition:
+        opacity 150ms,
+        overlay 150ms allow-discrete,
+        display 150ms allow-discrete;
+}
+.zen__popover:not(:popover-open),
+.zen__dialog:not([open]) {
+    opacity: 0;
+    scale: 0.95;
+}
+.zen__dialog:not([open])::backdrop {
+    opacity: 0;
+}
+@starting-style {
+    .zen__popover:popover-open,
+    .zen__dialog[open] {
+        opacity: 0;
+        scale: 0.95;
+    }
+    .zen__dialog[open]::backdrop {
+        opacity: 0;
+    }
+}
+/*
+ * The page behind a modal dialog doesn't scroll. Hiding the overflow removes
+ * the scrollbar, so where the page had one (Dialog sets data-zen-scrollbar),
+ * its space stays reserved and the page doesn't shift sideways.
+ */
+:root:has(.zen__dialog[open]) {
+    overflow: hidden;
+}
+:root[data-zen-scrollbar]:has(.zen__dialog[open]) {
+    scrollbar-gutter: stable;
+}
+
+/*
+ * Tree rows opening and closing (useTree): each cell's content box grows from 0
+ * to the row height (or shrinks back), so rows below glide instead of jumping.
+ * Content fades in a little after the space opens, and out before it closes.
+ */
+@keyframes zen-row-open {
+    from {
+        height: 0;
+        opacity: 0;
+    }
+    60% {
+        opacity: 0;
+    }
+    to {
+        height: var(--row-h);
+        opacity: 1;
+    }
+}
+@keyframes zen-row-close {
+    from {
+        height: var(--row-h);
+        opacity: 1;
+    }
+    40% {
+        opacity: 0;
+    }
+    to {
+        height: 0;
+        opacity: 0;
+    }
+}
+.zen__tree-row-enter .zen__tree-cell,
+.zen__tree-row-exit .zen__tree-cell {
+    overflow: hidden;
+}
+.zen__tree-row-enter .zen__tree-cell {
+    animation: zen-row-open 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+.zen__tree-row-exit .zen__tree-cell {
+    animation: zen-row-close 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+/* While a row is 0 tall its border would still show as a stacked line. */
+.zen__tree-row-enter > td,
+.zen__tree-row-exit > td {
+    border-bottom-color: transparent;
+    transition: border-color 200ms;
+}
+
+/* Direct children of a .rise container enter one after another. */
+@keyframes zen-rise {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+}
+.rise > * {
+    animation: zen-rise 0.5s var(--ease-out-soft) both;
+}
+.rise > *:nth-child(2) {
+    animation-delay: 50ms;
+}
+.rise > *:nth-child(3) {
+    animation-delay: 100ms;
+}
+.rise > *:nth-child(4) {
+    animation-delay: 150ms;
+}
+.rise > *:nth-child(n + 5) {
+    animation-delay: 200ms;
+}
+
+/* Loading placeholders: a soft light sweeping across. */
+.zen__skeleton {
+    background: linear-gradient(
+            100deg,
+            oklch(var(--tint) / 0.04) 30%,
+            oklch(var(--tint) / 0.09) 50%,
+            oklch(var(--tint) / 0.04) 70%
+        )
+        0 0 / 300% 100%;
+    animation: zen-shimmer 1.6s ease-in-out infinite;
+}
+@keyframes zen-shimmer {
+    from {
+        background-position: 100% 0;
+    }
+    to {
+        background-position: 0 0;
+    }
+}
+
+/* Time left before a toast goes away. */
+.zen__toast-timer {
+    animation: zen-toast-timer linear forwards;
+}
+@keyframes zen-toast-timer {
+    to {
+        transform: scaleX(0);
+    }
+}
+
+@keyframes zen-pop {
+    0% {
+        transform: scale(0.4);
+        opacity: 0;
+    }
+    70% {
+        transform: scale(1.2);
+    }
+}
+
+/* Reduced motion: the OS setting, or opt in with html.reduce-motion. */
+@media (prefers-reduced-motion: reduce) {
+    .zen-backdrop *,
+    .zen-backdrop *::before,
+    [class*='zen__'],
+    [class*='zen__']::before,
+    [class*='zen__']::backdrop,
+    .rise > * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+html.reduce-motion .zen-backdrop *,
+html.reduce-motion .zen-backdrop *::before,
+html.reduce-motion [class*='zen__'],
+html.reduce-motion [class*='zen__']::before,
+html.reduce-motion [class*='zen__']::backdrop,
+html.reduce-motion .rise > * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+}