/* Animations — scroll reveal effects */ /* ============================================ BIMTLY Animation Library ============================================ AVAILABLE ANIMATIONS: - fade-in : Simple opacity fade (0.8s) - slide-in-up : Slides up from below + fade (0.8s) - slide-in-down : Slides down from above + fade (0.8s) - slide-in-left : Slides in from left + fade (0.8s) - slide-in-right : Slides in from right + fade (0.8s) - zoom-in : Subtle scale up + fade, Apple/Stripe style (0.6s) - blur-in : Blur-to-sharp reveal + fade (0.7s) - bounce-in : Playful scale with overshoot (0.5s) - float : Continuous gentle up/down motion (3s loop) SCROLL TRIGGERS (Chrome 115+ only, graceful fallback on others): - on-scroll : Animation progress tied to scroll position (smooth parallax-like) - on-enter : Animation plays when element enters viewport (trigger-once feel) USAGE EXAMPLES: - "fade-in" : Plays immediately on page load - "fade-in on-enter" : Plays when scrolled into view - "slide-in-up on-scroll" : Animates as you scroll (scroll-linked) - "zoom-in on-enter" : Zooms in when entering viewport NOTE: All entrance animations start with opacity:0 and end with opacity:1. The "forwards" fill-mode keeps the final state after animation completes. ============================================ */ /* ============================================ Smooth Scrolling Default ============================================ */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ============================================ Entrance Animations ============================================ */ /* Fade In */ .fade-in { opacity: 0; animation: fade-in 0.8s ease-in-out forwards; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* Slide In — Up */ .slide-in-up { opacity: 0; transform: translateY(60px); animation: slide-in-up 0.8s ease-in-out forwards; } @keyframes slide-in-up { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } } /* Slide In — Down */ .slide-in-down { opacity: 0; transform: translateY(-60px); animation: slide-in-down 0.8s ease-in-out forwards; } @keyframes slide-in-down { from { opacity: 0; transform: translateY(-60px); } to { opacity: 1; transform: translateY(0); } } /* Slide In — Left */ .slide-in-left, .slide-in-left { opacity: 0; transform: translateX(-60px); animation: slide-in-left 0.8s ease-in-out forwards; } @keyframes slide-in-left { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } } /* Slide In — Right */ .slide-in-right { opacity: 0; transform: translateX(60px); animation: slide-in-right 0.8s ease-in-out forwards; } @keyframes slide-in-right { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } } /* Zoom In — Subtle scale + fade (Apple/Stripe style) */ .zoom-in { opacity: 0; transform: scale(0.95); animation: zoom-in 0.6s ease-out forwards; } @keyframes zoom-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* Blur In — Modern reveal effect */ .blur-in { opacity: 0; filter: blur(8px); animation: blur-in 0.7s ease-out forwards; } @keyframes blur-in { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } } /* Bounce In — Playful entrance with slight overshoot */ .bounce-in { opacity: 0; transform: scale(0.9); animation: bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes bounce-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* Float — Gentle continuous floating motion */ .float { animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ============================================ Embed Block — Focus Guard Overlay Animations Eye-catching animations to encourage interaction ============================================ */ @keyframes embed-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } @keyframes embed-ring { 0% { transform: scale(0.8); opacity: 0.6; } 100% { transform: scale(2); opacity: 0; } } @keyframes embed-glow { 0%, 100% { box-shadow: 0 0 20px rgba(255,255,255,0.3); } 50% { box-shadow: 0 0 40px rgba(255,255,255,0.6); } } /* Scoped utility classes */ .bm-embed-pulse { animation: embed-pulse 1.8s ease-in-out infinite, embed-glow 1.8s ease-in-out infinite; } .bm-embed-ring { animation: embed-ring 2s ease-out infinite; } .bm-embed-ring-delayed { animation: embed-ring 2s ease-out infinite 1s; } /* ============================================ Scroll-Triggered Animation Utilities ============================================ NOTE(lessons): CSS Scroll-driven Animations These utilities use the CSS `animation-timeline: view()` property to trigger animations based on scroll position rather than time. BROWSER SUPPORT: - Chrome 115+ : Full support - Safari/Firefox: No support (as of Jan 2025) - Fallback behavior: Animation plays immediately (time-based), element is visible HOW IT WORKS: `animation-timeline: view()` binds animation progress to the element's visibility in the viewport. `animation-range` controls when the animation starts/ends: - "entry X%" = percentage of element that has entered viewport - "entry 0%" = element just touched viewport edge (not visible yet) - "entry 100%" = element fully inside viewport KEY INSIGHT: If animation starts at "entry 0%", user won't SEE the animation because it completes before the element is actually visible. Start at 10%+ so the element is already partially visible when animation begins. .on-scroll — Smooth scroll-linked progression - Animation progress follows scroll position - Scroll slowly = animation is slow - Scroll backward = animation reverses - Range: 0% to 40% entry = completes by time 40% of element is visible - Best for: parallax-like effects, progressive reveals .on-enter — Quick trigger on viewport entry - Animation snaps to complete quickly once element is visible - Range: 10% to 25% entry = starts when 10% visible, done at 25% - Feels more like a "trigger once" behavior - Best for: entrance animations that should play when you scroll to a section USAGE: Combine with any animation class: - "fade-in on-scroll" → fades as you scroll - "slide-in-up on-enter" → slides up when section enters view - "zoom-in on-enter" → zooms in when visible ============================================ */ .on-scroll { animation-timeline: view(); animation-range: entry 0% entry 40%; } .on-enter { animation-timeline: view(); animation-range: entry 10% entry 25%; } /* RTE Critical Styles */ [object Object] /* Twind (UnoCSS) — utility classes merged from all pages */ :root { /* NOTE(lessons): color-scheme: light — required for Samsung Internet. The meta tag alone is not enough; Samsung also checks the CSS property. Without this, Samsung's forced dark mode inverts all colors. */ color-scheme: light; --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 5.9% 10%; --radius: 0.5rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 88%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 217.2 91.2% 59.8%; } /* ─── Input — base ─────────────────────────────────────────────────────────── */ .bb-input { width: 100%; border-radius: 0.75rem; border: 1px solid #e5e5e5; background: #fafafa; padding: 0.625rem 3rem 0.625rem 1rem; font-size: 0.875rem; color: #171717; outline: none; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } .bb-input::placeholder { color: #a3a3a3; } .bb-input:focus { border-color: #a3a3a3; background: #fff; box-shadow: 0 0 0 2px #e5e5e5; } /* ─── Input — error state ───────────────────────────────────────────────────── */ .bb-input-error { border-color: #fca5a5 !important; background: #fef2f2 !important; box-shadow: none !important; } .bb-input-error:focus { border-color: #fca5a5 !important; background: #fef2f2 !important; box-shadow: 0 0 0 2px #fee2e2 !important; } /* ─── Name input (no right padding needed) ──────────────────────────────────── */ .bb-input-name { padding-right: 1rem; } /* ─── Inline submit button ──────────────────────────────────────────────────── */ .bb-input-btn { position: absolute; right: 0.375rem; display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; background: #171717; color: #fff; border: none; cursor: pointer; transition: background 0.15s, transform 0.1s; flex-shrink: 0; } .bb-input-btn:hover:not(:disabled) { background: #404040; } .bb-input-btn:active:not(:disabled) { transform: scale(0.88); } .bb-input-btn:disabled { opacity: 0.5; cursor: default; } /* ─── Floating error tooltip ────────────────────────────────────────────────── */ /* NOTE(lessons): caret is a ::before pseudo-element on .bb-tooltip itself, NOT a separate sibling div. A sibling div detaches visually when the parent wrapper receives a CSS transform (e.g. translateY from the bb-tooltip-in animation). ::before always moves with its element — zero detachment. */ .bb-tooltip-wrap { position: absolute; left: 0; top: 100%; z-index: 20; margin-top: 0.2rem; pointer-events: none; } .bb-tooltip { position: relative; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; background: #ef4444; color: #fff; font-size: 0.75rem; border-radius: 0.75rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); white-space: nowrap; } .bb-tooltip::before { content: ''; position: absolute; bottom: 100%; left: 1rem; border: 5px solid transparent; border-bottom-color: #ef4444; } /* ─── Keyframes ─────────────────────────────────────────────────────────────── */ @keyframes bb-arrow-shoot { 0% { transform: translateX(0); opacity: 1; } 40% { transform: translateX(20px); opacity: 0; } 41% { transform: translateX(-10px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes bb-success-in { 0% { opacity: 0; transform: scale(0.8) translateY(8px); } 60% { transform: scale(1.05) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes bb-circle-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.18); } 100% { transform: scale(1); opacity: 1; } } @keyframes bb-check-draw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } } @keyframes bb-tooltip-in { 0% { opacity: 0; transform: translateY(-4px) scale(0.96); } 60% { transform: translateY(1px) scale(1.01); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* ─── Animation utility classes ─────────────────────────────────────────────── */ .bb-arrow-shoot { animation: bb-arrow-shoot 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .bb-success-in { animation: bb-success-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .bb-circle-pop { animation: bb-circle-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both; } .bb-check-draw { stroke-dasharray: 30; stroke-dashoffset: 30; animation: bb-check-draw 0.3s ease 0.3s forwards; } .bb-tooltip-in { animation: bb-tooltip-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } /* 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{--un-accent-opacity:100%;--un-bg-opacity:100%;--un-border-opacity:100%;--un-border-style:solid;--un-divide-opacity:100%;--un-divide-y-reverse:initial;--un-ease:initial;--un-fill-opacity:100%;--un-from-opacity:100%;--un-leading:initial;--un-ring-offset-opacity:100%;--un-ring-opacity:100%;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-shadow-opacity:100%;--un-space-x-reverse:initial;--un-space-y-reverse:initial;--un-text-opacity:100%;--un-to-opacity:100%;--un-translate-x:initial;--un-translate-y:initial;--un-translate-z:initial;}} @property --un-text-opacity{syntax:"";inherits:false;initial-value:100%;} @property --un-leading{syntax:"*";inherits:false;} @property --un-outline-style{syntax:"*";inherits:false;initial-value:solid;} @property --un-accent-opacity{syntax:"";inherits:false;initial-value:100%;} @property --un-border-opacity{syntax:"";inherits:false;initial-value:100%;} @property --un-bg-opacity{syntax:"";inherits:false;initial-value:100%;} @property --un-ring-opacity{syntax:"";inherits:false;initial-value:100%;} @property --un-ring-offset-opacity{syntax:"";inherits:false;initial-value:100%;} @property --un-inset-ring-color{syntax:"*";inherits:false;} @property --un-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;} @property --un-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;} @property --un-inset-shadow-color{syntax:"*";inherits:false;} @property --un-ring-color{syntax:"*";inherits:false;} @property --un-ring-inset{syntax:"*";inherits:false;} @property --un-ring-offset-color{syntax:"*";inherits:false;} @property --un-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;} @property --un-ring-offset-width{syntax:"";inherits:false;initial-value:0px;} @property --un-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;} @property --un-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;} @property --un-shadow-color{syntax:"*";inherits:false;} @property --un-shadow-opacity{syntax:"";inherits:false;initial-value:100%;} @property --un-translate-x{syntax:"*";inherits:false;initial-value:0;} @property --un-translate-y{syntax:"*";inherits:false;initial-value:0;} @property --un-translate-z{syntax:"*";inherits:false;initial-value:0;} @property --un-scale-x{syntax:"*";inherits:false;initial-value:1;} @property --un-scale-y{syntax:"*";inherits:false;initial-value:1;} @property --un-scale-z{syntax:"*";inherits:false;initial-value:1;} @property --un-ease{syntax:"*";inherits:false;} @property --un-fill-opacity{syntax:"";inherits:false;initial-value:100%;} @property --un-from-opacity{syntax:"";inherits:false;initial-value:100%;} @property --un-gradient-from{syntax:"";inherits:false;initial-value:#0000;} @property --un-gradient-from-position{syntax:"";inherits:false;initial-value:0%;} @property --un-gradient-position{syntax:"*";inherits:false;} @property --un-gradient-stops{syntax:"*";inherits:false;} @property --un-gradient-to{syntax:"";inherits:false;initial-value:#0000;} @property --un-gradient-to-position{syntax:"";inherits:false;initial-value:100%;} @property --un-gradient-via{syntax:"";inherits:false;initial-value:#0000;} @property --un-gradient-via-position{syntax:"";inherits:false;initial-value:50%;} @property --un-gradient-via-stops{syntax:"*";inherits:false;} @property --un-to-opacity{syntax:"";inherits:false;initial-value:100%;} @property --un-backdrop-blur{syntax:"*";inherits:false;} @property --un-backdrop-brightness{syntax:"*";inherits:false;} @property --un-backdrop-contrast{syntax:"*";inherits:false;} @property --un-backdrop-grayscale{syntax:"*";inherits:false;} @property --un-backdrop-hue-rotate{syntax:"*";inherits:false;} @property --un-backdrop-invert{syntax:"*";inherits:false;} @property --un-backdrop-opacity{syntax:"*";inherits:false;} @property --un-backdrop-saturate{syntax:"*";inherits:false;} @property --un-backdrop-sepia{syntax:"*";inherits:false;} @property --un-blur{syntax:"*";inherits:false;} @property --un-brightness{syntax:"*";inherits:false;} @property --un-contrast{syntax:"*";inherits:false;} @property --un-drop-shadow{syntax:"*";inherits:false;} @property --un-grayscale{syntax:"*";inherits:false;} @property --un-hue-rotate{syntax:"*";inherits:false;} @property --un-invert{syntax:"*";inherits:false;} @property --un-saturate{syntax:"*";inherits:false;} @property --un-sepia{syntax:"*";inherits:false;} @property --un-numeric-figure{syntax:"*";inherits:false;} @property --un-numeric-fraction{syntax:"*";inherits:false;} @property --un-numeric-spacing{syntax:"*";inherits:false;} @property --un-ordinal{syntax:"*";inherits:false;} @property --un-slashed-zero{syntax:"*";inherits:false;} @property --un-space-x-reverse{syntax:"*";inherits:false;initial-value:0;} @property --un-space-y-reverse{syntax:"*";inherits:false;initial-value:0;} @property --un-divide-opacity{syntax:"";inherits:false;initial-value:100%;} @property --un-border-style{syntax:"*";inherits:false;initial-value:solid;} @property --un-divide-y-reverse{syntax:"*";inherits:false;initial-value:0;} /* layer: theme */ :root, :host { --default-transition-timingFunction: cubic-bezier(0.4, 0, 0.2, 1); --default-transition-duration: 150ms; --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --spacing: 0.25rem; --colors-amber-500: oklch(76.9% 0.188 70.08); --colors-black: #000; --colors-blue-500: oklch(62.3% 0.214 259.815); --colors-cyan-500: oklch(71.5% 0.143 215.221); --colors-green-500: oklch(72.3% 0.219 149.579); --colors-neutral-900: oklch(20.5% 0 0); --colors-red-500: oklch(63.7% 0.237 25.331); --colors-white: #fff; --ease-linear: linear; --ease-out: cubic-bezier(0, 0, 0.2, 1); --fontWeight-bold: 700; --fontWeight-medium: 500; --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --fontWeight-normal: 400; --fontWeight-semibold: 600; --leading-none: 1; --leading-relaxed: 1.625; --leading-tight: 1.25; --container-2xl: 42rem; --container-3xl: 48rem; --container-7xl: 80rem; --container-lg: 32rem; --radius-DEFAULT: 0.25rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-none: 0; --radius-sm: 0.25rem; --radius-xl: 0.75rem; --tracking-tight: -0.025em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --colors-gray-100: oklch(96.7% 0.003 264.542); --colors-gray-200: oklch(92.8% 0.006 264.531); --colors-gray-50: oklch(98.5% 0.002 247.839); --colors-gray-900: oklch(21% 0.034 264.665); --colors-green-100: oklch(96.2% 0.044 156.743); --colors-indigo-500: oklch(58.5% 0.233 277.117); --colors-neutral-100: oklch(97% 0 0); --colors-neutral-800: oklch(26.9% 0 0); --colors-red-100: oklch(93.6% 0.032 17.717); --colors-red-600: oklch(57.7% 0.245 27.325); --colors-slate-100: oklch(96.8% 0.007 247.896); --colors-blue-200: oklch(88.2% 0.059 254.128); --colors-blue-300: oklch(80.9% 0.105 251.813); --colors-gray-300: oklch(87.2% 0.01 258.338); --colors-green-300: oklch(87.1% 0.15 154.449); --colors-neutral-300: oklch(87% 0 0); --colors-red-200: oklch(88.5% 0.062 18.334); --colors-red-300: oklch(80.8% 0.114 19.571); --colors-slate-200: oklch(92.9% 0.013 255.508); --colors-amber-600: oklch(66.6% 0.179 58.318); --colors-blue-400: oklch(70.7% 0.165 254.624); --colors-blue-600: oklch(54.6% 0.245 262.881); --colors-cyan-600: oklch(60.9% 0.126 221.723); --colors-emerald-600: oklch(59.6% 0.145 163.225); --colors-gray-400: oklch(70.7% 0.022 261.325); --colors-gray-500: oklch(55.1% 0.027 264.364); --colors-gray-600: oklch(44.6% 0.03 256.802); --colors-gray-700: oklch(37.3% 0.034 259.733); --colors-gray-800: oklch(27.8% 0.033 256.848); --colors-green-600: oklch(62.7% 0.194 149.214); --colors-green-800: oklch(44.8% 0.119 151.328); --colors-indigo-600: oklch(51.1% 0.262 276.966); --colors-neutral-400: oklch(70.8% 0 0); --colors-red-400: oklch(70.4% 0.191 22.216); --colors-red-800: oklch(44.4% 0.177 26.899); --colors-slate-400: oklch(70.4% 0.04 256.788); --colors-slate-500: oklch(55.4% 0.046 257.417); --colors-slate-700: oklch(37.2% 0.044 257.287); --colors-violet-600: oklch(54.1% 0.281 293.009); --text-2xl-fontSize: 1.5rem; --text-2xl-lineHeight: 2rem; --text-3xl-fontSize: 1.875rem; --text-3xl-lineHeight: 2.25rem; --text-base-fontSize: 1rem; --text-base-lineHeight: 1.5rem; --text-lg-fontSize: 1.125rem; --text-lg-lineHeight: 1.75rem; --text-sm-fontSize: 0.875rem; --text-sm-lineHeight: 1.25rem; --text-xl-fontSize: 1.25rem; --text-xl-lineHeight: 1.75rem; --text-xs-fontSize: 0.75rem; --text-xs-lineHeight: 1rem; --container-md: 28rem; --container-sm: 24rem; --colors-emerald-100: oklch(95% 0.052 163.051); --colors-neutral-200: oklch(92.2% 0 0); --colors-red-50: oklch(97.1% 0.013 17.38); --colors-slate-300: oklch(86.9% 0.022 252.894); --colors-red-700: oklch(50.5% 0.213 27.518); --colors-slate-800: oklch(27.9% 0.041 260.031); --colors-amber-400: oklch(82.8% 0.189 84.429); --colors-emerald-400: oklch(76.5% 0.177 163.223); --colors-indigo-400: oklch(67.3% 0.182 276.935); --colors-slate-900: oklch(20.8% 0.042 265.755); --font-sans: Roboto, sans-serif; --default-font-family: var(--font-sans); --default-monoFont-family: var(--font-mono); } /* layer: base */ *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; 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-featureSettings, normal); font-variation-settings: var(--default-font-variationSettings, 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; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var( --default-monoFont-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace ); font-feature-settings: var(--default-monoFont-featureSettings, normal); font-variation-settings: var(--default-monoFont-variationSettings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.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 { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } :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: 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, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-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']), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden~='until-found'])) { display: none !important; } /* layer: preflights */ @keyframes enter { from { opacity: var(--tw-enter-opacity, 1); transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0)); } } @keyframes exit { to { opacity: var(--tw-exit-opacity, 1); transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0)); } } @keyframes accordion-down { from { height: 0; } to { height: var(--radix-accordion-content-height); } } @keyframes accordion-up { from { height: var(--radix-accordion-content-height); } to { height: 0; } } /* layer: default */ .\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading], .\[\&\>span\]\:text-xs>span, .text-xs{font-size:var(--text-xs-fontSize);line-height:var(--un-leading, var(--text-xs-lineHeight));} .text-\[0\.65rem\]{font-size:0.65rem;} .text-\[0\.8rem\]{font-size:0.8rem;} .text-\[10px\]{font-size:10px;} .text-\[11px\]{font-size:11px;} .text-\[8px\]{font-size:8px;} .text-\[9px\]{font-size:9px;} .text-2xl{font-size:var(--text-2xl-fontSize);line-height:var(--un-leading, var(--text-2xl-lineHeight));} .text-3xl{font-size:var(--text-3xl-fontSize);line-height:var(--un-leading, var(--text-3xl-lineHeight));} .text-base{font-size:var(--text-base-fontSize);line-height:var(--un-leading, var(--text-base-lineHeight));} .text-lg{font-size:var(--text-lg-fontSize);line-height:var(--un-leading, var(--text-lg-lineHeight));} .text-sm{font-size:var(--text-sm-fontSize);line-height:var(--un-leading, var(--text-sm-lineHeight));} .text-xl{font-size:var(--text-xl-fontSize);line-height:var(--un-leading, var(--text-xl-lineHeight));} .file\:text-sm::file-selector-button{font-size:var(--text-sm-fontSize);line-height:var(--un-leading, var(--text-sm-lineHeight));} .group.destructive .group-\[\.destructive\]\:text-red-300{color:color-mix(in srgb, var(--colors-red-300) var(--un-text-opacity), transparent);} .group.toast .group-\[\.toast\]\:text-muted-foreground, .\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading], .\[\&\>svg\]\:text-muted-foreground>svg, .aria-selected\:text-muted-foreground[aria-selected="true"], .data-\[state\=open\]\:text-muted-foreground[data-state=open], .text-muted-foreground{color:color-mix(in srgb, hsl(var(--muted-foreground)) var(--un-text-opacity), transparent);} .group.toast .group-\[\.toast\]\:text-primary-foreground, .data-\[range-end\=true\]\:text-primary-foreground[data-range-end=true], .data-\[range-start\=true\]\:text-primary-foreground[data-range-start=true], .data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single=true], .data-\[state\=checked\]\:text-primary-foreground[data-state=checked], .text-primary-foreground{color:color-mix(in srgb, hsl(var(--primary-foreground)) var(--un-text-opacity), transparent);} .group.toaster .group-\[\.toaster\]\:text-foreground, .data-\[state\=active\]\:text-foreground[data-state=active], .text-foreground{color:color-mix(in srgb, hsl(var(--foreground)) var(--un-text-opacity), transparent);} .\!text-gray-700{color:color-mix(in srgb, var(--colors-gray-700) var(--un-text-opacity), transparent) !important;} .\!text-gray-900{color:color-mix(in srgb, var(--colors-gray-900) var(--un-text-opacity), transparent) !important;} .aria-selected\:text-accent-foreground[aria-selected="true"], .data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle=true], .data-\[state\=on\]\:text-accent-foreground[data-state=on], .data-\[state\=open\]\:text-accent-foreground[data-state=open], .text-accent-foreground{color:color-mix(in srgb, hsl(var(--accent-foreground)) var(--un-text-opacity), transparent);} .dark .dark\:\!text-gray-100{color:color-mix(in srgb, var(--colors-gray-100) var(--un-text-opacity), transparent) !important;} .dark .dark\:\!text-gray-300{color:color-mix(in srgb, var(--colors-gray-300) var(--un-text-opacity), transparent) !important;} .dark .dark\:text-amber-400{color:color-mix(in srgb, var(--colors-amber-400) var(--un-text-opacity), transparent);} .dark .dark\:text-emerald-400{color:color-mix(in srgb, var(--colors-emerald-400) var(--un-text-opacity), transparent);} .dark .dark\:text-gray-300{color:color-mix(in srgb, var(--colors-gray-300) var(--un-text-opacity), transparent);} .dark .dark\:text-gray-400, .text-gray-400{color:color-mix(in srgb, var(--colors-gray-400) var(--un-text-opacity), transparent);} .dark .dark\:text-indigo-400{color:color-mix(in srgb, var(--colors-indigo-400) var(--un-text-opacity), transparent);} .dark .dark\:text-slate-300{color:color-mix(in srgb, var(--colors-slate-300) var(--un-text-opacity), transparent);} .data-\[variant\=destructive\]\:text-destructive[data-variant=destructive], .text-destructive{color:color-mix(in srgb, hsl(var(--destructive)) var(--un-text-opacity), transparent);} .text-\[\#0F172A\]{color:color-mix(in oklab, #0F172A var(--un-text-opacity), transparent);} .text-\[\#334155\]{color:color-mix(in oklab, #334155 var(--un-text-opacity), transparent);} .text-amber-500{color:color-mix(in srgb, var(--colors-amber-500) var(--un-text-opacity), transparent);} .text-amber-600{color:color-mix(in srgb, var(--colors-amber-600) var(--un-text-opacity), transparent);} .text-amber-600\/70{color:color-mix(in srgb, var(--colors-amber-600) 70%, transparent);} .text-amber-600\/80{color:color-mix(in srgb, var(--colors-amber-600) 80%, transparent);} .text-black{color:color-mix(in srgb, var(--colors-black) var(--un-text-opacity), transparent);} .text-blue-400{color:color-mix(in srgb, var(--colors-blue-400) var(--un-text-opacity), transparent);} .text-blue-500{color:color-mix(in srgb, var(--colors-blue-500) var(--un-text-opacity), transparent);} .text-blue-600{color:color-mix(in srgb, var(--colors-blue-600) var(--un-text-opacity), transparent);} .text-card-foreground{color:color-mix(in srgb, hsl(var(--card-foreground)) var(--un-text-opacity), transparent);} .text-current{color:currentColor;} .text-cyan-600{color:color-mix(in srgb, var(--colors-cyan-600) var(--un-text-opacity), transparent);} .text-cyan-600\/70{color:color-mix(in srgb, var(--colors-cyan-600) 70%, transparent);} .text-destructive-foreground{color:color-mix(in srgb, hsl(var(--destructive-foreground)) var(--un-text-opacity), transparent);} .text-emerald-600, .group:hover .group-hover\:text-emerald-600{color:color-mix(in srgb, var(--colors-emerald-600) var(--un-text-opacity), transparent);} .text-foreground\/50{color:color-mix(in srgb, hsl(var(--foreground)) 50%, transparent);} .text-foreground\/70{color:color-mix(in srgb, hsl(var(--foreground)) 70%, transparent);} .text-gray-500{color:color-mix(in srgb, var(--colors-gray-500) var(--un-text-opacity), transparent);} .text-gray-600{color:color-mix(in srgb, var(--colors-gray-600) var(--un-text-opacity), transparent);} .text-gray-700{color:color-mix(in srgb, var(--colors-gray-700) var(--un-text-opacity), transparent);} .text-gray-800{color:color-mix(in srgb, var(--colors-gray-800) var(--un-text-opacity), transparent);} .text-gray-900{color:color-mix(in srgb, var(--colors-gray-900) var(--un-text-opacity), transparent);} .text-green-500{color:color-mix(in srgb, var(--colors-green-500) var(--un-text-opacity), transparent);} .text-green-600{color:color-mix(in srgb, var(--colors-green-600) var(--un-text-opacity), transparent);} .text-green-800{color:color-mix(in srgb, var(--colors-green-800) var(--un-text-opacity), transparent);} .text-indigo-600{color:color-mix(in srgb, var(--colors-indigo-600) var(--un-text-opacity), transparent);} .text-muted{color:color-mix(in srgb, hsl(var(--muted)) var(--un-text-opacity), transparent);} .text-muted-foreground\/40{color:color-mix(in srgb, hsl(var(--muted-foreground)) 40%, transparent);} .text-muted-foreground\/50{color:color-mix(in srgb, hsl(var(--muted-foreground)) 50%, transparent);} .text-neutral-400{color:color-mix(in srgb, var(--colors-neutral-400) var(--un-text-opacity), transparent);} .text-neutral-800{color:color-mix(in srgb, var(--colors-neutral-800) var(--un-text-opacity), transparent);} .text-popover-foreground{color:color-mix(in srgb, hsl(var(--popover-foreground)) var(--un-text-opacity), transparent);} .text-primary{color:color-mix(in srgb, hsl(var(--primary)) var(--un-text-opacity), transparent);} .text-red-400{color:color-mix(in srgb, var(--colors-red-400) var(--un-text-opacity), transparent);} .text-red-600{color:color-mix(in srgb, var(--colors-red-600) var(--un-text-opacity), transparent);} .text-red-800{color:color-mix(in srgb, var(--colors-red-800) var(--un-text-opacity), transparent);} .text-secondary-foreground{color:color-mix(in srgb, hsl(var(--secondary-foreground)) var(--un-text-opacity), transparent);} .text-slate-400{color:color-mix(in srgb, var(--colors-slate-400) var(--un-text-opacity), transparent);} .text-slate-500{color:color-mix(in srgb, var(--colors-slate-500) var(--un-text-opacity), transparent);} .text-slate-700{color:color-mix(in srgb, var(--colors-slate-700) var(--un-text-opacity), transparent);} .text-violet-600{color:color-mix(in srgb, var(--colors-violet-600) var(--un-text-opacity), transparent);} .text-white{color:color-mix(in srgb, var(--colors-white) var(--un-text-opacity), transparent);} .text-white\/70{color:color-mix(in srgb, var(--colors-white) 70%, transparent);} .text-white\/80{color:color-mix(in srgb, var(--colors-white) 80%, transparent);} .dark .dark\:hover\:text-accent-foreground:hover{color:color-mix(in srgb, hsl(var(--accent-foreground)) var(--un-text-opacity), transparent);} .dark .dark\:hover\:text-gray-200:hover{color:color-mix(in srgb, var(--colors-gray-200) var(--un-text-opacity), transparent);} .group.destructive .hover\:group-\[\.destructive\]\:text-destructive-foreground:hover{color:color-mix(in srgb, hsl(var(--destructive-foreground)) var(--un-text-opacity), transparent);} .group.destructive .hover\:group-\[\.destructive\]\:text-red-50:hover{color:color-mix(in srgb, var(--colors-red-50) var(--un-text-opacity), transparent);} .hover\:text-accent-foreground:hover{color:color-mix(in srgb, hsl(var(--accent-foreground)) var(--un-text-opacity), transparent);} .hover\:text-destructive:hover{color:color-mix(in srgb, hsl(var(--destructive)) var(--un-text-opacity), transparent);} .hover\:text-destructive\/80:hover{color:color-mix(in srgb, hsl(var(--destructive)) 80%, transparent);} .hover\:text-foreground:hover{color:color-mix(in srgb, hsl(var(--foreground)) var(--un-text-opacity), transparent);} .hover\:text-gray-600:hover{color:color-mix(in srgb, var(--colors-gray-600) var(--un-text-opacity), transparent);} .hover\:text-muted-foreground:hover{color:color-mix(in srgb, hsl(var(--muted-foreground)) var(--un-text-opacity), transparent);} .hover\:text-primary:hover{color:color-mix(in srgb, hsl(var(--primary)) var(--un-text-opacity), transparent);} .hover\:text-primary\/80:hover{color:color-mix(in srgb, hsl(var(--primary)) 80%, transparent);} .hover\:text-red-600:hover{color:color-mix(in srgb, var(--colors-red-600) var(--un-text-opacity), transparent);} .hover\:text-red-700:hover{color:color-mix(in srgb, var(--colors-red-700) var(--un-text-opacity), transparent);} .data-\[variant\=destructive\]\:focus\:text-destructive:focus[data-variant=destructive]{color:color-mix(in srgb, hsl(var(--destructive)) var(--un-text-opacity), transparent);} .focus\:text-accent-foreground:focus{color:color-mix(in srgb, hsl(var(--accent-foreground)) var(--un-text-opacity), transparent);} .placeholder\:text-gray-400::placeholder{color:color-mix(in srgb, var(--colors-gray-400) var(--un-text-opacity), transparent);} .placeholder\:text-muted-foreground::placeholder{color:color-mix(in srgb, hsl(var(--muted-foreground)) var(--un-text-opacity), transparent);} .file\:text-foreground::file-selector-button{color:color-mix(in srgb, hsl(var(--foreground)) var(--un-text-opacity), transparent);} .text-inherit{color:inherit;} .leading-none{--un-leading:var(--leading-none);line-height:var(--leading-none);} .leading-relaxed{--un-leading:var(--leading-relaxed);line-height:var(--leading-relaxed);} .leading-tight{--un-leading:var(--leading-tight);line-height:var(--leading-tight);} .tracking-tight{--un-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight);} .tracking-wide{--un-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide);} .tracking-wider{--un-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider);} .tracking-widest{--un-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest);} .\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading], .data-\[active\=true\]\:font-medium[data-active=true], .font-medium{--un-font-weight:var(--fontWeight-medium);font-weight:var(--fontWeight-medium);} .font-bold{--un-font-weight:var(--fontWeight-bold);font-weight:var(--fontWeight-bold);} .font-mono{font-family:var(--font-mono);} .font-normal{--un-font-weight:var(--fontWeight-normal);font-weight:var(--fontWeight-normal);} .font-semibold{--un-font-weight:var(--fontWeight-semibold);font-weight:var(--fontWeight-semibold);} .file\:font-medium::file-selector-button{--un-font-weight:var(--fontWeight-medium);font-weight:var(--fontWeight-medium);} .m-0{margin:calc(var(--spacing) * 0);} .-mx-1{margin-inline:calc(var(--spacing) * -1);} .mx-1{margin-inline:calc(var(--spacing) * 1);} .mx-2{margin-inline:calc(var(--spacing) * 2);} .mx-2\!{margin-inline:calc(var(--spacing) * 2) !important;} .mx-3\.5{margin-inline:calc(var(--spacing) * 3.5);} .mx-auto{margin-inline:auto;} .my-1{margin-block:calc(var(--spacing) * 1);} .-ml-2{margin-left:calc(var(--spacing) * -2);} .-ml-4{margin-left:calc(var(--spacing) * -4);} .-mr-0\.5{margin-right:calc(var(--spacing) * -0.5);} .-mt-4{margin-top:calc(var(--spacing) * -4);} .mb-0\.5{margin-bottom:calc(var(--spacing) * 0.5);} .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-4{margin-bottom:calc(var(--spacing) * 4);} .mb-5{margin-bottom:calc(var(--spacing) * 5);} .mb-8{margin-bottom:calc(var(--spacing) * 8);} .ml-0\.5{margin-left:calc(var(--spacing) * 0.5);} .ml-1{margin-left:calc(var(--spacing) * 1);} .ml-1\.5{margin-left:calc(var(--spacing) * 1.5);} .ml-2{margin-left:calc(var(--spacing) * 2);} .ml-6{margin-left:calc(var(--spacing) * 6);} .ml-auto{margin-left:auto;} .mr-0\.5{margin-right:calc(var(--spacing) * 0.5);} .mr-1{margin-right:calc(var(--spacing) * 1);} .mr-2{margin-right:calc(var(--spacing) * 2);} .mt-0\.5{margin-top:calc(var(--spacing) * 0.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);} .mt-4\!{margin-top:calc(var(--spacing) * 4) !important;} .mt-5{margin-top:calc(var(--spacing) * 5);} .mt-6{margin-top:calc(var(--spacing) * 6);} .mt-8{margin-top:calc(var(--spacing) * 8);} .mt-auto{margin-top:auto;} .mt-px{margin-top:1px;} .first\:mt-0:first-child{margin-top:calc(var(--spacing) * 0);} .\!p-0, .p-0\!{padding:calc(var(--spacing) * 0) !important;} .p-\[2px\]{padding:2px;} .p-0{padding:calc(var(--spacing) * 0);} .p-0\.5{padding:calc(var(--spacing) * 0.5);} .p-1{padding:calc(var(--spacing) * 1);} .p-1\.5{padding:calc(var(--spacing) * 1.5);} .p-2{padding:calc(var(--spacing) * 2);} .p-2\.5{padding:calc(var(--spacing) * 2.5);} .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);} .p-px{padding:1px;} .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading], .\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group], .\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item], .px-2{padding-inline:calc(var(--spacing) * 2);} .\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading], .py-1\.5{padding-block:calc(var(--spacing) * 1.5);} .\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item], .py-3{padding-block:calc(var(--spacing) * 3);} .px, .px-4{padding-inline:calc(var(--spacing) * 4);} .px-\[10px\]{padding-inline:10px;} .px-1{padding-inline:calc(var(--spacing) * 1);} .px-1\.5{padding-inline:calc(var(--spacing) * 1.5);} .px-2\.5{padding-inline:calc(var(--spacing) * 2.5);} .px-3{padding-inline:calc(var(--spacing) * 3);} .px-5{padding-inline:calc(var(--spacing) * 5);} .px-6{padding-inline:calc(var(--spacing) * 6);} .px-8{padding-inline:calc(var(--spacing) * 8);} .py-\[10px\]{padding-block:10px;} .py-\[5px\]{padding-block:5px;} .py-0\!{padding-block:calc(var(--spacing) * 0) !important;} .py-0\.5{padding-block:calc(var(--spacing) * 0.5);} .py-1{padding-block:calc(var(--spacing) * 1);} .py-16{padding-block:calc(var(--spacing) * 16);} .py-2{padding-block:calc(var(--spacing) * 2);} .py-2\.5{padding-block:calc(var(--spacing) * 2.5);} .py-3\.5{padding-block:calc(var(--spacing) * 3.5);} .py-4{padding-block:calc(var(--spacing) * 4);} .py-6{padding-block:calc(var(--spacing) * 6);} .py-8{padding-block:calc(var(--spacing) * 8);} .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group], .pt-0{padding-top:calc(var(--spacing) * 0);} .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){padding-right:calc(var(--spacing) * 0);} .data-\[inset\]\:pl-8[data-inset], .pl-8{padding-left:calc(var(--spacing) * 8);} .pb-1{padding-bottom:calc(var(--spacing) * 1);} .pb-16{padding-bottom:calc(var(--spacing) * 16);} .pb-2{padding-bottom:calc(var(--spacing) * 2);} .pb-3{padding-bottom:calc(var(--spacing) * 3);} .pb-4{padding-bottom:calc(var(--spacing) * 4);} .pl-1{padding-left:calc(var(--spacing) * 1);} .pl-2{padding-left:calc(var(--spacing) * 2);} .pl-4{padding-left:calc(var(--spacing) * 4);} .pl-6{padding-left:calc(var(--spacing) * 6);} .pr-1{padding-right:calc(var(--spacing) * 1);} .pr-2{padding-right:calc(var(--spacing) * 2);} .pr-7{padding-right:calc(var(--spacing) * 7);} .pr-8{padding-right:calc(var(--spacing) * 8);} .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-3{padding-top:calc(var(--spacing) * 3);} .pt-4{padding-top:calc(var(--spacing) * 4);} .pt-6{padding-top:calc(var(--spacing) * 6);} .hover\:pl-5:hover{padding-left:calc(var(--spacing) * 5);} .hover\:pl-7:hover{padding-left:calc(var(--spacing) * 7);} .focus\:pl-5:focus{padding-left:calc(var(--spacing) * 5);} .focus\:pl-7:focus{padding-left:calc(var(--spacing) * 7);} .first\:pt-0:first-child{padding-top:calc(var(--spacing) * 0);} .text-center{text-align:center;} .text-left{text-align:left;} .text-right{text-align:right;} .align-middle{vertical-align:middle;} .outline{outline-style:var(--un-outline-style);outline-width:1px;} .outline-hidden{outline-style:none;} .focus\:outline-hidden:focus{outline-style:none;} .focus-visible\:outline-hidden:focus-visible{outline-style:none;} .focus\:outline-none:focus{--un-outline-style:none;outline-style:none;} .focus-visible\:outline-none:focus-visible{--un-outline-style:none;outline-style:none;} .list-none{list-style-type:none;} .accent-primary{accent-color:color-mix(in srgb, hsl(var(--primary)) var(--un-accent-opacity), transparent);} .\[\&_tr\:last-child\]\:border-0 tr:last-child, .border-0{border-width:0px;} .border{border-width:1px;} .border-2{border-width:2px;} .file\:border-0::file-selector-button{border-width:0px;} .\[\&_tr\]\:border-b tr, .border-b{border-bottom-width:1px;} .border-l{border-left-width:1px;} .border-l-2{border-left-width:2px;} .border-r{border-right-width:1px;} .border-t{border-top-width:1px;} .border-t-2{border-top-width:2px;} .first\:border-t-0:first-child{border-top-width:0px;} .last\:\[\&\>tr\]\:border-b-0>tr:last-child{border-bottom-width:0px;} .group.destructive .group-\[\.destructive\]\:border-muted\/40{border-color:color-mix(in srgb, hsl(var(--muted)) 40%, transparent);} .group.toaster .group-\[\.toaster\]\:border-border, .border-border{border-color:color-mix(in srgb, hsl(var(--border)) var(--un-border-opacity), transparent);} .border-amber-500\/30{border-color:color-mix(in srgb, var(--colors-amber-500) 30%, transparent);} .border-blue-200{border-color:color-mix(in srgb, var(--colors-blue-200) var(--un-border-opacity), transparent);} .border-blue-300{border-color:color-mix(in srgb, var(--colors-blue-300) var(--un-border-opacity), transparent);} .border-blue-500\/20{border-color:color-mix(in srgb, var(--colors-blue-500) 20%, transparent);} .border-border\/40{border-color:color-mix(in srgb, hsl(var(--border)) 40%, transparent);} .border-border\/50{border-color:color-mix(in srgb, hsl(var(--border)) 50%, transparent);} .border-border\/60{border-color:color-mix(in srgb, hsl(var(--border)) 60%, transparent);} .border-cyan-500\/20{border-color:color-mix(in srgb, var(--colors-cyan-500) 20%, transparent);} .border-destructive{border-color:color-mix(in srgb, hsl(var(--destructive)) var(--un-border-opacity), transparent);} .border-gray-100{border-color:color-mix(in srgb, var(--colors-gray-100) var(--un-border-opacity), transparent);} .border-gray-200{border-color:color-mix(in srgb, var(--colors-gray-200) var(--un-border-opacity), transparent);} .border-gray-200\/60{border-color:color-mix(in srgb, var(--colors-gray-200) 60%, transparent);} .border-gray-200\/80{border-color:color-mix(in srgb, var(--colors-gray-200) 80%, transparent);} .border-gray-300{border-color:color-mix(in srgb, var(--colors-gray-300) var(--un-border-opacity), transparent);} .border-green-300{border-color:color-mix(in srgb, var(--colors-green-300) var(--un-border-opacity), transparent);} .border-green-500\/30{border-color:color-mix(in srgb, var(--colors-green-500) 30%, transparent);} .border-input{border-color:color-mix(in srgb, hsl(var(--input)) var(--un-border-opacity), transparent);} .border-muted{border-color:color-mix(in srgb, hsl(var(--muted)) var(--un-border-opacity), transparent);} .border-muted-foreground\/30{border-color:color-mix(in srgb, hsl(var(--muted-foreground)) 30%, transparent);} .border-muted-foreground\/40{border-color:color-mix(in srgb, hsl(var(--muted-foreground)) 40%, transparent);} .border-neutral-300{border-color:color-mix(in srgb, var(--colors-neutral-300) var(--un-border-opacity), transparent);} .border-primary{border-color:color-mix(in srgb, hsl(var(--primary)) var(--un-border-opacity), transparent);} .border-primary\/70{border-color:color-mix(in srgb, hsl(var(--primary)) 70%, transparent);} .border-red-200{border-color:color-mix(in srgb, var(--colors-red-200) var(--un-border-opacity), transparent);} .border-red-300{border-color:color-mix(in srgb, var(--colors-red-300) var(--un-border-opacity), transparent);} .border-red-500{border-color:color-mix(in srgb, var(--colors-red-500) var(--un-border-opacity), transparent);} .border-red-500\/20{border-color:color-mix(in srgb, var(--colors-red-500) 20%, transparent);} .border-slate-200{border-color:color-mix(in srgb, var(--colors-slate-200) var(--un-border-opacity), transparent);} .border-transparent{border-color:transparent;} .border-white\/20{border-color:color-mix(in srgb, var(--colors-white) 20%, transparent);} .border-white\/40{border-color:color-mix(in srgb, var(--colors-white) 40%, transparent);} .dark .dark\:border-gray-700{border-color:color-mix(in srgb, var(--colors-gray-700) var(--un-border-opacity), transparent);} .dark .dark\:border-gray-700\/60{border-color:color-mix(in srgb, var(--colors-gray-700) 60%, transparent);} .dark .dark\:border-gray-700\/80{border-color:color-mix(in srgb, var(--colors-gray-700) 80%, transparent);} .has-focus\:border-ring:has(:focus){border-color:color-mix(in srgb, hsl(var(--ring)) var(--un-border-opacity), transparent);} .focus-within\:border-border:focus-within{border-color:color-mix(in srgb, hsl(var(--border)) var(--un-border-opacity), transparent);} .group.destructive .hover\:group-\[\.destructive\]\:border-destructive\/30:hover{border-color:color-mix(in srgb, hsl(var(--destructive)) 30%, transparent);} .hover\:border-border:hover{border-color:color-mix(in srgb, hsl(var(--border)) var(--un-border-opacity), transparent);} .hover\:border-foreground\/40:hover{border-color:color-mix(in srgb, hsl(var(--foreground)) 40%, transparent);} .hover\:border-muted-foreground\/30:hover{border-color:color-mix(in srgb, hsl(var(--muted-foreground)) 30%, transparent);} .hover\:border-primary\/50:hover{border-color:color-mix(in srgb, hsl(var(--primary)) 50%, transparent);} .hover\:border-slate-300:hover{border-color:color-mix(in srgb, var(--colors-slate-300) var(--un-border-opacity), transparent);} .focus\:border-accent:focus{border-color:color-mix(in srgb, hsl(var(--accent)) var(--un-border-opacity), transparent);} .focus\:border-blue-400:focus{border-color:color-mix(in srgb, var(--colors-blue-400) var(--un-border-opacity), transparent);} .focus\:border-primary:focus{border-color:color-mix(in srgb, hsl(var(--primary)) var(--un-border-opacity), transparent);} .data-\[range-end\=true\]\:rounded-md[data-range-end=true], .data-\[range-start\=true\]\:rounded-md[data-range-start=true], .rounded-md{border-radius:var(--radius-md);} .data-\[range-middle\=true\]\:rounded-none[data-range-middle=true], .data-\[selected\=true\]\:rounded-none[data-selected=true], .rounded-none{border-radius:var(--radius-none);} .rounded{border-radius:var(--radius-DEFAULT);} .rounded-\[2px\]{border-radius:2px;} .rounded-2xl{border-radius:var(--radius-2xl);} .rounded-3xl{border-radius:var(--radius-3xl);} .rounded-full{border-radius:calc(infinity * 1px);} .rounded-lg{border-radius:var(--radius-lg);} .rounded-sm{border-radius:var(--radius-sm);} .rounded-xl{border-radius:var(--radius-xl);} .\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button, .data-\[range-start\=true\]\:rounded-l-md[data-range-start=true], .rounded-l-md{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md);} .\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button, .data-\[range-end\=true\]\:rounded-r-md[data-range-end=true], .rounded-r-md{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md);} .rounded-br{border-bottom-right-radius:var(--radius-DEFAULT);} .rounded-tl-sm{border-top-left-radius:var(--radius-sm);} .border-dashed{--un-border-style:dashed;border-style:dashed;} .border-none{--un-border-style:none;border-style:none;} .group.toast .group-\[\.toast\]\:bg-muted, .bg-muted, .data-\[state\=selected\]\:bg-muted[data-state=selected]{background-color:color-mix(in srgb, hsl(var(--muted)) var(--un-bg-opacity), transparent);} .group.toast .group-\[\.toast\]\:bg-primary, .bg-primary, .data-\[range-end\=true\]\:bg-primary[data-range-end=true], .data-\[range-start\=true\]\:bg-primary[data-range-start=true], .data-\[selected-single\=true\]\:bg-primary[data-selected-single=true], .data-\[state\=checked\]\:bg-primary[data-state=checked]{background-color:color-mix(in srgb, hsl(var(--primary)) var(--un-bg-opacity), transparent);} .group.toaster .group-\[\.toaster\]\:bg-background, .bg-background, .data-\[state\=active\]\:bg-background[data-state=active]{background-color:color-mix(in srgb, hsl(var(--background)) var(--un-bg-opacity), transparent);} .\!bg-gray-100{background-color:color-mix(in srgb, var(--colors-gray-100) var(--un-bg-opacity), transparent) !important;} .\!bg-transparent{background-color:transparent !important;} .aria-selected\:bg-accent[aria-selected="true"], .bg-accent, .data-\[range-middle\=true\]\:bg-accent[data-range-middle=true], .data-\[state\=on\]\:bg-accent[data-state=on], .data-\[state\=open\]\:bg-accent[data-state=open]{background-color:color-mix(in srgb, hsl(var(--accent)) var(--un-bg-opacity), transparent);} .bg-amber-500\/10{background-color:color-mix(in srgb, var(--colors-amber-500) 10%, transparent);} .bg-background\/50{background-color:color-mix(in srgb, hsl(var(--background)) 50%, transparent);} .bg-background\/80{background-color:color-mix(in srgb, hsl(var(--background)) 80%, transparent);} .bg-black\/\[0\.02\]{background-color:color-mix(in srgb, var(--colors-black) 0.02, transparent);} .bg-black\/20{background-color:color-mix(in srgb, var(--colors-black) 20%, transparent);} .bg-black\/30{background-color:color-mix(in srgb, var(--colors-black) 30%, transparent);} .bg-black\/40{background-color:color-mix(in srgb, var(--colors-black) 40%, transparent);} .bg-black\/50{background-color:color-mix(in srgb, var(--colors-black) 50%, transparent);} .bg-black\/55{background-color:color-mix(in srgb, var(--colors-black) 55%, transparent);} .bg-black\/80{background-color:color-mix(in srgb, var(--colors-black) 80%, transparent);} .bg-blue-500{background-color:color-mix(in srgb, var(--colors-blue-500) var(--un-bg-opacity), transparent);} .bg-blue-500\/10{background-color:color-mix(in srgb, var(--colors-blue-500) 10%, transparent);} .bg-blue-500\/25{background-color:color-mix(in srgb, var(--colors-blue-500) 25%, transparent);} .bg-border{background-color:color-mix(in srgb, hsl(var(--border)) var(--un-bg-opacity), transparent);} .bg-card{background-color:color-mix(in srgb, hsl(var(--card)) var(--un-bg-opacity), transparent);} .bg-current{background-color:currentColor;} .bg-cyan-500\/5{background-color:color-mix(in srgb, var(--colors-cyan-500) 5%, transparent);} .bg-destructive{background-color:color-mix(in srgb, hsl(var(--destructive)) var(--un-bg-opacity), transparent);} .bg-foreground\/10{background-color:color-mix(in srgb, hsl(var(--foreground)) 10%, transparent);} .bg-gray-100{background-color:color-mix(in srgb, var(--colors-gray-100) var(--un-bg-opacity), transparent);} .bg-gray-200{background-color:color-mix(in srgb, var(--colors-gray-200) var(--un-bg-opacity), transparent);} .bg-gray-50{background-color:color-mix(in srgb, var(--colors-gray-50) var(--un-bg-opacity), transparent);} .bg-gray-900, .dark .dark\:bg-gray-900{background-color:color-mix(in srgb, var(--colors-gray-900) var(--un-bg-opacity), transparent);} .bg-green-100{background-color:color-mix(in srgb, var(--colors-green-100) var(--un-bg-opacity), transparent);} .bg-green-500\/15{background-color:color-mix(in srgb, var(--colors-green-500) 15%, transparent);} .bg-indigo-500{background-color:color-mix(in srgb, var(--colors-indigo-500) var(--un-bg-opacity), transparent);} .bg-muted-foreground\/30{background-color:color-mix(in srgb, hsl(var(--muted-foreground)) 30%, transparent);} .bg-muted-foreground\/50{background-color:color-mix(in srgb, hsl(var(--muted-foreground)) 50%, transparent);} .bg-muted\/20{background-color:color-mix(in srgb, hsl(var(--muted)) 20%, transparent);} .bg-muted\/30{background-color:color-mix(in srgb, hsl(var(--muted)) 30%, transparent);} .bg-muted\/50{background-color:color-mix(in srgb, hsl(var(--muted)) 50%, transparent);} .bg-neutral-100{background-color:color-mix(in srgb, var(--colors-neutral-100) var(--un-bg-opacity), transparent);} .bg-neutral-800{background-color:color-mix(in srgb, var(--colors-neutral-800) var(--un-bg-opacity), transparent);} .bg-neutral-900\/60{background-color:color-mix(in srgb, var(--colors-neutral-900) 60%, transparent);} .bg-popover{background-color:color-mix(in srgb, hsl(var(--popover)) var(--un-bg-opacity), transparent);} .bg-primary\/10{background-color:color-mix(in srgb, hsl(var(--primary)) 10%, transparent);} .bg-primary\/5{background-color:color-mix(in srgb, hsl(var(--primary)) 5%, transparent);} .bg-red-100{background-color:color-mix(in srgb, var(--colors-red-100) var(--un-bg-opacity), transparent);} .bg-red-500\/10{background-color:color-mix(in srgb, var(--colors-red-500) 10%, transparent);} .bg-red-600{background-color:color-mix(in srgb, var(--colors-red-600) var(--un-bg-opacity), transparent);} .bg-secondary, .data-\[state\=open\]\:bg-secondary[data-state=open]{background-color:color-mix(in srgb, hsl(var(--secondary)) var(--un-bg-opacity), transparent);} .bg-slate-100{background-color:color-mix(in srgb, var(--colors-slate-100) var(--un-bg-opacity), transparent);} .bg-transparent, [data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent, [data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent{background-color:transparent;} .bg-white{background-color:color-mix(in srgb, var(--colors-white) var(--un-bg-opacity), transparent);} .bg-white\/10{background-color:color-mix(in srgb, var(--colors-white) 10%, transparent);} .bg-white\/20{background-color:color-mix(in srgb, var(--colors-white) 20%, transparent);} .bg-white\/80{background-color:color-mix(in srgb, var(--colors-white) 80%, transparent);} .bg-white\/90{background-color:color-mix(in srgb, var(--colors-white) 90%, transparent);} .dark .dark\:\!bg-gray-700{background-color:color-mix(in srgb, var(--colors-gray-700) var(--un-bg-opacity), transparent) !important;} .dark .dark\:bg-black\/60{background-color:color-mix(in srgb, var(--colors-black) 60%, transparent);} .dark .dark\:bg-white\/\[0\.03\]{background-color:color-mix(in srgb, var(--colors-white) 0.03, transparent);} .data-\[state\=open\]\:bg-accent\/50[data-state=open]{background-color:color-mix(in srgb, hsl(var(--accent)) 50%, transparent);} .data-\[state\=unchecked\]\:bg-input[data-state=unchecked]{background-color:color-mix(in srgb, hsl(var(--input)) var(--un-bg-opacity), transparent);} .dark .dark\:hover\:bg-white\/\[0\.06\]:hover{background-color:color-mix(in srgb, var(--colors-white) 0.06, transparent);} .group:hover .group-hover\:bg-black\/70{background-color:color-mix(in srgb, var(--colors-black) 70%, transparent);} .group.destructive .hover\:group-\[\.destructive\]\:bg-destructive:hover{background-color:color-mix(in srgb, hsl(var(--destructive)) var(--un-bg-opacity), transparent);} .hover\:bg-accent:hover{background-color:color-mix(in srgb, hsl(var(--accent)) var(--un-bg-opacity), transparent);} .hover\:bg-accent\/80:hover{background-color:color-mix(in srgb, hsl(var(--accent)) 80%, transparent);} .hover\:bg-black\/\[0\.03\]:hover{background-color:color-mix(in srgb, var(--colors-black) 0.03, transparent);} .hover\:bg-black\/10:hover{background-color:color-mix(in srgb, var(--colors-black) 10%, transparent);} .hover\:bg-black\/20:hover{background-color:color-mix(in srgb, var(--colors-black) 20%, transparent);} .hover\:bg-blue-500\/35:hover{background-color:color-mix(in srgb, var(--colors-blue-500) 35%, transparent);} .hover\:bg-destructive\/80:hover{background-color:color-mix(in srgb, hsl(var(--destructive)) 80%, transparent);} .hover\:bg-destructive\/90:hover{background-color:color-mix(in srgb, hsl(var(--destructive)) 90%, transparent);} .hover\:bg-emerald-100:hover{background-color:color-mix(in srgb, var(--colors-emerald-100) var(--un-bg-opacity), transparent);} .hover\:bg-gray-100:hover{background-color:color-mix(in srgb, var(--colors-gray-100) var(--un-bg-opacity), transparent);} .hover\:bg-gray-200:hover{background-color:color-mix(in srgb, var(--colors-gray-200) var(--un-bg-opacity), transparent);} .hover\:bg-muted-foreground\/20:hover{background-color:color-mix(in srgb, hsl(var(--muted-foreground)) 20%, transparent);} .hover\:bg-muted:hover{background-color:color-mix(in srgb, hsl(var(--muted)) var(--un-bg-opacity), transparent);} .hover\:bg-muted\/20:hover{background-color:color-mix(in srgb, hsl(var(--muted)) 20%, transparent);} .hover\:bg-muted\/50:hover{background-color:color-mix(in srgb, hsl(var(--muted)) 50%, transparent);} .hover\:bg-muted\/80:hover{background-color:color-mix(in srgb, hsl(var(--muted)) 80%, transparent);} .hover\:bg-neutral-200:hover{background-color:color-mix(in srgb, var(--colors-neutral-200) var(--un-bg-opacity), transparent);} .hover\:bg-primary\/80:hover{background-color:color-mix(in srgb, hsl(var(--primary)) 80%, transparent);} .hover\:bg-primary\/90:hover{background-color:color-mix(in srgb, hsl(var(--primary)) 90%, transparent);} .hover\:bg-red-50:hover{background-color:color-mix(in srgb, var(--colors-red-50) var(--un-bg-opacity), transparent);} .hover\:bg-secondary:hover{background-color:color-mix(in srgb, hsl(var(--secondary)) var(--un-bg-opacity), transparent);} .hover\:bg-secondary\/80:hover{background-color:color-mix(in srgb, hsl(var(--secondary)) 80%, transparent);} .hover\:bg-white\/20:hover{background-color:color-mix(in srgb, var(--colors-white) 20%, transparent);} .hover\:bg-white\/30:hover{background-color:color-mix(in srgb, var(--colors-white) 30%, transparent);} .dark .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:focus[data-variant=destructive]{background-color:color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);} .dark .dark\:focus\:bg-white\/\[0\.06\]:focus{background-color:color-mix(in srgb, var(--colors-white) 0.06, transparent);} .data-\[variant\=destructive\]\:focus\:bg-destructive\/10:focus[data-variant=destructive]{background-color:color-mix(in srgb, hsl(var(--destructive)) 10%, transparent);} .focus\:bg-accent:focus{background-color:color-mix(in srgb, hsl(var(--accent)) var(--un-bg-opacity), transparent);} .focus\:bg-black\/\[0\.03\]:focus{background-color:color-mix(in srgb, var(--colors-black) 0.03, transparent);} .active\:bg-black\/\[0\.06\]:active{background-color:color-mix(in srgb, var(--colors-black) 0.06, transparent);} .dark .dark\:active\:bg-white\/\[0\.09\]:active{background-color:color-mix(in srgb, var(--colors-white) 0.09, transparent);} .disabled\:hover\:bg-transparent:hover:disabled{background-color:transparent;} .file\:bg-transparent::file-selector-button{background-color:transparent;} .\[\&\>span\]\:opacity-70>span, .opacity-70, .peer:disabled~.peer-disabled\:opacity-70{opacity:70%;} .aria-disabled\:opacity-50[aria-disabled="true"], .data-\[disabled\]\:opacity-50[data-disabled], .opacity-50{opacity:50%;} .opacity-0{opacity:0%;} .opacity-100, .group\/stepper:focus-within .group-focus-within\/stepper\:opacity-100, .group:hover .group-hover\:opacity-100, .group\/stepper:hover .group-hover\/stepper\:opacity-100{opacity:100%;} .opacity-20{opacity:20%;} .opacity-25{opacity:25%;} .opacity-30{opacity:30%;} .opacity-40{opacity:40%;} .opacity-75{opacity:75%;} .opacity-80{opacity:80%;} .opacity-90{opacity:90%;} .hover\:opacity-100:hover{opacity:100%;} .hover\:opacity-75:hover{opacity:75%;} .focus\:opacity-100:focus{opacity:100%;} .focus\:opacity-75:focus{opacity:75%;} .disabled\:opacity-30:disabled{opacity:30%;} .disabled\:opacity-50:disabled{opacity:50%;} .disabled\:opacity-60:disabled{opacity:60%;} .hover\:underline:hover{text-decoration-line:underline;} .underline-offset-4{text-underline-offset:4px;} .no-underline{text-decoration:none;} .flex{display:flex;} .inline-flex{display:inline-flex;} .flex-1{flex:1 1 0%;} .\[\&_svg\]\:shrink-0 svg, .\[\&\>svg\]\:shrink-0>svg, .flex-shrink-0, .shrink-0{flex-shrink:0;} .flex-grow, .grow{flex-grow:1;} .grow-0{flex-grow:0;} .basis-full{flex-basis:100%;} .flex-row{flex-direction:row;} .flex-col{flex-direction:column;} .flex-col-reverse{flex-direction:column-reverse;} .flex-wrap{flex-wrap:wrap;} .gap-\[10px\]{gap:10px;} .gap-0\.5{gap:calc(var(--spacing) * 0.5);} .gap-1{gap:calc(var(--spacing) * 1);} .gap-1\.5{gap:calc(var(--spacing) * 1.5);} .gap-10{gap:calc(var(--spacing) * 10);} .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-6{gap:calc(var(--spacing) * 6);} .gap-8{gap:calc(var(--spacing) * 8);} .gap-px{gap:1px;} .gap-x-4{column-gap:calc(var(--spacing) * 4);} .gap-y-1\.5{row-gap:calc(var(--spacing) * 1.5);} .grid{display:grid;} .col-span-2{grid-column:span 2/span 2;} .col-span-3{grid-column:span 3/span 3;} .grid-cols-\[100px_minmax\(62px\,1fr\)\]{grid-template-columns:100px minmax(62px,1fr);} .grid-cols-\[200px_1fr\]{grid-template-columns:200px 1fr;} .grid-cols-\[80px_1fr\]{grid-template-columns:80px 1fr;} .grid-cols-\[82px_minmax\(62px\,1fr\)_20px\]\!{grid-template-columns:82px minmax(62px,1fr) 20px !important;} .grid-cols-\[repeat\(2\,minmax\(min-content\,1fr\)\)\]{grid-template-columns:repeat(2,minmax(min-content,1fr));} .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));} .grid-cols-10{grid-template-columns:repeat(10,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-4{grid-template-columns:repeat(4,minmax(0,1fr));} .grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr));} .grid-cols-subgrid{grid-template-columns:subgrid;} .\[\&_svg\]\:size-4 svg, .\[\&\>svg\]\:size-4>svg, .size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4);} .\[\&\>svg\]\:size-3\.5>svg, .size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5);} .size-\[20px\]{width:20px;height:20px;} .size-\[20px\]\!{width:20px !important;height:20px !important;} .size-\[62px\]{width:62px;height:62px;} .size-\[70\%\]{width:70%;height:70%;} .size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10);} .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-20{width:calc(var(--spacing) * 20);height:calc(var(--spacing) * 20);} .size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3);} .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-auto{width:auto;height:auto;} .size-full{width:100%;height:100%;} .\!max-w-none{max-width:none !important;} .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg, .\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg, .h-5{height:calc(var(--spacing) * 5);} .\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg, .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg, .w-5{width:calc(var(--spacing) * 5);} .\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input], .h-12{height:calc(var(--spacing) * 12);} .\[\&\>svg\]\:h-2\.5>svg, .h-2\.5{height:calc(var(--spacing) * 2.5);} .\[\&\>svg\]\:h-3>svg, .h-3{height:calc(var(--spacing) * 3);} .\[\&\>svg\]\:w-2\.5>svg, .w-2\.5{width:calc(var(--spacing) * 2.5);} .\[\&\>svg\]\:w-3>svg, .w-3{width:calc(var(--spacing) * 3);} .h-\[1\.1rem\]{height:1.1rem;} .h-\[100px\]{height:100px;} .h-\[14px\]{height:14px;} .h-\[18px\]{height:18px;} .h-\[27px\]{height:27px;} .h-\[2px\]{height:2px;} .h-\[330px\]{height:330px;} .h-\[400px\]{height:400px;} .h-\[calc\(50vh-8rem\)\]{height:calc(50vh - 8rem);} .h-0{height:calc(var(--spacing) * 0);} .h-0\.5{height:calc(var(--spacing) * 0.5);} .h-1{height:calc(var(--spacing) * 1);} .h-1\.5{height:calc(var(--spacing) * 1.5);} .h-1\/3{height:33.3333333333%;} .h-10{height:calc(var(--spacing) * 10);} .h-10\!{height:calc(var(--spacing) * 10) !important;} .h-11{height:calc(var(--spacing) * 11);} .h-14{height:calc(var(--spacing) * 14);} .h-16{height:calc(var(--spacing) * 16);} .h-2{height:calc(var(--spacing) * 2);} .h-20{height:calc(var(--spacing) * 20);} .h-3\.5{height:calc(var(--spacing) * 3.5);} .h-32{height:calc(var(--spacing) * 32);} .h-4{height:calc(var(--spacing) * 4);} .h-6{height:calc(var(--spacing) * 6);} .h-7{height:calc(var(--spacing) * 7);} .h-8{height:calc(var(--spacing) * 8);} .h-80{height:calc(var(--spacing) * 80);} .h-9{height:calc(var(--spacing) * 9);} .h-auto{height:auto;} .h-full{height:100%;} .h-px{height:1px;} .max-h-\[200px\]{max-height:200px;} .max-h-\[240px\]{max-height:240px;} .max-h-\[280px\]{max-height:280px;} .max-h-\[3000px\]{max-height:3000px;} .max-h-\[300px\]{max-height:300px;} .max-h-\[50vh\]{max-height:50vh;} .max-h-\[560px\]{max-height:560px;} .max-h-\[600px\]{max-height:600px;} .max-h-\[70vh\]{max-height:70vh;} .max-h-\[calc\(100vh-200px\)\]{max-height:calc(100vh - 200px);} .max-h-0{max-height:calc(var(--spacing) * 0);} .max-h-20{max-height:calc(var(--spacing) * 20);} .max-h-48{max-height:calc(var(--spacing) * 48);} .max-h-56{max-height:calc(var(--spacing) * 56);} .max-h-96{max-height:calc(var(--spacing) * 96);} .max-h-full{max-height:100%;} .max-h-screen{max-height:100vh;} .max-w-\[100px\]{max-width:100px;} .max-w-\[130px\]{max-width:130px;} .max-w-\[180px\]{max-width:180px;} .max-w-\[20rem\]{max-width:20rem;} .max-w-\[220px\]{max-width:220px;} .max-w-\[22rem\]{max-width:22rem;} .max-w-\[250px\]{max-width:250px;} .max-w-\[280px\]{max-width:280px;} .max-w-\[400px\]{max-width:400px;} .max-w-\[72px\]{max-width:72px;} .max-w-\[calc\(100vw-1\.5rem\)\]{max-width:calc(100vw - 1.5rem);} .max-w-26{max-width:calc(var(--spacing) * 26);} .max-w-2xl{max-width:var(--container-2xl);} .max-w-3xl{max-width:var(--container-3xl);} .max-w-7xl{max-width:var(--container-7xl);} .max-w-full{max-width:100%;} .max-w-lg{max-width:var(--container-lg);} .max-w-max{max-width:max-content;} .max-w-min{max-width:min-content;} .min-h-\[100px\]{min-height:100px;} .min-h-\[100vh\]{min-height:100vh;} .min-h-\[120px\]{min-height:120px;} .min-h-\[150px\]{min-height:150px;} .min-h-\[200px\]{min-height:200px;} .min-h-\[28px\]{min-height:28px;} .min-h-\[300px\]{min-height:300px;} .min-h-\[32px\]{min-height:32px;} .min-h-\[36px\]{min-height:36px;} .min-h-\[400px\]{min-height:400px;} .min-h-\[60px\]{min-height:60px;} .min-h-\[80px\]{min-height:80px;} .min-h-0{min-height:calc(var(--spacing) * 0);} .min-h-20{min-height:calc(var(--spacing) * 20);} .min-h-6{min-height:calc(var(--spacing) * 6);} .min-h-full{min-height:100%;} .min-w-\[1\.1rem\]{min-width:1.1rem;} .min-w-\[1\.5rem\]{min-width:1.5rem;} .min-w-\[12rem\]{min-width:12rem;} .min-w-\[200px\]{min-width:200px;} .min-w-\[60px\]{min-width:60px;} .min-w-\[8rem\]{min-width:8rem;} .min-w-0{min-width:calc(var(--spacing) * 0);} .min-w-20{min-width:calc(var(--spacing) * 20);} .min-w-28{min-width:calc(var(--spacing) * 28);} .min-w-32{min-width:calc(var(--spacing) * 32);} .min-w-5{min-width:calc(var(--spacing) * 5);} .w-\[100px\]{width:100px;} .w-\[120px\]{width:120px;} .w-\[140px\]{width:140px;} .w-\[160px\]{width:160px;} .w-\[18px\]{width:18px;} .w-\[200px\]{width:200px;} .w-\[220px\]{width:220px;} .w-\[240px\]{width:240px;} .w-\[260px\]{width:260px;} .w-\[280px\]{width:280px;} .w-\[320px\]{width:320px;} .w-\[400px\]{width:400px;} .w-\[420px\]{width:420px;} .w-\[480px\]{width:480px;} .w-\[4rem\]{width:4rem;} .w-\[500px\]{width:500px;} .w-\[50px\]{width:50px;} .w-\[540px\]{width:540px;} .w-\[600px\]{width:600px;} .w-\[70px\]{width:70px;} .w-\[80px\]{width:80px;} .w-\[85vw\]{width:85vw;} .w-\[90px\]{width:90px;} .w-\[var\(--radix-popover-trigger-width\)\]{width:var(--radix-popover-trigger-width);} .w-0{width:calc(var(--spacing) * 0);} .w-0\.5{width:calc(var(--spacing) * 0.5);} .w-1{width:calc(var(--spacing) * 1);} .w-1\.5{width:calc(var(--spacing) * 1.5);} .w-10{width:calc(var(--spacing) * 10);} .w-12{width:calc(var(--spacing) * 12);} .w-16{width:calc(var(--spacing) * 16);} .w-2{width:calc(var(--spacing) * 2);} .w-20{width:calc(var(--spacing) * 20);} .w-28{width:calc(var(--spacing) * 28);} .w-3\.5{width:calc(var(--spacing) * 3.5);} .w-3\/4{width:75%;} .w-30{width:calc(var(--spacing) * 30);} .w-4{width:calc(var(--spacing) * 4);} .w-56{width:calc(var(--spacing) * 56);} .w-6{width:calc(var(--spacing) * 6);} .w-60{width:calc(var(--spacing) * 60);} .w-7{width:calc(var(--spacing) * 7);} .w-72{width:calc(var(--spacing) * 72);} .w-8{width:calc(var(--spacing) * 8);} .w-80{width:calc(var(--spacing) * 80);} .w-9{width:calc(var(--spacing) * 9);} .w-auto{width:auto;} .w-fit{width:fit-content;} .w-full{width:100%;} .w-max{width:max-content;} .w-px{width:1px;} .after\:w-\[2px\]::after{width:2px;} .aspect-\[16\/10\]{aspect-ratio:16/10;} .aspect-\[2\/1\]{aspect-ratio:2/1;} .aspect-\[3\/4\]{aspect-ratio:3/4;} .aspect-\[4\/3\]{aspect-ratio:4/3;} .aspect-square{aspect-ratio:1/1;} .aspect-video{aspect-ratio:16/9;} .block{display:block;} .root-block:root{display:block;} .inline-block{display:inline-block;} .contents{display:contents;} .\[\&\>button\]\:hidden>button, .hidden{display:none;} .visible, .group:hover .group-hover\:visible{visibility:visible;} .invisible{visibility:hidden;} .cursor-default{cursor:default;} .cursor-pointer{cursor:pointer;} .cursor-not-allowed, .peer:disabled~.peer-disabled\:cursor-not-allowed{cursor:not-allowed;} .disabled\:cursor-not-allowed:disabled{cursor:not-allowed;} .cursor-grab{cursor:grab;} .active\:cursor-grabbing:active{cursor:grabbing;} .cursor-col-resize{cursor:col-resize;} .cursor-row-resize{cursor:row-resize;} .pointer-events-auto{pointer-events:auto;} .\[\&_svg\]\:pointer-events-none svg, .aria-disabled\:pointer-events-none[aria-disabled="true"], .data-\[disabled\]\:pointer-events-none[data-disabled], .pointer-events-none{pointer-events:none;} .disabled\:pointer-events-none:disabled{pointer-events:none;} .select-none{-webkit-user-select:none;user-select:none;} .whitespace-nowrap{white-space:nowrap;} .break-words{overflow-wrap:break-word;} .\[\&\>span\:last-child\]\:truncate>span:last-child, .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .text-ellipsis{text-overflow:ellipsis;} .uppercase{text-transform:uppercase;} .capitalize{text-transform:capitalize;} .italic{font-style:italic;} .has-focus\:ring-\[3px\]:has(:focus){--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(3px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .ring, .ring-1{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(1px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .ring-0{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(0px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .ring-2{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(2px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .focus\:ring-2:focus{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(2px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .focus-visible\:ring-0:focus-visible{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(0px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .focus-visible\:ring-1:focus-visible{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(1px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .focus-visible\:ring-2:focus-visible{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(2px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .group:focus-visible .group-focus-visible\:ring-4{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(4px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .has-focus\:ring-ring\/50:has(:focus){--un-ring-color:color-mix(in srgb, hsl(var(--ring)) 50%, transparent);} .ring-background{--un-ring-color:color-mix(in srgb, hsl(var(--background)) var(--un-ring-opacity), transparent);} .ring-primary{--un-ring-color:color-mix(in srgb, hsl(var(--primary)) var(--un-ring-opacity), transparent);} .ring-primary\/50{--un-ring-color:color-mix(in srgb, hsl(var(--primary)) 50%, transparent);} .ring-white\/30{--un-ring-color:color-mix(in srgb, var(--colors-white) 30%, transparent);} .focus\:ring-ring:focus{--un-ring-color:color-mix(in srgb, hsl(var(--ring)) var(--un-ring-opacity), transparent);} .focus\:ring-white\/50:focus{--un-ring-color:color-mix(in srgb, var(--colors-white) 50%, transparent);} .group.destructive .focus\:group-\[\.destructive\]\:ring-destructive:focus{--un-ring-color:color-mix(in srgb, hsl(var(--destructive)) var(--un-ring-opacity), transparent);} .group.destructive .focus\:group-\[\.destructive\]\:ring-red-400:focus{--un-ring-color:color-mix(in srgb, var(--colors-red-400) var(--un-ring-opacity), transparent);} .focus-visible\:ring-ring:focus-visible{--un-ring-color:color-mix(in srgb, hsl(var(--ring)) var(--un-ring-opacity), transparent);} .group:focus-visible .group-focus-visible\:ring-white\/70{--un-ring-color:color-mix(in srgb, var(--colors-white) 70%, transparent);} .ring-offset-1{--un-ring-offset-width:1px;--un-ring-offset-shadow:var(--un-ring-inset,) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);} .focus\:ring-offset-2:focus{--un-ring-offset-width:2px;--un-ring-offset-shadow:var(--un-ring-inset,) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);} .focus-visible\:ring-offset-0:focus-visible{--un-ring-offset-width:0px;--un-ring-offset-shadow:var(--un-ring-inset,) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);} .focus-visible\:ring-offset-2:focus-visible{--un-ring-offset-width:2px;--un-ring-offset-shadow:var(--un-ring-inset,) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);} .focus-visible\:ring-offset:focus-visible{--un-ring-offset-width:1px;--un-ring-offset-shadow:var(--un-ring-inset,) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);} .ring-offset-background{--un-ring-offset-color:color-mix(in srgb, hsl(var(--background)) var(--un-ring-offset-opacity), transparent);} .ring-offset-transparent{--un-ring-offset-color:transparent;} .group.destructive .focus\:group-\[\.destructive\]\:ring-offset-red-600:focus{--un-ring-offset-color:color-mix(in srgb, var(--colors-red-600) var(--un-ring-offset-opacity), transparent);} .focus-visible\:ring-offset-background:focus-visible{--un-ring-offset-color:color-mix(in srgb, hsl(var(--background)) var(--un-ring-offset-opacity), transparent);} .focus\:ring-inset:focus{--un-ring-inset:inset;} .group.toaster .group-\[\.toaster\]\:shadow-lg, .shadow-lg{--un-shadow:0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .\!shadow-none{--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0)) !important;box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow) !important;} .dark .dark\:shadow-black\/50{--un-shadow-color:color-mix(in srgb, var(--colors-black) 50%, transparent);} .data-\[state\=active\]\:shadow-xs[data-state=active], .shadow-xs{--un-shadow:0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\]{--un-shadow:0 0 0 1px var(--un-shadow-color, hsl(var(--sidebar-border)));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .shadow-2xl{--un-shadow:0 25px 50px -12px var(--un-shadow-color, rgb(0 0 0 / 0.25));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .shadow-black\/10{--un-shadow-color:color-mix(in srgb, var(--colors-black) 10%, transparent);} .shadow-black\/40{--un-shadow-color:color-mix(in srgb, var(--colors-black) 40%, transparent);} .shadow-md{--un-shadow:0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .shadow-none{--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .shadow-sm{--un-shadow:0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .shadow-xl{--un-shadow:0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover{--un-shadow:0 0 0 1px var(--un-shadow-color, hsl(var(--sidebar-accent)));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .hover\:shadow-lg:hover{--un-shadow:0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .origin-top-center{transform-origin:top center;} .origin-top-left{transform-origin:top left;} .-translate-x-\[4px\]{--un-translate-x:-4px;translate:var(--un-translate-x) var(--un-translate-y);} .-translate-x-1\/2, .translate-x-\[-50\%\]{--un-translate-x:-50%;translate:var(--un-translate-x) var(--un-translate-y);} .-translate-x-px{--un-translate-x:-1px;translate:var(--un-translate-x) var(--un-translate-y);} .-translate-y-1{--un-translate-y:calc(var(--spacing) * -1);translate:var(--un-translate-x) var(--un-translate-y);} .-translate-y-1\/2, .translate-y-\[-50\%\]{--un-translate-y:-50%;translate:var(--un-translate-x) var(--un-translate-y);} .-translate-y-2{--un-translate-y:calc(var(--spacing) * -2);translate:var(--un-translate-x) var(--un-translate-y);} .data-\[state\=checked\]\:translate-x-5[data-state=checked]{--un-translate-x:calc(var(--spacing) * 5);translate:var(--un-translate-x) var(--un-translate-y);} .data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked], .data-\[swipe\=cancel\]\:translate-x-0[data-swipe=cancel]{--un-translate-x:calc(var(--spacing) * 0);translate:var(--un-translate-x) var(--un-translate-y);} .translate-x-0\.75{--un-translate-x:calc(var(--spacing) * 0.75);translate:var(--un-translate-x) var(--un-translate-y);} .translate-x-px{--un-translate-x:1px;translate:var(--un-translate-x) var(--un-translate-y);} .translate-y-0{--un-translate-y:calc(var(--spacing) * 0);translate:var(--un-translate-x) var(--un-translate-y);} .translate-y-2{--un-translate-y:calc(var(--spacing) * 2);translate:var(--un-translate-x) var(--un-translate-y);} .hover\:-translate-y-1:hover{--un-translate-y:calc(var(--spacing) * -1);translate:var(--un-translate-x) var(--un-translate-y);} .-rotate-45{rotate:-45deg;} .-rotate-90{rotate:-90deg;} .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg, .rotate-180{rotate:180deg;} .rotate-45{rotate:45deg;} .rotate-90{rotate:90deg;} .scale-100{--un-scale-x:100%;--un-scale-y:100%;scale:var(--un-scale-x) var(--un-scale-y);} .scale-75{--un-scale-x:75%;--un-scale-y:75%;scale:var(--un-scale-x) var(--un-scale-y);} .scale-95{--un-scale-x:95%;--un-scale-y:95%;scale:var(--un-scale-x) var(--un-scale-y);} .group:hover .group-hover\:scale-105{--un-scale-x:105%;--un-scale-y:105%;scale:var(--un-scale-x) var(--un-scale-y);} .hover\:scale-105:hover{--un-scale-x:105%;--un-scale-y:105%;scale:var(--un-scale-x) var(--un-scale-y);} .hover\:scale-110:hover{--un-scale-x:110%;--un-scale-y:110%;scale:var(--un-scale-x) var(--un-scale-y);} .transform{transform:var(--un-rotate-x) var(--un-rotate-y) var(--un-rotate-z) var(--un-skew-x) var(--un-skew-y);} .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--un-gradient-from,--un-gradient-via,--un-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));} .transition-\[left\,right\,width\]{transition-property:left,right,width;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));} .transition-\[width\,height\,padding\]{transition-property:width,height,padding;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));} .transition-\[width\]{transition-property:width;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));} .transition-all{transition-property:all;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));} .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--un-gradient-from,--un-gradient-via,--un-gradient-to;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));} .transition-opacity{transition-property:opacity;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));} .transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));} .data-\[state\=closed\]\:duration-300[data-state=closed], .duration-300{--un-duration:300ms;transition-duration:300ms;} .data-\[state\=open\]\:duration-500[data-state=open]{--un-duration:500ms;transition-duration:500ms;} .duration-\[2s\]{--un-duration:2s;transition-duration:2s;} .duration-150{--un-duration:150ms;transition-duration:150ms;} .duration-200{--un-duration:200ms;transition-duration:200ms;} .duration-700{--un-duration:700ms;transition-duration:700ms;} .ease-in-out{--un-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out);} .ease-linear{--un-ease:var(--ease-linear);transition-timing-function:var(--ease-linear);} .ease-out{--un-ease:var(--ease-out);transition-timing-function:var(--ease-out);} .data-\[swipe\=move\]\:transition-none[data-swipe=move]{transition:none;} .\[--cell-size\:--spacing\(8\)\]{--cell-size:calc(var(--spacing) * 8);} .content-start{align-content:flex-start;} .items-start{align-items:flex-start;} .items-end{align-items:flex-end;} .items-center{align-items:center;} .items-stretch{align-items:stretch;} .self-start{align-self:flex-start;} .self-center{align-self:center;} .-inset-3{inset:calc(var(--spacing) * -3);} .inset-0{inset:calc(var(--spacing) * 0);} .inset-1{inset:calc(var(--spacing) * 1);} .inset-2{inset:calc(var(--spacing) * 2);} .inset-5{inset:calc(var(--spacing) * 5);} .inset-x-0{inset-inline:calc(var(--spacing) * 0);} .inset-y-0{inset-block:calc(var(--spacing) * 0);} .after\:inset-y-0::after{inset-block:calc(var(--spacing) * 0);} .-bottom-12{bottom:calc(var(--spacing) * -12);} .-left-12{left:calc(var(--spacing) * -12);} .-right-1{right:calc(var(--spacing) * -1);} .-right-12{right:calc(var(--spacing) * -12);} .-top-1{top:calc(var(--spacing) * -1);} .-top-12{top:calc(var(--spacing) * -12);} .bottom-0{bottom:calc(var(--spacing) * 0);} .bottom-3{bottom:calc(var(--spacing) * 3);} .bottom-full{bottom:100%;} .left-\[20px\]{left:20px;} .left-\[47px\]{left:47px;} .left-\[50\%\], .left-1\/2{left:50%;} .left-\[5px\]{left:5px;} .left-0{left:calc(var(--spacing) * 0);} .left-1{left:calc(var(--spacing) * 1);} .left-10{left:calc(var(--spacing) * 10);} .left-18{left:calc(var(--spacing) * 18);} .left-2{left:calc(var(--spacing) * 2);} .left-3{left:calc(var(--spacing) * 3);} .left-4{left:calc(var(--spacing) * 4);} .right-0{right:calc(var(--spacing) * 0);} .right-1{right:calc(var(--spacing) * 1);} .right-2{right:calc(var(--spacing) * 2);} .right-3{right:calc(var(--spacing) * 3);} .right-4{right:calc(var(--spacing) * 4);} .top-\[-2px\]{top:-2px;} .top-\[20px\]{top:20px;} .top-\[47px\]{top:47px;} .top-\[50\%\], .top-1\/2{top:50%;} .top-\[5px\]{top:5px;} .top-\[60\%\]{top:60%;} .top-0{top:calc(var(--spacing) * 0);} .top-1{top:calc(var(--spacing) * 1);} .top-1\.5{top:calc(var(--spacing) * 1.5);} .top-2{top:calc(var(--spacing) * 2);} .top-3{top:calc(var(--spacing) * 3);} .top-3\.5{top:calc(var(--spacing) * 3.5);} .top-4{top:calc(var(--spacing) * 4);} .top-full{top:100%;} .top-px{top:1px;} .after\:left-1\/2::after{left:50%;} .justify-start{justify-content:flex-start;} .justify-end{justify-content:flex-end;} .justify-center{justify-content:center;} .justify-between{justify-content:space-between;} .place-items-center{place-items:center;} .absolute{position:absolute;} .fixed{position:fixed;} .relative{position:relative;} .after\:absolute::after{position:absolute;} .static{position:static;} .z-\[1\]{z-index:1;} .z-\[100\], .z-100{z-index:100;} .z-\[1000\]{z-index:1000;} .z-\[999\]{z-index:999;} .z-10{z-index:10;} .z-110{z-index:110;} .z-111{z-index:111;} .z-20{z-index:20;} .z-40{z-index:40;} .z-48{z-index:48;} .z-50{z-index:50;} .z-55{z-index:55;} .z-60{z-index:60;} .overflow-auto{overflow:auto;} .overflow-hidden{overflow:hidden;} .overflow-x-hidden{overflow-x:hidden;} .overflow-y-auto{overflow-y:auto;} .\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text{fill:color-mix(in srgb, hsl(var(--muted-foreground)) var(--un-fill-opacity), transparent);} .fill-current{fill:currentColor;} @keyframes pulse{0%, 100% {opacity:1} 50% {opacity:.5}} @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} .animate-pulse{animation:pulse 2s cubic-bezier(0.4,0,.6,1) infinite;} .animate-spin{animation:spin 1s linear infinite;} .dark .dark\:from-slate-800{--un-gradient-from:color-mix(in oklab, var(--colors-slate-800) var(--un-from-opacity), transparent);--un-gradient-stops:var(--un-gradient-via-stops, var(--un-gradient-position), var(--un-gradient-from) var(--un-gradient-from-position), var(--un-gradient-to) var(--un-gradient-to-position));} .dark .dark\:to-slate-900{--un-gradient-to:color-mix(in oklab, var(--colors-slate-900) var(--un-to-opacity), transparent);--un-gradient-stops:var(--un-gradient-via-stops, var(--un-gradient-position), var(--un-gradient-from) var(--un-gradient-from-position), var(--un-gradient-to) var(--un-gradient-to-position));} .from-slate-100{--un-gradient-from:color-mix(in oklab, var(--colors-slate-100) var(--un-from-opacity), transparent);--un-gradient-stops:var(--un-gradient-via-stops, var(--un-gradient-position), var(--un-gradient-from) var(--un-gradient-from-position), var(--un-gradient-to) var(--un-gradient-to-position));} .from-white{--un-gradient-from:color-mix(in oklab, var(--colors-white) var(--un-from-opacity), transparent);--un-gradient-stops:var(--un-gradient-via-stops, var(--un-gradient-position), var(--un-gradient-from) var(--un-gradient-from-position), var(--un-gradient-to) var(--un-gradient-to-position));} .to-slate-200{--un-gradient-to:color-mix(in oklab, var(--colors-slate-200) var(--un-to-opacity), transparent);--un-gradient-stops:var(--un-gradient-via-stops, var(--un-gradient-position), var(--un-gradient-from) var(--un-gradient-from-position), var(--un-gradient-to) var(--un-gradient-to-position));} .to-transparent{--un-gradient-to:transparent;--un-gradient-stops:var(--un-gradient-via-stops, var(--un-gradient-position), var(--un-gradient-from) var(--un-gradient-from-position), var(--un-gradient-to) var(--un-gradient-to-position));} .bg-gradient-to-br{--un-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--un-gradient-stops));} .bg-gradient-to-t{--un-gradient-position:to top in oklab;background-image:linear-gradient(var(--un-gradient-stops));} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;} .object-cover{object-fit:cover;} .object-contain{object-fit:contain;} .object-\[0\%_0\%\]{object-position:0% 0%;} .mix-blend-difference{mix-blend-mode:difference;} .min-h-svh{min-height:100svh;} .h-svh{height:100svh;} .backdrop-blur-sm{--un-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--un-backdrop-blur,) var(--un-backdrop-brightness,) var(--un-backdrop-contrast,) var(--un-backdrop-grayscale,) var(--un-backdrop-hue-rotate,) var(--un-backdrop-invert,) var(--un-backdrop-opacity,) var(--un-backdrop-saturate,) var(--un-backdrop-sepia,);backdrop-filter:var(--un-backdrop-blur,) var(--un-backdrop-brightness,) var(--un-backdrop-contrast,) var(--un-backdrop-grayscale,) var(--un-backdrop-hue-rotate,) var(--un-backdrop-invert,) var(--un-backdrop-opacity,) var(--un-backdrop-saturate,) var(--un-backdrop-sepia,);} .drop-shadow-lg{--un-drop-shadow:drop-shadow(0 4px 4px var(--un-drop-shadow-color, rgb(0 0 0 / 0.15)));filter:var(--un-blur,) var(--un-brightness,) var(--un-contrast,) var(--un-grayscale,) var(--un-hue-rotate,) var(--un-invert,) var(--un-saturate,) var(--un-sepia,) var(--un-drop-shadow,);} .\[\&\>span\]\:line-clamp-1>span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;} .line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;} .table{display:table;} .border-collapse{border-collapse:collapse;} .caption-bottom{caption-side:bottom;} .touch-none{touch-action:none;} .tabular-nums{--un-numeric-spacing:tabular-nums;font-variant-numeric:var(--un-ordinal,) var(--un-slashed-zero,) var(--un-numeric-figure,) var(--un-numeric-spacing,) var(--un-numeric-fraction,);} .animate-in, .data-\[motion\^\=from-\]\:animate-in[data-motion^=from-], .data-\[state\=open\]\:animate-in[data-state=open], .data-\[state\=visible\]\:animate-in[data-state=visible]{animation-name:enter;animation-duration:var(--un-duration, 150ms);--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial;} .data-\[motion\^\=to-\]\:animate-out[data-motion^=to-], .data-\[state\=closed\]\:animate-out[data-state=closed], .data-\[state\=hidden\]\:animate-out[data-state=hidden], .data-\[swipe\=end\]\:animate-out[data-swipe=end]{animation-name:exit;animation-duration:var(--un-duration, 150ms);--tw-exit-opacity:initial;--tw-exit-scale:initial;--tw-exit-rotate:initial;--tw-exit-translate-x:initial;--tw-exit-translate-y:initial;} .data-\[state\=open\]\:animate-accordion-down[data-state=open]{animation:accordion-down 0.2s ease-out;} .data-\[state\=closed\]\:animate-accordion-up[data-state=closed]{animation:accordion-up 0.2s ease-out;} .data-\[state\=open\]\:fade-in-0[data-state=open], .fade-in-0{--tw-enter-opacity:0;} .fade-in-80{--tw-enter-opacity:0.8;} .data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity:0;} .data-\[state\=closed\]\:fade-out-80[data-state=closed]{--tw-exit-opacity:0.8;} .data-\[state\=open\]\:zoom-in-90[data-state=open]{--tw-enter-scale:0.9;} .data-\[state\=open\]\:zoom-in-95[data-state=open], .zoom-in-95{--tw-enter-scale:0.95;} .data-\[state\=closed\]\:zoom-out-95[data-state=closed]{--tw-exit-scale:0.95;} .data-\[state\=open\]\:slide-in-from-top-full[data-state=open], .data-\[state\=open\]\:slide-in-from-top[data-state=open]{--tw-enter-translate-y:-100%;} .data-\[state\=open\]\:slide-in-from-bottom[data-state=open]{--tw-enter-translate-y:100%;} .data-\[state\=open\]\:slide-in-from-left[data-state=open]{--tw-enter-translate-x:-100%;} .data-\[state\=open\]\:slide-in-from-right[data-state=open]{--tw-enter-translate-x:100%;} .data-\[state\=closed\]\:slide-out-to-top[data-state=closed]{--tw-exit-translate-y:-100%;} .data-\[state\=closed\]\:slide-out-to-bottom[data-state=closed]{--tw-exit-translate-y:100%;} .data-\[state\=closed\]\:slide-out-to-left[data-state=closed]{--tw-exit-translate-x:-100%;} .data-\[state\=closed\]\:slide-out-to-right-full[data-state=closed], .data-\[state\=closed\]\:slide-out-to-right[data-state=closed]{--tw-exit-translate-x:100%;} .data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open]{--tw-enter-translate-x:-50%;} .data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed]{--tw-exit-translate-x:-50%;} .data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom]{--tw-enter-translate-y:-0.5rem;} .data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top]{--tw-enter-translate-y:0.5rem;} .data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion=from-start]{--tw-enter-translate-x:-13rem;} .data-\[side\=right\]\:slide-in-from-left-2[data-side=right]{--tw-enter-translate-x:-0.5rem;} .data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion=from-end]{--tw-enter-translate-x:13rem;} .data-\[side\=left\]\:slide-in-from-right-2[data-side=left]{--tw-enter-translate-x:0.5rem;} .data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion=to-start]{--tw-exit-translate-x:-13rem;} .data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion=to-end]{--tw-exit-translate-x:13rem;} .data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open]{--tw-enter-translate-y:-48%;} .data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed]{--tw-exit-translate-y:-48%;} .-space-x-2{ :where(&>:not(:last-child)){--un-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * -2) * var(--un-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * -2) * calc(1 - var(--un-space-x-reverse)));} } .divide-border{ :where(&>:not(:last-child)){border-color:color-mix(in srgb, hsl(var(--border)) var(--un-divide-opacity), transparent);} } .divide-y{ :where(&>:not(:last-child)){--un-divide-y-reverse:0;border-top-width:calc(1px * var(--un-divide-y-reverse));border-top-style:var(--un-border-style);border-bottom-width:calc(1px * calc(1 - var(--un-divide-y-reverse)));border-bottom-style:var(--un-border-style);} } .group-data-\[collapsible\=icon\]\:overflow-hidden{ &:is(:where(.group)[data-collapsible=icon] *){overflow:hidden;} } .group-data-\[collapsible\=icon\]\:p-0\!{ &:is(:where(.group)[data-collapsible=icon] *){padding:calc(var(--spacing) * 0) !important;} } .group-data-\[collapsible\=icon\]\:p-2\!{ &:is(:where(.group)[data-collapsible=icon] *){padding:calc(var(--spacing) * 2) !important;} } .group-data-\[collapsible\=icon\]\:size-8\!{ &:is(:where(.group)[data-collapsible=icon] *){width:calc(var(--spacing) * 8) !important;height:calc(var(--spacing) * 8) !important;} } .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\)\]{ &:is(:where(.group)[data-collapsible=icon] *){width:calc(var(--sidebar-width-icon) + (calc(var(--spacing) * 4)));} } .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\]{ &:is(:where(.group)[data-collapsible=icon] *){width:calc(var(--sidebar-width-icon) + (calc(var(--spacing) * 4)) + 2px);} } .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]{ &:is(:where(.group)[data-collapsible=offcanvas] *){left:calc(var(--sidebar-width) * -1);} } .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]{ &:is(:where(.group)[data-collapsible=offcanvas] *){right:calc(var(--sidebar-width) * -1);} } .group-data-\[focused\=true\]\/day\:border-ring{ &:is(:where(.group\/day)[data-focused=true] *){border-color:color-mix(in srgb, hsl(var(--ring)) var(--un-border-opacity), transparent);} } .group-data-\[focused\=true\]\/day\:relative{ &:is(:where(.group\/day)[data-focused=true] *){position:relative;} } .group-data-\[focused\=true\]\/day\:ring-\[3px\]{ &:is(:where(.group\/day)[data-focused=true] *){--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(3px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} } .group-data-\[focused\=true\]\/day\:ring-ring\/50{ &:is(:where(.group\/day)[data-focused=true] *){--un-ring-color:color-mix(in srgb, hsl(var(--ring)) 50%, transparent);} } .group-data-\[focused\=true\]\/day\:z-10{ &:is(:where(.group\/day)[data-focused=true] *){z-index:10;} } .group-data-\[side\=left\]\:-right-4{ &:is(:where(.group)[data-side=left] *){right:calc(var(--spacing) * -4);} } .group-data-\[side\=left\]\:border-r{ &:is(:where(.group)[data-side=left] *){border-right-width:1px;} } .group-data-\[side\=right\]\:border-l{ &:is(:where(.group)[data-side=right] *){border-left-width:1px;} } .group-data-\[side\=right\]\:left-0{ &:is(:where(.group)[data-side=right] *){left:calc(var(--spacing) * 0);} } .group-data-\[state\=open\]\:rotate-180{ &:is(:where(.group)[data-state=open] *){rotate:180deg;} } .group-data-\[variant\=floating\]\:border{ &:is(:where(.group)[data-variant=floating] *){border-width:1px;} } .group-data-\[variant\=floating\]\:rounded-lg{ &:is(:where(.group)[data-variant=floating] *){border-radius:var(--radius-lg);} } .group-data-\[variant\=floating\]\:shadow-sm{ &:is(:where(.group)[data-variant=floating] *){--un-shadow:0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} } .space-x-1{ :where(&>:not(:last-child)){--un-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 1) * var(--un-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--un-space-x-reverse)));} } .space-x-2{ :where(&>:not(:last-child)){--un-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 2) * var(--un-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--un-space-x-reverse)));} } .space-x-4{ :where(&>:not(:last-child)){--un-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 4) * var(--un-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--un-space-x-reverse)));} } .space-y-0\.5{ :where(&>:not(:last-child)){--un-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 0.5) * var(--un-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 0.5) * calc(1 - var(--un-space-y-reverse)));} } .space-y-1{ :where(&>:not(:last-child)){--un-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--un-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--un-space-y-reverse)));} } .space-y-1\.5{ :where(&>:not(:last-child)){--un-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1.5) * var(--un-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1.5) * calc(1 - var(--un-space-y-reverse)));} } .space-y-2{ :where(&>:not(:last-child)){--un-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--un-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--un-space-y-reverse)));} } .space-y-3{ :where(&>:not(:last-child)){--un-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--un-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--un-space-y-reverse)));} } .space-y-4{ :where(&>:not(:last-child)){--un-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--un-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--un-space-y-reverse)));} } .space-y-6{ :where(&>:not(:last-child)){--un-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--un-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--un-space-y-reverse)));} } @supports (color: color-mix(in lab, red, red)){ .group.destructive .group-\[\.destructive\]\:text-red-300{color:color-mix(in oklab, var(--colors-red-300) var(--un-text-opacity), transparent);} .\!text-gray-700{color:color-mix(in oklab, var(--colors-gray-700) var(--un-text-opacity), transparent) !important;} .\!text-gray-900{color:color-mix(in oklab, var(--colors-gray-900) var(--un-text-opacity), transparent) !important;} .dark .dark\:\!text-gray-100{color:color-mix(in oklab, var(--colors-gray-100) var(--un-text-opacity), transparent) !important;} .dark .dark\:\!text-gray-300{color:color-mix(in oklab, var(--colors-gray-300) var(--un-text-opacity), transparent) !important;} .dark .dark\:text-amber-400{color:color-mix(in oklab, var(--colors-amber-400) var(--un-text-opacity), transparent);} .dark .dark\:text-emerald-400{color:color-mix(in oklab, var(--colors-emerald-400) var(--un-text-opacity), transparent);} .dark .dark\:text-gray-300{color:color-mix(in oklab, var(--colors-gray-300) var(--un-text-opacity), transparent);} .dark .dark\:text-gray-400{color:color-mix(in oklab, var(--colors-gray-400) var(--un-text-opacity), transparent);} .dark .dark\:text-indigo-400{color:color-mix(in oklab, var(--colors-indigo-400) var(--un-text-opacity), transparent);} .dark .dark\:text-slate-300{color:color-mix(in oklab, var(--colors-slate-300) var(--un-text-opacity), transparent);} .text-amber-500{color:color-mix(in oklab, var(--colors-amber-500) var(--un-text-opacity), transparent);} .text-amber-600{color:color-mix(in oklab, var(--colors-amber-600) var(--un-text-opacity), transparent);} .text-amber-600\/70{color:color-mix(in oklab, var(--colors-amber-600) 70%, transparent);} .text-amber-600\/80{color:color-mix(in oklab, var(--colors-amber-600) 80%, transparent);} .text-black{color:color-mix(in oklab, var(--colors-black) var(--un-text-opacity), transparent);} .text-blue-400{color:color-mix(in oklab, var(--colors-blue-400) var(--un-text-opacity), transparent);} .text-blue-500{color:color-mix(in oklab, var(--colors-blue-500) var(--un-text-opacity), transparent);} .text-blue-600{color:color-mix(in oklab, var(--colors-blue-600) var(--un-text-opacity), transparent);} .text-cyan-600{color:color-mix(in oklab, var(--colors-cyan-600) var(--un-text-opacity), transparent);} .text-cyan-600\/70{color:color-mix(in oklab, var(--colors-cyan-600) 70%, transparent);} .text-emerald-600{color:color-mix(in oklab, var(--colors-emerald-600) var(--un-text-opacity), transparent);} .text-gray-400{color:color-mix(in oklab, var(--colors-gray-400) var(--un-text-opacity), transparent);} .text-gray-500{color:color-mix(in oklab, var(--colors-gray-500) var(--un-text-opacity), transparent);} .text-gray-600{color:color-mix(in oklab, var(--colors-gray-600) var(--un-text-opacity), transparent);} .text-gray-700{color:color-mix(in oklab, var(--colors-gray-700) var(--un-text-opacity), transparent);} .text-gray-800{color:color-mix(in oklab, var(--colors-gray-800) var(--un-text-opacity), transparent);} .text-gray-900{color:color-mix(in oklab, var(--colors-gray-900) var(--un-text-opacity), transparent);} .text-green-500{color:color-mix(in oklab, var(--colors-green-500) var(--un-text-opacity), transparent);} .text-green-600{color:color-mix(in oklab, var(--colors-green-600) var(--un-text-opacity), transparent);} .text-green-800{color:color-mix(in oklab, var(--colors-green-800) var(--un-text-opacity), transparent);} .text-indigo-600{color:color-mix(in oklab, var(--colors-indigo-600) var(--un-text-opacity), transparent);} .text-neutral-400{color:color-mix(in oklab, var(--colors-neutral-400) var(--un-text-opacity), transparent);} .text-neutral-800{color:color-mix(in oklab, var(--colors-neutral-800) var(--un-text-opacity), transparent);} .text-red-400{color:color-mix(in oklab, var(--colors-red-400) var(--un-text-opacity), transparent);} .text-red-600{color:color-mix(in oklab, var(--colors-red-600) var(--un-text-opacity), transparent);} .text-red-800{color:color-mix(in oklab, var(--colors-red-800) var(--un-text-opacity), transparent);} .text-slate-400{color:color-mix(in oklab, var(--colors-slate-400) var(--un-text-opacity), transparent);} .text-slate-500{color:color-mix(in oklab, var(--colors-slate-500) var(--un-text-opacity), transparent);} .text-slate-700{color:color-mix(in oklab, var(--colors-slate-700) var(--un-text-opacity), transparent);} .text-violet-600{color:color-mix(in oklab, var(--colors-violet-600) var(--un-text-opacity), transparent);} .text-white{color:color-mix(in oklab, var(--colors-white) var(--un-text-opacity), transparent);} .text-white\/70{color:color-mix(in oklab, var(--colors-white) 70%, transparent);} .text-white\/80{color:color-mix(in oklab, var(--colors-white) 80%, transparent);} .dark .dark\:hover\:text-gray-200:hover{color:color-mix(in oklab, var(--colors-gray-200) var(--un-text-opacity), transparent);} .group:hover .group-hover\:text-emerald-600{color:color-mix(in oklab, var(--colors-emerald-600) var(--un-text-opacity), transparent);} .group.destructive .hover\:group-\[\.destructive\]\:text-red-50:hover{color:color-mix(in oklab, var(--colors-red-50) var(--un-text-opacity), transparent);} .hover\:text-gray-600:hover{color:color-mix(in oklab, var(--colors-gray-600) var(--un-text-opacity), transparent);} .hover\:text-red-600:hover{color:color-mix(in oklab, var(--colors-red-600) var(--un-text-opacity), transparent);} .hover\:text-red-700:hover{color:color-mix(in oklab, var(--colors-red-700) var(--un-text-opacity), transparent);} .placeholder\:text-gray-400::placeholder{color:color-mix(in oklab, var(--colors-gray-400) var(--un-text-opacity), transparent);} .border-amber-500\/30{border-color:color-mix(in oklab, var(--colors-amber-500) 30%, transparent);} .border-blue-200{border-color:color-mix(in oklab, var(--colors-blue-200) var(--un-border-opacity), transparent);} .border-blue-300{border-color:color-mix(in oklab, var(--colors-blue-300) var(--un-border-opacity), transparent);} .border-blue-500\/20{border-color:color-mix(in oklab, var(--colors-blue-500) 20%, transparent);} .border-cyan-500\/20{border-color:color-mix(in oklab, var(--colors-cyan-500) 20%, transparent);} .border-gray-100{border-color:color-mix(in oklab, var(--colors-gray-100) var(--un-border-opacity), transparent);} .border-gray-200{border-color:color-mix(in oklab, var(--colors-gray-200) var(--un-border-opacity), transparent);} .border-gray-200\/60{border-color:color-mix(in oklab, var(--colors-gray-200) 60%, transparent);} .border-gray-200\/80{border-color:color-mix(in oklab, var(--colors-gray-200) 80%, transparent);} .border-gray-300{border-color:color-mix(in oklab, var(--colors-gray-300) var(--un-border-opacity), transparent);} .border-green-300{border-color:color-mix(in oklab, var(--colors-green-300) var(--un-border-opacity), transparent);} .border-green-500\/30{border-color:color-mix(in oklab, var(--colors-green-500) 30%, transparent);} .border-neutral-300{border-color:color-mix(in oklab, var(--colors-neutral-300) var(--un-border-opacity), transparent);} .border-red-200{border-color:color-mix(in oklab, var(--colors-red-200) var(--un-border-opacity), transparent);} .border-red-300{border-color:color-mix(in oklab, var(--colors-red-300) var(--un-border-opacity), transparent);} .border-red-500{border-color:color-mix(in oklab, var(--colors-red-500) var(--un-border-opacity), transparent);} .border-red-500\/20{border-color:color-mix(in oklab, var(--colors-red-500) 20%, transparent);} .border-slate-200{border-color:color-mix(in oklab, var(--colors-slate-200) var(--un-border-opacity), transparent);} .border-white\/20{border-color:color-mix(in oklab, var(--colors-white) 20%, transparent);} .border-white\/40{border-color:color-mix(in oklab, var(--colors-white) 40%, transparent);} .dark .dark\:border-gray-700{border-color:color-mix(in oklab, var(--colors-gray-700) var(--un-border-opacity), transparent);} .dark .dark\:border-gray-700\/60{border-color:color-mix(in oklab, var(--colors-gray-700) 60%, transparent);} .dark .dark\:border-gray-700\/80{border-color:color-mix(in oklab, var(--colors-gray-700) 80%, transparent);} .hover\:border-slate-300:hover{border-color:color-mix(in oklab, var(--colors-slate-300) var(--un-border-opacity), transparent);} .focus\:border-blue-400:focus{border-color:color-mix(in oklab, var(--colors-blue-400) var(--un-border-opacity), transparent);} .\!bg-gray-100{background-color:color-mix(in oklab, var(--colors-gray-100) var(--un-bg-opacity), transparent) !important;} .bg-amber-500\/10{background-color:color-mix(in oklab, var(--colors-amber-500) 10%, transparent);} .bg-black\/\[0\.02\]{background-color:color-mix(in oklab, var(--colors-black) 0.02, transparent);} .bg-black\/20{background-color:color-mix(in oklab, var(--colors-black) 20%, transparent);} .bg-black\/30{background-color:color-mix(in oklab, var(--colors-black) 30%, transparent);} .bg-black\/40{background-color:color-mix(in oklab, var(--colors-black) 40%, transparent);} .bg-black\/50{background-color:color-mix(in oklab, var(--colors-black) 50%, transparent);} .bg-black\/55{background-color:color-mix(in oklab, var(--colors-black) 55%, transparent);} .bg-black\/80{background-color:color-mix(in oklab, var(--colors-black) 80%, transparent);} .bg-blue-500{background-color:color-mix(in oklab, var(--colors-blue-500) var(--un-bg-opacity), transparent);} .bg-blue-500\/10{background-color:color-mix(in oklab, var(--colors-blue-500) 10%, transparent);} .bg-blue-500\/25{background-color:color-mix(in oklab, var(--colors-blue-500) 25%, transparent);} .bg-cyan-500\/5{background-color:color-mix(in oklab, var(--colors-cyan-500) 5%, transparent);} .bg-gray-100{background-color:color-mix(in oklab, var(--colors-gray-100) var(--un-bg-opacity), transparent);} .bg-gray-200{background-color:color-mix(in oklab, var(--colors-gray-200) var(--un-bg-opacity), transparent);} .bg-gray-50{background-color:color-mix(in oklab, var(--colors-gray-50) var(--un-bg-opacity), transparent);} .bg-gray-900{background-color:color-mix(in oklab, var(--colors-gray-900) var(--un-bg-opacity), transparent);} .bg-green-100{background-color:color-mix(in oklab, var(--colors-green-100) var(--un-bg-opacity), transparent);} .bg-green-500\/15{background-color:color-mix(in oklab, var(--colors-green-500) 15%, transparent);} .bg-indigo-500{background-color:color-mix(in oklab, var(--colors-indigo-500) var(--un-bg-opacity), transparent);} .bg-neutral-100{background-color:color-mix(in oklab, var(--colors-neutral-100) var(--un-bg-opacity), transparent);} .bg-neutral-800{background-color:color-mix(in oklab, var(--colors-neutral-800) var(--un-bg-opacity), transparent);} .bg-neutral-900\/60{background-color:color-mix(in oklab, var(--colors-neutral-900) 60%, transparent);} .bg-red-100{background-color:color-mix(in oklab, var(--colors-red-100) var(--un-bg-opacity), transparent);} .bg-red-500\/10{background-color:color-mix(in oklab, var(--colors-red-500) 10%, transparent);} .bg-red-600{background-color:color-mix(in oklab, var(--colors-red-600) var(--un-bg-opacity), transparent);} .bg-slate-100{background-color:color-mix(in oklab, var(--colors-slate-100) var(--un-bg-opacity), transparent);} .bg-white{background-color:color-mix(in oklab, var(--colors-white) var(--un-bg-opacity), transparent);} .bg-white\/10{background-color:color-mix(in oklab, var(--colors-white) 10%, transparent);} .bg-white\/20{background-color:color-mix(in oklab, var(--colors-white) 20%, transparent);} .bg-white\/80{background-color:color-mix(in oklab, var(--colors-white) 80%, transparent);} .bg-white\/90{background-color:color-mix(in oklab, var(--colors-white) 90%, transparent);} .dark .dark\:\!bg-gray-700{background-color:color-mix(in oklab, var(--colors-gray-700) var(--un-bg-opacity), transparent) !important;} .dark .dark\:bg-black\/60{background-color:color-mix(in oklab, var(--colors-black) 60%, transparent);} .dark .dark\:bg-gray-900{background-color:color-mix(in oklab, var(--colors-gray-900) var(--un-bg-opacity), transparent);} .dark .dark\:bg-white\/\[0\.03\]{background-color:color-mix(in oklab, var(--colors-white) 0.03, transparent);} .dark .dark\:hover\:bg-white\/\[0\.06\]:hover{background-color:color-mix(in oklab, var(--colors-white) 0.06, transparent);} .group:hover .group-hover\:bg-black\/70{background-color:color-mix(in oklab, var(--colors-black) 70%, transparent);} .hover\:bg-black\/\[0\.03\]:hover{background-color:color-mix(in oklab, var(--colors-black) 0.03, transparent);} .hover\:bg-black\/10:hover{background-color:color-mix(in oklab, var(--colors-black) 10%, transparent);} .hover\:bg-black\/20:hover{background-color:color-mix(in oklab, var(--colors-black) 20%, transparent);} .hover\:bg-blue-500\/35:hover{background-color:color-mix(in oklab, var(--colors-blue-500) 35%, transparent);} .hover\:bg-emerald-100:hover{background-color:color-mix(in oklab, var(--colors-emerald-100) var(--un-bg-opacity), transparent);} .hover\:bg-gray-100:hover{background-color:color-mix(in oklab, var(--colors-gray-100) var(--un-bg-opacity), transparent);} .hover\:bg-gray-200:hover{background-color:color-mix(in oklab, var(--colors-gray-200) var(--un-bg-opacity), transparent);} .hover\:bg-neutral-200:hover{background-color:color-mix(in oklab, var(--colors-neutral-200) var(--un-bg-opacity), transparent);} .hover\:bg-red-50:hover{background-color:color-mix(in oklab, var(--colors-red-50) var(--un-bg-opacity), transparent);} .hover\:bg-white\/20:hover{background-color:color-mix(in oklab, var(--colors-white) 20%, transparent);} .hover\:bg-white\/30:hover{background-color:color-mix(in oklab, var(--colors-white) 30%, transparent);} .dark .dark\:focus\:bg-white\/\[0\.06\]:focus{background-color:color-mix(in oklab, var(--colors-white) 0.06, transparent);} .focus\:bg-black\/\[0\.03\]:focus{background-color:color-mix(in oklab, var(--colors-black) 0.03, transparent);} .active\:bg-black\/\[0\.06\]:active{background-color:color-mix(in oklab, var(--colors-black) 0.06, transparent);} .dark .dark\:active\:bg-white\/\[0\.09\]:active{background-color:color-mix(in oklab, var(--colors-white) 0.09, transparent);} .ring-white\/30{--un-ring-color:color-mix(in oklab, var(--colors-white) 30%, transparent);} .focus\:ring-white\/50:focus{--un-ring-color:color-mix(in oklab, var(--colors-white) 50%, transparent);} .group.destructive .focus\:group-\[\.destructive\]\:ring-red-400:focus{--un-ring-color:color-mix(in oklab, var(--colors-red-400) var(--un-ring-opacity), transparent);} .group:focus-visible .group-focus-visible\:ring-white\/70{--un-ring-color:color-mix(in oklab, var(--colors-white) 70%, transparent);} .group.destructive .focus\:group-\[\.destructive\]\:ring-offset-red-600:focus{--un-ring-offset-color:color-mix(in oklab, var(--colors-red-600) var(--un-ring-offset-opacity), transparent);} .dark .dark\:shadow-black\/50{--un-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--colors-black) 50%, transparent) var(--un-shadow-opacity), transparent);} .shadow-black\/10{--un-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--colors-black) 10%, transparent) var(--un-shadow-opacity), transparent);} .shadow-black\/40{--un-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--colors-black) 40%, transparent) var(--un-shadow-opacity), transparent);} } /* ============================================================================ * RTE Shared Styles — Single Source of Truth * * Shared formatting rules for .editor-input and .richtext-renderer.formatted. * Used in THREE ways: * * 1. CSS @import — style.css imports this for editor consumers * (DrivePreview, CommentItem, BoardNode, Popover3D) * * 2. ?raw import — rteCriticalStyles.ts imports this as a string for: * - pageRenderer.ts SSR inline