npm - @colletdev/core - Versions diffs - 0.1.3 - Mend

@colletdev/core 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (119) hide show

package/README.md +77 -0
package/custom-elements.json +6037 -0
package/generated/.gitattributes +2 -0
package/generated/index.d.ts +120 -0
package/generated/index.js +521 -0
package/generated/styles.js +2845 -0
package/package.json +56 -0
package/src/elements/accordion.d.ts +20 -0
package/src/elements/accordion.js +92 -0
package/src/elements/activity_group.d.ts +19 -0
package/src/elements/activity_group.js +27 -0
package/src/elements/alert.d.ts +24 -0
package/src/elements/alert.js +40 -0
package/src/elements/autocomplete.d.ts +30 -0
package/src/elements/autocomplete.js +671 -0
package/src/elements/avatar.d.ts +18 -0
package/src/elements/avatar.js +28 -0
package/src/elements/backdrop.d.ts +14 -0
package/src/elements/backdrop.js +28 -0
package/src/elements/badge.d.ts +21 -0
package/src/elements/badge.js +42 -0
package/src/elements/breadcrumb.d.ts +17 -0
package/src/elements/breadcrumb.js +41 -0
package/src/elements/button.d.ts +24 -0
package/src/elements/button.js +36 -0
package/src/elements/card.d.ts +21 -0
package/src/elements/card.js +67 -0
package/src/elements/carousel.d.ts +23 -0
package/src/elements/carousel.js +895 -0
package/src/elements/chat_input.d.ts +22 -0
package/src/elements/chat_input.js +78 -0
package/src/elements/checkbox.d.ts +21 -0
package/src/elements/checkbox.js +114 -0
package/src/elements/code_block.d.ts +21 -0
package/src/elements/code_block.js +27 -0
package/src/elements/collapsible.d.ts +20 -0
package/src/elements/collapsible.js +93 -0
package/src/elements/date_picker.d.ts +30 -0
package/src/elements/date_picker.js +528 -0
package/src/elements/dialog.d.ts +20 -0
package/src/elements/dialog.js +314 -0
package/src/elements/drawer.d.ts +20 -0
package/src/elements/drawer.js +318 -0
package/src/elements/fab.d.ts +22 -0
package/src/elements/fab.js +36 -0
package/src/elements/file_upload.d.ts +26 -0
package/src/elements/file_upload.js +59 -0
package/src/elements/listbox.d.ts +19 -0
package/src/elements/listbox.js +250 -0
package/src/elements/menu.d.ts +20 -0
package/src/elements/menu.js +224 -0
package/src/elements/message_bubble.d.ts +23 -0
package/src/elements/message_bubble.js +29 -0
package/src/elements/message_group.d.ts +18 -0
package/src/elements/message_group.js +28 -0
package/src/elements/message_part.d.ts +35 -0
package/src/elements/message_part.js +153 -0
package/src/elements/pagination.d.ts +22 -0
package/src/elements/pagination.js +36 -0
package/src/elements/popover.d.ts +26 -0
package/src/elements/popover.js +191 -0
package/src/elements/profile_menu.d.ts +20 -0
package/src/elements/profile_menu.js +213 -0
package/src/elements/progress.d.ts +18 -0
package/src/elements/progress.js +31 -0
package/src/elements/radio_group.d.ts +22 -0
package/src/elements/radio_group.js +70 -0
package/src/elements/scrollbar.d.ts +19 -0
package/src/elements/scrollbar.js +299 -0
package/src/elements/search_bar.d.ts +27 -0
package/src/elements/search_bar.js +98 -0
package/src/elements/select.d.ts +26 -0
package/src/elements/select.js +485 -0
package/src/elements/sidebar.d.ts +21 -0
package/src/elements/sidebar.js +322 -0
package/src/elements/skeleton.d.ts +17 -0
package/src/elements/skeleton.js +31 -0
package/src/elements/slider.d.ts +28 -0
package/src/elements/slider.js +93 -0
package/src/elements/speed_dial.d.ts +23 -0
package/src/elements/speed_dial.js +370 -0
package/src/elements/spinner.d.ts +15 -0
package/src/elements/spinner.js +28 -0
package/src/elements/split_button.d.ts +23 -0
package/src/elements/split_button.js +281 -0
package/src/elements/stepper.d.ts +20 -0
package/src/elements/stepper.js +31 -0
package/src/elements/switch.d.ts +22 -0
package/src/elements/switch.js +129 -0
package/src/elements/table.d.ts +29 -0
package/src/elements/table.js +371 -0
package/src/elements/tabs.d.ts +19 -0
package/src/elements/tabs.js +139 -0
package/src/elements/text.d.ts +26 -0
package/src/elements/text.js +32 -0
package/src/elements/text_input.d.ts +36 -0
package/src/elements/text_input.js +121 -0
package/src/elements/thinking.d.ts +17 -0
package/src/elements/thinking.js +28 -0
package/src/elements/toast.d.ts +23 -0
package/src/elements/toast.js +209 -0
package/src/elements/toggle_group.d.ts +22 -0
package/src/elements/toggle_group.js +176 -0
package/src/elements/tooltip.d.ts +18 -0
package/src/elements/tooltip.js +64 -0
package/src/markdown.d.ts +24 -0
package/src/markdown.js +66 -0
package/src/runtime.d.ts +35 -0
package/src/runtime.js +790 -0
package/src/server.d.ts +69 -0
package/src/server.js +176 -0
package/src/streaming-markdown.js +43 -0
package/src/vite-plugin.d.ts +46 -0
package/src/vite-plugin.js +221 -0
package/wasm/package.json +16 -0
package/wasm/wasm_api.d.ts +72 -0
package/wasm/wasm_api.js +593 -0
package/wasm/wasm_api_bg.wasm +0 -0
package/wasm/wasm_api_bg.wasm.d.ts +10 -0

package/generated/styles.js ADDED Viewed

@@ -0,0 +1,2845 @@
+// Auto-generated by scripts/inline-css.mjs — DO NOT EDIT
+// Embedded CSS for zero-config initialization (no fetch required).
+//
+// TOKENS_CSS:        Full design tokens for document <head> (vars, fonts, themes).
+// TOKENS_SHADOW_CSS: Shadow DOM subset (animations, motion, component rules).
+//                    CSS vars inherit from <head> — no runtime filtering needed.
+// UTILITIES_CSS:     Tailwind utility classes for Shadow DOM adopted stylesheets.
+export const TOKENS_CSS = `/* ═══════════════════════════════════════════
+   DESIGN TOKENS — Auto-generated from Rust
+   Do NOT edit manually. Change the Rust enums.
+   ═══════════════════════════════════════════ */
+/* ─── Typography ─── */
+/* Variable font: Inter (body) */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: local('Inter'), url('https://rsms.me/inter/font-files/InterVariable.woff2') format('woff2');
+}
+/* Display font: Instrument Serif (headings) */
+@font-face {
+  font-family: 'Instrument Serif';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Instrument Serif'), url('https://fonts.gstatic.com/s/instrumentserif/v4/jizBRFtNs2ka5fCjGE3QLi2Iqb-kz0WB.woff2') format('woff2');
+}
+/* Mono font: JetBrains Mono (code) */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 100 800;
+  font-display: swap;
+  src: local('JetBrains Mono'), url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@2.304/fonts/variable/JetBrainsMono[wght].woff2') format('woff2');
+}
+/* ─── Animatable Custom Properties ─── */
+/* Disabled: @property + oklch causes override issues in some browsers. */
+/* ─── Light Theme (default) ─── */
+:root, :host {
+  --color-bg: oklch(0.955 0.005 90.0);
+  --color-surface: oklch(1.000 0.000 0.0);
+  --color-surface-raised: oklch(1.000 0.000 0.0);
+  --color-surface-overlay: oklch(1.000 0.000 0.0);
+  --color-text: oklch(0.270 0.003 90.0);
+  --color-text-secondary: oklch(0.420 0.003 90.0);
+  --color-text-muted: oklch(0.570 0.003 90.0);
+  --color-text-inverse: oklch(0.955 0.005 90.0);
+  --color-primary: oklch(0.355 0.003 90.0);
+  --color-primary-hover: oklch(0.300 0.003 90.0);
+  --color-primary-active: oklch(0.260 0.003 90.0);
+  --color-secondary: oklch(0.930 0.004 90.0);
+  --color-secondary-hover: oklch(0.900 0.004 90.0);
+  --color-destructive: oklch(0.535 0.095 25.0);
+  --color-destructive-hover: oklch(0.485 0.095 25.0);
+  --color-success: oklch(0.535 0.075 145.0);
+  --color-warning: oklch(0.650 0.100 75.0);
+  --color-error: oklch(0.535 0.095 25.0);
+  --color-info: oklch(0.555 0.080 250.0);
+  --color-border: oklch(0.870 0.003 90.0);
+  --color-border-focus: oklch(0.355 0.003 90.0);
+  --color-ring: oklch(0.355 0.003 90.0 / 0.50);
+  --color-overlay: oklch(0.000 0.000 0.0 / 0.50);
+  --color-scrim: oklch(1.000 0.000 0.0 / 0.80);
+  --color-inverse-surface: oklch(0.270 0.003 90.0);
+  --color-inverse-text: oklch(0.930 0.003 90.0);
+}
+html[data-theme="light"], :host([data-theme="light"]) {
+  --color-bg: oklch(0.955 0.005 90.0);
+  --color-surface: oklch(1.000 0.000 0.0);
+  --color-surface-raised: oklch(1.000 0.000 0.0);
+  --color-surface-overlay: oklch(1.000 0.000 0.0);
+  --color-text: oklch(0.270 0.003 90.0);
+  --color-text-secondary: oklch(0.420 0.003 90.0);
+  --color-text-muted: oklch(0.570 0.003 90.0);
+  --color-text-inverse: oklch(0.955 0.005 90.0);
+  --color-primary: oklch(0.355 0.003 90.0);
+  --color-primary-hover: oklch(0.300 0.003 90.0);
+  --color-primary-active: oklch(0.260 0.003 90.0);
+  --color-secondary: oklch(0.930 0.004 90.0);
+  --color-secondary-hover: oklch(0.900 0.004 90.0);
+  --color-destructive: oklch(0.535 0.095 25.0);
+  --color-destructive-hover: oklch(0.485 0.095 25.0);
+  --color-success: oklch(0.535 0.075 145.0);
+  --color-warning: oklch(0.650 0.100 75.0);
+  --color-error: oklch(0.535 0.095 25.0);
+  --color-info: oklch(0.555 0.080 250.0);
+  --color-border: oklch(0.870 0.003 90.0);
+  --color-border-focus: oklch(0.355 0.003 90.0);
+  --color-ring: oklch(0.355 0.003 90.0 / 0.50);
+  --color-overlay: oklch(0.000 0.000 0.0 / 0.50);
+  --color-scrim: oklch(1.000 0.000 0.0 / 0.80);
+  --color-inverse-surface: oklch(0.270 0.003 90.0);
+  --color-inverse-text: oklch(0.930 0.003 90.0);
+}
+/* ─── Dark Theme ─── */
+@media (prefers-color-scheme: dark) {
+  :root, :host {
+    --color-bg: oklch(0.185 0.000 0.0);
+    --color-surface: oklch(0.050 0.000 0.0);
+    --color-surface-raised: oklch(0.225 0.000 0.0);
+    --color-surface-overlay: oklch(0.260 0.000 0.0);
+    --color-text: oklch(0.870 0.000 0.0);
+    --color-text-secondary: oklch(0.680 0.000 0.0);
+    --color-text-muted: oklch(0.520 0.000 0.0);
+    --color-text-inverse: oklch(0.955 0.000 0.0);
+    --color-primary: oklch(0.500 0.000 0.0);
+    --color-primary-hover: oklch(0.545 0.000 0.0);
+    --color-primary-active: oklch(0.580 0.000 0.0);
+    --color-secondary: oklch(0.230 0.000 0.0);
+    --color-secondary-hover: oklch(0.270 0.000 0.0);
+    --color-destructive: oklch(0.580 0.095 25.0);
+    --color-destructive-hover: oklch(0.620 0.095 25.0);
+    --color-success: oklch(0.580 0.075 145.0);
+    --color-warning: oklch(0.690 0.100 75.0);
+    --color-error: oklch(0.580 0.095 25.0);
+    --color-info: oklch(0.600 0.080 250.0);
+    --color-border: oklch(0.300 0.000 0.0);
+    --color-border-focus: oklch(0.500 0.000 0.0);
+    --color-ring: oklch(0.500 0.000 0.0 / 0.50);
+    --color-overlay: oklch(0.000 0.000 0.0 / 0.70);
+    --color-scrim: oklch(0.185 0.000 0.0 / 0.90);
+    --color-inverse-surface: oklch(0.870 0.000 0.0);
+    --color-inverse-text: oklch(0.230 0.000 0.0);
+  }
+}
+html[data-theme="dark"], :host([data-theme="dark"]) {
+  --color-bg: oklch(0.185 0.000 0.0);
+  --color-surface: oklch(0.050 0.000 0.0);
+  --color-surface-raised: oklch(0.225 0.000 0.0);
+  --color-surface-overlay: oklch(0.260 0.000 0.0);
+  --color-text: oklch(0.870 0.000 0.0);
+  --color-text-secondary: oklch(0.680 0.000 0.0);
+  --color-text-muted: oklch(0.520 0.000 0.0);
+  --color-text-inverse: oklch(0.955 0.000 0.0);
+  --color-primary: oklch(0.500 0.000 0.0);
+  --color-primary-hover: oklch(0.545 0.000 0.0);
+  --color-primary-active: oklch(0.580 0.000 0.0);
+  --color-secondary: oklch(0.230 0.000 0.0);
+  --color-secondary-hover: oklch(0.270 0.000 0.0);
+  --color-destructive: oklch(0.580 0.095 25.0);
+  --color-destructive-hover: oklch(0.620 0.095 25.0);
+  --color-success: oklch(0.580 0.075 145.0);
+  --color-warning: oklch(0.690 0.100 75.0);
+  --color-error: oklch(0.580 0.095 25.0);
+  --color-info: oklch(0.600 0.080 250.0);
+  --color-border: oklch(0.300 0.000 0.0);
+  --color-border-focus: oklch(0.500 0.000 0.0);
+  --color-ring: oklch(0.500 0.000 0.0 / 0.50);
+  --color-overlay: oklch(0.000 0.000 0.0 / 0.70);
+  --color-scrim: oklch(0.185 0.000 0.0 / 0.90);
+  --color-inverse-surface: oklch(0.870 0.000 0.0);
+  --color-inverse-text: oklch(0.230 0.000 0.0);
+}
+/* ─── Spacing Scale (4px base grid) ─── */
+:root, :host {
+  --space-0: 0;
+  --space-px: 1px;
+  --space-0-5: 0.125rem;
+  --space-1: 0.25rem;
+  --space-1-5: 0.375rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  --space-20: 5rem;
+  --space-24: 6rem;
+}
+/* ─── Border Radius ─── */
+:root, :host {
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-full: 9999px;
+}
+/* ─── Elevation (Shadows) ─── */
+:root, :host {
+  --shadow-none: none;
+  --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.07), 0 2px 4px -2px oklch(0 0 0 / 0.05);
+  --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.08), 0 4px 6px -4px oklch(0 0 0 / 0.04);
+  --shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.10), 0 8px 10px -6px oklch(0 0 0 / 0.05);
+}
+/* ─── Typography ─── */
+:root, :host {
+  --font-sans: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
+  --font-display: 'Instrument Serif', 'Georgia', serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+}
+/* ─── Motion Durations ─── */
+:root, :host {
+  --duration-instant: 0ms;
+  --duration-fastest: 50ms;
+  --duration-fast: 100ms;
+  --duration-normal: 200ms;
+  --duration-smooth: 300ms;
+  --duration-slow: 500ms;
+  --duration-slowest: 700ms;
+}
+/* ─── Easing Curves ─── */
+:root, :host {
+  --ease-linear: linear;
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-bounce: cubic-bezier(0.34, 1.8, 0.64, 1);
+  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
+}
+/* ─── Keyframe Animations ─── */
+@keyframes fade-in { from { opacity: 0; }to { opacity: 1; } }
+@keyframes fade-out { from { opacity: 1; }to { opacity: 0; } }
+@keyframes slide-in-up { from { opacity: 0; transform: translateY(8px); }to { opacity: 1; transform: translateY(0); } }
+@keyframes slide-in-down { from { opacity: 0; transform: translateY(-8px); }to { opacity: 1; transform: translateY(0); } }
+@keyframes slide-in-left { from { opacity: 0; transform: translateX(-8px); }to { opacity: 1; transform: translateX(0); } }
+@keyframes slide-in-right { from { opacity: 0; transform: translateX(8px); }to { opacity: 1; transform: translateX(0); } }
+@keyframes scale-in { from { opacity: 0; transform: scale(0.95); }to { opacity: 1; transform: scale(1); } }
+@keyframes scale-out { from { opacity: 1; transform: scale(1); }to { opacity: 0; transform: scale(0.95); } }
+@keyframes slide-out-up { from { opacity: 1; transform: translateY(0); }to { opacity: 0; transform: translateY(-8px); } }
+@keyframes slide-out-down { from { opacity: 1; transform: translateY(0); }to { opacity: 0; transform: translateY(8px); } }
+@keyframes expand-height { from { opacity: 0; max-height: 0; overflow: hidden; }to { opacity: 1; max-height: var(--expand-to, 500px); overflow: hidden; } }
+@keyframes collapse-height { from { opacity: 1; max-height: var(--expand-to, 500px); overflow: hidden; }to { opacity: 0; max-height: 0; overflow: hidden; } }
+@keyframes spin { from { transform: rotate(0deg); }to { transform: rotate(360deg); } }
+@keyframes pulse { 0%, 100% { opacity: 1; }50% { opacity: 0.5; } }
+@keyframes bounce { 0%, 100% { transform: translateY(0); }50% { transform: translateY(-4px); } }
+/* ─── Interactive Utilities ─── */
+/* CSS-only press ripple — add class="ripple" to any interactive element.
+   Uses ::after pseudo-element with radial-gradient.
+   The ripple color inherits from currentColor (adapts to theme). */
+.ripple {
+  position: relative;
+  overflow: hidden;
+}
+.ripple::after {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  background-image: radial-gradient(circle, currentColor 10%, transparent 10.01%);
+  background-repeat: no-repeat;
+  background-position: 50%;
+  transform: scale(10, 10);
+  opacity: 0;
+  transition: transform 0.3s, opacity 0.5s;
+}
+.ripple:active::after {
+  transform: scale(0, 0);
+  opacity: 0.1;
+  transition: 0s;
+}
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-instant: 0ms;
+    --duration-fastest: 0.01ms;
+    --duration-fast: 0.01ms;
+    --duration-normal: 0.01ms;
+    --duration-smooth: 0.01ms;
+    --duration-slow: 0.01ms;
+    --duration-slowest: 0.01ms;
+    --ease-spring: linear;
+    --ease-bounce: linear;
+    --ease-snappy: linear;
+  }
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+  }
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation-duration: 0.01ms !important;
+  }
+}
+/* ─── Floating Positioning ─── */
+/* Loader.js manages position: fixed, coordinates, and data-open attribute.
+   These rules handle visibility, animation, and reduced-motion. */
+[data-floating] {
+  pointer-events: none;
+  opacity: 0;
+}
+[data-floating][data-open] {
+  pointer-events: auto;
+  opacity: 1;
+}
+[data-floating][data-open][data-placement="bottom"] {
+  animation: float-in-bottom var(--duration-smooth) var(--ease-spring) forwards;
+}
+[data-floating][data-open][data-placement="top"] {
+  animation: float-in-top var(--duration-smooth) var(--ease-spring) forwards;
+}
+@keyframes float-in-bottom {
+  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes float-in-top {
+  from { opacity: 0; transform: translateY(4px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+[data-floating][data-open][data-placement="left"] {
+  animation: float-in-left var(--duration-smooth) var(--ease-spring) forwards;
+}
+[data-floating][data-open][data-placement="right"] {
+  animation: float-in-right var(--duration-smooth) var(--ease-spring) forwards;
+}
+@keyframes float-in-left {
+  from { opacity: 0; transform: translateX(4px) scale(0.98); }
+  to { opacity: 1; transform: translateX(0) scale(1); }
+}
+@keyframes float-in-right {
+  from { opacity: 0; transform: translateX(-4px) scale(0.98); }
+  to { opacity: 1; transform: translateX(0) scale(1); }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-floating][data-open] {
+    animation: none;
+  }
+}
+/* Chevron rotation — spring easing for satisfying overshoot */
+[data-floating-trigger] .transition-transform {
+  transition: transform var(--duration-smooth) var(--ease-spring);
+}
+[aria-expanded="true"] .transition-transform {
+  transform: rotate(180deg);
+}
+/* Opt-out: elements inside [data-no-rotate] keep their original transform */
+[data-no-rotate] .transition-transform {
+  transform: none !important;
+}
+/* ─── Component Motion ─── */
+/* Spring scale for checkbox/radio indicators on state change.
+   Background fills first (100ms EaseOut via transition-colors),
+   then the check/dot springs in (300ms Spring with overshoot). */
+input.peer + [aria-hidden="true"] > svg {
+  transform: scale(0);
+  transition: transform var(--duration-smooth) var(--ease-spring);
+}
+input.peer:checked + [aria-hidden="true"] > svg {
+  transform: scale(1);
+}
+/* Indeterminate checkbox — show dash at full scale */
+[data-state="indeterminate"] > svg {
+  transform: scale(1);
+}
+/* Switch thumb — spring slide on toggle.
+   The thumb translateX is set via inline classes; this rule
+   adds spring easing so the slide overshoots slightly. */
+button[role="switch"] > span[aria-hidden="true"] {
+  transition: transform var(--duration-smooth) var(--ease-spring);
+}
+/* Switch track — smooth color transition (EaseOut, not Spring).
+   Spring on color looks wrong; EaseOut gives a clean fill. */
+button[role="switch"] {
+  transition: background-color var(--duration-fast) var(--ease-out),
+              border-color var(--duration-fast) var(--ease-out);
+}
+/* Tooltip — spring entrance + smooth exit via CSS group-hover/focus-within.
+   Opacity fades fast (EaseOut, no overshoot), translate/scale spring with
+   satisfying overshoot. Individual transform properties (not shorthand)
+   match Tailwind v4's output for correct transition targeting. */
+.group\\/tooltip [role="tooltip"] {
+  transition: opacity var(--duration-fast) var(--ease-out),
+              visibility var(--duration-fast) var(--ease-out),
+              translate var(--duration-smooth) var(--ease-spring),
+              scale var(--duration-smooth) var(--ease-spring);
+}
+/* Shared floating tooltip — JS-enhanced, slides between triggers.
+   Positioned via CSS custom properties (--tt-x, --tt-y) set by
+   tooltip.js. Spring-eased translate creates fluid movement when
+   the tooltip slides between adjacent triggers. */
+[data-tooltip-floating] {
+  position: fixed;
+  inset: 0 auto auto 0;
+  translate: var(--tt-x, 0) var(--tt-y, 0);
+  scale: 0.96;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 50;
+  max-width: min(300px, 90vw);
+  white-space: normal;
+  word-wrap: break-word;
+  transition: translate var(--duration-smooth) var(--ease-spring),
+              scale var(--duration-fast) var(--ease-spring),
+              opacity var(--duration-fast) var(--ease-out);
+}
+[data-tooltip-floating][data-open] {
+  scale: 1;
+  opacity: 1;
+  pointer-events: auto;
+}
+/* Progressive enhancement: per-trigger tooltips become sr-only
+   when the behavior module activates the shared floating tooltip.
+   aria-describedby still references these elements for screen readers. */
+[data-tooltip-enhanced] [data-tooltip-wrapper] [role="tooltip"] {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+/* Arrow positioning by data-placement — the rotated square
+   tracks the trigger center via --tt-arrow-x / --tt-arrow-y. */
+[data-tooltip-floating] [data-tooltip-arrow-el] {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+  transform: rotate(45deg);
+}
+[data-tooltip-floating][data-placement="top"] [data-tooltip-arrow-el] {
+  bottom: -4px;
+  left: var(--tt-arrow-x, 50%);
+  transform: translateX(-50%) rotate(45deg);
+}
+[data-tooltip-floating][data-placement="bottom"] [data-tooltip-arrow-el] {
+  top: -4px;
+  left: var(--tt-arrow-x, 50%);
+  transform: translateX(-50%) rotate(45deg);
+}
+[data-tooltip-floating][data-placement="left"] [data-tooltip-arrow-el] {
+  right: -4px;
+  top: var(--tt-arrow-y, 50%);
+  transform: translateY(-50%) rotate(45deg);
+}
+[data-tooltip-floating][data-placement="right"] [data-tooltip-arrow-el] {
+  left: -4px;
+  top: var(--tt-arrow-y, 50%);
+  transform: translateY(-50%) rotate(45deg);
+}
+/* Tabs — active tab text color transition (indicator handles visual sweep) */
+[data-tabs] [role="tab"] {
+  transition: color var(--duration-fast) var(--ease-out),
+              background-color var(--duration-fast) var(--ease-out);
+}
+/* Tabs — hover/active only on non-selected tabs. Selected tabs are styled
+   by the sliding indicator — hover bg would paint over it (z-10 button). */
+[data-tabs] [role="tab"]:not([aria-selected="true"]):hover {
+  color: var(--color-text);
+  background-color: var(--color-secondary);
+}
+[data-tabs] [role="tab"]:not([aria-selected="true"]):active {
+  background-color: var(--color-secondary-hover);
+}
+/* Tabs — sliding indicator sweep (Spring easing for satisfying overshoot).
+   Uses --duration-slow (500ms) because Spring's fast attack makes shorter
+   durations feel instant — 500ms gives ~300ms of visible motion.
+   [data-ready] prevents transition on initial page load. */
+[data-tab-indicator][data-ready] {
+  transition: left var(--duration-slow) var(--ease-spring),
+              top var(--duration-slow) var(--ease-spring),
+              width var(--duration-slow) var(--ease-spring),
+              height var(--duration-slow) var(--ease-spring);
+}
+/* Dialog/Drawer ::backdrop — transparent in production.
+   Visual backdrop is a JS-created overlay <div> animated via Web Animations API.
+   See dialog.js and drawer.js for the overlay implementation. */
+dialog[data-dialog]::backdrop {
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+/* Dialog/Drawer panel animations are handled by Web Animations API in
+   dialog.js and drawer.js. CSS @keyframes removed from this stylesheet
+   to prevent double animation — CSS and JS both fire on [data-open] /
+   [data-closing] attrs. SSR gallery keeps its own copy in gallery.rs. */
+/* Accordion — panel height transition (grid-template-rows: 0fr -> 1fr).
+   Spring easing gives a satisfying overshoot on expand. */
+[data-accordion-panel] {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--duration-smooth) var(--ease-spring);
+}
+/* Accordion — chevron rotation (Spring overshoot past 180 then settles) */
+[data-accordion-trigger] [data-accordion-chevron] {
+  transition: transform var(--duration-normal) var(--ease-spring);
+}
+[data-accordion-trigger][aria-expanded="true"] [data-accordion-chevron] {
+  transform: rotate(180deg);
+}
+/* Accordion — trigger text/bg color transitions */
+[data-accordion-trigger] {
+  transition: color var(--duration-fast) var(--ease-out),
+              background-color var(--duration-fast) var(--ease-out);
+}
+/* Accordion — trigger hover/active */
+[data-accordion-trigger]:not([disabled]):hover {
+  background-color: var(--color-secondary);
+}
+[data-accordion-trigger]:not([disabled]):active {
+  background-color: var(--color-secondary-hover);
+}
+/* Popover — absolute positioning within relative trigger wrapper.
+   Horizontal alignment via data-floating-align on the trigger,
+   reflected onto the panel by loader.js via data-align. */
+[data-popover] {
+  position: absolute;
+  z-index: 30;
+}
+[data-popover][data-align="start"] {
+  left: 0;
+  right: auto;
+}
+[data-popover][data-align="center"] {
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
+}
+[data-popover][data-align="end"] {
+  right: 0;
+  left: auto;
+}
+/* Popover — arrow positioning based on runtime data-placement.
+   Arrow is a rotated square that inherits panel bg, positioned to
+   point toward the trigger. Uses border on two sides for continuity
+   with panel border. */
+[data-popover] [data-popover-arrow] {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+  border-color: var(--color-border);
+}
+[data-popover][data-placement="bottom"] [data-popover-arrow] {
+  top: -0.25rem;
+  border-top-width: 1px;
+  border-left-width: 1px;
+}
+[data-popover][data-placement="top"] [data-popover-arrow] {
+  bottom: -0.25rem;
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+}
+/* Menu — absolute positioning within relative trigger wrapper.
+   Like popover, menus use a relative parent and absolute panel.
+   Always left-aligned (start alignment). */
+[data-menu] {
+  position: absolute;
+  z-index: 30;
+  left: 0;
+  right: auto;
+}
+/* Drawer top — also handled by Web Animations API in drawer.js.
+   CSS @keyframes removed (see comment above dialog/drawer section). */
+/* Toast entrance — slide + scale + fade, snappy easing (matches Drawer).
+   The behavior module (toast.js) drives [data-open]/[data-closing] attrs. */
+[data-toast][data-open][data-position^="top"] {
+  animation: toast-in-top 350ms var(--ease-snappy) forwards;
+}
+[data-toast][data-open][data-position^="bottom"] {
+  animation: toast-in-bottom 350ms var(--ease-snappy) forwards;
+}
+/* Toast exit — slide + fade out, ease-out for smooth departure */
+[data-toast][data-closing][data-position^="top"] {
+  animation: toast-out-top 250ms var(--ease-out) forwards;
+}
+[data-toast][data-closing][data-position^="bottom"] {
+  animation: toast-out-bottom 250ms var(--ease-out) forwards;
+}
+/* Toast progress bar — auto-dismiss countdown indicator */
+[data-toast] [data-toast-progress] {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background: currentColor;
+  opacity: 0.25;
+  border-radius: inherit;
+  transform-origin: left;
+  transition: none;
+}
+/* Pause progress when hovered */
+[data-toast]:hover [data-toast-progress] {
+  animation-play-state: paused !important;
+}
+@keyframes toast-in-top {
+  from { opacity: 0; transform: translateY(-1rem) scale(0.95); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes toast-in-bottom {
+  from { opacity: 0; transform: translateY(1rem) scale(0.95); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes toast-out-top {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to   { opacity: 0; transform: translateY(-1rem) scale(0.95); }
+}
+@keyframes toast-out-bottom {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to   { opacity: 0; transform: translateY(1rem) scale(0.95); }
+}
+@keyframes toast-progress {
+  from { transform: scaleX(1); }
+  to   { transform: scaleX(0); }
+}
+/* Spinner square variant — tumbling cube with 3D perspective rotation.
+   Uses ease-in-out (not Spring) for smooth infinite looping. */
+.animate-spin-square {
+  animation: spin-square 1.8s ease-in-out infinite;
+}
+@keyframes spin-square {
+  0%   { transform: perspective(120px) rotateX(0)      rotateY(0);      }
+  25%  { transform: perspective(120px) rotateX(180deg)  rotateY(0);      }
+  50%  { transform: perspective(120px) rotateX(180deg)  rotateY(180deg); }
+  75%  { transform: perspective(120px) rotateX(360deg)  rotateY(180deg); }
+  100% { transform: perspective(120px) rotateX(360deg)  rotateY(360deg); }
+}
+/* Skeleton wave — gradient shimmer sweep (premium loading effect).
+   Uses ::after pseudo-element with a translating gradient.
+   The highlight color is the surface background, creating a natural
+   shimmer against the skeleton fill (ColorRole::Border). */
+.animate-skeleton-wave {
+  position: relative;
+  overflow: hidden;
+}
+.animate-skeleton-wave::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, var(--color-surface), transparent);
+  animation: skeleton-wave 2s linear infinite;
+}
+@keyframes skeleton-wave {
+  0% { transform: translateX(-100%); }
+  60%, 100% { transform: translateX(100%); }
+}
+/* Progress bar — indeterminate sliding animation.
+   Slides a 40%-width fill bar back and forth within the track.
+   Uses ease-in-out (not Spring) for smooth infinite looping. */
+.animate-progress-indeterminate {
+  animation: progress-indeterminate 1.5s ease-in-out infinite;
+}
+@keyframes progress-indeterminate {
+  0% { transform: translateX(-100%); }
+  50% { transform: translateX(150%); }
+  100% { transform: translateX(-100%); }
+}
+/* Sidebar — width transition with Spring easing */
+[data-sidebar] {
+  transition: width var(--duration-smooth) var(--ease-spring);
+}
+/* Narrow mode: hide text labels, badges, sub-group labels */
+[data-sidebar][data-sidebar-state="narrow"] [data-sidebar-item-label],
+[data-sidebar][data-sidebar-state="narrow"] [data-sidebar-badge],
+[data-sidebar][data-sidebar-state="narrow"] [data-sidebar-group-label] {
+  display: none;
+}
+/* Collapsible group panel: grid-template-rows animation (same as Accordion) */
+[data-sidebar-group-panel] {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--duration-normal) var(--ease-spring);
+}
+[data-sidebar-group-panel][data-collapsed] {
+  grid-template-rows: 0fr;
+}
+[data-sidebar-group-panel] > * {
+  overflow: hidden;
+}
+/* Chevron rotation for collapsible sidebar groups */
+[data-sidebar-group-trigger] [data-chevron] {
+  transition: transform var(--duration-normal) var(--ease-spring);
+}
+[data-sidebar-group-trigger][aria-expanded="false"] [data-chevron] {
+  transform: rotate(-90deg);
+}
+/* Narrow mode: center items as comfortable square targets */
+[data-sidebar][data-sidebar-state="narrow"] [data-sidebar-item],
+[data-sidebar][data-sidebar-state="narrow"] [data-sidebar-group-trigger] {
+  justify-content: center;
+  gap: 0;
+  padding: 0.5rem;
+}
+/* Narrow mode: center items within the rail */
+[data-sidebar][data-sidebar-state="narrow"] ul {
+  padding-inline: 0.25rem;
+  align-items: center;
+}
+/* Narrow mode: center header, reduce padding */
+[data-sidebar][data-sidebar-state="narrow"] [data-sidebar-header] {
+  justify-content: center;
+  padding-inline: 0.5rem;
+}
+/* Narrow mode: reduce footer padding */
+[data-sidebar][data-sidebar-state="narrow"] [data-sidebar-footer] {
+  padding-inline: 0.5rem;
+}
+/* Narrow mode: hide collapsible panels (unusable without labels) */
+[data-sidebar][data-sidebar-state="narrow"] [data-sidebar-group-panel] {
+  display: none;
+}
+/* Narrow mode: hide chevron indicators */
+[data-sidebar][data-sidebar-state="narrow"] [data-chevron] {
+  display: none;
+}
+/* Sidebar tooltip integration — uses centralized Tooltip component */
+/* Make tooltip wrappers fill sidebar width */
+[data-sidebar] [data-tooltip-wrapper] {
+  display: flex;
+  width: 100%;
+}
+/* Hide tooltip content in expanded mode (labels are visible) */
+[data-sidebar]:not([data-sidebar-state="narrow"]) [data-tooltip-wrapper] [role="tooltip"] {
+  display: none !important;
+}
+/* In narrow mode, allow tooltips to escape overflow */
+[data-sidebar][data-sidebar-state="narrow"] {
+  overflow: visible;
+}
+[data-sidebar][data-sidebar-state="narrow"] nav {
+  overflow: visible;
+}
+/* ─── Pressed State Design Tokens ─── */
+/* Centralized tint + text tokens for pressed/selected states.
+   Reusable by any component needing theme-adaptive pressed highlighting.
+   Light: subtle primary tint + primary text.
+   Dark: stronger tint + full-contrast text (primary has lower luminance than text on dark surfaces). */
+:root, :host {
+  --cx-pressed-tint: 15%;
+  --cx-pressed-text: var(--color-primary);
+}
+html[data-theme="dark"], :host([data-theme="dark"]) {
+  --cx-pressed-tint: 25%;
+  --cx-pressed-text: var(--color-text);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]), :host:not([data-theme]) {
+    --cx-pressed-tint: 25%;
+    --cx-pressed-text: var(--color-text);
+  }
+}
+/* Toggle Group — connected button border overrides.
+   Resets individual button radii using longhand properties to avoid
+   shorthand/longhand cascade interactions. z-index stacking for hover/focus/pressed.
+   overflow:hidden on edge buttons ensures hover bg clips to the rounded shape. */
+[data-toggle-group] > button {
+  border-top-left-radius: 0; border-top-right-radius: 0;
+  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
+  position: relative;
+}
+[data-toggle-group] > button:hover,
+[data-toggle-group] > button:focus-visible { z-index: 1; }
+[data-toggle-group] > button[data-pressed="true"] { z-index: 2; }
+/* Toggle Group horizontal — border collapse + first/last radius.
+   Uses first-of-type/last-of-type (not first-child/last-child) because the
+   sliding indicator <span> is the first child in single-select mode.
+   No overflow:hidden — backgrounds clip to border-radius natively, and
+   overflow:hidden on edge buttons clips the sliding indicator behind them. */
+[data-toggle-group][aria-orientation="horizontal"] > button + button { margin-left: -1px; }
+[data-toggle-group][aria-orientation="horizontal"][data-shape="rounded"] > button:first-of-type {
+  border-top-left-radius: var(--radius-lg, 0.5rem); border-bottom-left-radius: var(--radius-lg, 0.5rem); }
+[data-toggle-group][aria-orientation="horizontal"][data-shape="rounded"] > button:last-of-type {
+  border-top-right-radius: var(--radius-lg, 0.5rem); border-bottom-right-radius: var(--radius-lg, 0.5rem); }
+[data-toggle-group][aria-orientation="horizontal"][data-shape="pill"] > button:first-of-type {
+  border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; }
+[data-toggle-group][aria-orientation="horizontal"][data-shape="pill"] > button:last-of-type {
+  border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; }
+/* Toggle Group vertical — border collapse + first/last radius */
+[data-toggle-group][aria-orientation="vertical"] { flex-direction: column; }
+[data-toggle-group][aria-orientation="vertical"] > button + button { margin-top: -1px; }
+[data-toggle-group][aria-orientation="vertical"][data-shape="rounded"] > button:first-of-type {
+  border-top-left-radius: var(--radius-lg, 0.5rem); border-top-right-radius: var(--radius-lg, 0.5rem); }
+[data-toggle-group][aria-orientation="vertical"][data-shape="rounded"] > button:last-of-type {
+  border-bottom-left-radius: var(--radius-lg, 0.5rem); border-bottom-right-radius: var(--radius-lg, 0.5rem); }
+[data-toggle-group][aria-orientation="vertical"][data-shape="pill"] > button:first-of-type {
+  border-top-left-radius: 9999px; border-top-right-radius: 9999px; }
+[data-toggle-group][aria-orientation="vertical"][data-shape="pill"] > button:last-of-type {
+  border-bottom-left-radius: 9999px; border-bottom-right-radius: 9999px; }
+/* Toggle Group — pressed button text color.
+   !important overrides inline style="color:..." set by Button's StyleBundle.
+   Uses centralized --cx-pressed-text: primary in light, full-contrast text in dark.
+   Filled: inverse text stays bright on the indicator bg. */
+[data-toggle-group] > button[data-pressed="true"] {
+  color: var(--cx-pressed-text) !important;
+  font-weight: 600 !important;
+}
+[data-toggle-group][data-variant="filled"] > button[data-pressed="true"] {
+  color: var(--color-inverse-text) !important;
+  font-weight: 600 !important;
+}
+/* Toggle Group — Filled variant: dim unpressed buttons so pressed stands out.
+   Creates clear visual hierarchy: pressed = full brightness, unpressed = dimmed.
+   Works in both light and dark modes. */
+[data-toggle-group][data-variant="filled"] > button:not([data-pressed="true"]):not([disabled]) {
+  opacity: 0.7;
+}
+/* Toggle Group — in single mode, indicator provides the bg highlight.
+   Suppress button's own pressed bg AND hover bg to avoid double-paint.
+   !important overrides inline style="background-color:..." from Button. */
+[data-toggle-group][data-toggle-mode="single"] > button[data-pressed="true"] {
+  background-color: transparent !important;
+}
+[data-toggle-group][data-toggle-mode="single"] > button[data-pressed="true"]:hover {
+  background-color: transparent !important;
+}
+/* Toggle Group — in multi mode, per-button pressed bg highlight.
+   !important overrides Button's inline style="background-color:...".
+   Uses centralized --cx-pressed-tint for theme-adaptive visibility.
+   Outline/Ghost: tinted primary bg. Filled: full primary shade. */
+[data-toggle-group][data-toggle-mode="multiple"] > button[data-pressed="true"] {
+  background-color: color-mix(in oklch, var(--color-primary) var(--cx-pressed-tint, 15%), transparent) !important;
+}
+[data-toggle-group][data-variant="filled"][data-toggle-mode="multiple"] > button[data-pressed="true"] {
+  background-color: var(--color-primary) !important;
+  opacity: 1 !important;
+}
+/* Toggle Group — Filled hover: brightness tuned per theme.
+   Light mode: dark surfaces need strong 1.65 boost to show hover.
+   Dark mode: lighter surfaces only need subtle 1.25.
+   Uses html[data-theme] (specificity 0,0,1,1) which beats base rules
+   and works regardless of OS prefers-color-scheme. */
+[data-toggle-group][data-variant="filled"] > button:not([data-pressed="true"]):not([disabled]):hover {
+  filter: brightness(1.65);
+  opacity: 0.9;
+}
+[data-toggle-group][data-variant="filled"]:has(> button[data-pressed="true"]:hover) > [data-toggle-indicator] {
+  filter: brightness(1.65);
+}
+html[data-theme="dark"] [data-toggle-group][data-variant="filled"] > button:not([data-pressed="true"]):not([disabled]):hover,
+:host([data-theme="dark"]) [data-toggle-group][data-variant="filled"] > button:not([data-pressed="true"]):not([disabled]):hover {
+  filter: brightness(1.25);
+  opacity: 0.9;
+}
+html[data-theme="dark"] [data-toggle-group][data-variant="filled"]:has(> button[data-pressed="true"]:hover) > [data-toggle-indicator],
+:host([data-theme="dark"]) [data-toggle-group][data-variant="filled"]:has(> button[data-pressed="true"]:hover) > [data-toggle-indicator] {
+  filter: brightness(1.25);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) [data-toggle-group][data-variant="filled"] > button:not([data-pressed="true"]):not([disabled]):hover,
+  :host:not([data-theme]) [data-toggle-group][data-variant="filled"] > button:not([data-pressed="true"]):not([disabled]):hover {
+    filter: brightness(1.25);
+    opacity: 0.9;
+  }
+  :root:not([data-theme]) [data-toggle-group][data-variant="filled"]:has(> button[data-pressed="true"]:hover) > [data-toggle-indicator],
+  :host:not([data-theme]) [data-toggle-group][data-variant="filled"]:has(> button[data-pressed="true"]:hover) > [data-toggle-indicator] {
+    filter: brightness(1.25);
+  }
+}
+[data-toggle-indicator] {
+  transition: filter var(--duration-fast) var(--ease-out);
+}
+/* Toggle Group — sliding indicator sweep (Spring easing, same as Tabs).
+   Uses --duration-slow (500ms) because Spring's fast attack makes shorter
+   durations feel instant — 500ms gives ~300ms of visible motion.
+   [data-ready] prevents transition on initial page load.
+   border-radius transitions to match the pressed button's computed radius. */
+[data-toggle-indicator][data-ready] {
+  transition: left var(--duration-slow) var(--ease-spring),
+              top var(--duration-slow) var(--ease-spring),
+              width var(--duration-slow) var(--ease-spring),
+              height var(--duration-slow) var(--ease-spring),
+              border-radius var(--duration-slow) var(--ease-spring),
+              opacity var(--duration-fast) var(--ease-out);
+}
+/* Collapsible — panel height transition (grid-template-rows: 0fr -> 1fr).
+   Same animation technique as Accordion. Spring easing gives satisfying overshoot. */
+[data-collapsible-panel] {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--duration-smooth) var(--ease-spring);
+}
+[data-collapsible-panel][data-collapsed] {
+  grid-template-rows: 0fr;
+}
+[data-collapsible-panel] > * {
+  overflow: hidden;
+}
+/* Collapsible — chevron rotation (Spring easing, -90deg -> 0deg on expand) */
+[data-collapsible-trigger] [data-chevron] {
+  transition: transform var(--duration-normal) var(--ease-spring);
+}
+[data-collapsible-trigger][aria-expanded="false"] [data-chevron] {
+  transform: rotate(-90deg);
+}
+/* Collapsible — trigger text/bg color transitions */
+[data-collapsible-trigger] {
+  transition: color var(--duration-fast) var(--ease-out),
+              background-color var(--duration-fast) var(--ease-out);
+}
+/* Collapsible — trigger hover/active */
+[data-collapsible-trigger]:not([disabled]):hover {
+  background-color: var(--color-secondary);
+}
+[data-collapsible-trigger]:not([disabled]):active {
+  background-color: var(--color-secondary-hover);
+}
+/* Activity/tool expand chevron — hidden by default, revealed on hover.
+   Uses Icon::ChevronRight, rotates 90deg when expanded. */
+[data-collapsible-trigger] [data-expand] {
+  opacity: 0;
+  transition: opacity var(--duration-fast) var(--ease-out),
+              transform var(--duration-normal) var(--ease-spring);
+}
+[data-collapsible-trigger]:hover [data-expand],
+[data-collapsible-trigger][aria-expanded="true"] [data-expand] {
+  opacity: 1;
+}
+[data-collapsible-trigger][aria-expanded="true"] [data-expand] {
+  transform: rotate(90deg);
+}
+/* Thinking — shimmer text sweep animation.
+   A gradient sweeps left-to-right across the text using background-clip: text.
+   Ghost uses text color vars; Filled uses inverse-text color vars. */
+@keyframes cx-shimmer {
+  from { background-position: 200% center; }
+  to { background-position: -200% center; }
+}
+.cx-thinking-ghost {
+  background: linear-gradient(90deg,
+    color-mix(in oklch, var(--color-text) 20%, transparent),
+    var(--color-text),
+    color-mix(in oklch, var(--color-text) 20%, transparent));
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: cx-shimmer var(--cx-thinking-speed, 3.1s) linear infinite;
+}
+.cx-thinking-filled {
+  background: linear-gradient(90deg,
+    color-mix(in oklch, var(--color-inverse-text) 40%, transparent),
+    var(--color-inverse-text),
+    color-mix(in oklch, var(--color-inverse-text) 40%, transparent));
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: cx-shimmer var(--cx-thinking-speed, 3.1s) linear infinite;
+}
+/* SearchBar — hide native browser clear/cancel button on type="search" inputs.
+   We render our own clear button with proper styling and accessibility. */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+  display: none;
+}
+/* SearchBar — one-shot focus shimmer on placeholder text.
+   Dedicated keyframes with a tight sweep range (100% → -100%) so the bright
+   spot crosses the visible text exactly once, left to right. Uses the same
+   background-clip:text technique as Thinking but with a sharper gradient
+   falloff for a cleaner single pass. JS adds the class on focusin and
+   removes it on animationend, with a 10-second cooldown. */
+@keyframes cx-search-shimmer {
+  0% {
+    background-position: 100% center;
+    color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+  90% {
+    background-position: 0% center;
+    color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+  100% {
+    color: var(--color-text-muted);
+    background: none;
+  }
+}
+[data-search-shimmer] .cx-search-shimmer-text {
+  background: linear-gradient(90deg,
+    transparent 0%,
+    transparent 42%,
+    color-mix(in oklch, var(--color-text) 30%, transparent) 46%,
+    var(--color-text) 50%,
+    color-mix(in oklch, var(--color-text) 30%, transparent) 54%,
+    transparent 58%,
+    transparent 100%);
+  background-size: 300% 100%;
+  animation: cx-search-shimmer 2.7s linear 1 forwards;
+}
+/* Message — spring entrance animation for chat messages.
+   Used by MessageBubble (single) and MessageGroup (staggered). */
+@keyframes cx-message-enter {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+.cx-message-enter {
+  animation: cx-message-enter var(--duration-smooth) var(--ease-spring) both;
+}
+/* Staggered entrance for grouped message parts */
+.cx-message-group > [data-connection] {
+  animation: cx-message-enter var(--duration-smooth) var(--ease-spring) both;
+}
+.cx-message-group > :nth-child(1) { animation-delay: 0ms; }
+.cx-message-group > :nth-child(2) { animation-delay: 50ms; }
+.cx-message-group > :nth-child(3) { animation-delay: 100ms; }
+.cx-message-group > :nth-child(4) { animation-delay: 150ms; }
+.cx-message-group > :nth-child(5) { animation-delay: 200ms; }
+.cx-message-group > :nth-child(6) { animation-delay: 250ms; }
+.cx-message-group > :nth-child(7) { animation-delay: 300ms; }
+.cx-message-group > :nth-child(8) { animation-delay: 350ms; }
+.cx-message-group > :nth-child(9) { animation-delay: 400ms; }
+.cx-message-group > :nth-child(10) { animation-delay: 450ms; }
+/* Streaming cursor — blinking caret for streaming markdown content.
+   Appears at the end of the text during token arrival, removed on stream end.
+   Essential loading feedback — retains animation under reduced-motion. */
+.cx-stream-cursor {
+  display: inline-block;
+  width: 2px;
+  height: 1.1em;
+  background: currentColor;
+  vertical-align: text-bottom;
+  margin-left: 1px;
+  animation: cx-cursor-blink 1s step-end infinite;
+}
+@keyframes cx-cursor-blink {
+  50% { opacity: 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  dialog[data-dialog]::backdrop,
+  dialog[data-dialog][data-open] [data-dialog-panel],
+  dialog[data-dialog][data-closing] [data-dialog-panel],
+  dialog[data-dialog][data-closing]::backdrop,
+  [data-toast][data-open],
+  [data-toast][data-closing],
+  .animate-progress-indeterminate {
+    animation: none;
+  }
+  /* Message — disable entrance animation */
+  .cx-message-enter,
+  .cx-message-group > [data-connection],
+  .cx-message-group > * {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+  /* Thinking — stop animation, show static text */
+  .cx-thinking-ghost {
+    animation: none;
+    background: none;
+    -webkit-background-clip: unset;
+    background-clip: unset;
+    color: var(--color-text-muted);
+  }
+  .cx-thinking-filled {
+    animation: none;
+    background: none;
+    -webkit-background-clip: unset;
+    background-clip: unset;
+    color: var(--color-inverse-text);
+  }
+  /* SearchBar — disable shimmer sweep */
+  [data-search-shimmer] .cx-search-shimmer-text {
+    animation: none;
+    background: none;
+    -webkit-background-clip: unset;
+    background-clip: unset;
+    color: var(--color-text-muted);
+  }
+}
+/* ─── Slider Cross-Browser Styling ─── */
+/* Native <input type="range"> with appearance-none requires vendor
+   pseudo-elements for track, thumb, and fill. CSS custom properties
+   set inline by render.rs drive all dimensions and radii. */
+/* WebKit (Chrome, Safari, Edge) — track */
+input[data-slider]::-webkit-slider-runnable-track {
+  height: var(--slider-track-h);
+  border-radius: var(--slider-track-r);
+  background: linear-gradient(
+    to right,
+    var(--slider-fill) calc(var(--slider-percent) * 1%),
+    var(--color-border) calc(var(--slider-percent) * 1%)
+  );
+}
+/* WebKit — thumb */
+input[data-slider]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--slider-thumb-sz);
+  height: var(--slider-thumb-sz);
+  border-radius: var(--slider-thumb-r);
+  background: var(--color-surface);
+  border: 2px solid var(--slider-fill);
+  box-shadow: 0 1px 3px oklch(0 0 0 / 0.15);
+  margin-top: calc((var(--slider-track-h) - var(--slider-thumb-sz)) / 2);
+  cursor: pointer;
+  transition: transform var(--duration-normal) var(--ease-spring),
+              box-shadow var(--duration-fast) var(--ease-out);
+}
+input[data-slider]:hover::-webkit-slider-thumb {
+  transform: scale(1.15);
+  box-shadow: 0 2px 6px oklch(0 0 0 / 0.2);
+}
+input[data-slider]:active::-webkit-slider-thumb {
+  transform: scale(0.95);
+}
+/* Firefox — track (unfilled portion) */
+input[data-slider]::-moz-range-track {
+  height: var(--slider-track-h);
+  border-radius: var(--slider-track-r);
+  background: var(--color-border);
+  border: none;
+}
+/* Firefox — fill (filled portion, native pseudo) */
+input[data-slider]::-moz-range-progress {
+  height: var(--slider-track-h);
+  border-radius: var(--slider-track-r);
+  background: var(--slider-fill);
+}
+/* Firefox — thumb */
+input[data-slider]::-moz-range-thumb {
+  width: var(--slider-thumb-sz);
+  height: var(--slider-thumb-sz);
+  border-radius: var(--slider-thumb-r);
+  background: var(--color-surface);
+  border: 2px solid var(--slider-fill);
+  box-shadow: 0 1px 3px oklch(0 0 0 / 0.15);
+  cursor: pointer;
+  transition: transform var(--duration-normal) var(--ease-spring),
+              box-shadow var(--duration-fast) var(--ease-out);
+}
+input[data-slider]:hover::-moz-range-thumb {
+  transform: scale(1.15);
+  box-shadow: 0 2px 6px oklch(0 0 0 / 0.2);
+}
+input[data-slider]:active::-moz-range-thumb {
+  transform: scale(0.95);
+}
+/* Disabled slider — reduced opacity on thumb/track */
+input[data-slider]:disabled::-webkit-slider-thumb {
+  cursor: not-allowed;
+}
+input[data-slider]:disabled::-moz-range-thumb {
+  cursor: not-allowed;
+}
+/* Reduced motion — disable thumb scale transitions */
+@media (prefers-reduced-motion: reduce) {
+  input[data-slider]::-webkit-slider-thumb,
+  input[data-slider]::-moz-range-thumb {
+    transition: none;
+  }
+  input[data-slider]:hover::-webkit-slider-thumb,
+  input[data-slider]:hover::-moz-range-thumb {
+    transform: none;
+  }
+}
+/* ─── Scrollbar Theming ─── */
+/* Custom property overrides — consumers can set these anywhere.
+   --scrollbar-thumb:          thumb color (default: --color-text-muted)
+   --scrollbar-track:          track color (default: transparent)
+   --scrollbar-idle-opacity:   opacity when idle/scrolling (default: 0.2)
+   --scrollbar-hover-opacity:  opacity on container hover (default: 1)
+*/
+/* Global: thin themed scrollbars with idle opacity.
+   Uses color-mix to apply the idle opacity to the thumb color.
+   Skipped when --scrollbar-native is set or on [data-scrollbar-native] elements. */
+:root:not([data-scrollbar-native]) {
+  scrollbar-width: thin;
+  scrollbar-color:
+    color-mix(in oklch, var(--scrollbar-thumb, var(--color-text-muted)) calc(var(--scrollbar-idle-opacity, 0.2) * 100%), transparent)
+    var(--scrollbar-track, transparent);
+}
+/* Full opacity when hovering over ANY scrollable container. */
+:root:not([data-scrollbar-native]) *:hover {
+  scrollbar-color:
+    var(--scrollbar-thumb, var(--color-text-muted))
+    var(--scrollbar-track, transparent);
+}
+/* Per-element opt-out: restore native scrollbar */
+[data-scrollbar-native],
+[data-scrollbar-native] * {
+  scrollbar-width: auto !important;
+  scrollbar-color: auto !important;
+}
+/* Utility: completely hide native scrollbar (used by Scrollbar component).
+   Content remains scrollable via overflow. */
+.scrollbar-none {
+  scrollbar-width: none;
+}
+.scrollbar-none::-webkit-scrollbar {
+  display: none;
+}
+/* Keyboard focus indicator on the scrollable viewport (WCAG 2.2 AA). */
+[data-scrollbar-viewport]:focus-visible {
+  outline: 2px solid var(--color-ring, currentColor);
+  outline-offset: -2px;
+}
+/* ─── Custom Scrollbar Component States ─── */
+/* Thumb interaction states — driven by data attributes from behavior module.
+   CSS-only fallback: visible at idle opacity with approximate sizing.
+   JS-enhanced (data-scrollbar-ready): hidden until scroll/hover/drag. */
+[data-scrollbar] [data-scrollbar-thumb],
+[data-scrollbar] [data-scrollbar-thumb="y"],
+[data-scrollbar] [data-scrollbar-thumb="x"] {
+  opacity: var(--scrollbar-idle-opacity, 0.2);
+  transition: opacity var(--duration-fast, 150ms) var(--ease-out, ease-out),
+              width var(--duration-fastest, 75ms) var(--ease-out, ease-out);
+}
+/* CSS-only fallback sizing — overridden by JS inline styles */
+[data-scrollbar][data-scrollbar-axis="y"] [data-scrollbar-thumb],
+[data-scrollbar] [data-scrollbar-thumb="y"] {
+  height: 30%;
+  min-height: 20px;
+}
+[data-scrollbar][data-scrollbar-axis="x"] [data-scrollbar-thumb],
+[data-scrollbar] [data-scrollbar-thumb="x"] {
+  width: 30%;
+  min-width: 20px;
+}
+/* JS-enhanced: hide thumb when idle (behavior module manages visibility) */
+[data-scrollbar][data-scrollbar-ready] [data-scrollbar-thumb],
+[data-scrollbar][data-scrollbar-ready] [data-scrollbar-thumb="y"],
+[data-scrollbar][data-scrollbar-ready] [data-scrollbar-thumb="x"] {
+  opacity: 0;
+}
+/* Scrolling: thumb fades in at idle opacity */
+[data-scrollbar][data-scrolling] [data-scrollbar-thumb],
+[data-scrollbar][data-scrolling] [data-scrollbar-thumb="y"],
+[data-scrollbar][data-scrolling] [data-scrollbar-thumb="x"] {
+  opacity: var(--scrollbar-idle-opacity, 0.2);
+}
+/* Hovering over the scrollbar track area: full opacity */
+[data-scrollbar][data-scroll-hover] [data-scrollbar-thumb],
+[data-scrollbar][data-scroll-hover] [data-scrollbar-thumb="y"],
+[data-scrollbar][data-scroll-hover] [data-scrollbar-thumb="x"] {
+  opacity: var(--scrollbar-hover-opacity, 1);
+}
+/* Actively dragging the thumb: full opacity */
+[data-scrollbar][data-scroll-active] [data-scrollbar-thumb],
+[data-scrollbar][data-scroll-active] [data-scrollbar-thumb="y"],
+[data-scrollbar][data-scroll-active] [data-scrollbar-thumb="x"] {
+  opacity: var(--scrollbar-hover-opacity, 1);
+}
+/* Reduced motion: instant transitions */
+@media (prefers-reduced-motion: reduce) {
+  [data-scrollbar] [data-scrollbar-thumb],
+  [data-scrollbar] [data-scrollbar-thumb="y"],
+  [data-scrollbar] [data-scrollbar-thumb="x"] {
+    transition: none;
+  }
+}
+/* Touch devices: hide custom scrollbar, let native overlay handle it.
+   pointer:coarse targets the input method (touch), not screen size —
+   a 12" iPad still gets native scrollbars while a 768px desktop keeps
+   the custom ones. Native mobile overlay scrollbars have momentum,
+   edge bounce, and auto-hide — strictly better UX than a custom thumb
+   on touch. */
+@media (pointer: coarse) {
+  [data-scrollbar] [data-scrollbar-track],
+  [data-scrollbar] [data-scrollbar-track="y"],
+  [data-scrollbar] [data-scrollbar-track="x"] {
+    display: none !important;
+  }
+  [data-scrollbar] [data-scrollbar-viewport] {
+    padding-right: 0 !important;
+    padding-bottom: 0 !important;
+  }
+}
+/* ─── Texture Grain System ─── */
+/* Opt-in noise overlay — add \`cx-texture\` class to any element.
+   Uses SVG feTurbulence for organic, resolution-independent grain.
+   Custom properties:
+     --texture-opacity:  grain visibility (light: 0.12, dark: 0.18)
+     --texture-url:      swap to a custom noise image/SVG
+   Usage:
+     <div class="cx-texture"> ... </div>
+     style="--texture-opacity: 0.2"  (stronger grain)
+     style="--texture-url: url(my-noise.svg)"  (custom pattern)
+*/
+.cx-texture {
+  position: relative;
+}
+.cx-texture::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: var(--texture-url, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='1'/></svg>"));
+  background-repeat: repeat;
+  background-size: 200px 200px;
+  opacity: var(--texture-opacity, 0.12);
+  pointer-events: none;
+  z-index: 1;
+  border-radius: inherit;
+  mix-blend-mode: multiply;
+}
+/* Ensure card content stays above the grain overlay */
+.cx-texture > * {
+  position: relative;
+  z-index: 2;
+}
+/* Dark theme: stronger grain + additive blend for visibility on dark surfaces */
+[data-theme="dark"] .cx-texture::after,
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .cx-texture::after {
+    opacity: var(--texture-opacity, 0.18);
+    mix-blend-mode: soft-light;
+  }
+}
+/* Reduced motion: disable blend mode animation (static grain is fine) */
+@media (prefers-reduced-motion: reduce) {
+  .cx-texture::after {
+    animation: none;
+  }
+}
+/* ─── Prose Typography ─── */
+/* Styles for rendered GFM markdown content (.cx-prose wrapper).
+   All colors use CSS vars for theme compatibility. */
+.cx-prose {
+  line-height: 1.7;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+/* Headings */
+.cx-prose h1 { font-size: 1.875rem; font-weight: 700; margin: 1.5rem 0 0.75rem; line-height: 1.2; }
+.cx-prose h2 { font-size: 1.5rem; font-weight: 600; margin: 1.25rem 0 0.625rem; line-height: 1.25; }
+.cx-prose h3 { font-size: 1.25rem; font-weight: 600; margin: 1rem 0 0.5rem; line-height: 1.3; }
+.cx-prose h4 { font-size: 1.125rem; font-weight: 600; margin: 0.875rem 0 0.375rem; line-height: 1.35; }
+.cx-prose h5 { font-size: 1rem; font-weight: 600; margin: 0.75rem 0 0.25rem; line-height: 1.4; }
+.cx-prose h6 { font-size: 0.875rem; font-weight: 600; margin: 0.75rem 0 0.25rem; line-height: 1.4; opacity: 0.8; }
+.cx-prose :first-child { margin-top: 0; }
+/* Paragraphs */
+.cx-prose p { margin: 0 0 0.75rem; }
+.cx-prose p:last-child { margin-bottom: 0; }
+/* Lists */
+.cx-prose ul { list-style-type: disc; padding-left: 1.5rem; margin: 0 0 0.75rem; }
+.cx-prose ol { list-style-type: decimal; padding-left: 1.5rem; margin: 0 0 0.75rem; }
+.cx-prose li { margin: 0.125rem 0; }
+.cx-prose li > ul, .cx-prose li > ol { margin: 0.25rem 0; }
+.cx-prose ul ul { list-style-type: circle; }
+.cx-prose ul ul ul { list-style-type: square; }
+/* Task lists — remove bullet, align checkbox */
+.cx-prose ul:has(> li > input[type="checkbox"]) { list-style: none; padding-left: 0.25rem; }
+.cx-prose li > input[type="checkbox"] { margin-right: 0.5rem; vertical-align: middle; }
+/* Tables */
+.cx-prose table { border-collapse: collapse; width: 100%; margin: 0.75rem 0; font-size: 0.875rem; }
+.cx-prose thead th {
+  text-align: left; font-weight: 600; padding: 0.5rem 0.75rem;
+  border-bottom: 2px solid var(--color-border);
+}
+.cx-prose tbody td { padding: 0.375rem 0.75rem; border-bottom: 1px solid var(--color-border); }
+.cx-prose tbody tr:last-child td { border-bottom: none; }
+/* Inline code */
+.cx-prose code {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  padding: 0.15em 0.35em;
+  border-radius: 0.25rem;
+  background: var(--color-surface);
+}
+/* Fenced code blocks — reset inline code styles inside pre */
+.cx-prose pre {
+  margin: 0.75rem 0;
+  padding: 0.875rem 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  background: var(--color-inverse-surface);
+  color: var(--color-inverse-text);
+}
+.cx-prose pre code {
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  white-space: pre;
+}
+/* Blockquotes */
+.cx-prose blockquote {
+  border-left: 3px solid var(--color-border);
+  padding: 0.25rem 0 0.25rem 1rem;
+  margin: 0.75rem 0;
+  opacity: 0.85;
+}
+.cx-prose blockquote p:last-child { margin-bottom: 0; }
+/* Links */
+.cx-prose a {
+  color: var(--color-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+}
+.cx-prose a:hover { text-decoration-thickness: 2px; }
+/* Horizontal rules */
+.cx-prose hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 1.25rem 0;
+}
+/* Images */
+.cx-prose img { max-width: 100%; height: auto; border-radius: 0.375rem; margin: 0.5rem 0; }
+/* Strong + emphasis */
+.cx-prose strong { font-weight: 600; }
+.cx-prose em { font-style: italic; }
+.cx-prose del { text-decoration: line-through; opacity: 0.7; }
+/* Footnotes */
+.cx-prose .footnote-definition { font-size: 0.8125rem; opacity: 0.8; margin-top: 1rem; }
+.cx-prose sup { font-size: 0.75em; }
+@view-transition { navigation: auto; }
+`;
+export const TOKENS_SHADOW_CSS = `/* ═══════════════════════════════════════════
+   SHADOW DOM TOKENS — Auto-generated from Rust
+   Subset of tokens.css for adopted stylesheets.
+   CSS vars inherit from document <head>.
+   Do NOT edit manually. Change the Rust enums.
+   ═══════════════════════════════════════════ */
+/* ─── Keyframe Animations ─── */
+@keyframes fade-in { from { opacity: 0; }to { opacity: 1; } }
+@keyframes fade-out { from { opacity: 1; }to { opacity: 0; } }
+@keyframes slide-in-up { from { opacity: 0; transform: translateY(8px); }to { opacity: 1; transform: translateY(0); } }
+@keyframes slide-in-down { from { opacity: 0; transform: translateY(-8px); }to { opacity: 1; transform: translateY(0); } }
+@keyframes slide-in-left { from { opacity: 0; transform: translateX(-8px); }to { opacity: 1; transform: translateX(0); } }
+@keyframes slide-in-right { from { opacity: 0; transform: translateX(8px); }to { opacity: 1; transform: translateX(0); } }
+@keyframes scale-in { from { opacity: 0; transform: scale(0.95); }to { opacity: 1; transform: scale(1); } }
+@keyframes scale-out { from { opacity: 1; transform: scale(1); }to { opacity: 0; transform: scale(0.95); } }
+@keyframes slide-out-up { from { opacity: 1; transform: translateY(0); }to { opacity: 0; transform: translateY(-8px); } }
+@keyframes slide-out-down { from { opacity: 1; transform: translateY(0); }to { opacity: 0; transform: translateY(8px); } }
+@keyframes expand-height { from { opacity: 0; max-height: 0; overflow: hidden; }to { opacity: 1; max-height: var(--expand-to, 500px); overflow: hidden; } }
+@keyframes collapse-height { from { opacity: 1; max-height: var(--expand-to, 500px); overflow: hidden; }to { opacity: 0; max-height: 0; overflow: hidden; } }
+@keyframes spin { from { transform: rotate(0deg); }to { transform: rotate(360deg); } }
+@keyframes pulse { 0%, 100% { opacity: 1; }50% { opacity: 0.5; } }
+@keyframes bounce { 0%, 100% { transform: translateY(0); }50% { transform: translateY(-4px); } }
+/* ─── Interactive Utilities ─── */
+/* CSS-only press ripple — add class="ripple" to any interactive element.
+   Uses ::after pseudo-element with radial-gradient.
+   The ripple color inherits from currentColor (adapts to theme). */
+.ripple {
+  position: relative;
+  overflow: hidden;
+}
+.ripple::after {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  background-image: radial-gradient(circle, currentColor 10%, transparent 10.01%);
+  background-repeat: no-repeat;
+  background-position: 50%;
+  transform: scale(10, 10);
+  opacity: 0;
+  transition: transform 0.3s, opacity 0.5s;
+}
+.ripple:active::after {
+  transform: scale(0, 0);
+  opacity: 0.1;
+  transition: 0s;
+}
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-instant: 0ms;
+    --duration-fastest: 0.01ms;
+    --duration-fast: 0.01ms;
+    --duration-normal: 0.01ms;
+    --duration-smooth: 0.01ms;
+    --duration-slow: 0.01ms;
+    --duration-slowest: 0.01ms;
+    --ease-spring: linear;
+    --ease-bounce: linear;
+    --ease-snappy: linear;
+  }
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+  }
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation-duration: 0.01ms !important;
+  }
+}
+/* ─── Component Motion ─── */
+/* Spring scale for checkbox/radio indicators on state change.
+   Background fills first (100ms EaseOut via transition-colors),
+   then the check/dot springs in (300ms Spring with overshoot). */
+input.peer + [aria-hidden="true"] > svg {
+  transform: scale(0);
+  transition: transform var(--duration-smooth) var(--ease-spring);
+}
+input.peer:checked + [aria-hidden="true"] > svg {
+  transform: scale(1);
+}
+/* Indeterminate checkbox — show dash at full scale */
+[data-state="indeterminate"] > svg {
+  transform: scale(1);
+}
+/* Switch thumb — spring slide on toggle.
+   The thumb translateX is set via inline classes; this rule
+   adds spring easing so the slide overshoots slightly. */
+button[role="switch"] > span[aria-hidden="true"] {
+  transition: transform var(--duration-smooth) var(--ease-spring);
+}
+/* Switch track — smooth color transition (EaseOut, not Spring).
+   Spring on color looks wrong; EaseOut gives a clean fill. */
+button[role="switch"] {
+  transition: background-color var(--duration-fast) var(--ease-out),
+              border-color var(--duration-fast) var(--ease-out);
+}
+/* Tooltip — spring entrance + smooth exit via CSS group-hover/focus-within.
+   Opacity fades fast (EaseOut, no overshoot), translate/scale spring with
+   satisfying overshoot. Individual transform properties (not shorthand)
+   match Tailwind v4's output for correct transition targeting. */
+.group\\/tooltip [role="tooltip"] {
+  transition: opacity var(--duration-fast) var(--ease-out),
+              visibility var(--duration-fast) var(--ease-out),
+              translate var(--duration-smooth) var(--ease-spring),
+              scale var(--duration-smooth) var(--ease-spring);
+}
+/* Shared floating tooltip — JS-enhanced, slides between triggers.
+   Positioned via CSS custom properties (--tt-x, --tt-y) set by
+   tooltip.js. Spring-eased translate creates fluid movement when
+   the tooltip slides between adjacent triggers. */
+[data-tooltip-floating] {
+  position: fixed;
+  inset: 0 auto auto 0;
+  translate: var(--tt-x, 0) var(--tt-y, 0);
+  scale: 0.96;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 50;
+  max-width: min(300px, 90vw);
+  white-space: normal;
+  word-wrap: break-word;
+  transition: translate var(--duration-smooth) var(--ease-spring),
+              scale var(--duration-fast) var(--ease-spring),
+              opacity var(--duration-fast) var(--ease-out);
+}
+[data-tooltip-floating][data-open] {
+  scale: 1;
+  opacity: 1;
+  pointer-events: auto;
+}
+/* Progressive enhancement: per-trigger tooltips become sr-only
+   when the behavior module activates the shared floating tooltip.
+   aria-describedby still references these elements for screen readers. */
+[data-tooltip-enhanced] [data-tooltip-wrapper] [role="tooltip"] {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+/* Arrow positioning by data-placement — the rotated square
+   tracks the trigger center via --tt-arrow-x / --tt-arrow-y. */
+[data-tooltip-floating] [data-tooltip-arrow-el] {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+  transform: rotate(45deg);
+}
+[data-tooltip-floating][data-placement="top"] [data-tooltip-arrow-el] {
+  bottom: -4px;
+  left: var(--tt-arrow-x, 50%);
+  transform: translateX(-50%) rotate(45deg);
+}
+[data-tooltip-floating][data-placement="bottom"] [data-tooltip-arrow-el] {
+  top: -4px;
+  left: var(--tt-arrow-x, 50%);
+  transform: translateX(-50%) rotate(45deg);
+}
+[data-tooltip-floating][data-placement="left"] [data-tooltip-arrow-el] {
+  right: -4px;
+  top: var(--tt-arrow-y, 50%);
+  transform: translateY(-50%) rotate(45deg);
+}
+[data-tooltip-floating][data-placement="right"] [data-tooltip-arrow-el] {
+  left: -4px;
+  top: var(--tt-arrow-y, 50%);
+  transform: translateY(-50%) rotate(45deg);
+}
+/* Tabs — active tab text color transition (indicator handles visual sweep) */
+[data-tabs] [role="tab"] {
+  transition: color var(--duration-fast) var(--ease-out),
+              background-color var(--duration-fast) var(--ease-out);
+}
+/* Tabs — hover/active only on non-selected tabs. Selected tabs are styled
+   by the sliding indicator — hover bg would paint over it (z-10 button). */
+[data-tabs] [role="tab"]:not([aria-selected="true"]):hover {
+  color: var(--color-text);
+  background-color: var(--color-secondary);
+}
+[data-tabs] [role="tab"]:not([aria-selected="true"]):active {
+  background-color: var(--color-secondary-hover);
+}
+/* Tabs — sliding indicator sweep (Spring easing for satisfying overshoot).
+   Uses --duration-slow (500ms) because Spring's fast attack makes shorter
+   durations feel instant — 500ms gives ~300ms of visible motion.
+   [data-ready] prevents transition on initial page load. */
+[data-tab-indicator][data-ready] {
+  transition: left var(--duration-slow) var(--ease-spring),
+              top var(--duration-slow) var(--ease-spring),
+              width var(--duration-slow) var(--ease-spring),
+              height var(--duration-slow) var(--ease-spring);
+}
+/* Dialog/Drawer ::backdrop — transparent in production.
+   Visual backdrop is a JS-created overlay <div> animated via Web Animations API.
+   See dialog.js and drawer.js for the overlay implementation. */
+dialog[data-dialog]::backdrop {
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+/* Dialog/Drawer panel animations are handled by Web Animations API in
+   dialog.js and drawer.js. CSS @keyframes removed from this stylesheet
+   to prevent double animation — CSS and JS both fire on [data-open] /
+   [data-closing] attrs. SSR gallery keeps its own copy in gallery.rs. */
+/* Accordion — panel height transition (grid-template-rows: 0fr -> 1fr).
+   Spring easing gives a satisfying overshoot on expand. */
+[data-accordion-panel] {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--duration-smooth) var(--ease-spring);
+}
+/* Accordion — chevron rotation (Spring overshoot past 180 then settles) */
+[data-accordion-trigger] [data-accordion-chevron] {
+  transition: transform var(--duration-normal) var(--ease-spring);
+}
+[data-accordion-trigger][aria-expanded="true"] [data-accordion-chevron] {
+  transform: rotate(180deg);
+}
+/* Accordion — trigger text/bg color transitions */
+[data-accordion-trigger] {
+  transition: color var(--duration-fast) var(--ease-out),
+              background-color var(--duration-fast) var(--ease-out);
+}
+/* Accordion — trigger hover/active */
+[data-accordion-trigger]:not([disabled]):hover {
+  background-color: var(--color-secondary);
+}
+[data-accordion-trigger]:not([disabled]):active {
+  background-color: var(--color-secondary-hover);
+}
+/* Popover — absolute positioning within relative trigger wrapper.
+   Horizontal alignment via data-floating-align on the trigger,
+   reflected onto the panel by loader.js via data-align. */
+[data-popover] {
+  position: absolute;
+  z-index: 30;
+}
+[data-popover][data-align="start"] {
+  left: 0;
+  right: auto;
+}
+[data-popover][data-align="center"] {
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
+}
+[data-popover][data-align="end"] {
+  right: 0;
+  left: auto;
+}
+/* Popover — arrow positioning based on runtime data-placement.
+   Arrow is a rotated square that inherits panel bg, positioned to
+   point toward the trigger. Uses border on two sides for continuity
+   with panel border. */
+[data-popover] [data-popover-arrow] {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+  border-color: var(--color-border);
+}
+[data-popover][data-placement="bottom"] [data-popover-arrow] {
+  top: -0.25rem;
+  border-top-width: 1px;
+  border-left-width: 1px;
+}
+[data-popover][data-placement="top"] [data-popover-arrow] {
+  bottom: -0.25rem;
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+}
+/* Menu — absolute positioning within relative trigger wrapper.
+   Like popover, menus use a relative parent and absolute panel.
+   Always left-aligned (start alignment). */
+[data-menu] {
+  position: absolute;
+  z-index: 30;
+  left: 0;
+  right: auto;
+}
+/* Drawer top — also handled by Web Animations API in drawer.js.
+   CSS @keyframes removed (see comment above dialog/drawer section). */
+/* Toast entrance — slide + scale + fade, snappy easing (matches Drawer).
+   The behavior module (toast.js) drives [data-open]/[data-closing] attrs. */
+[data-toast][data-open][data-position^="top"] {
+  animation: toast-in-top 350ms var(--ease-snappy) forwards;
+}
+[data-toast][data-open][data-position^="bottom"] {
+  animation: toast-in-bottom 350ms var(--ease-snappy) forwards;
+}
+/* Toast exit — slide + fade out, ease-out for smooth departure */
+[data-toast][data-closing][data-position^="top"] {
+  animation: toast-out-top 250ms var(--ease-out) forwards;
+}
+[data-toast][data-closing][data-position^="bottom"] {
+  animation: toast-out-bottom 250ms var(--ease-out) forwards;
+}
+/* Toast progress bar — auto-dismiss countdown indicator */
+[data-toast] [data-toast-progress] {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background: currentColor;
+  opacity: 0.25;
+  border-radius: inherit;
+  transform-origin: left;
+  transition: none;
+}
+/* Pause progress when hovered */
+[data-toast]:hover [data-toast-progress] {
+  animation-play-state: paused !important;
+}
+@keyframes toast-in-top {
+  from { opacity: 0; transform: translateY(-1rem) scale(0.95); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes toast-in-bottom {
+  from { opacity: 0; transform: translateY(1rem) scale(0.95); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes toast-out-top {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to   { opacity: 0; transform: translateY(-1rem) scale(0.95); }
+}
+@keyframes toast-out-bottom {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to   { opacity: 0; transform: translateY(1rem) scale(0.95); }
+}
+@keyframes toast-progress {
+  from { transform: scaleX(1); }
+  to   { transform: scaleX(0); }
+}
+/* Spinner square variant — tumbling cube with 3D perspective rotation.
+   Uses ease-in-out (not Spring) for smooth infinite looping. */
+.animate-spin-square {
+  animation: spin-square 1.8s ease-in-out infinite;
+}
+@keyframes spin-square {
+  0%   { transform: perspective(120px) rotateX(0)      rotateY(0);      }
+  25%  { transform: perspective(120px) rotateX(180deg)  rotateY(0);      }
+  50%  { transform: perspective(120px) rotateX(180deg)  rotateY(180deg); }
+  75%  { transform: perspective(120px) rotateX(360deg)  rotateY(180deg); }
+  100% { transform: perspective(120px) rotateX(360deg)  rotateY(360deg); }
+}
+/* Skeleton wave — gradient shimmer sweep (premium loading effect).
+   Uses ::after pseudo-element with a translating gradient.
+   The highlight color is the surface background, creating a natural
+   shimmer against the skeleton fill (ColorRole::Border). */
+.animate-skeleton-wave {
+  position: relative;
+  overflow: hidden;
+}
+.animate-skeleton-wave::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, var(--color-surface), transparent);
+  animation: skeleton-wave 2s linear infinite;
+}
+@keyframes skeleton-wave {
+  0% { transform: translateX(-100%); }
+  60%, 100% { transform: translateX(100%); }
+}
+/* Progress bar — indeterminate sliding animation.
+   Slides a 40%-width fill bar back and forth within the track.
+   Uses ease-in-out (not Spring) for smooth infinite looping. */
+.animate-progress-indeterminate {
+  animation: progress-indeterminate 1.5s ease-in-out infinite;
+}
+@keyframes progress-indeterminate {
+  0% { transform: translateX(-100%); }
+  50% { transform: translateX(150%); }
+  100% { transform: translateX(-100%); }
+}
+/* Sidebar — width transition with Spring easing */
+[data-sidebar] {
+  transition: width var(--duration-smooth) var(--ease-spring);
+}
+/* Narrow mode: hide text labels, badges, sub-group labels */
+[data-sidebar][data-sidebar-state="narrow"] [data-sidebar-item-label],
+[data-sidebar][data-sidebar-state="narrow"] [data-sidebar-badge],
+[data-sidebar][data-sidebar-state="narrow"] [data-sidebar-group-label] {
+  display: none;
+}
+/* Collapsible group panel: grid-template-rows animation (same as Accordion) */
+[data-sidebar-group-panel] {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--duration-normal) var(--ease-spring);
+}
+[data-sidebar-group-panel][data-collapsed] {
+  grid-template-rows: 0fr;
+}
+[data-sidebar-group-panel] > * {
+  overflow: hidden;
+}
+/* Chevron rotation for collapsible sidebar groups */
+[data-sidebar-group-trigger] [data-chevron] {
+  transition: transform var(--duration-normal) var(--ease-spring);
+}
+[data-sidebar-group-trigger][aria-expanded="false"] [data-chevron] {
+  transform: rotate(-90deg);
+}
+/* Narrow mode: center items as comfortable square targets */
+[data-sidebar][data-sidebar-state="narrow"] [data-sidebar-item],
+[data-sidebar][data-sidebar-state="narrow"] [data-sidebar-group-trigger] {
+  justify-content: center;
+  gap: 0;
+  padding: 0.5rem;
+}
+/* Narrow mode: center items within the rail */
+[data-sidebar][data-sidebar-state="narrow"] ul {
+  padding-inline: 0.25rem;
+  align-items: center;
+}
+/* Narrow mode: center header, reduce padding */
+[data-sidebar][data-sidebar-state="narrow"] [data-sidebar-header] {
+  justify-content: center;
+  padding-inline: 0.5rem;
+}
+/* Narrow mode: reduce footer padding */
+[data-sidebar][data-sidebar-state="narrow"] [data-sidebar-footer] {
+  padding-inline: 0.5rem;
+}
+/* Narrow mode: hide collapsible panels (unusable without labels) */
+[data-sidebar][data-sidebar-state="narrow"] [data-sidebar-group-panel] {
+  display: none;
+}
+/* Narrow mode: hide chevron indicators */
+[data-sidebar][data-sidebar-state="narrow"] [data-chevron] {
+  display: none;
+}
+/* Sidebar tooltip integration — uses centralized Tooltip component */
+/* Make tooltip wrappers fill sidebar width */
+[data-sidebar] [data-tooltip-wrapper] {
+  display: flex;
+  width: 100%;
+}
+/* Hide tooltip content in expanded mode (labels are visible) */
+[data-sidebar]:not([data-sidebar-state="narrow"]) [data-tooltip-wrapper] [role="tooltip"] {
+  display: none !important;
+}
+/* In narrow mode, allow tooltips to escape overflow */
+[data-sidebar][data-sidebar-state="narrow"] {
+  overflow: visible;
+}
+[data-sidebar][data-sidebar-state="narrow"] nav {
+  overflow: visible;
+}
+/* ─── Pressed State Design Tokens ─── */
+/* Centralized tint + text tokens for pressed/selected states.
+   Reusable by any component needing theme-adaptive pressed highlighting.
+   Light: subtle primary tint + primary text.
+   Dark: stronger tint + full-contrast text (primary has lower luminance than text on dark surfaces). */
+:root, :host {
+  --cx-pressed-tint: 15%;
+  --cx-pressed-text: var(--color-primary);
+}
+html[data-theme="dark"], :host([data-theme="dark"]) {
+  --cx-pressed-tint: 25%;
+  --cx-pressed-text: var(--color-text);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]), :host:not([data-theme]) {
+    --cx-pressed-tint: 25%;
+    --cx-pressed-text: var(--color-text);
+  }
+}
+/* Toggle Group — connected button border overrides.
+   Resets individual button radii using longhand properties to avoid
+   shorthand/longhand cascade interactions. z-index stacking for hover/focus/pressed.
+   overflow:hidden on edge buttons ensures hover bg clips to the rounded shape. */
+[data-toggle-group] > button {
+  border-top-left-radius: 0; border-top-right-radius: 0;
+  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
+  position: relative;
+}
+[data-toggle-group] > button:hover,
+[data-toggle-group] > button:focus-visible { z-index: 1; }
+[data-toggle-group] > button[data-pressed="true"] { z-index: 2; }
+/* Toggle Group horizontal — border collapse + first/last radius.
+   Uses first-of-type/last-of-type (not first-child/last-child) because the
+   sliding indicator <span> is the first child in single-select mode.
+   No overflow:hidden — backgrounds clip to border-radius natively, and
+   overflow:hidden on edge buttons clips the sliding indicator behind them. */
+[data-toggle-group][aria-orientation="horizontal"] > button + button { margin-left: -1px; }
+[data-toggle-group][aria-orientation="horizontal"][data-shape="rounded"] > button:first-of-type {
+  border-top-left-radius: var(--radius-lg, 0.5rem); border-bottom-left-radius: var(--radius-lg, 0.5rem); }
+[data-toggle-group][aria-orientation="horizontal"][data-shape="rounded"] > button:last-of-type {
+  border-top-right-radius: var(--radius-lg, 0.5rem); border-bottom-right-radius: var(--radius-lg, 0.5rem); }
+[data-toggle-group][aria-orientation="horizontal"][data-shape="pill"] > button:first-of-type {
+  border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; }
+[data-toggle-group][aria-orientation="horizontal"][data-shape="pill"] > button:last-of-type {
+  border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; }
+/* Toggle Group vertical — border collapse + first/last radius */
+[data-toggle-group][aria-orientation="vertical"] { flex-direction: column; }
+[data-toggle-group][aria-orientation="vertical"] > button + button { margin-top: -1px; }
+[data-toggle-group][aria-orientation="vertical"][data-shape="rounded"] > button:first-of-type {
+  border-top-left-radius: var(--radius-lg, 0.5rem); border-top-right-radius: var(--radius-lg, 0.5rem); }
+[data-toggle-group][aria-orientation="vertical"][data-shape="rounded"] > button:last-of-type {
+  border-bottom-left-radius: var(--radius-lg, 0.5rem); border-bottom-right-radius: var(--radius-lg, 0.5rem); }
+[data-toggle-group][aria-orientation="vertical"][data-shape="pill"] > button:first-of-type {
+  border-top-left-radius: 9999px; border-top-right-radius: 9999px; }
+[data-toggle-group][aria-orientation="vertical"][data-shape="pill"] > button:last-of-type {
+  border-bottom-left-radius: 9999px; border-bottom-right-radius: 9999px; }
+/* Toggle Group — pressed button text color.
+   !important overrides inline style="color:..." set by Button's StyleBundle.
+   Uses centralized --cx-pressed-text: primary in light, full-contrast text in dark.
+   Filled: inverse text stays bright on the indicator bg. */
+[data-toggle-group] > button[data-pressed="true"] {
+  color: var(--cx-pressed-text) !important;
+  font-weight: 600 !important;
+}
+[data-toggle-group][data-variant="filled"] > button[data-pressed="true"] {
+  color: var(--color-inverse-text) !important;
+  font-weight: 600 !important;
+}
+/* Toggle Group — Filled variant: dim unpressed buttons so pressed stands out.
+   Creates clear visual hierarchy: pressed = full brightness, unpressed = dimmed.
+   Works in both light and dark modes. */
+[data-toggle-group][data-variant="filled"] > button:not([data-pressed="true"]):not([disabled]) {
+  opacity: 0.7;
+}
+/* Toggle Group — in single mode, indicator provides the bg highlight.
+   Suppress button's own pressed bg AND hover bg to avoid double-paint.
+   !important overrides inline style="background-color:..." from Button. */
+[data-toggle-group][data-toggle-mode="single"] > button[data-pressed="true"] {
+  background-color: transparent !important;
+}
+[data-toggle-group][data-toggle-mode="single"] > button[data-pressed="true"]:hover {
+  background-color: transparent !important;
+}
+/* Toggle Group — in multi mode, per-button pressed bg highlight.
+   !important overrides Button's inline style="background-color:...".
+   Uses centralized --cx-pressed-tint for theme-adaptive visibility.
+   Outline/Ghost: tinted primary bg. Filled: full primary shade. */
+[data-toggle-group][data-toggle-mode="multiple"] > button[data-pressed="true"] {
+  background-color: color-mix(in oklch, var(--color-primary) var(--cx-pressed-tint, 15%), transparent) !important;
+}
+[data-toggle-group][data-variant="filled"][data-toggle-mode="multiple"] > button[data-pressed="true"] {
+  background-color: var(--color-primary) !important;
+  opacity: 1 !important;
+}
+/* Toggle Group — Filled hover: brightness tuned per theme.
+   Light mode: dark surfaces need strong 1.65 boost to show hover.
+   Dark mode: lighter surfaces only need subtle 1.25.
+   Uses html[data-theme] (specificity 0,0,1,1) which beats base rules
+   and works regardless of OS prefers-color-scheme. */
+[data-toggle-group][data-variant="filled"] > button:not([data-pressed="true"]):not([disabled]):hover {
+  filter: brightness(1.65);
+  opacity: 0.9;
+}
+[data-toggle-group][data-variant="filled"]:has(> button[data-pressed="true"]:hover) > [data-toggle-indicator] {
+  filter: brightness(1.65);
+}
+html[data-theme="dark"] [data-toggle-group][data-variant="filled"] > button:not([data-pressed="true"]):not([disabled]):hover,
+:host([data-theme="dark"]) [data-toggle-group][data-variant="filled"] > button:not([data-pressed="true"]):not([disabled]):hover {
+  filter: brightness(1.25);
+  opacity: 0.9;
+}
+html[data-theme="dark"] [data-toggle-group][data-variant="filled"]:has(> button[data-pressed="true"]:hover) > [data-toggle-indicator],
+:host([data-theme="dark"]) [data-toggle-group][data-variant="filled"]:has(> button[data-pressed="true"]:hover) > [data-toggle-indicator] {
+  filter: brightness(1.25);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) [data-toggle-group][data-variant="filled"] > button:not([data-pressed="true"]):not([disabled]):hover,
+  :host:not([data-theme]) [data-toggle-group][data-variant="filled"] > button:not([data-pressed="true"]):not([disabled]):hover {
+    filter: brightness(1.25);
+    opacity: 0.9;
+  }
+  :root:not([data-theme]) [data-toggle-group][data-variant="filled"]:has(> button[data-pressed="true"]:hover) > [data-toggle-indicator],
+  :host:not([data-theme]) [data-toggle-group][data-variant="filled"]:has(> button[data-pressed="true"]:hover) > [data-toggle-indicator] {
+    filter: brightness(1.25);
+  }
+}
+[data-toggle-indicator] {
+  transition: filter var(--duration-fast) var(--ease-out);
+}
+/* Toggle Group — sliding indicator sweep (Spring easing, same as Tabs).
+   Uses --duration-slow (500ms) because Spring's fast attack makes shorter
+   durations feel instant — 500ms gives ~300ms of visible motion.
+   [data-ready] prevents transition on initial page load.
+   border-radius transitions to match the pressed button's computed radius. */
+[data-toggle-indicator][data-ready] {
+  transition: left var(--duration-slow) var(--ease-spring),
+              top var(--duration-slow) var(--ease-spring),
+              width var(--duration-slow) var(--ease-spring),
+              height var(--duration-slow) var(--ease-spring),
+              border-radius var(--duration-slow) var(--ease-spring),
+              opacity var(--duration-fast) var(--ease-out);
+}
+/* Collapsible — panel height transition (grid-template-rows: 0fr -> 1fr).
+   Same animation technique as Accordion. Spring easing gives satisfying overshoot. */
+[data-collapsible-panel] {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--duration-smooth) var(--ease-spring);
+}
+[data-collapsible-panel][data-collapsed] {
+  grid-template-rows: 0fr;
+}
+[data-collapsible-panel] > * {
+  overflow: hidden;
+}
+/* Collapsible — chevron rotation (Spring easing, -90deg -> 0deg on expand) */
+[data-collapsible-trigger] [data-chevron] {
+  transition: transform var(--duration-normal) var(--ease-spring);
+}
+[data-collapsible-trigger][aria-expanded="false"] [data-chevron] {
+  transform: rotate(-90deg);
+}
+/* Collapsible — trigger text/bg color transitions */
+[data-collapsible-trigger] {
+  transition: color var(--duration-fast) var(--ease-out),
+              background-color var(--duration-fast) var(--ease-out);
+}
+/* Collapsible — trigger hover/active */
+[data-collapsible-trigger]:not([disabled]):hover {
+  background-color: var(--color-secondary);
+}
+[data-collapsible-trigger]:not([disabled]):active {
+  background-color: var(--color-secondary-hover);
+}
+/* Activity/tool expand chevron — hidden by default, revealed on hover.
+   Uses Icon::ChevronRight, rotates 90deg when expanded. */
+[data-collapsible-trigger] [data-expand] {
+  opacity: 0;
+  transition: opacity var(--duration-fast) var(--ease-out),
+              transform var(--duration-normal) var(--ease-spring);
+}
+[data-collapsible-trigger]:hover [data-expand],
+[data-collapsible-trigger][aria-expanded="true"] [data-expand] {
+  opacity: 1;
+}
+[data-collapsible-trigger][aria-expanded="true"] [data-expand] {
+  transform: rotate(90deg);
+}
+/* Thinking — shimmer text sweep animation.
+   A gradient sweeps left-to-right across the text using background-clip: text.
+   Ghost uses text color vars; Filled uses inverse-text color vars. */
+@keyframes cx-shimmer {
+  from { background-position: 200% center; }
+  to { background-position: -200% center; }
+}
+.cx-thinking-ghost {
+  background: linear-gradient(90deg,
+    color-mix(in oklch, var(--color-text) 20%, transparent),
+    var(--color-text),
+    color-mix(in oklch, var(--color-text) 20%, transparent));
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: cx-shimmer var(--cx-thinking-speed, 3.1s) linear infinite;
+}
+.cx-thinking-filled {
+  background: linear-gradient(90deg,
+    color-mix(in oklch, var(--color-inverse-text) 40%, transparent),
+    var(--color-inverse-text),
+    color-mix(in oklch, var(--color-inverse-text) 40%, transparent));
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: cx-shimmer var(--cx-thinking-speed, 3.1s) linear infinite;
+}
+/* SearchBar — hide native browser clear/cancel button on type="search" inputs.
+   We render our own clear button with proper styling and accessibility. */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+  display: none;
+}
+/* SearchBar — one-shot focus shimmer on placeholder text.
+   Dedicated keyframes with a tight sweep range (100% → -100%) so the bright
+   spot crosses the visible text exactly once, left to right. Uses the same
+   background-clip:text technique as Thinking but with a sharper gradient
+   falloff for a cleaner single pass. JS adds the class on focusin and
+   removes it on animationend, with a 10-second cooldown. */
+@keyframes cx-search-shimmer {
+  0% {
+    background-position: 100% center;
+    color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+  90% {
+    background-position: 0% center;
+    color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+  100% {
+    color: var(--color-text-muted);
+    background: none;
+  }
+}
+[data-search-shimmer] .cx-search-shimmer-text {
+  background: linear-gradient(90deg,
+    transparent 0%,
+    transparent 42%,
+    color-mix(in oklch, var(--color-text) 30%, transparent) 46%,
+    var(--color-text) 50%,
+    color-mix(in oklch, var(--color-text) 30%, transparent) 54%,
+    transparent 58%,
+    transparent 100%);
+  background-size: 300% 100%;
+  animation: cx-search-shimmer 2.7s linear 1 forwards;
+}
+/* Message — spring entrance animation for chat messages.
+   Used by MessageBubble (single) and MessageGroup (staggered). */
+@keyframes cx-message-enter {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+.cx-message-enter {
+  animation: cx-message-enter var(--duration-smooth) var(--ease-spring) both;
+}
+/* Staggered entrance for grouped message parts */
+.cx-message-group > [data-connection] {
+  animation: cx-message-enter var(--duration-smooth) var(--ease-spring) both;
+}
+.cx-message-group > :nth-child(1) { animation-delay: 0ms; }
+.cx-message-group > :nth-child(2) { animation-delay: 50ms; }
+.cx-message-group > :nth-child(3) { animation-delay: 100ms; }
+.cx-message-group > :nth-child(4) { animation-delay: 150ms; }
+.cx-message-group > :nth-child(5) { animation-delay: 200ms; }
+.cx-message-group > :nth-child(6) { animation-delay: 250ms; }
+.cx-message-group > :nth-child(7) { animation-delay: 300ms; }
+.cx-message-group > :nth-child(8) { animation-delay: 350ms; }
+.cx-message-group > :nth-child(9) { animation-delay: 400ms; }
+.cx-message-group > :nth-child(10) { animation-delay: 450ms; }
+/* Streaming cursor — blinking caret for streaming markdown content.
+   Appears at the end of the text during token arrival, removed on stream end.
+   Essential loading feedback — retains animation under reduced-motion. */
+.cx-stream-cursor {
+  display: inline-block;
+  width: 2px;
+  height: 1.1em;
+  background: currentColor;
+  vertical-align: text-bottom;
+  margin-left: 1px;
+  animation: cx-cursor-blink 1s step-end infinite;
+}
+@keyframes cx-cursor-blink {
+  50% { opacity: 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  dialog[data-dialog]::backdrop,
+  dialog[data-dialog][data-open] [data-dialog-panel],
+  dialog[data-dialog][data-closing] [data-dialog-panel],
+  dialog[data-dialog][data-closing]::backdrop,
+  [data-toast][data-open],
+  [data-toast][data-closing],
+  .animate-progress-indeterminate {
+    animation: none;
+  }
+  /* Message — disable entrance animation */
+  .cx-message-enter,
+  .cx-message-group > [data-connection],
+  .cx-message-group > * {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+  /* Thinking — stop animation, show static text */
+  .cx-thinking-ghost {
+    animation: none;
+    background: none;
+    -webkit-background-clip: unset;
+    background-clip: unset;
+    color: var(--color-text-muted);
+  }
+  .cx-thinking-filled {
+    animation: none;
+    background: none;
+    -webkit-background-clip: unset;
+    background-clip: unset;
+    color: var(--color-inverse-text);
+  }
+  /* SearchBar — disable shimmer sweep */
+  [data-search-shimmer] .cx-search-shimmer-text {
+    animation: none;
+    background: none;
+    -webkit-background-clip: unset;
+    background-clip: unset;
+    color: var(--color-text-muted);
+  }
+}
+/* ─── Slider Cross-Browser Styling ─── */
+/* Native <input type="range"> with appearance-none requires vendor
+   pseudo-elements for track, thumb, and fill. CSS custom properties
+   set inline by render.rs drive all dimensions and radii. */
+/* WebKit (Chrome, Safari, Edge) — track */
+input[data-slider]::-webkit-slider-runnable-track {
+  height: var(--slider-track-h);
+  border-radius: var(--slider-track-r);
+  background: linear-gradient(
+    to right,
+    var(--slider-fill) calc(var(--slider-percent) * 1%),
+    var(--color-border) calc(var(--slider-percent) * 1%)
+  );
+}
+/* WebKit — thumb */
+input[data-slider]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--slider-thumb-sz);
+  height: var(--slider-thumb-sz);
+  border-radius: var(--slider-thumb-r);
+  background: var(--color-surface);
+  border: 2px solid var(--slider-fill);
+  box-shadow: 0 1px 3px oklch(0 0 0 / 0.15);
+  margin-top: calc((var(--slider-track-h) - var(--slider-thumb-sz)) / 2);
+  cursor: pointer;
+  transition: transform var(--duration-normal) var(--ease-spring),
+              box-shadow var(--duration-fast) var(--ease-out);
+}
+input[data-slider]:hover::-webkit-slider-thumb {
+  transform: scale(1.15);
+  box-shadow: 0 2px 6px oklch(0 0 0 / 0.2);
+}
+input[data-slider]:active::-webkit-slider-thumb {
+  transform: scale(0.95);
+}
+/* Firefox — track (unfilled portion) */
+input[data-slider]::-moz-range-track {
+  height: var(--slider-track-h);
+  border-radius: var(--slider-track-r);
+  background: var(--color-border);
+  border: none;
+}
+/* Firefox — fill (filled portion, native pseudo) */
+input[data-slider]::-moz-range-progress {
+  height: var(--slider-track-h);
+  border-radius: var(--slider-track-r);
+  background: var(--slider-fill);
+}
+/* Firefox — thumb */
+input[data-slider]::-moz-range-thumb {
+  width: var(--slider-thumb-sz);
+  height: var(--slider-thumb-sz);
+  border-radius: var(--slider-thumb-r);
+  background: var(--color-surface);
+  border: 2px solid var(--slider-fill);
+  box-shadow: 0 1px 3px oklch(0 0 0 / 0.15);
+  cursor: pointer;
+  transition: transform var(--duration-normal) var(--ease-spring),
+              box-shadow var(--duration-fast) var(--ease-out);
+}
+input[data-slider]:hover::-moz-range-thumb {
+  transform: scale(1.15);
+  box-shadow: 0 2px 6px oklch(0 0 0 / 0.2);
+}
+input[data-slider]:active::-moz-range-thumb {
+  transform: scale(0.95);
+}
+/* Disabled slider — reduced opacity on thumb/track */
+input[data-slider]:disabled::-webkit-slider-thumb {
+  cursor: not-allowed;
+}
+input[data-slider]:disabled::-moz-range-thumb {
+  cursor: not-allowed;
+}
+/* Reduced motion — disable thumb scale transitions */
+@media (prefers-reduced-motion: reduce) {
+  input[data-slider]::-webkit-slider-thumb,
+  input[data-slider]::-moz-range-thumb {
+    transition: none;
+  }
+  input[data-slider]:hover::-webkit-slider-thumb,
+  input[data-slider]:hover::-moz-range-thumb {
+    transform: none;
+  }
+}
+/* ─── Scrollbar Theming ─── */
+/* Custom property overrides — consumers can set these anywhere.
+   --scrollbar-thumb:          thumb color (default: --color-text-muted)
+   --scrollbar-track:          track color (default: transparent)
+   --scrollbar-idle-opacity:   opacity when idle/scrolling (default: 0.2)
+   --scrollbar-hover-opacity:  opacity on container hover (default: 1)
+*/
+/* Global: thin themed scrollbars with idle opacity.
+   Uses color-mix to apply the idle opacity to the thumb color.
+   Skipped when --scrollbar-native is set or on [data-scrollbar-native] elements. */
+:root:not([data-scrollbar-native]) {
+  scrollbar-width: thin;
+  scrollbar-color:
+    color-mix(in oklch, var(--scrollbar-thumb, var(--color-text-muted)) calc(var(--scrollbar-idle-opacity, 0.2) * 100%), transparent)
+    var(--scrollbar-track, transparent);
+}
+/* Full opacity when hovering over ANY scrollable container. */
+:root:not([data-scrollbar-native]) *:hover {
+  scrollbar-color:
+    var(--scrollbar-thumb, var(--color-text-muted))
+    var(--scrollbar-track, transparent);
+}
+/* Per-element opt-out: restore native scrollbar */
+[data-scrollbar-native],
+[data-scrollbar-native] * {
+  scrollbar-width: auto !important;
+  scrollbar-color: auto !important;
+}
+/* Utility: completely hide native scrollbar (used by Scrollbar component).
+   Content remains scrollable via overflow. */
+.scrollbar-none {
+  scrollbar-width: none;
+}
+.scrollbar-none::-webkit-scrollbar {
+  display: none;
+}
+/* Keyboard focus indicator on the scrollable viewport (WCAG 2.2 AA). */
+[data-scrollbar-viewport]:focus-visible {
+  outline: 2px solid var(--color-ring, currentColor);
+  outline-offset: -2px;
+}
+/* ─── Custom Scrollbar Component States ─── */
+/* Thumb interaction states — driven by data attributes from behavior module.
+   CSS-only fallback: visible at idle opacity with approximate sizing.
+   JS-enhanced (data-scrollbar-ready): hidden until scroll/hover/drag. */
+[data-scrollbar] [data-scrollbar-thumb],
+[data-scrollbar] [data-scrollbar-thumb="y"],
+[data-scrollbar] [data-scrollbar-thumb="x"] {
+  opacity: var(--scrollbar-idle-opacity, 0.2);
+  transition: opacity var(--duration-fast, 150ms) var(--ease-out, ease-out),
+              width var(--duration-fastest, 75ms) var(--ease-out, ease-out);
+}
+/* CSS-only fallback sizing — overridden by JS inline styles */
+[data-scrollbar][data-scrollbar-axis="y"] [data-scrollbar-thumb],
+[data-scrollbar] [data-scrollbar-thumb="y"] {
+  height: 30%;
+  min-height: 20px;
+}
+[data-scrollbar][data-scrollbar-axis="x"] [data-scrollbar-thumb],
+[data-scrollbar] [data-scrollbar-thumb="x"] {
+  width: 30%;
+  min-width: 20px;
+}
+/* JS-enhanced: hide thumb when idle (behavior module manages visibility) */
+[data-scrollbar][data-scrollbar-ready] [data-scrollbar-thumb],
+[data-scrollbar][data-scrollbar-ready] [data-scrollbar-thumb="y"],
+[data-scrollbar][data-scrollbar-ready] [data-scrollbar-thumb="x"] {
+  opacity: 0;
+}
+/* Scrolling: thumb fades in at idle opacity */
+[data-scrollbar][data-scrolling] [data-scrollbar-thumb],
+[data-scrollbar][data-scrolling] [data-scrollbar-thumb="y"],
+[data-scrollbar][data-scrolling] [data-scrollbar-thumb="x"] {
+  opacity: var(--scrollbar-idle-opacity, 0.2);
+}
+/* Hovering over the scrollbar track area: full opacity */
+[data-scrollbar][data-scroll-hover] [data-scrollbar-thumb],
+[data-scrollbar][data-scroll-hover] [data-scrollbar-thumb="y"],
+[data-scrollbar][data-scroll-hover] [data-scrollbar-thumb="x"] {
+  opacity: var(--scrollbar-hover-opacity, 1);
+}
+/* Actively dragging the thumb: full opacity */
+[data-scrollbar][data-scroll-active] [data-scrollbar-thumb],
+[data-scrollbar][data-scroll-active] [data-scrollbar-thumb="y"],
+[data-scrollbar][data-scroll-active] [data-scrollbar-thumb="x"] {
+  opacity: var(--scrollbar-hover-opacity, 1);
+}
+/* Reduced motion: instant transitions */
+@media (prefers-reduced-motion: reduce) {
+  [data-scrollbar] [data-scrollbar-thumb],
+  [data-scrollbar] [data-scrollbar-thumb="y"],
+  [data-scrollbar] [data-scrollbar-thumb="x"] {
+    transition: none;
+  }
+}
+/* Touch devices: hide custom scrollbar, let native overlay handle it.
+   pointer:coarse targets the input method (touch), not screen size —
+   a 12" iPad still gets native scrollbars while a 768px desktop keeps
+   the custom ones. Native mobile overlay scrollbars have momentum,
+   edge bounce, and auto-hide — strictly better UX than a custom thumb
+   on touch. */
+@media (pointer: coarse) {
+  [data-scrollbar] [data-scrollbar-track],
+  [data-scrollbar] [data-scrollbar-track="y"],
+  [data-scrollbar] [data-scrollbar-track="x"] {
+    display: none !important;
+  }
+  [data-scrollbar] [data-scrollbar-viewport] {
+    padding-right: 0 !important;
+    padding-bottom: 0 !important;
+  }
+}
+/* ─── Texture Grain System ─── */
+/* Opt-in noise overlay — add \`cx-texture\` class to any element.
+   Uses SVG feTurbulence for organic, resolution-independent grain.
+   Custom properties:
+     --texture-opacity:  grain visibility (light: 0.12, dark: 0.18)
+     --texture-url:      swap to a custom noise image/SVG
+   Usage:
+     <div class="cx-texture"> ... </div>
+     style="--texture-opacity: 0.2"  (stronger grain)
+     style="--texture-url: url(my-noise.svg)"  (custom pattern)
+*/
+.cx-texture {
+  position: relative;
+}
+.cx-texture::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: var(--texture-url, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='1'/></svg>"));
+  background-repeat: repeat;
+  background-size: 200px 200px;
+  opacity: var(--texture-opacity, 0.12);
+  pointer-events: none;
+  z-index: 1;
+  border-radius: inherit;
+  mix-blend-mode: multiply;
+}
+/* Ensure card content stays above the grain overlay */
+.cx-texture > * {
+  position: relative;
+  z-index: 2;
+}
+/* Dark theme: stronger grain + additive blend for visibility on dark surfaces */
+[data-theme="dark"] .cx-texture::after,
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .cx-texture::after {
+    opacity: var(--texture-opacity, 0.18);
+    mix-blend-mode: soft-light;
+  }
+}
+/* Reduced motion: disable blend mode animation (static grain is fine) */
+@media (prefers-reduced-motion: reduce) {
+  .cx-texture::after {
+    animation: none;
+  }
+}
+/* ─── Prose Typography ─── */
+/* Styles for rendered GFM markdown content (.cx-prose wrapper).
+   All colors use CSS vars for theme compatibility. */
+.cx-prose {
+  line-height: 1.7;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+/* Headings */
+.cx-prose h1 { font-size: 1.875rem; font-weight: 700; margin: 1.5rem 0 0.75rem; line-height: 1.2; }
+.cx-prose h2 { font-size: 1.5rem; font-weight: 600; margin: 1.25rem 0 0.625rem; line-height: 1.25; }
+.cx-prose h3 { font-size: 1.25rem; font-weight: 600; margin: 1rem 0 0.5rem; line-height: 1.3; }
+.cx-prose h4 { font-size: 1.125rem; font-weight: 600; margin: 0.875rem 0 0.375rem; line-height: 1.35; }
+.cx-prose h5 { font-size: 1rem; font-weight: 600; margin: 0.75rem 0 0.25rem; line-height: 1.4; }
+.cx-prose h6 { font-size: 0.875rem; font-weight: 600; margin: 0.75rem 0 0.25rem; line-height: 1.4; opacity: 0.8; }
+.cx-prose :first-child { margin-top: 0; }
+/* Paragraphs */
+.cx-prose p { margin: 0 0 0.75rem; }
+.cx-prose p:last-child { margin-bottom: 0; }
+/* Lists */
+.cx-prose ul { list-style-type: disc; padding-left: 1.5rem; margin: 0 0 0.75rem; }
+.cx-prose ol { list-style-type: decimal; padding-left: 1.5rem; margin: 0 0 0.75rem; }
+.cx-prose li { margin: 0.125rem 0; }
+.cx-prose li > ul, .cx-prose li > ol { margin: 0.25rem 0; }
+.cx-prose ul ul { list-style-type: circle; }
+.cx-prose ul ul ul { list-style-type: square; }
+/* Task lists — remove bullet, align checkbox */
+.cx-prose ul:has(> li > input[type="checkbox"]) { list-style: none; padding-left: 0.25rem; }
+.cx-prose li > input[type="checkbox"] { margin-right: 0.5rem; vertical-align: middle; }
+/* Tables */
+.cx-prose table { border-collapse: collapse; width: 100%; margin: 0.75rem 0; font-size: 0.875rem; }
+.cx-prose thead th {
+  text-align: left; font-weight: 600; padding: 0.5rem 0.75rem;
+  border-bottom: 2px solid var(--color-border);
+}
+.cx-prose tbody td { padding: 0.375rem 0.75rem; border-bottom: 1px solid var(--color-border); }
+.cx-prose tbody tr:last-child td { border-bottom: none; }
+/* Inline code */
+.cx-prose code {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  padding: 0.15em 0.35em;
+  border-radius: 0.25rem;
+  background: var(--color-surface);
+}
+/* Fenced code blocks — reset inline code styles inside pre */
+.cx-prose pre {
+  margin: 0.75rem 0;
+  padding: 0.875rem 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  background: var(--color-inverse-surface);
+  color: var(--color-inverse-text);
+}
+.cx-prose pre code {
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  white-space: pre;
+}
+/* Blockquotes */
+.cx-prose blockquote {
+  border-left: 3px solid var(--color-border);
+  padding: 0.25rem 0 0.25rem 1rem;
+  margin: 0.75rem 0;
+  opacity: 0.85;
+}
+.cx-prose blockquote p:last-child { margin-bottom: 0; }
+/* Links */
+.cx-prose a {
+  color: var(--color-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+}
+.cx-prose a:hover { text-decoration-thickness: 2px; }
+/* Horizontal rules */
+.cx-prose hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 1.25rem 0;
+}
+/* Images */
+.cx-prose img { max-width: 100%; height: auto; border-radius: 0.375rem; margin: 0.5rem 0; }
+/* Strong + emphasis */
+.cx-prose strong { font-weight: 600; }
+.cx-prose em { font-style: italic; }
+.cx-prose del { text-decoration: line-through; opacity: 0.7; }
+/* Footnotes */
+.cx-prose .footnote-definition { font-size: 0.8125rem; opacity: 0.8; margin-top: 1rem; }
+.cx-prose sup { font-size: 0.75em; }`;
+export const UTILITIES_CSS = `/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-serif:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-blue-500:oklch(62.3% .214 259.815);--color-zinc-100:oklch(96.7% .001 286.375);--color-zinc-200:oklch(92% .004 286.32);--color-zinc-300:oklch(87.1% .006 286.286);--color-zinc-400:oklch(70.5% .015 286.067);--color-zinc-700:oklch(37% .013 285.805);--color-zinc-800:oklch(27.4% .006 286.033);--color-zinc-900:oklch(21% .006 285.885);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-4xl:56rem;--container-6xl:72rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-black:900;--tracking-tighter:-.05em;--tracking-tight:-.025em;--tracking-normal:0em;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--leading-loose:2;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--shadow-sm:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--ease-in:cubic-bezier(.4, 0, 1, 1);--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing) * 0)}.inset-x-0{inset-inline:calc(var(--spacing) * 0)}.inset-y-0{inset-block:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.end\\!{inset-inline-end:var(--spacing)!important}.-top-1{top:calc(var(--spacing) * -1)}.top-0{top:calc(var(--spacing) * 0)}.top-1{top:calc(var(--spacing) * 1)}.top-1\\/2{top:50%}.top-2{top:calc(var(--spacing) * 2)}.top-3{top:calc(var(--spacing) * 3)}.top-full{top:100%}.-right-1{right:calc(var(--spacing) * -1)}.right-0{right:calc(var(--spacing) * 0)}.right-1{right:calc(var(--spacing) * 1)}.right-2{right:calc(var(--spacing) * 2)}.right-full{right:100%}.-bottom-1{bottom:calc(var(--spacing) * -1)}.bottom-0{bottom:calc(var(--spacing) * 0)}.bottom-full{bottom:100%}.-left-1{left:calc(var(--spacing) * -1)}.left-0{left:calc(var(--spacing) * 0)}.left-1{left:calc(var(--spacing) * 1)}.left-1\\/2{left:50%}.left-3{left:calc(var(--spacing) * 3)}.left-full{left:100%}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.col-span-2{grid-column:span 2/span 2}.row-1{grid-row:1}.row-2{grid-row:2}.row-3{grid-row:3}.row-4{grid-row:4}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.-m-1{margin:calc(var(--spacing) * -1)}.m-0{margin:calc(var(--spacing) * 0)}.m-2{margin:calc(var(--spacing) * 2)}.-mx-6{margin-inline:calc(var(--spacing) * -6)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-3{margin-inline:calc(var(--spacing) * 3)}.my-1{margin-block:calc(var(--spacing) * 1)}.my-2{margin-block:calc(var(--spacing) * 2)}.-mt-4{margin-top:calc(var(--spacing) * -4)}.mt-0{margin-top:calc(var(--spacing) * 0)}.mt-0\\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-1\\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mr-1{margin-right:calc(var(--spacing) * 1)}.mr-1\\.5{margin-right:calc(var(--spacing) * 1.5)}.mr-3{margin-right:calc(var(--spacing) * 3)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-1\\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.ml-0{margin-left:calc(var(--spacing) * 0)}.ml-0\\.5{margin-left:calc(var(--spacing) * .5)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-1\\.5{margin-left:calc(var(--spacing) * 1.5)}.ml-3{margin-left:calc(var(--spacing) * 3)}.ml-\\[50\\%\\]{margin-left:50%}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.aspect-square{aspect-ratio:1}.size-0{width:calc(var(--spacing) * 0);height:calc(var(--spacing) * 0)}.size-1{width:calc(var(--spacing) * 1);height:calc(var(--spacing) * 1)}.size-1\\.5{width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5)}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-2\\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-3\\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-4\\.5{width:calc(var(--spacing) * 4.5);height:calc(var(--spacing) * 4.5)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}.size-14{width:calc(var(--spacing) * 14);height:calc(var(--spacing) * 14)}.size-16{width:calc(var(--spacing) * 16);height:calc(var(--spacing) * 16)}.size-24{width:calc(var(--spacing) * 24);height:calc(var(--spacing) * 24)}.size-full{width:100%;height:100%}.h-0{height:calc(var(--spacing) * 0)}.h-0\\.5{height:calc(var(--spacing) * .5)}.h-1{height:calc(var(--spacing) * 1)}.h-1\\.5{height:calc(var(--spacing) * 1.5)}.h-2{height:calc(var(--spacing) * 2)}.h-2\\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-11{height:calc(var(--spacing) * 11)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-24{height:calc(var(--spacing) * 24)}.h-32{height:calc(var(--spacing) * 32)}.h-40{height:calc(var(--spacing) * 40)}.h-48{height:calc(var(--spacing) * 48)}.h-56{height:calc(var(--spacing) * 56)}.h-64{height:calc(var(--spacing) * 64)}.h-72{height:calc(var(--spacing) * 72)}.h-96{height:calc(var(--spacing) * 96)}.h-\\[18px\\]{height:18px}.h-\\[20rem\\]{height:20rem}.h-\\[400px\\]{height:400px}.h-\\[480px\\]{height:480px}.h-\\[560px\\]{height:560px}.h-dvh{height:100dvh}.h-full{height:100%}.max-h-\\[30vh\\]{max-height:30vh}.max-h-\\[50vh\\]{max-height:50vh}.max-h-\\[70vh\\]{max-height:70vh}.max-h-\\[85dvh\\]{max-height:85dvh}.max-h-\\[85vh\\]{max-height:85vh}.max-h-\\[calc\\(100dvh-2rem\\)\\]{max-height:calc(100dvh - 2rem)}.max-h-full{max-height:100%}.max-h-none{max-height:none}.max-h-screen{max-height:100vh}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-h-7{min-height:calc(var(--spacing) * 7)}.min-h-8{min-height:calc(var(--spacing) * 8)}.min-h-9{min-height:calc(var(--spacing) * 9)}.min-h-10{min-height:calc(var(--spacing) * 10)}.min-h-12{min-height:calc(var(--spacing) * 12)}.min-h-\\[120px\\]{min-height:120px}.w-0{width:calc(var(--spacing) * 0)}.w-0\\.5{width:calc(var(--spacing) * .5)}.w-1{width:calc(var(--spacing) * 1)}.w-1\\.5{width:calc(var(--spacing) * 1.5)}.w-2{width:calc(var(--spacing) * 2)}.w-2\\.5{width:calc(var(--spacing) * 2.5)}.w-2\\/5{width:40%}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-10{width:calc(var(--spacing) * 10)}.w-11{width:calc(var(--spacing) * 11)}.w-12{width:calc(var(--spacing) * 12)}.w-24{width:calc(var(--spacing) * 24)}.w-48{width:calc(var(--spacing) * 48)}.w-64{width:calc(var(--spacing) * 64)}.w-80{width:calc(var(--spacing) * 80)}.w-\\[28rem\\]{width:28rem}.w-\\[36rem\\]{width:36rem}.w-\\[85\\%\\]{width:85%}.w-\\[85vw\\]{width:85vw}.w-\\[256px\\]{width:256px}.w-\\[284px\\]{width:284px}.w-\\[312px\\]{width:312px}.w-\\[N\\%\\]{width:N%}.w-auto{width:auto}.w-dvw{width:100dvw}.w-full{width:100%}.w-max{width:max-content}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-\\[16rem\\]{max-width:16rem}.max-w-\\[20rem\\]{max-width:20rem}.max-w-\\[24rem\\]{max-width:24rem}.max-w-\\[28rem\\]{max-width:28rem}.max-w-\\[80\\%\\]{max-width:80%}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-none{max-width:none}.max-w-prose{max-width:65ch}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-7{min-width:calc(var(--spacing) * 7)}.min-w-8{min-width:calc(var(--spacing) * 8)}.min-w-9{min-width:calc(var(--spacing) * 9)}.min-w-16{min-width:calc(var(--spacing) * 16)}.min-w-24{min-width:calc(var(--spacing) * 24)}.min-w-32{min-width:calc(var(--spacing) * 32)}.min-w-40{min-width:calc(var(--spacing) * 40)}.min-w-48{min-width:calc(var(--spacing) * 48)}.min-w-\\[17\\.5rem\\]{min-width:17.5rem}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.origin-center{transform-origin:50%}.-translate-x-1{--tw-translate-x:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-x-1\\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-1{--tw-translate-x:calc(var(--spacing) * 1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-3{--tw-translate-x:calc(var(--spacing) * 3);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-3\\.5{--tw-translate-x:calc(var(--spacing) * 3.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-4{--tw-translate-x:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-5{--tw-translate-x:calc(var(--spacing) * 5);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1{--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-1{--tw-translate-y:calc(var(--spacing) * 1);translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-\\[0\\.98\\]{scale:.98}.-rotate-90{rotate:-90deg}.rotate-45{rotate:45deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-default{cursor:default}.cursor-grab{cursor:grab}.cursor-help{cursor:help}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-none{resize:none}.resize-y{resize:vertical}.list-none{list-style-type:none}.appearance-none{appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-center{align-items:center}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-0{gap:calc(var(--spacing) * 0)}.gap-0\\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-px{gap:1px}.gap-x-2{column-gap:calc(var(--spacing) * 2)}.gap-x-6{column-gap:calc(var(--spacing) * 6)}.gap-y-2{row-gap:calc(var(--spacing) * 2)}.self-start{align-self:flex-start}.self-stretch{align-self:stretch}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.overscroll-contain{overscroll-behavior:contain}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.rounded-t-2xl{border-top-left-radius:var(--radius-2xl);border-top-right-radius:var(--radius-2xl)}.rounded-t-3xl{border-top-left-radius:var(--radius-3xl);border-top-right-radius:var(--radius-3xl)}.rounded-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}.rounded-t-none{border-top-left-radius:0;border-top-right-radius:0}.rounded-l{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-l-2xl{border-top-left-radius:var(--radius-2xl);border-bottom-left-radius:var(--radius-2xl)}.rounded-l-3xl{border-top-left-radius:var(--radius-3xl);border-bottom-left-radius:var(--radius-3xl)}.rounded-l-full{border-top-left-radius:3.40282e38px;border-bottom-left-radius:3.40282e38px}.rounded-l-lg{border-top-left-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg)}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-tl{border-top-left-radius:.25rem}.rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.rounded-r-2xl{border-top-right-radius:var(--radius-2xl);border-bottom-right-radius:var(--radius-2xl)}.rounded-r-3xl{border-top-right-radius:var(--radius-3xl);border-bottom-right-radius:var(--radius-3xl)}.rounded-r-full{border-top-right-radius:3.40282e38px;border-bottom-right-radius:3.40282e38px}.rounded-r-lg{border-top-right-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-tr{border-top-right-radius:.25rem}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-b-2xl{border-bottom-right-radius:var(--radius-2xl);border-bottom-left-radius:var(--radius-2xl)}.rounded-b-3xl{border-bottom-right-radius:var(--radius-3xl);border-bottom-left-radius:var(--radius-3xl)}.rounded-b-lg{border-bottom-right-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg)}.rounded-b-none{border-bottom-right-radius:0;border-bottom-left-radius:0}.rounded-br{border-bottom-right-radius:.25rem}.rounded-bl{border-bottom-left-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-0{border-top-style:var(--tw-border-style);border-top-width:0}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-t-4{border-top-style:var(--tw-border-style);border-top-width:4px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-0{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-0{border-left-style:var(--tw-border-style);border-left-width:0}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-dotted{--tw-border-style:dotted;border-style:dotted}.border-none{--tw-border-style:none;border-style:none}.border-solid{--tw-border-style:solid;border-style:solid}.border-\\[var\\(--color-border\\)\\]{border-color:var(--color-border)}.border-\\[var\\(--color-danger\\)\\]{border-color:var(--color-danger)}.border-\\[var\\(--color-inverse-text\\)\\]\\/80{border-color:var(--color-inverse-text)}@supports (color:color-mix(in lab, red, red)){.border-\\[var\\(--color-inverse-text\\)\\]\\/80{border-color:color-mix(in oklab, var(--color-inverse-text) 80%, transparent)}}.border-\\[var\\(--color-primary\\)\\]{border-color:var(--color-primary)}.border-transparent{border-color:#0000}.border-zinc-200{border-color:var(--color-zinc-200)}.border-zinc-300{border-color:var(--color-zinc-300)}.border-l-\\[rgba\\(255\\,255\\,255\\,0\\.2\\)\\]{border-left-color:#fff3}.border-l-\\[var\\(--color-border\\)\\]{border-left-color:var(--color-border)}.bg-\\[\\#28C840\\]{background-color:#28c840}.bg-\\[\\#FEBC2E\\]{background-color:#febc2e}.bg-\\[\\#FF5F57\\]{background-color:#ff5f57}.bg-\\[color-mix\\(in_oklch\\,var\\(--color-inverse-surface\\)_80\\%\\,transparent\\)\\]{background-color:var(--color-inverse-surface)}@supports (color:color-mix(in lab, red, red)){.bg-\\[color-mix\\(in_oklch\\,var\\(--color-inverse-surface\\)_80\\%\\,transparent\\)\\]{background-color:color-mix(in oklch,var(--color-inverse-surface) 80%,transparent)}}.bg-\\[color-mix\\(in_oklch\\,var\\(--color-primary\\)_10\\%\\,transparent\\)\\]{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.bg-\\[color-mix\\(in_oklch\\,var\\(--color-primary\\)_10\\%\\,transparent\\)\\]{background-color:color-mix(in oklch,var(--color-primary) 10%,transparent)}}.bg-\\[color-mix\\(in_oklch\\,var\\(--color-secondary\\)_40\\%\\,transparent\\)\\]{background-color:var(--color-secondary)}@supports (color:color-mix(in lab, red, red)){.bg-\\[color-mix\\(in_oklch\\,var\\(--color-secondary\\)_40\\%\\,transparent\\)\\]{background-color:color-mix(in oklch,var(--color-secondary) 40%,transparent)}}.bg-\\[color-mix\\(in_oklch\\,var\\(--color-text\\)_15\\%\\,var\\(--color-bg\\)\\)\\]{background-color:var(--color-text)}@supports (color:color-mix(in lab, red, red)){.bg-\\[color-mix\\(in_oklch\\,var\\(--color-text\\)_15\\%\\,var\\(--color-bg\\)\\)\\]{background-color:color-mix(in oklch,var(--color-text) 15%,var(--color-bg))}}.bg-\\[var\\(--color-border\\)\\]{background-color:var(--color-border)}.bg-\\[var\\(--color-danger\\)\\]{background-color:var(--color-danger)}.bg-\\[var\\(--color-inverse-surface\\)\\]\\/20{background-color:var(--color-inverse-surface)}@supports (color:color-mix(in lab, red, red)){.bg-\\[var\\(--color-inverse-surface\\)\\]\\/20{background-color:color-mix(in oklab, var(--color-inverse-surface) 20%, transparent)}}.bg-\\[var\\(--color-primary\\)\\]{background-color:var(--color-primary)}.bg-\\[var\\(--color-secondary\\)\\]{background-color:var(--color-secondary)}.bg-\\[var\\(--color-surface\\)\\]{background-color:var(--color-surface)}.bg-\\[var\\(--color-surface-overlay\\)\\]{background-color:var(--color-surface-overlay)}.bg-\\[var\\(--scrollbar-thumb\\,var\\(--color-text-muted\\)\\)\\]{background-color:var(--scrollbar-thumb,var(--color-text-muted))}.bg-\\[var\\(--scrollbar-track\\,var\\(--color-secondary\\)\\)\\]{background-color:var(--scrollbar-track,var(--color-secondary))}.bg-black{background-color:var(--color-black)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.px-10{padding-inline:calc(var(--spacing) * 10)}.py-0{padding-block:calc(var(--spacing) * 0)}.py-0\\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-3\\.5{padding-block:calc(var(--spacing) * 3.5)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-0{padding-top:calc(var(--spacing) * 0)}.pt-1{padding-top:calc(var(--spacing) * 1)}.pt-1\\.5{padding-top:calc(var(--spacing) * 1.5)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-2\\.5{padding-top:calc(var(--spacing) * 2.5)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-3\\.5{padding-top:calc(var(--spacing) * 3.5)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-5{padding-top:calc(var(--spacing) * 5)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pr-1{padding-right:calc(var(--spacing) * 1)}.pr-1\\.5{padding-right:calc(var(--spacing) * 1.5)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-2\\.5{padding-right:calc(var(--spacing) * 2.5)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pr-3\\.5{padding-right:calc(var(--spacing) * 3.5)}.pr-4{padding-right:calc(var(--spacing) * 4)}.pr-24{padding-right:calc(var(--spacing) * 24)}.pb-1{padding-bottom:calc(var(--spacing) * 1)}.pb-1\\.5{padding-bottom:calc(var(--spacing) * 1.5)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-2\\.5{padding-bottom:calc(var(--spacing) * 2.5)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-3\\.5{padding-bottom:calc(var(--spacing) * 3.5)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-5{padding-bottom:calc(var(--spacing) * 5)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pb-8{padding-bottom:calc(var(--spacing) * 8)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-6{padding-left:calc(var(--spacing) * 6)}.text-center{text-align:center}.text-end{text-align:end}.text-left{text-align:left}.text-right{text-align:right}.text-start{text-align:start}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.font-serif{font-family:var(--font-serif)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[0\\.5rem\\]{font-size:.5rem}.text-\\[0\\.625rem\\]{font-size:.625rem}.text-\\[10px\\]{font-size:10px}.leading-4{--tw-leading:calc(var(--spacing) * 4);line-height:calc(var(--spacing) * 4)}.leading-5{--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.leading-6{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}.leading-7{--tw-leading:calc(var(--spacing) * 7);line-height:calc(var(--spacing) * 7)}.leading-8{--tw-leading:calc(var(--spacing) * 8);line-height:calc(var(--spacing) * 8)}.leading-9{--tw-leading:calc(var(--spacing) * 9);line-height:calc(var(--spacing) * 9)}.leading-10{--tw-leading:calc(var(--spacing) * 10);line-height:calc(var(--spacing) * 10)}.leading-loose{--tw-leading:var(--leading-loose);line-height:var(--leading-loose)}.leading-none{--tw-leading:1;line-height:1}.leading-normal{--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-normal{--tw-tracking:var(--tracking-normal);letter-spacing:var(--tracking-normal)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-tighter{--tw-tracking:var(--tracking-tighter);letter-spacing:var(--tracking-tighter)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.\\[text-wrap\\:balance\\],.text-balance{text-wrap:balance}.text-wrap{text-wrap:wrap}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre{white-space:pre}.whitespace-pre-wrap{white-space:pre-wrap}.text-\\[color-mix\\(in_oklch\\,var\\(--color-inverse-text\\)_70\\%\\,transparent\\)\\]{color:var(--color-inverse-text)}@supports (color:color-mix(in lab, red, red)){.text-\\[color-mix\\(in_oklch\\,var\\(--color-inverse-text\\)_70\\%\\,transparent\\)\\]{color:color-mix(in oklch,var(--color-inverse-text) 70%,transparent)}}.text-\\[var\\(--color-danger\\)\\]{color:var(--color-danger)}.text-\\[var\\(--color-error\\)\\]{color:var(--color-error)}.text-\\[var\\(--color-inverse-text\\)\\],.text-\\[var\\(--color-inverse-text\\)\\]\\/80{color:var(--color-inverse-text)}@supports (color:color-mix(in lab, red, red)){.text-\\[var\\(--color-inverse-text\\)\\]\\/80{color:color-mix(in oklab, var(--color-inverse-text) 80%, transparent)}}.text-\\[var\\(--color-on-primary\\)\\]{color:var(--color-on-primary)}.text-\\[var\\(--color-primary\\)\\]{color:var(--color-primary)}.text-\\[var\\(--color-success\\)\\]{color:var(--color-success)}.text-\\[var\\(--color-text\\)\\]{color:var(--color-text)}.text-\\[var\\(--color-text-inverse\\)\\]{color:var(--color-text-inverse)}.text-\\[var\\(--color-text-inverted\\)\\]{color:var(--color-text-inverted)}.text-\\[var\\(--color-text-muted\\)\\]{color:var(--color-text-muted)}.text-\\[var\\(--color-text-primary\\)\\]{color:var(--color-text-primary)}.text-\\[var\\(--color-text-secondary\\)\\]{color:var(--color-text-secondary)}.text-black{color:var(--color-black)}.text-transparent{color:#0000}.text-white{color:var(--color-white)}.text-zinc-700{color:var(--color-zinc-700)}.text-zinc-900{color:var(--color-zinc-900)}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.overline{text-decoration-line:overline}.underline{text-decoration-line:underline}.decoration-dotted{text-decoration-style:dotted}.decoration-1{text-decoration-thickness:1px}.decoration-2{text-decoration-thickness:2px}.underline-offset-2{text-underline-offset:2px}.underline-offset-4{text-underline-offset:4px}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring,.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-\\[var\\(--color-border\\)\\]{--tw-ring-color:var(--color-border)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.brightness-110{--tw-brightness:brightness(110%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\\[border-radius\\,padding\\,background-color\\]{transition-property:border-radius,padding,background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\\[opacity\\,transform\\]{transition-property:opacity,transform;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\\[width\\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-none{transition-property:none}.duration-0{--tw-duration:0s;transition-duration:0s}.duration-75{--tw-duration:75ms;transition-duration:75ms}.duration-100{--tw-duration:.1s;transition-duration:.1s}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.duration-700{--tw-duration:.7s;transition-duration:.7s}.duration-\\[10ms\\]{--tw-duration:10ms;transition-duration:10ms}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-linear{--tw-ease:linear;transition-timing-function:linear}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-all{-webkit-user-select:all;user-select:all}.select-none{-webkit-user-select:none;user-select:none}.\\[rq\\:hmr\\]{rq:hmr}.\\[rq\\:tier0\\]{rq:tier0}.\\[rq\\:tier1\\]{rq:tier1}.\\[rq\\:tier2\\]{rq:tier2}.\\[rq\\:tier3\\]{rq:tier3}.\\[rq\\:watch\\]{rq:watch}.\\[scrollbar-width\\:none\\]{scrollbar-width:none}@media (hover:hover){.group-hover\\:opacity-70:is(:where(.group):hover *){opacity:.7}.group-hover\\/tooltip\\:visible:is(:where(.group\\/tooltip):hover *){visibility:visible}.group-hover\\/tooltip\\:translate-x-0:is(:where(.group\\/tooltip):hover *){--tw-translate-x:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\\/tooltip\\:translate-y-0:is(:where(.group\\/tooltip):hover *){--tw-translate-y:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\\/tooltip\\:scale-100:is(:where(.group\\/tooltip):hover *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\\/tooltip\\:opacity-100:is(:where(.group\\/tooltip):hover *){opacity:1}}.group-has-\\[\\:focus-visible\\]\\/tooltip\\:visible:is(:where(.group\\/tooltip):has(:focus-visible) *){visibility:visible}.group-has-\\[\\:focus-visible\\]\\/tooltip\\:translate-x-0:is(:where(.group\\/tooltip):has(:focus-visible) *){--tw-translate-x:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-has-\\[\\:focus-visible\\]\\/tooltip\\:translate-y-0:is(:where(.group\\/tooltip):has(:focus-visible) *){--tw-translate-y:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-has-\\[\\:focus-visible\\]\\/tooltip\\:scale-100:is(:where(.group\\/tooltip):has(:focus-visible) *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-has-\\[\\:focus-visible\\]\\/tooltip\\:opacity-100:is(:where(.group\\/tooltip):has(:focus-visible) *){opacity:1}.group-data-\\[multiline\\]\\:flex:is(:where(.group)[data-multiline] *){display:flex}.group-data-\\[multiline\\]\\:hidden:is(:where(.group)[data-multiline] *){display:none}.group-data-\\[multiline\\]\\:w-full:is(:where(.group)[data-multiline] *){width:100%}.peer-checked\\:border-\\[var\\(--color-primary\\)\\]:is(:where(.peer):checked~*){border-color:var(--color-primary)}.peer-checked\\:bg-\\[var\\(--color-primary\\)\\]:is(:where(.peer):checked~*){background-color:var(--color-primary)}.peer-checked\\:text-\\[var\\(--color-text-inverse\\)\\]:is(:where(.peer):checked~*){color:var(--color-text-inverse)}.peer-focus-visible\\:ring-2:is(:where(.peer):focus-visible~*){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.peer-focus-visible\\:ring-\\[var\\(--color-ring\\)\\]:is(:where(.peer):focus-visible~*){--tw-ring-color:var(--color-ring)}.peer-focus-visible\\:ring-offset-2:is(:where(.peer):focus-visible~*){--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.peer-focus-visible\\:ring-offset-\\[var\\(--color-bg\\)\\]:is(:where(.peer):focus-visible~*){--tw-ring-offset-color:var(--color-bg)}.placeholder\\:text-\\[var\\(--color-text-muted\\)\\]::placeholder{color:var(--color-text-muted)}.placeholder\\:text-zinc-400::placeholder{color:var(--color-zinc-400)}.even\\:bg-\\[var\\(--color-surface-overlay\\)\\]:nth-child(2n){background-color:var(--color-surface-overlay)}.open\\:flex:is([open],:popover-open,:open){display:flex}.open\\:grid:is([open],:popover-open,:open){display:grid}.focus-within\\:border-\\[var\\(--color-border-focus\\)\\]:focus-within{border-color:var(--color-border-focus)}.focus-within\\:border-\\[var\\(--color-error\\)\\]:focus-within{border-color:var(--color-error)}.focus-within\\:ring-2:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-within\\:ring-\\[var\\(--color-ring\\)\\]:focus-within{--tw-ring-color:var(--color-ring)}.focus-within\\:ring-offset-2:focus-within{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-within\\:ring-offset-\\[var\\(--color-bg\\)\\]:focus-within{--tw-ring-offset-color:var(--color-bg)}.focus-within\\:outline-none:focus-within{--tw-outline-style:none;outline-style:none}@media (hover:hover){.hover\\:-translate-y-0\\.5:hover{--tw-translate-y:calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\\:border-\\[var\\(--color-border-focus\\)\\]:hover{border-color:var(--color-border-focus)}.hover\\:border-\\[var\\(--color-error\\)\\]:hover{border-color:var(--color-error)}.hover\\:border-\\[var\\(--color-info\\)\\]:hover{border-color:var(--color-info)}.hover\\:border-\\[var\\(--color-primary\\)\\]:hover{border-color:var(--color-primary)}.hover\\:border-\\[var\\(--color-success\\)\\]:hover{border-color:var(--color-success)}.hover\\:border-\\[var\\(--color-warning\\)\\]:hover{border-color:var(--color-warning)}.hover\\:bg-\\[color-mix\\(in_oklch\\,currentColor_4\\%\\,transparent\\)\\]:hover{background-color:currentColor}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-\\[color-mix\\(in_oklch\\,currentColor_4\\%\\,transparent\\)\\]:hover{background-color:color-mix(in oklch,currentColor 4%,transparent)}}.hover\\:bg-\\[color-mix\\(in_oklch\\,currentColor_5\\%\\,transparent\\)\\]:hover{background-color:currentColor}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-\\[color-mix\\(in_oklch\\,currentColor_5\\%\\,transparent\\)\\]:hover{background-color:color-mix(in oklch,currentColor 5%,transparent)}}.hover\\:bg-\\[color-mix\\(in_oklch\\,currentColor_6\\%\\,transparent\\)\\]:hover{background-color:currentColor}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-\\[color-mix\\(in_oklch\\,currentColor_6\\%\\,transparent\\)\\]:hover{background-color:color-mix(in oklch,currentColor 6%,transparent)}}.hover\\:bg-\\[color-mix\\(in_oklch\\,currentColor_8\\%\\,transparent\\)\\]:hover{background-color:currentColor}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-\\[color-mix\\(in_oklch\\,currentColor_8\\%\\,transparent\\)\\]:hover{background-color:color-mix(in oklch,currentColor 8%,transparent)}}.hover\\:bg-\\[color-mix\\(in_oklch\\,currentColor_10\\%\\,transparent\\)\\]:hover{background-color:currentColor}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-\\[color-mix\\(in_oklch\\,currentColor_10\\%\\,transparent\\)\\]:hover{background-color:color-mix(in oklch,currentColor 10%,transparent)}}.hover\\:bg-\\[color-mix\\(in_oklch\\,currentColor_12\\%\\,transparent\\)\\]:hover{background-color:currentColor}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-\\[color-mix\\(in_oklch\\,currentColor_12\\%\\,transparent\\)\\]:hover{background-color:color-mix(in oklch,currentColor 12%,transparent)}}.hover\\:bg-\\[color-mix\\(in_oklch\\,currentColor_15\\%\\,transparent\\)\\]:hover{background-color:currentColor}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-\\[color-mix\\(in_oklch\\,currentColor_15\\%\\,transparent\\)\\]:hover{background-color:color-mix(in oklch,currentColor 15%,transparent)}}.hover\\:bg-\\[color-mix\\(in_oklch\\,var\\(--color-text\\)_5\\%\\,transparent\\)\\]:hover{background-color:var(--color-text)}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-\\[color-mix\\(in_oklch\\,var\\(--color-text\\)_5\\%\\,transparent\\)\\]:hover{background-color:color-mix(in oklch,var(--color-text) 5%,transparent)}}.hover\\:bg-\\[color-mix\\(in_oklch\\,var\\(--color-text\\)_20\\%\\,var\\(--color-bg\\)\\)\\]:hover{background-color:var(--color-text)}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-\\[color-mix\\(in_oklch\\,var\\(--color-text\\)_20\\%\\,var\\(--color-bg\\)\\)\\]:hover{background-color:color-mix(in oklch,var(--color-text) 20%,var(--color-bg))}}.hover\\:bg-\\[color-mix\\(in_oklch\\,var\\(--color-text-muted\\)_12\\%\\,transparent\\)\\]:hover{background-color:var(--color-text-muted)}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-\\[color-mix\\(in_oklch\\,var\\(--color-text-muted\\)_12\\%\\,transparent\\)\\]:hover{background-color:color-mix(in oklch,var(--color-text-muted) 12%,transparent)}}.hover\\:bg-\\[var\\(--color-inverse-surface\\)\\]\\/40:hover{background-color:var(--color-inverse-surface)}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-\\[var\\(--color-inverse-surface\\)\\]\\/40:hover{background-color:color-mix(in oklab, var(--color-inverse-surface) 40%, transparent)}}.hover\\:bg-\\[var\\(--color-primary\\)\\]:hover{background-color:var(--color-primary)}.hover\\:bg-\\[var\\(--color-primary-hover\\)\\]:hover{background-color:var(--color-primary-hover)}.hover\\:bg-\\[var\\(--color-secondary\\)\\]:hover{background-color:var(--color-secondary)}.hover\\:bg-\\[var\\(--color-secondary-hover\\)\\]:hover{background-color:var(--color-secondary-hover)}.hover\\:bg-\\[var\\(--color-surface-overlay\\)\\]:hover{background-color:var(--color-surface-overlay)}.hover\\:text-\\[var\\(--color-inverse-text\\)\\]:hover,.hover\\:text-\\[var\\(--color-inverse-text\\)\\]\\/80:hover{color:var(--color-inverse-text)}@supports (color:color-mix(in lab, red, red)){.hover\\:text-\\[var\\(--color-inverse-text\\)\\]\\/80:hover{color:color-mix(in oklab, var(--color-inverse-text) 80%, transparent)}}.hover\\:text-\\[var\\(--color-primary\\)\\]:hover{color:var(--color-primary)}.hover\\:text-\\[var\\(--color-primary-hover\\)\\]:hover{color:var(--color-primary-hover)}.hover\\:text-\\[var\\(--color-text\\)\\]:hover{color:var(--color-text)}.hover\\:decoration-solid:hover{text-decoration-style:solid}.hover\\:\\!opacity-100:hover{opacity:1!important}.hover\\:opacity-100:hover{opacity:1}.hover\\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\\:shadow-sm:hover{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\\:ring-2:hover{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\\:ring-\\[var\\(--color-ring\\)\\]:hover{--tw-ring-color:var(--color-ring)}.hover\\:brightness-95:hover{--tw-brightness:brightness(95%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.hover\\:brightness-110:hover{--tw-brightness:brightness(110%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.hover\\:brightness-\\[0\\.98\\]:hover{--tw-brightness:brightness(.98);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.hover\\:brightness-\\[1\\.03\\]:hover{--tw-brightness:brightness(1.03);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}.focus\\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)}.focus\\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\\:ring-offset-zinc-900:focus{--tw-ring-offset-color:var(--color-zinc-900)}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\\:border-\\[var\\(--color-border-focus\\)\\]:focus-visible{border-color:var(--color-border-focus)}.focus-visible\\:border-\\[var\\(--color-error\\)\\]:focus-visible{border-color:var(--color-error)}.focus-visible\\:bg-\\[var\\(--color-primary\\)\\]:focus-visible{background-color:var(--color-primary)}.focus-visible\\:bg-\\[var\\(--color-secondary\\)\\]:focus-visible{background-color:var(--color-secondary)}.focus-visible\\:\\!opacity-100:focus-visible{opacity:1!important}.focus-visible\\:opacity-100:focus-visible{opacity:1}.focus-visible\\:ring:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\\:ring-\\[var\\(--color-primary\\)\\]:focus-visible{--tw-ring-color:var(--color-primary)}.focus-visible\\:ring-\\[var\\(--color-ring\\)\\]:focus-visible{--tw-ring-color:var(--color-ring)}.focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\\:ring-offset-\\[var\\(--color-bg\\)\\]:focus-visible{--tw-ring-offset-color:var(--color-bg)}.focus-visible\\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\\:outline-offset-1:focus-visible{outline-offset:1px}.focus-visible\\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\\:outline-\\[var\\(--color-inverse-text\\)\\]:focus-visible{outline-color:var(--color-inverse-text)}.focus-visible\\:outline-\\[var\\(--color-ring\\)\\]:focus-visible{outline-color:var(--color-ring)}.focus-visible\\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\\:translate-y-0:active{--tw-translate-y:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.active\\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.active\\:scale-\\[0\\.97\\]:active{scale:.97}.active\\:cursor-grabbing:active{cursor:grabbing}.active\\:bg-\\[color-mix\\(in_oklch\\,currentColor_8\\%\\,transparent\\)\\]:active{background-color:currentColor}@supports (color:color-mix(in lab, red, red)){.active\\:bg-\\[color-mix\\(in_oklch\\,currentColor_8\\%\\,transparent\\)\\]:active{background-color:color-mix(in oklch,currentColor 8%,transparent)}}.active\\:bg-\\[color-mix\\(in_oklch\\,currentColor_15\\%\\,transparent\\)\\]:active{background-color:currentColor}@supports (color:color-mix(in lab, red, red)){.active\\:bg-\\[color-mix\\(in_oklch\\,currentColor_15\\%\\,transparent\\)\\]:active{background-color:color-mix(in oklch,currentColor 15%,transparent)}}.active\\:bg-\\[color-mix\\(in_oklch\\,currentColor_18\\%\\,transparent\\)\\]:active{background-color:currentColor}@supports (color:color-mix(in lab, red, red)){.active\\:bg-\\[color-mix\\(in_oklch\\,currentColor_18\\%\\,transparent\\)\\]:active{background-color:color-mix(in oklch,currentColor 18%,transparent)}}.active\\:bg-\\[color-mix\\(in_oklch\\,currentColor_25\\%\\,transparent\\)\\]:active{background-color:currentColor}@supports (color:color-mix(in lab, red, red)){.active\\:bg-\\[color-mix\\(in_oklch\\,currentColor_25\\%\\,transparent\\)\\]:active{background-color:color-mix(in oklch,currentColor 25%,transparent)}}.active\\:bg-\\[var\\(--color-primary-active\\)\\]:active{background-color:var(--color-primary-active)}.active\\:bg-\\[var\\(--color-secondary-hover\\)\\]:active{background-color:var(--color-secondary-hover)}.active\\:shadow-sm:active{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.active\\:brightness-95:active{--tw-brightness:brightness(95%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.disabled\\:pointer-events-none:disabled{pointer-events:none}.disabled\\:opacity-50:disabled{opacity:.5}.has-\\[input\\:focus\\]\\:ring-2:has(:is(input:focus)){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.has-\\[input\\:focus\\]\\:ring-\\[var\\(--color-ring\\)\\]:has(:is(input:focus)){--tw-ring-color:var(--color-ring)}.has-\\[input\\:focus\\]\\:ring-offset-2:has(:is(input:focus)){--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.has-\\[input\\:focus\\]\\:ring-offset-\\[var\\(--color-bg\\)\\]:has(:is(input:focus)){--tw-ring-offset-color:var(--color-bg)}.has-\\[input\\:focus\\]\\:outline-none:has(:is(input:focus)){--tw-outline-style:none;outline-style:none}.data-\\[disabled\\=true\\]\\:pointer-events-none[data-disabled=true]{pointer-events:none}.data-\\[disabled\\=true\\]\\:cursor-default[data-disabled=true]{cursor:default}.data-\\[disabled\\=true\\]\\:opacity-50[data-disabled=true]{opacity:.5}.data-\\[drag\\=accept\\]\\:outline-2[data-drag=accept]{outline-style:var(--tw-outline-style);outline-width:2px}.data-\\[drag\\=accept\\]\\:outline-offset-8[data-drag=accept]{outline-offset:8px}.data-\\[drag\\=accept\\]\\:outline-\\[color-mix\\(in_oklch\\,var\\(--color-text\\)_15\\%\\,var\\(--color-bg\\)\\)\\][data-drag=accept]{outline-color:var(--color-text)}@supports (color:color-mix(in lab, red, red)){.data-\\[drag\\=accept\\]\\:outline-\\[color-mix\\(in_oklch\\,var\\(--color-text\\)_15\\%\\,var\\(--color-bg\\)\\)\\][data-drag=accept]{outline-color:color-mix(in oklch,var(--color-text) 15%,var(--color-bg))}}.data-\\[drag\\=accept\\]\\:outline-\\[var\\(--color-inverse-surface\\)\\][data-drag=accept]{outline-color:var(--color-inverse-surface)}.data-\\[drag\\=accept\\]\\:outline-\\[var\\(--color-surface-raised\\)\\][data-drag=accept]{outline-color:var(--color-surface-raised)}.data-\\[drag\\=accept\\]\\:brightness-110[data-drag=accept]{--tw-brightness:brightness(110%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.data-\\[drag\\=accept\\]\\:outline-dashed[data-drag=accept]{--tw-outline-style:dashed;outline-style:dashed}.data-\\[drag\\=reject\\]\\:outline-2[data-drag=reject]{outline-style:var(--tw-outline-style);outline-width:2px}.data-\\[drag\\=reject\\]\\:outline-offset-8[data-drag=reject]{outline-offset:8px}.data-\\[drag\\=reject\\]\\:outline-\\[var\\(--color-error\\)\\][data-drag=reject]{outline-color:var(--color-error)}.data-\\[drag\\=reject\\]\\:outline-dashed[data-drag=reject]{--tw-outline-style:dashed;outline-style:dashed}.data-\\[focused\\=true\\]\\:bg-\\[var\\(--color-secondary\\)\\][data-focused=true]{background-color:var(--color-secondary)}.data-\\[multiline\\]\\:flex-col[data-multiline]{flex-direction:column}.data-\\[multiline\\]\\:items-stretch[data-multiline]{align-items:stretch}.data-\\[multiline\\]\\:gap-0[data-multiline]{gap:calc(var(--spacing) * 0)}.data-\\[multiline\\]\\:rounded-2xl[data-multiline]{border-radius:var(--radius-2xl)}.data-\\[multiline\\]\\:px-2[data-multiline]{padding-inline:calc(var(--spacing) * 2)}.data-\\[multiline\\]\\:px-2\\.5[data-multiline]{padding-inline:calc(var(--spacing) * 2.5)}.data-\\[multiline\\]\\:px-3[data-multiline]{padding-inline:calc(var(--spacing) * 3)}.data-\\[multiline\\]\\:px-3\\.5[data-multiline]{padding-inline:calc(var(--spacing) * 3.5)}.data-\\[multiline\\]\\:px-4[data-multiline]{padding-inline:calc(var(--spacing) * 4)}.data-\\[multiline\\]\\:pt-2[data-multiline]{padding-top:calc(var(--spacing) * 2)}.data-\\[multiline\\]\\:pt-2\\.5[data-multiline]{padding-top:calc(var(--spacing) * 2.5)}.data-\\[multiline\\]\\:pt-3[data-multiline]{padding-top:calc(var(--spacing) * 3)}.data-\\[multiline\\]\\:pt-3\\.5[data-multiline]{padding-top:calc(var(--spacing) * 3.5)}.data-\\[multiline\\]\\:pt-4[data-multiline]{padding-top:calc(var(--spacing) * 4)}.data-\\[open\\]\\:block[data-open]{display:block}.data-\\[open\\]\\:flex[data-open]{display:flex}.data-\\[open\\]\\:grid[data-open]{display:grid}.data-\\[open\\]\\:inline-flex[data-open]{display:inline-flex}.data-\\[selected\\=true\\]\\:font-medium[data-selected=true]{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}@media not all and (min-width:48rem){.max-md\\:block{display:block}.max-md\\:hidden{display:none}}@media (min-width:40rem){.sm\\:right-2{right:calc(var(--spacing) * 2)}.sm\\:left-2{left:calc(var(--spacing) * 2)}.sm\\:w-\\[80\\%\\]{width:80%}.sm\\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.sm\\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media (min-width:48rem){.md\\:right-0{right:calc(var(--spacing) * 0)}.md\\:right-4{right:calc(var(--spacing) * 4)}.md\\:left-0{left:calc(var(--spacing) * 0)}.md\\:left-4{left:calc(var(--spacing) * 4)}.md\\:left-auto{left:auto}.md\\:m-4{margin:calc(var(--spacing) * 4)}.md\\:block{display:block}.md\\:size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.md\\:size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}.md\\:h-6{height:calc(var(--spacing) * 6)}.md\\:h-9{height:calc(var(--spacing) * 9)}.md\\:h-auto{height:auto}.md\\:max-h-\\[calc\\(100dvh-4rem\\)\\]{max-height:calc(100dvh - 4rem)}.md\\:max-h-none{max-height:none}.md\\:w-11{width:calc(var(--spacing) * 11)}.md\\:w-\\[60\\%\\]{width:60%}.md\\:w-full{width:100%}.md\\:max-w-full{max-width:100%}.md\\:max-w-lg{max-width:var(--container-lg)}.md\\:max-w-md{max-width:var(--container-md)}.md\\:max-w-sm{max-width:var(--container-sm)}.md\\:max-w-xl{max-width:var(--container-xl)}.md\\:translate-x-0{--tw-translate-x:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.md\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\\:place-items-center{place-items:center}.md\\:justify-normal{justify-content:normal}.md\\:gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.md\\:gap-2{gap:calc(var(--spacing) * 2)}.md\\:gap-3{gap:calc(var(--spacing) * 3)}.md\\:gap-4{gap:calc(var(--spacing) * 4)}.md\\:overflow-y-auto{overflow-y:auto}.md\\:overscroll-contain{overscroll-behavior:contain}.md\\:rounded-xl{border-radius:var(--radius-xl)}.md\\:p-4{padding:calc(var(--spacing) * 4)}.md\\:p-6{padding:calc(var(--spacing) * 6)}.md\\:p-8{padding:calc(var(--spacing) * 8)}.md\\:px-4{padding-inline:calc(var(--spacing) * 4)}.md\\:px-6{padding-inline:calc(var(--spacing) * 6)}.md\\:px-8{padding-inline:calc(var(--spacing) * 8)}.md\\:py-8{padding-block:calc(var(--spacing) * 8)}.md\\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.md\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.md\\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.md\\:open\\:grid:is([open],:popover-open,:open){display:grid}}@media (min-width:64rem){.lg\\:m-6{margin:calc(var(--spacing) * 6)}.lg\\:size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.lg\\:size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.lg\\:h-10{height:calc(var(--spacing) * 10)}.lg\\:h-\\[480px\\]{height:480px}.lg\\:w-\\[55\\%\\]{width:55%}.lg\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\\:gap-5{gap:calc(var(--spacing) * 5)}.lg\\:gap-x-4{column-gap:calc(var(--spacing) * 4)}.lg\\:p-5{padding:calc(var(--spacing) * 5)}.lg\\:p-8{padding:calc(var(--spacing) * 8)}.lg\\:p-10{padding:calc(var(--spacing) * 10)}.lg\\:px-3{padding-inline:calc(var(--spacing) * 3)}.lg\\:px-5{padding-inline:calc(var(--spacing) * 5)}.lg\\:px-8{padding-inline:calc(var(--spacing) * 8)}.lg\\:px-12{padding-inline:calc(var(--spacing) * 12)}.lg\\:py-10{padding-block:calc(var(--spacing) * 10)}.lg\\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.lg\\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}@media (min-width:80rem){.xl\\:w-\\[50\\%\\]{width:50%}.xl\\:gap-6{gap:calc(var(--spacing) * 6)}.xl\\:px-16{padding-inline:calc(var(--spacing) * 16)}}@media (min-width:96rem){.\\32 xl\\:px-8{padding-inline:calc(var(--spacing) * 8)}}@media (prefers-color-scheme:dark){.dark\\:border-zinc-700{border-color:var(--color-zinc-700)}.dark\\:border-zinc-800{border-color:var(--color-zinc-800)}.dark\\:bg-zinc-800{background-color:var(--color-zinc-800)}.dark\\:bg-zinc-900{background-color:var(--color-zinc-900)}.dark\\:text-zinc-100{color:var(--color-zinc-100)}.dark\\:text-zinc-300{color:var(--color-zinc-300)}.dark\\:focus\\:ring-offset-zinc-900:focus{--tw-ring-offset-color:var(--color-zinc-900)}}.\\[data-pressed\\=true\\]\\:bg-\\[color-mix\\(in_oklch\\,var\\(--color-primary\\)_var\\(--cx-pressed-tint\\,15\\%\\)\\,transparent\\)\\]:is(){background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.\\[data-pressed\\=true\\]\\:bg-\\[color-mix\\(in_oklch\\,var\\(--color-primary\\)_var\\(--cx-pressed-tint\\,15\\%\\)\\,transparent\\)\\]:is(){background-color:color-mix(in oklch,var(--color-primary) var(--cx-pressed-tint,15%),transparent)}}.\\[data-pressed\\=true\\]\\:text-\\[var\\(--cx-pressed-text\\)\\]:is(){color:var(--cx-pressed-text)}.\\[data-state\\=indeterminate\\]\\:border-\\[var\\(--color-primary\\)\\]:is(){border-color:var(--color-primary)}.\\[data-state\\=indeterminate\\]\\:bg-\\[var\\(--color-primary\\)\\]:is(){background-color:var(--color-primary)}.\\[data-state\\=indeterminate\\]\\:text-\\[var\\(--color-text-inverse\\)\\]:is(){color:var(--color-text-inverse)}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}`;