/* Proa UI rail styles, scoped for this homepage. Generated by scripts/import-proa-ui-rail.mjs. */ @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) { #proa-ui-components .home-rail-section *, #proa-ui-components .home-rail-section ::before, #proa-ui-components .home-rail-section ::after, #proa-ui-components .home-rail-section ::backdrop { --ui-rail-tw-translate-x: 0; --ui-rail-tw-translate-y: 0; --ui-rail-tw-translate-z: 0; --ui-rail-tw-rotate-x: initial; --ui-rail-tw-rotate-y: initial; --ui-rail-tw-rotate-z: initial; --ui-rail-tw-skew-x: initial; --ui-rail-tw-skew-y: initial; --ui-rail-tw-space-y-reverse: 0; --ui-rail-tw-space-x-reverse: 0; --ui-rail-tw-divide-y-reverse: 0; --ui-rail-tw-border-style: solid; --ui-rail-tw-gradient-position: initial; --ui-rail-tw-gradient-from: #0000; --ui-rail-tw-gradient-via: #0000; --ui-rail-tw-gradient-to: #0000; --ui-rail-tw-gradient-stops: initial; --ui-rail-tw-gradient-via-stops: initial; --ui-rail-tw-gradient-from-position: 0%; --ui-rail-tw-gradient-via-position: 50%; --ui-rail-tw-gradient-to-position: 100%; --ui-rail-tw-leading: initial; --ui-rail-tw-font-weight: initial; --ui-rail-tw-tracking: initial; --ui-rail-tw-ordinal: initial; --ui-rail-tw-slashed-zero: initial; --ui-rail-tw-numeric-figure: initial; --ui-rail-tw-numeric-spacing: initial; --ui-rail-tw-numeric-fraction: initial; --ui-rail-tw-shadow: 0 0 #0000; --ui-rail-tw-shadow-color: initial; --ui-rail-tw-shadow-alpha: 100%; --ui-rail-tw-inset-shadow: 0 0 #0000; --ui-rail-tw-inset-shadow-color: initial; --ui-rail-tw-inset-shadow-alpha: 100%; --ui-rail-tw-ring-color: initial; --ui-rail-tw-ring-shadow: 0 0 #0000; --ui-rail-tw-inset-ring-color: initial; --ui-rail-tw-inset-ring-shadow: 0 0 #0000; --ui-rail-tw-ring-inset: initial; --ui-rail-tw-ring-offset-width: 0px; --ui-rail-tw-ring-offset-color: #fff; --ui-rail-tw-ring-offset-shadow: 0 0 #0000; --ui-rail-tw-outline-style: solid; --ui-rail-tw-blur: initial; --ui-rail-tw-brightness: initial; --ui-rail-tw-contrast: initial; --ui-rail-tw-grayscale: initial; --ui-rail-tw-hue-rotate: initial; --ui-rail-tw-invert: initial; --ui-rail-tw-opacity: initial; --ui-rail-tw-saturate: initial; --ui-rail-tw-sepia: initial; --ui-rail-tw-drop-shadow: initial; --ui-rail-tw-drop-shadow-color: initial; --ui-rail-tw-drop-shadow-alpha: 100%; --ui-rail-tw-drop-shadow-size: initial; --ui-rail-tw-backdrop-blur: initial; --ui-rail-tw-backdrop-brightness: initial; --ui-rail-tw-backdrop-contrast: initial; --ui-rail-tw-backdrop-grayscale: initial; --ui-rail-tw-backdrop-hue-rotate: initial; --ui-rail-tw-backdrop-invert: initial; --ui-rail-tw-backdrop-opacity: initial; --ui-rail-tw-backdrop-saturate: initial; --ui-rail-tw-backdrop-sepia: initial; --ui-rail-tw-duration: initial; --ui-rail-tw-ease: initial; --ui-rail-tw-content: ""; --ui-rail-tw-scale-x: 1; --ui-rail-tw-scale-y: 1; --ui-rail-tw-scale-z: 1; } } #proa-ui-components .home-rail-section, #proa-ui-components .home-rail-section { --font-sans: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: "Geist Mono", "IBM Plex Mono", ui-monospace, monospace; --color-red-50: oklch(97.1% .013 17.38); --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --color-red-600: oklch(57.7% .245 27.325); --color-red-700: oklch(50.5% .213 27.518); --color-orange-50: oklch(98% .016 73.684); --color-orange-500: oklch(70.5% .213 47.604); --color-orange-600: oklch(64.6% .222 41.116); --color-orange-700: oklch(55.3% .195 38.402); --color-amber-200: oklch(92.4% .12 95.746); --color-amber-300: oklch(87.9% .169 91.605); --color-amber-400: oklch(82.8% .189 84.429); --color-amber-500: oklch(76.9% .188 70.08); --color-amber-600: oklch(66.6% .179 58.318); --color-amber-700: oklch(55.5% .163 48.998); --color-yellow-500: oklch(79.5% .184 86.047); --color-green-50: oklch(98.2% .018 155.826); --color-green-100: oklch(96.2% .044 156.743); --color-green-200: oklch(92.5% .084 155.995); --color-green-500: oklch(72.3% .219 149.579); --color-green-600: oklch(62.7% .194 149.214); --color-green-700: oklch(52.7% .154 150.069); --color-green-800: oklch(44.8% .119 151.328); --color-green-900: oklch(39.3% .095 152.535); --color-green-950: oklch(26.6% .065 152.934); --color-emerald-300: oklch(84.5% .143 164.978); --color-emerald-400: oklch(76.5% .177 163.223); --color-emerald-500: oklch(69.6% .17 162.48); --color-emerald-600: oklch(59.6% .145 163.225); --color-emerald-700: oklch(50.8% .118 165.612); --color-sky-300: oklch(82.8% .111 230.318); --color-sky-400: oklch(74.6% .16 232.661); --color-sky-500: oklch(68.5% .169 237.323); --color-sky-600: oklch(58.8% .158 241.966); --color-sky-700: oklch(50% .134 242.749); --color-blue-50: oklch(97% .014 254.604); --color-blue-100: oklch(93.2% .032 255.585); --color-blue-200: oklch(88.2% .059 254.128); --color-blue-400: oklch(70.7% .165 254.624); --color-blue-500: oklch(62.3% .214 259.815); --color-blue-600: oklch(54.6% .245 262.881); --color-blue-700: oklch(48.8% .243 264.376); --color-blue-800: oklch(42.4% .199 265.638); --color-blue-900: oklch(37.9% .146 265.522); --color-blue-950: oklch(28.2% .091 267.935); --color-indigo-400: oklch(67.3% .182 276.935); --color-indigo-500: oklch(58.5% .233 277.117); --color-indigo-600: oklch(51.1% .262 276.966); --color-violet-200: oklch(89.4% .057 293.283); --color-violet-300: oklch(81.1% .111 293.571); --color-violet-400: oklch(70.2% .183 293.541); --color-violet-500: oklch(60.6% .25 292.717); --color-violet-600: oklch(54.1% .281 293.009); --color-violet-700: oklch(49.1% .27 292.581); --color-purple-500: oklch(62.7% .265 303.9); --color-fuchsia-300: oklch(83.3% .145 321.434); --color-fuchsia-500: oklch(66.7% .295 322.15); --color-fuchsia-700: oklch(51.8% .253 323.949); --color-pink-500: oklch(65.6% .241 354.308); --color-rose-300: oklch(81% .117 11.638); --color-rose-400: oklch(71.2% .194 13.428); --color-rose-500: oklch(64.5% .246 16.439); --color-rose-600: oklch(58.6% .253 17.585); --color-rose-700: oklch(51.4% .222 16.935); --color-gray-50: oklch(98.5% .002 247.839); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-500: oklch(55.1% .027 264.364); --color-gray-600: oklch(44.6% .03 256.802); --color-gray-700: oklch(37.3% .034 259.733); --color-gray-900: oklch(21% .034 264.665); --color-zinc-50: oklch(98.5% 0 none); --color-zinc-100: oklch(96.7% .001 286.375); --color-zinc-200: oklch(92% .004 286.32); --color-zinc-300: oklch(87.1% .006 286.286); --color-zinc-400: oklch(70.5% .015 286.067); --color-zinc-500: oklch(55.2% .016 285.938); --color-zinc-600: oklch(44.2% .017 285.786); --color-zinc-700: oklch(37% .013 285.805); --color-zinc-800: oklch(27.4% .006 286.033); --color-zinc-900: oklch(21% .006 285.885); --color-zinc-950: oklch(14.1% .005 285.823); --color-black: #000; --color-white: #fff; --spacing: .25rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-spin: ui-rail-spin 1s linear infinite; --animate-ping: ui-rail-ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: ui-rail-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-bounce: ui-rail-bounce 1s infinite; --blur-xl: 24px; --blur-3xl: 64px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --color-brand: #ff6a13; --font-display: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif; } #proa-ui-components .home-rail-section *, #proa-ui-components .home-rail-section ::after, #proa-ui-components .home-rail-section ::before, #proa-ui-components .home-rail-section ::backdrop { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; } #proa-ui-components .home-rail-section ::file-selector-button { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; } #proa-ui-components .home-rail-section, #proa-ui-components .home-rail-section { text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings,normal); font-variation-settings: var(--default-font-variation-settings,normal); -webkit-tap-highlight-color: transparent; } #proa-ui-components .home-rail-section h3 { font-size: inherit; font-weight: inherit; } #proa-ui-components .home-rail-section a { color: inherit; text-decoration: inherit; } #proa-ui-components .home-rail-section strong { font-weight: bolder; } #proa-ui-components .home-rail-section code, #proa-ui-components .home-rail-section pre { font-family: var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings,normal); font-variation-settings: var(--default-mono-font-variation-settings,normal); font-size: 1em; } #proa-ui-components .home-rail-section table { text-indent: 0px; border-color: inherit; border-collapse: collapse; } #proa-ui-components .home-rail-section ol { list-style: none; } #proa-ui-components .home-rail-section svg { vertical-align: middle; display: block; } #proa-ui-components .home-rail-section button, #proa-ui-components .home-rail-section input { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; } #proa-ui-components .home-rail-section ::file-selector-button { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; } #proa-ui-components .home-rail-section ::file-selector-button { margin-inline-end: 4px; } #proa-ui-components .home-rail-section ::placeholder { opacity: 1; } @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) { #proa-ui-components .home-rail-section ::placeholder { color: currentcolor; } } @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) { @supports (color:color-mix(in lab, red, red)) { #proa-ui-components .home-rail-section ::placeholder { color: color-mix(currentcolor, transparent); } } } #proa-ui-components .home-rail-section ::-webkit-search-decoration { appearance: none; } #proa-ui-components .home-rail-section ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } #proa-ui-components .home-rail-section ::-webkit-datetime-edit { display: inline-flex; } #proa-ui-components .home-rail-section ::-webkit-datetime-edit-fields-wrapper { padding: 0px; } #proa-ui-components .home-rail-section ::-webkit-datetime-edit { padding-block: 0px; } #proa-ui-components .home-rail-section ::-webkit-datetime-edit-year-field { padding-block: 0px; } #proa-ui-components .home-rail-section ::-webkit-datetime-edit-month-field { padding-block: 0px; } #proa-ui-components .home-rail-section ::-webkit-datetime-edit-day-field { padding-block: 0px; } #proa-ui-components .home-rail-section ::-webkit-datetime-edit-hour-field { padding-block: 0px; } #proa-ui-components .home-rail-section ::-webkit-datetime-edit-minute-field { padding-block: 0px; } #proa-ui-components .home-rail-section ::-webkit-datetime-edit-second-field { padding-block: 0px; } #proa-ui-components .home-rail-section ::-webkit-datetime-edit-millisecond-field { padding-block: 0px; } #proa-ui-components .home-rail-section ::-webkit-datetime-edit-meridiem-field { padding-block: 0px; } #proa-ui-components .home-rail-section ::-webkit-calendar-picker-indicator { line-height: 1; } #proa-ui-components .home-rail-section button { appearance: button; } #proa-ui-components .home-rail-section ::file-selector-button { appearance: button; } #proa-ui-components .home-rail-section ::-webkit-inner-spin-button { height: auto; } #proa-ui-components .home-rail-section ::-webkit-outer-spin-button { height: auto; } #proa-ui-components .home-rail-section [hidden]:where(:not([hidden="until-found"])) { display: none !important; } #proa-ui-components .home-rail-section *, #proa-ui-components .home-rail-section ::after, #proa-ui-components .home-rail-section ::before, #proa-ui-components .home-rail-section ::backdrop { border-color: var(--border,#e5e7eb); } #proa-ui-components .home-rail-section ::file-selector-button { border-color: var(--border,#e5e7eb); } #proa-ui-components .home-rail-section input::placeholder { color: rgb(156, 163, 175); } #proa-ui-components .home-rail-section .bg-primary { background-color: var(--primary); } #proa-ui-components .home-rail-section .bg-secondary { background-color: var(--secondary); } #proa-ui-components .home-rail-section .bg-destructive { background-color: var(--destructive); } #proa-ui-components .home-rail-section .bg-background { background-color: var(--background); } #proa-ui-components .home-rail-section .bg-card { background-color: var(--card); } #proa-ui-components .home-rail-section .text-primary-foreground { color: var(--primary-foreground); } #proa-ui-components .home-rail-section .text-secondary-foreground { color: var(--secondary-foreground); } #proa-ui-components .home-rail-section .text-muted-foreground { color: var(--muted-foreground); } #proa-ui-components .home-rail-section .text-foreground { color: var(--foreground); } #proa-ui-components .home-rail-section .text-card-foreground { color: var(--card-foreground); } #proa-ui-components .home-rail-section .border-border { border-color: var(--border); } #proa-ui-components .home-rail-section .border-input { border-color: var(--input); } #proa-ui-components .home-rail-section .border-primary { border-color: var(--primary); } #proa-ui-components .home-rail-section .text-primary { color: var(--primary); } #proa-ui-components .home-rail-section .hover\:bg-primary\/90:hover { background-color: color-mix(in oklch, var(--primary) 90%, transparent); } #proa-ui-components .home-rail-section .hover\:bg-secondary\/80:hover { background-color: color-mix(in oklch, var(--secondary) 80%, transparent); } #proa-ui-components .home-rail-section .hover\:bg-destructive\/80:hover { background-color: color-mix(in oklch, var(--destructive) 80%, transparent); } #proa-ui-components .home-rail-section .hover\:bg-accent:hover { background-color: var(--accent); } #proa-ui-components .home-rail-section .hover\:bg-muted\/50:hover { background-color: color-mix(in oklch, var(--muted) 50%, transparent); } #proa-ui-components .home-rail-section .hover\:bg-primary\/10:hover { background-color: color-mix(in oklch, var(--primary) 10%, transparent); } #proa-ui-components .home-rail-section .hover\:text-accent-foreground:hover { color: var(--accent-foreground); } #proa-ui-components .home-rail-section .hover\:text-primary:hover { color: var(--primary); } #proa-ui-components .home-rail-section .focus-visible\:border-ring:focus-visible { border-color: var(--ring); } #proa-ui-components .home-rail-section .focus-visible\:ring-ring\/50:focus-visible { --ui-rail-tw-ring-color: color-mix(in oklch, var(--ring) 50%, transparent); } #proa-ui-components .home-rail-section .focus-visible\:ring-destructive\/20:focus-visible { --ui-rail-tw-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent); } #proa-ui-components .home-rail-section .checked\:bg-primary:checked { background-color: var(--primary); } #proa-ui-components .home-rail-section .checked\:border-primary:checked { border-color: var(--primary); } #proa-ui-components .home-rail-section :where([data-calendar], [data-slot="calendar"]) { --calendar-day-size: 2.25rem; --calendar-navigation-size: 1.75rem; } #proa-ui-components .home-rail-section :where([data-slot="calendar-day"]) { width: var(--calendar-day-size); height: var(--calendar-day-size); } #proa-ui-components .home-rail-section :where([data-slot="calendar-navigation"]) { width: var(--calendar-navigation-size); height: var(--calendar-navigation-size); } #proa-ui-components .home-rail-section [data-calendar-day][data-selected]:not([data-selected="false"]) { background-color: var(--primary); color: var(--primary-foreground); } #proa-ui-components .home-rail-section [data-calendar-day][data-today]:not([data-today="false"]):not([data-state="selected"]):not([data-state="range-start"]):not([data-state="range-end"]):not([data-state="in-range"]):not([data-selected="true"]):not([data-range-start="true"]):not([data-range-end="true"]):not([data-in-range="true"]) { background-color: var(--accent); color: var(--accent-foreground); font-weight: 600; } #proa-ui-components .home-rail-section [data-calendar-day][data-outside]:not([data-outside="false"]), #proa-ui-components .home-rail-section [data-calendar-day]:disabled { color: var(--muted-foreground); opacity: 0.5; } #proa-ui-components .home-rail-section [data-calendar-day]:disabled { cursor: not-allowed; } #proa-ui-components .home-rail-section [data-calendar-day]:disabled:hover { background-color: transparent; } #proa-ui-components .home-rail-section [data-calendar-day]:focus-visible { box-shadow: none; outline: 2px solid var(--ring); outline-offset: 2px; position: relative; z-index: 1; } #proa-ui-components .home-rail-section [data-calendar-day]:not([disabled]):hover { transition: background-color 150ms; } #proa-ui-components .home-rail-section [data-calendar-day][data-selected]:not([data-selected="false"]):hover { background-color: color-mix(in oklch, var(--primary) 90%, var(--background)); color: var(--primary-foreground); } #proa-ui-components .home-rail-section .\@container\/field-group { container: field-group / inline-size; } #proa-ui-components .home-rail-section .pointer-events-none { pointer-events: none; } #proa-ui-components .home-rail-section .sr-only { clip-path: inset(50%); white-space: nowrap; border-width: 0px; width: 1px; height: 1px; margin: -1px; padding: 0px; position: absolute; overflow: hidden; } #proa-ui-components .home-rail-section .absolute { position: absolute; } #proa-ui-components .home-rail-section .relative { position: relative; } #proa-ui-components .home-rail-section .inset-0 { inset: 0px; } #proa-ui-components .home-rail-section .-z-10 { z-index: calc(-10); } #proa-ui-components .home-rail-section .z-10 { z-index: 10; } #proa-ui-components .home-rail-section .mt-1 { margin-top: var(--spacing); } #proa-ui-components .home-rail-section .mr-auto { margin-right: auto; } #proa-ui-components .home-rail-section .mb-1 { margin-bottom: var(--spacing); } #proa-ui-components .home-rail-section .mb-2 { margin-bottom: calc(var(--spacing) * 2); } #proa-ui-components .home-rail-section .ml-auto { margin-left: auto; } #proa-ui-components .home-rail-section .block { display: block; } #proa-ui-components .home-rail-section .flex { display: flex; } #proa-ui-components .home-rail-section .grid { display: grid; } #proa-ui-components .home-rail-section .inline-flex { display: inline-flex; } #proa-ui-components .home-rail-section .size-4 { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } #proa-ui-components .home-rail-section .size-\[var\(--calendar-day-size\)\] { width: var(--calendar-day-size); height: var(--calendar-day-size); } #proa-ui-components .home-rail-section .size-\[var\(--calendar-navigation-size\)\] { width: var(--calendar-navigation-size); height: var(--calendar-navigation-size); } #proa-ui-components .home-rail-section .size-\[var\(--input-otp-slot-size\)\] { width: var(--input-otp-slot-size); height: var(--input-otp-slot-size); } #proa-ui-components .home-rail-section .size-\[var\(--switch-thumb-size\)\] { width: var(--switch-thumb-size); height: var(--switch-thumb-size); } #proa-ui-components .home-rail-section .h-5 { height: calc(var(--spacing) * 5); } #proa-ui-components .home-rail-section .h-8 { height: calc(var(--spacing) * 8); } #proa-ui-components .home-rail-section .h-9 { height: calc(var(--spacing) * 9); } #proa-ui-components .home-rail-section .h-10 { height: calc(var(--spacing) * 10); } #proa-ui-components .home-rail-section .h-auto { height: auto; } #proa-ui-components .home-rail-section .h-full { height: 100%; } #proa-ui-components .home-rail-section .w-8 { width: calc(var(--spacing) * 8); } #proa-ui-components .home-rail-section .w-9 { width: calc(var(--spacing) * 9); } #proa-ui-components .home-rail-section .w-fit { width: fit-content; } #proa-ui-components .home-rail-section .w-full { width: 100%; } #proa-ui-components .home-rail-section .max-w-\[85\%\] { max-width: 85%; } #proa-ui-components .home-rail-section .flex-1 { flex: 1 1 0%; } #proa-ui-components .home-rail-section .flex-shrink-0, #proa-ui-components .home-rail-section .shrink-0 { flex-shrink: 0; } #proa-ui-components .home-rail-section .caption-bottom { caption-side: bottom; } #proa-ui-components .home-rail-section .cursor-pointer { cursor: pointer; } #proa-ui-components .home-rail-section .cursor-text { cursor: text; } #proa-ui-components .home-rail-section .appearance-none { appearance: none; } #proa-ui-components .home-rail-section .grid-cols-7 { grid-template-columns: repeat(7, minmax(0px, 1fr)); } #proa-ui-components .home-rail-section .grid-rows-\[0fr\] { grid-template-rows: 0fr; } #proa-ui-components .home-rail-section .flex-col { flex-direction: column; } #proa-ui-components .home-rail-section .flex-row-reverse { flex-direction: row-reverse; } #proa-ui-components .home-rail-section .items-center { align-items: center; } #proa-ui-components .home-rail-section .justify-between { justify-content: space-between; } #proa-ui-components .home-rail-section .justify-center { justify-content: center; } #proa-ui-components .home-rail-section .gap-1\.5 { gap: calc(var(--spacing) * 1.5); } #proa-ui-components .home-rail-section .gap-2 { gap: calc(var(--spacing) * 2); } #proa-ui-components .home-rail-section .gap-3 { gap: calc(var(--spacing) * 3); } #proa-ui-components .home-rail-section .gap-4 { gap: calc(var(--spacing) * 4); } #proa-ui-components .home-rail-section .overflow-auto { overflow: auto; } #proa-ui-components .home-rail-section .overflow-hidden { overflow: hidden; } #proa-ui-components .home-rail-section .overflow-x-auto { overflow-x: auto; } #proa-ui-components .home-rail-section .overflow-y-auto { overflow-y: auto; } #proa-ui-components .home-rail-section .rounded-2xl { border-radius: var(--radius-2xl); } #proa-ui-components .home-rail-section .rounded-\[4px\] { border-radius: 4px; } #proa-ui-components .home-rail-section .rounded-full { border-radius: 3.40282e+38px; } #proa-ui-components .home-rail-section .rounded-lg { border-radius: var(--radius-lg); } #proa-ui-components .home-rail-section .rounded-md { border-radius: var(--radius-md); } #proa-ui-components .home-rail-section .rounded-xl { border-radius: var(--radius-xl); } #proa-ui-components .home-rail-section .border { border-style: var(--ui-rail-tw-border-style); border-width: 1px; } #proa-ui-components .home-rail-section .border-2 { border-style: var(--ui-rail-tw-border-style); border-width: 2px; } #proa-ui-components .home-rail-section .border-y { border-block-style: var(--ui-rail-tw-border-style); border-block-width: 1px; } #proa-ui-components .home-rail-section .border-r { border-right-style: var(--ui-rail-tw-border-style); border-right-width: 1px; } #proa-ui-components .home-rail-section .border-b { border-bottom-style: var(--ui-rail-tw-border-style); border-bottom-width: 1px; } #proa-ui-components .home-rail-section .border-border { border-color: var(--border); } #proa-ui-components .home-rail-section .border-input { border-color: var(--input); } #proa-ui-components .home-rail-section .border-primary { border-color: var(--primary); } #proa-ui-components .home-rail-section .border-transparent { border-color: rgba(0, 0, 0, 0); } #proa-ui-components .home-rail-section .bg-background { background-color: var(--background); } #proa-ui-components .home-rail-section .bg-card { background-color: var(--card); } #proa-ui-components .home-rail-section .bg-destructive { background-color: var(--destructive); } #proa-ui-components .home-rail-section .bg-primary { background-color: var(--primary); } #proa-ui-components .home-rail-section .bg-secondary { background-color: var(--secondary); } #proa-ui-components .home-rail-section .bg-transparent { background-color: rgba(0, 0, 0, 0); } #proa-ui-components .home-rail-section .bg-\[length\:100\%_100\%\] { background-size: 100% 100%; } #proa-ui-components .home-rail-section .bg-center { background-position: 50% center; } #proa-ui-components .home-rail-section .bg-no-repeat { background-repeat: no-repeat; } #proa-ui-components .home-rail-section .p-2 { padding: calc(var(--spacing) * 2); } #proa-ui-components .home-rail-section .p-3 { padding: calc(var(--spacing) * 3); } #proa-ui-components .home-rail-section .p-4 { padding: calc(var(--spacing) * 4); } #proa-ui-components .home-rail-section .p-6 { padding: calc(var(--spacing) * 6); } #proa-ui-components .home-rail-section .px-1 { padding-inline: var(--spacing); } #proa-ui-components .home-rail-section .px-2 { padding-inline: calc(var(--spacing) * 2); } #proa-ui-components .home-rail-section .px-3 { padding-inline: calc(var(--spacing) * 3); } #proa-ui-components .home-rail-section .px-4 { padding-inline: calc(var(--spacing) * 4); } #proa-ui-components .home-rail-section .py-1 { padding-block: var(--spacing); } #proa-ui-components .home-rail-section .py-2 { padding-block: calc(var(--spacing) * 2); } #proa-ui-components .home-rail-section .py-2\.5 { padding-block: calc(var(--spacing) * 2.5); } #proa-ui-components .home-rail-section .py-4 { padding-block: calc(var(--spacing) * 4); } #proa-ui-components .home-rail-section .pt-0 { padding-top: 0px; } #proa-ui-components .home-rail-section .pb-4 { padding-bottom: calc(var(--spacing) * 4); } #proa-ui-components .home-rail-section .text-center { text-align: center; } #proa-ui-components .home-rail-section .text-left { text-align: left; } #proa-ui-components .home-rail-section .text-right { text-align: right; } #proa-ui-components .home-rail-section .align-middle { vertical-align: middle; } #proa-ui-components .home-rail-section .font-mono { font-family: var(--font-mono); } #proa-ui-components .home-rail-section .text-base { font-size: var(--text-base); line-height: var(--ui-rail-tw-leading,var(--text-base--line-height)); } #proa-ui-components .home-rail-section .text-sm { font-size: var(--text-sm); line-height: var(--ui-rail-tw-leading,var(--text-sm--line-height)); } #proa-ui-components .home-rail-section .text-xs { font-size: var(--text-xs); line-height: var(--ui-rail-tw-leading,var(--text-xs--line-height)); } #proa-ui-components .home-rail-section .text-\[10px\] { font-size: 10px; } #proa-ui-components .home-rail-section .text-\[length\:var\(--input-otp-slot-font-size\)\] { font-size: var(--input-otp-slot-font-size); } #proa-ui-components .home-rail-section .leading-none { --ui-rail-tw-leading: 1; line-height: 1; } #proa-ui-components .home-rail-section .leading-relaxed { --ui-rail-tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } #proa-ui-components .home-rail-section .font-medium { --ui-rail-tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } #proa-ui-components .home-rail-section .font-semibold { --ui-rail-tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } #proa-ui-components .home-rail-section .tracking-tight { --ui-rail-tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } #proa-ui-components .home-rail-section .whitespace-nowrap { white-space: nowrap; } #proa-ui-components .home-rail-section .text-card-foreground { color: var(--card-foreground); } #proa-ui-components .home-rail-section .text-foreground { color: var(--foreground); } #proa-ui-components .home-rail-section .text-muted-foreground { color: var(--muted-foreground); } #proa-ui-components .home-rail-section .text-primary { color: var(--primary); } #proa-ui-components .home-rail-section .text-primary-foreground { color: var(--primary-foreground); } #proa-ui-components .home-rail-section .text-secondary-foreground { color: var(--secondary-foreground); } #proa-ui-components .home-rail-section .text-white { color: var(--color-white); } #proa-ui-components .home-rail-section .tabular-nums { --ui-rail-tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--ui-rail-tw-ordinal,) var(--ui-rail-tw-slashed-zero,) var(--ui-rail-tw-numeric-figure,) var(--ui-rail-tw-numeric-spacing,) var(--ui-rail-tw-numeric-fraction,); } #proa-ui-components .home-rail-section .underline-offset-4 { text-underline-offset: 4px; } #proa-ui-components .home-rail-section .opacity-0 { opacity: 0; } #proa-ui-components .home-rail-section .shadow-lg { --ui-rail-tw-shadow: 0 10px 15px -3px var(--ui-rail-tw-shadow-color,#0000001a), 0 4px 6px -4px var(--ui-rail-tw-shadow-color,#0000001a); box-shadow: var(--ui-rail-tw-inset-shadow), var(--ui-rail-tw-inset-ring-shadow), var(--ui-rail-tw-ring-offset-shadow), var(--ui-rail-tw-ring-shadow), var(--ui-rail-tw-shadow); } #proa-ui-components .home-rail-section .shadow-sm { --ui-rail-tw-shadow: 0 1px 3px 0 var(--ui-rail-tw-shadow-color,#0000001a), 0 1px 2px -1px var(--ui-rail-tw-shadow-color,#0000001a); box-shadow: var(--ui-rail-tw-inset-shadow), var(--ui-rail-tw-inset-ring-shadow), var(--ui-rail-tw-ring-offset-shadow), var(--ui-rail-tw-ring-shadow), var(--ui-rail-tw-shadow); } #proa-ui-components .home-rail-section .shadow-xs { --ui-rail-tw-shadow: 0 1px 2px 0 var(--ui-rail-tw-shadow-color,#0000000d); box-shadow: var(--ui-rail-tw-inset-shadow), var(--ui-rail-tw-inset-ring-shadow), var(--ui-rail-tw-ring-offset-shadow), var(--ui-rail-tw-ring-shadow), var(--ui-rail-tw-shadow); } #proa-ui-components .home-rail-section .ring-0 { --ui-rail-tw-ring-shadow: var(--ui-rail-tw-ring-inset,) 0 0 0 calc(0px + var(--ui-rail-tw-ring-offset-width)) var(--ui-rail-tw-ring-color,currentcolor); box-shadow: var(--ui-rail-tw-inset-shadow), var(--ui-rail-tw-inset-ring-shadow), var(--ui-rail-tw-ring-offset-shadow), var(--ui-rail-tw-ring-shadow), var(--ui-rail-tw-shadow); } #proa-ui-components .home-rail-section .outline-hidden { --ui-rail-tw-outline-style: none; outline-style: none; } @media (forced-colors: active) { #proa-ui-components .home-rail-section .outline-hidden { outline-offset: 2px; outline: rgba(0, 0, 0, 0) solid 2px; } } #proa-ui-components .home-rail-section .transition-all { transition-property: all; transition-timing-function: var(--ui-rail-tw-ease,var(--default-transition-timing-function)); transition-duration: var(--ui-rail-tw-duration,var(--default-transition-duration)); } #proa-ui-components .home-rail-section .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --ui-rail-tw-gradient-from, --ui-rail-tw-gradient-via, --ui-rail-tw-gradient-to; transition-timing-function: var(--ui-rail-tw-ease,var(--default-transition-timing-function)); transition-duration: var(--ui-rail-tw-duration,var(--default-transition-duration)); } #proa-ui-components .home-rail-section .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--ui-rail-tw-ease,var(--default-transition-timing-function)); transition-duration: var(--ui-rail-tw-duration,var(--default-transition-duration)); } #proa-ui-components .home-rail-section .duration-200 { --ui-rail-tw-duration: .2s; transition-duration: 0.2s; } #proa-ui-components .home-rail-section .duration-300 { --ui-rail-tw-duration: .3s; transition-duration: 0.3s; } #proa-ui-components .home-rail-section .select-none { user-select: none; } #proa-ui-components .home-rail-section .\[--calendar-day-size\:2\.25rem\] { --calendar-day-size: 2.25rem; } #proa-ui-components .home-rail-section .\[--calendar-navigation-size\:1\.75rem\] { --calendar-navigation-size: 1.75rem; } #proa-ui-components .home-rail-section .\[--input-otp-slot-font-size\:1rem\] { --input-otp-slot-font-size: 1rem; } #proa-ui-components .home-rail-section .\[--input-otp-slot-size\:2\.5rem\] { --input-otp-slot-size: 2.5rem; } #proa-ui-components .home-rail-section .\[--switch-thumb-size\:1rem\] { --switch-thumb-size: 1rem; } #proa-ui-components .home-rail-section .\[--switch-thumb-translate\:1rem\] { --switch-thumb-translate: 1rem; } #proa-ui-components .home-rail-section .group-data-\[role\=assistant\]\/chat-bubble\:bg-muted:is(:where(.group\/chat-bubble)[data-role="assistant"] *) { background-color: var(--muted); } #proa-ui-components .home-rail-section .group-data-\[role\=assistant\]\/chat-bubble\:text-left:is(:where(.group\/chat-bubble)[data-role="assistant"] *) { text-align: left; } #proa-ui-components .home-rail-section .group-data-\[role\=assistant\]\/chat-bubble\:text-foreground:is(:where(.group\/chat-bubble)[data-role="assistant"] *) { color: var(--foreground); } #proa-ui-components .home-rail-section .group-data-\[role\=assistant\]\/chat-bubble\:text-muted-foreground:is(:where(.group\/chat-bubble)[data-role="assistant"] *) { color: var(--muted-foreground); } #proa-ui-components .home-rail-section .group-data-\[role\=user\]\/chat-bubble\:bg-primary:is(:where(.group\/chat-bubble)[data-role="user"] *), #proa-ui-components .home-rail-section .group-data-\[role\=user\]\/chat-bubble\:bg-primary\/10:is(:where(.group\/chat-bubble)[data-role="user"] *) { background-color: var(--primary); } @supports (color:color-mix(in lab, red, red)) { #proa-ui-components .home-rail-section .group-data-\[role\=user\]\/chat-bubble\:bg-primary\/10:is(:where(.group\/chat-bubble)[data-role="user"] *) { background-color: color-mix(in oklab, var(--primary) 10%, transparent); } } #proa-ui-components .home-rail-section .group-data-\[role\=user\]\/chat-bubble\:text-right:is(:where(.group\/chat-bubble)[data-role="user"] *) { text-align: right; } #proa-ui-components .home-rail-section .group-data-\[role\=user\]\/chat-bubble\:text-primary:is(:where(.group\/chat-bubble)[data-role="user"] *) { color: var(--primary); } #proa-ui-components .home-rail-section .group-data-\[role\=user\]\/chat-bubble\:text-primary-foreground:is(:where(.group\/chat-bubble)[data-role="user"] *) { color: var(--primary-foreground); } #proa-ui-components .home-rail-section .peer-checked\:grid-rows-\[1fr\]:is(:where(.peer):checked ~ *) { grid-template-rows: 1fr; } #proa-ui-components .home-rail-section .selection\:bg-primary ::selection { background-color: var(--primary); } #proa-ui-components .home-rail-section .selection\:bg-primary::selection { background-color: var(--primary); } #proa-ui-components .home-rail-section .selection\:text-primary-foreground ::selection { color: var(--primary-foreground); } #proa-ui-components .home-rail-section .selection\:text-primary-foreground::selection { color: var(--primary-foreground); } #proa-ui-components .home-rail-section .file\:border-0::file-selector-button { border-style: var(--ui-rail-tw-border-style); border-width: 0px; } #proa-ui-components .home-rail-section .file\:bg-transparent::file-selector-button { background-color: rgba(0, 0, 0, 0); } #proa-ui-components .home-rail-section .file\:text-sm::file-selector-button { font-size: var(--text-sm); line-height: var(--ui-rail-tw-leading,var(--text-sm--line-height)); } #proa-ui-components .home-rail-section .file\:font-medium::file-selector-button { --ui-rail-tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } #proa-ui-components .home-rail-section .file\:text-foreground::file-selector-button { color: var(--foreground); } #proa-ui-components .home-rail-section .placeholder\:text-muted-foreground::placeholder { color: var(--muted-foreground); } #proa-ui-components .home-rail-section .first\:rounded-l-md:first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } #proa-ui-components .home-rail-section .first\:border-l:first-child { border-left-style: var(--ui-rail-tw-border-style); border-left-width: 1px; } #proa-ui-components .home-rail-section .last\:rounded-r-md:last-child { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } #proa-ui-components .home-rail-section .checked\:border-primary:checked { border-color: var(--primary); } #proa-ui-components .home-rail-section .checked\:bg-primary:checked { background-color: var(--primary); } @media (hover: hover) { #proa-ui-components .home-rail-section .hover\:bg-accent:hover { background-color: var(--accent); } } @media (hover: hover) { #proa-ui-components .home-rail-section .hover\:bg-destructive\/80:hover { background-color: var(--destructive); } } @media (hover: hover) { @supports (color:color-mix(in lab, red, red)) { #proa-ui-components .home-rail-section .hover\:bg-destructive\/80:hover { background-color: color-mix(in oklab, var(--destructive) 80%, transparent); } } } @media (hover: hover) { #proa-ui-components .home-rail-section .hover\:bg-muted\/50:hover { background-color: var(--muted); } } @media (hover: hover) { @supports (color:color-mix(in lab, red, red)) { #proa-ui-components .home-rail-section .hover\:bg-muted\/50:hover { background-color: color-mix(in oklab, var(--muted) 50%, transparent); } } } @media (hover: hover) { #proa-ui-components .home-rail-section .hover\:bg-primary\/10:hover { background-color: var(--primary); } } @media (hover: hover) { @supports (color:color-mix(in lab, red, red)) { #proa-ui-components .home-rail-section .hover\:bg-primary\/10:hover { background-color: color-mix(in oklab, var(--primary) 10%, transparent); } } } @media (hover: hover) { #proa-ui-components .home-rail-section .hover\:bg-primary\/90:hover { background-color: var(--primary); } } @media (hover: hover) { @supports (color:color-mix(in lab, red, red)) { #proa-ui-components .home-rail-section .hover\:bg-primary\/90:hover { background-color: color-mix(in oklab, var(--primary) 90%, transparent); } } } @media (hover: hover) { #proa-ui-components .home-rail-section .hover\:bg-secondary\/80:hover { background-color: var(--secondary); } } @media (hover: hover) { @supports (color:color-mix(in lab, red, red)) { #proa-ui-components .home-rail-section .hover\:bg-secondary\/80:hover { background-color: color-mix(in oklab, var(--secondary) 80%, transparent); } } } @media (hover: hover) { #proa-ui-components .home-rail-section .hover\:text-accent-foreground:hover { color: var(--accent-foreground); } } @media (hover: hover) { #proa-ui-components .home-rail-section .hover\:text-primary:hover { color: var(--primary); } } @media (hover: hover) { #proa-ui-components .home-rail-section .hover\:underline:hover { text-decoration-line: underline; } } #proa-ui-components .home-rail-section .focus-visible\:border-ring:focus-visible { border-color: var(--ring); } #proa-ui-components .home-rail-section .focus-visible\:ring-2:focus-visible { --ui-rail-tw-ring-shadow: var(--ui-rail-tw-ring-inset,) 0 0 0 calc(2px + var(--ui-rail-tw-ring-offset-width)) var(--ui-rail-tw-ring-color,currentcolor); box-shadow: var(--ui-rail-tw-inset-shadow), var(--ui-rail-tw-inset-ring-shadow), var(--ui-rail-tw-ring-offset-shadow), var(--ui-rail-tw-ring-shadow), var(--ui-rail-tw-shadow); } #proa-ui-components .home-rail-section .focus-visible\:ring-\[3px\]:focus-visible { --ui-rail-tw-ring-shadow: var(--ui-rail-tw-ring-inset,) 0 0 0 calc(3px + var(--ui-rail-tw-ring-offset-width)) var(--ui-rail-tw-ring-color,currentcolor); box-shadow: var(--ui-rail-tw-inset-shadow), var(--ui-rail-tw-inset-ring-shadow), var(--ui-rail-tw-ring-offset-shadow), var(--ui-rail-tw-ring-shadow), var(--ui-rail-tw-shadow); } #proa-ui-components .home-rail-section .focus-visible\:ring-destructive\/20:focus-visible { --ui-rail-tw-ring-color: var(--destructive); } @supports (color:color-mix(in lab, red, red)) { #proa-ui-components .home-rail-section .focus-visible\:ring-destructive\/20:focus-visible { --ui-rail-tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); } } #proa-ui-components .home-rail-section .focus-visible\:ring-ring:focus-visible, #proa-ui-components .home-rail-section .focus-visible\:ring-ring\/50:focus-visible { --ui-rail-tw-ring-color: var(--ring); } @supports (color:color-mix(in lab, red, red)) { #proa-ui-components .home-rail-section .focus-visible\:ring-ring\/50:focus-visible { --ui-rail-tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); } } #proa-ui-components .home-rail-section .focus-visible\:ring-offset-2:focus-visible { --ui-rail-tw-ring-offset-width: 2px; --ui-rail-tw-ring-offset-shadow: var(--ui-rail-tw-ring-inset,) 0 0 0 var(--ui-rail-tw-ring-offset-width) var(--ui-rail-tw-ring-offset-color); } #proa-ui-components .home-rail-section .focus-visible\:ring-offset-background:focus-visible { --ui-rail-tw-ring-offset-color: var(--background); } #proa-ui-components .home-rail-section .focus-visible\:outline-hidden:focus-visible { --ui-rail-tw-outline-style: none; outline-style: none; } @media (forced-colors: active) { #proa-ui-components .home-rail-section .focus-visible\:outline-hidden:focus-visible { outline-offset: 2px; outline: rgba(0, 0, 0, 0) solid 2px; } } #proa-ui-components .home-rail-section .disabled\:pointer-events-none:disabled { pointer-events: none; } #proa-ui-components .home-rail-section .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } #proa-ui-components .home-rail-section .disabled\:opacity-50:disabled { opacity: 0.5; } #proa-ui-components .home-rail-section .has-\[\[data-slot\=checkbox\]\]\:gap-3:has([data-slot="checkbox"]) { gap: calc(var(--spacing) * 3); } #proa-ui-components .home-rail-section .data-\[state\=checked\]\:translate-x-\[var\(--switch-thumb-translate\)\][data-state="checked"] { --ui-rail-tw-translate-x: var(--switch-thumb-translate); translate: var(--ui-rail-tw-translate-x) var(--ui-rail-tw-translate-y); } #proa-ui-components .home-rail-section .data-\[state\=checked\]\:bg-primary[data-state="checked"] { background-color: var(--primary); } @media (min-width: 48rem) { #proa-ui-components .home-rail-section .md\:text-sm { font-size: var(--text-sm); line-height: var(--ui-rail-tw-leading,var(--text-sm--line-height)); } } @container field-group (min-width: 28rem) { #proa-ui-components .home-rail-section .\@md\/field-group\:text-balance { text-wrap: balance; } } #proa-ui-components .home-rail-section .\[\&_\:where\(\[data-slot\=calendar-day\]\[data-outside\=true\]\)\]\:text-muted-foreground :where([data-slot="calendar-day"][data-outside="true"]) { color: var(--muted-foreground); } #proa-ui-components .home-rail-section .\[\&_\:where\(\[data-slot\=calendar-day\]\[data-outside\=true\]\)\]\:opacity-50 :where([data-slot="calendar-day"][data-outside="true"]) { opacity: 0.5; } #proa-ui-components .home-rail-section .\[\&_\:where\(\[data-slot\=calendar-day\]\[data-selected\=true\]\)\]\:bg-primary :where([data-slot="calendar-day"][data-selected="true"]) { background-color: var(--primary); } #proa-ui-components .home-rail-section .\[\&_\:where\(\[data-slot\=calendar-day\]\[data-selected\=true\]\)\]\:text-primary-foreground :where([data-slot="calendar-day"][data-selected="true"]) { color: var(--primary-foreground); } #proa-ui-components .home-rail-section .\[\&_\:where\(\[data-slot\=calendar-day\]\[data-today\=true\]\:not\(\[data-state\=selected\]\)\:not\(\[data-state\=range-start\]\)\:not\(\[data-state\=range-end\]\)\:not\(\[data-state\=in-range\]\)\:not\(\[data-selected\=true\]\)\:not\(\[data-range-start\=true\]\)\:not\(\[data-range-end\=true\]\)\:not\(\[data-in-range\=true\]\)\)\]\:bg-accent :where([data-slot="calendar-day"][data-today="true"]:not([data-state="selected"]):not([data-state="range-start"]):not([data-state="range-end"]):not([data-state="in-range"]):not([data-selected="true"]):not([data-range-start="true"]):not([data-range-end="true"]):not([data-in-range="true"])) { background-color: var(--accent); } #proa-ui-components .home-rail-section .\[\&_\:where\(\[data-slot\=calendar-day\]\[data-today\=true\]\:not\(\[data-state\=selected\]\)\:not\(\[data-state\=range-start\]\)\:not\(\[data-state\=range-end\]\)\:not\(\[data-state\=in-range\]\)\:not\(\[data-selected\=true\]\)\:not\(\[data-range-start\=true\]\)\:not\(\[data-range-end\=true\]\)\:not\(\[data-in-range\=true\]\)\)\]\:font-semibold :where([data-slot="calendar-day"][data-today="true"]:not([data-state="selected"]):not([data-state="range-start"]):not([data-state="range-end"]):not([data-state="in-range"]):not([data-selected="true"]):not([data-range-start="true"]):not([data-range-end="true"]):not([data-in-range="true"])) { --ui-rail-tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } #proa-ui-components .home-rail-section .\[\&_\:where\(\[data-slot\=calendar-day\]\[data-today\=true\]\:not\(\[data-state\=selected\]\)\:not\(\[data-state\=range-start\]\)\:not\(\[data-state\=range-end\]\)\:not\(\[data-state\=in-range\]\)\:not\(\[data-selected\=true\]\)\:not\(\[data-range-start\=true\]\)\:not\(\[data-range-end\=true\]\)\:not\(\[data-in-range\=true\]\)\)\]\:text-accent-foreground :where([data-slot="calendar-day"][data-today="true"]:not([data-state="selected"]):not([data-state="range-start"]):not([data-state="range-end"]):not([data-state="in-range"]):not([data-selected="true"]):not([data-range-start="true"]):not([data-range-end="true"]):not([data-in-range="true"])) { color: var(--accent-foreground); } #proa-ui-components .home-rail-section .\[\&_tr\]\:border-b tr { border-bottom-style: var(--ui-rail-tw-border-style); border-bottom-width: 1px; } #proa-ui-components .home-rail-section .\[\&_tr\:last-child\]\:border-0 tr:last-child { border-style: var(--ui-rail-tw-border-style); border-width: 0px; } #proa-ui-components .home-rail-section .\[\&\>\[data-otp-caret\]\]\:pointer-events-none > [data-otp-caret] { pointer-events: none; } #proa-ui-components .home-rail-section .\[\&\>\[data-otp-caret\]\]\:absolute > [data-otp-caret] { position: absolute; } #proa-ui-components .home-rail-section .\[\&\>\[data-otp-caret\]\]\:inset-0 > [data-otp-caret] { inset: 0px; } #proa-ui-components .home-rail-section .\[\&\>\[data-otp-caret\]\]\:flex > [data-otp-caret] { display: flex; } #proa-ui-components .home-rail-section .\[\&\>\[data-otp-caret\]\]\:items-center > [data-otp-caret] { align-items: center; } #proa-ui-components .home-rail-section .\[\&\>\[data-otp-caret\]\]\:justify-center > [data-otp-caret] { justify-content: center; } #proa-ui-components .home-rail-section .\[\&\>\[data-otp-caret\]\:\:after\]\:h-4 > [data-otp-caret]::after { height: calc(var(--spacing) * 4); } #proa-ui-components .home-rail-section .\[\&\>\[data-otp-caret\]\:\:after\]\:w-px > [data-otp-caret]::after { width: 1px; } #proa-ui-components .home-rail-section .\[\&\>\[data-otp-caret\]\:\:after\]\:animate-\[proa-caret-blink_1s_step-end_infinite\] > [data-otp-caret]::after { animation: 1s step-end 0s infinite normal none running ui-rail-proa-caret-blink; } #proa-ui-components .home-rail-section .\[\&\>\[data-otp-caret\]\:\:after\]\:bg-foreground > [data-otp-caret]::after { background-color: var(--foreground); } #proa-ui-components .home-rail-section .\[\&\>\[data-otp-caret\]\:\:after\]\:duration-1000 > [data-otp-caret]::after { --ui-rail-tw-duration: 1s; transition-duration: 1s; } #proa-ui-components .home-rail-section .\[\&\>\[data-otp-caret\]\:\:after\]\:content-\[\'\'\] > [data-otp-caret]::after { --ui-rail-tw-content: ""; content: var(--ui-rail-tw-content); } #proa-ui-components .home-rail-section .dark\:bg-transparent:is(.dark *) { background-color: rgba(0, 0, 0, 0); } #proa-ui-components .home-rail-section { --color-brand: #ff6a13; --site-bg: #fbfbfa; --site-bg-2: #f4f4f5; --site-bg-3: #e4e4e7; --font-sans: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif; --font-display: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", "IBM Plex Mono", ui-monospace, monospace; --search-bg: #fdfcfc; --search-bg-2: #f7f4ee; --search-surface: #fff; --search-surface-faint: #ffffffad; --search-surface-hover: #f4f4f5; --search-line-soft: #18181b1f; --search-line-strong: #18181b33; --search-modal-border: #18181b24; --search-fg: #18181b; --search-fg-dim: #71717a; --search-accent: #dd7627; --search-accent-ink: #1a0f0659; --search-fg-on-accent: #1a0f06; } .dark #proa-ui-components .home-rail-section { --site-bg: #0b0b0d; --site-bg-2: #111113; --site-bg-3: #18181b; --search-bg: #0b0b0d; --search-bg-2: #111113; --search-surface: #ffffff0f; --search-surface-faint: #ffffff09; --search-surface-hover: #ffffff0f; --search-line-soft: #ffffff1a; --search-line-strong: #ffffff29; --search-modal-border: #ffffff1f; --search-fg: #f4f4f5; --search-fg-dim: #a1a1aa; --search-accent: #dd7627; --search-accent-ink: #dd762799; --search-fg-on-accent: #1a0f06; } #proa-ui-components .home-rail-section { scrollbar-gutter: stable; font-family: var(--font-sans); text-rendering: optimizelegibility; } #proa-ui-components .home-rail-section { margin: 0px; } #proa-ui-components .home-rail-section { --home-theme-accent: #dd7627; --home-theme-accent-ink: #fff; --home-theme-surface: #fff; --home-theme-surface-soft: #f7f4ee; --home-theme-line: #18181b1f; --home-theme-text: #18181b; --home-theme-muted: #71717a; --home-theme-radius: 8px; } #proa-ui-components .home-rail-section { --home-page-bg: #fbfbfa; background: var(--home-page-bg); color: rgb(24, 24, 27); } .dark #proa-ui-components .home-rail-section { --home-theme-surface: #ffffff0f; --home-theme-surface-soft: #ffffff0a; --home-theme-line: #ffffff1a; --home-theme-text: #f4f4f5; --home-theme-muted: #a1a1aa; } .dark #proa-ui-components .home-rail-section { --home-page-bg: #0b0b0d; background: var(--home-page-bg); color: rgb(244, 244, 245); } #proa-ui-components .home-rail-section { --rail-gutter: 1rem; --rail-inset: max(var(--rail-gutter), calc((100% - 1400px) / 2 + var(--rail-gutter))); --rail-tile: min(19rem, 78vw); --rail-stage: 17rem; padding: 1.5rem 0px 2.5rem; } #proa-ui-components .home-rail-section .home-rail-frame { position: relative; } #proa-ui-components .home-rail-section .home-rail-frame::after { background: linear-gradient(to right, transparent, var(--home-page-bg)); content: ""; pointer-events: none; width: 3.5rem; position: absolute; top: 0px; bottom: 0px; right: 0px; } #proa-ui-components .home-rail-section .home-rail { scroll-behavior: smooth; scroll-snap-type: x; scrollbar-width: none; scroll-padding-inline-start: var(--rail-inset); overflow: auto hidden; } #proa-ui-components .home-rail-section .home-rail::-webkit-scrollbar { display: none; } #proa-ui-components .home-rail-section .home-rail:focus-visible { outline: 2px solid var(--home-theme-accent); outline-offset: -3px; } #proa-ui-components .home-rail-section .home-rail-track { padding: .25rem calc(var(--rail-gutter) + 4rem) 1.5rem var(--rail-inset); align-items: stretch; gap: 1rem; margin: 0px; list-style: none; display: flex; } #proa-ui-components .home-rail-section .home-rail-item { width: var(--rail-tile); scroll-snap-align: start; flex-direction: column; flex: 0 0 auto; display: flex; position: relative; } #proa-ui-components .home-rail-section .home-rail-stage { box-sizing: border-box; height: var(--rail-stage); border: 1px solid var(--home-theme-line); border-radius: var(--home-theme-radius); background-color: var(--home-theme-surface); background-image: radial-gradient(rgba(24, 24, 27, 0.06) 0.75px, rgba(0, 0, 0, 0) 0.75px); background-size: 14px 14px; justify-content: center; align-items: center; padding: 1.1rem; transition: border-color 0.14s, box-shadow 0.14s, transform 0.14s; display: flex; position: relative; overflow: hidden; } #proa-ui-components .home-rail-section .home-rail-stage-fill { align-items: stretch; padding: 0px; } #proa-ui-components .home-rail-section .home-rail-demo { width: 100%; min-width: 0px; } #proa-ui-components .home-rail-section .home-rail-demo [data-code-copy] { display: none; } #proa-ui-components .home-rail-section .home-rail-demo [data-code-block] pre { padding: 0.85rem; font-size: 0.78rem; line-height: 1.55; } #proa-ui-components .home-rail-section .home-rail-stage-fill .home-rail-demo { flex-direction: column; height: 100%; display: flex; } #proa-ui-components .home-rail-section .home-rail-item:hover .home-rail-stage, #proa-ui-components .home-rail-section .home-rail-item:focus-within .home-rail-stage { border-color: var(--home-theme-accent); } @supports (color:color-mix(in lab, red, red)) { #proa-ui-components .home-rail-section .home-rail-item:hover .home-rail-stage, #proa-ui-components .home-rail-section .home-rail-item:focus-within .home-rail-stage { border-color: color-mix(in srgb, var(--home-theme-accent) 45%, transparent); } } #proa-ui-components .home-rail-section .home-rail-item:hover .home-rail-stage, #proa-ui-components .home-rail-section .home-rail-item:focus-within .home-rail-stage { transform: translateY(-2px); box-shadow: rgba(24, 24, 27, 0.75) 0px 24px 60px -44px; } #proa-ui-components .home-rail-section .home-rail-caption { padding: 0.95rem 0.15rem 0px; } #proa-ui-components .home-rail-section .home-rail-caption-row { align-items: baseline; gap: 0.6rem; display: flex; } #proa-ui-components .home-rail-section .home-rail-caption-row .component-tier-badge { flex: 0 0 auto; margin-left: auto; } #proa-ui-components .home-rail-section .home-rail-name { min-width: 0px; font-family: var(--font-display); letter-spacing: -0.005em; font-size: 1.02rem; font-weight: 650; line-height: 1.25; } #proa-ui-components .home-rail-section .home-rail-name a { color: var(--home-theme-text); border-radius: 4px; align-items: center; gap: 0.35rem; text-decoration: none; display: inline-flex; } #proa-ui-components .home-rail-section .home-rail-name a::after { content: ""; position: absolute; inset: 0px; } #proa-ui-components .home-rail-section .home-rail-name a:focus-visible { outline: 2px solid var(--home-theme-accent); outline-offset: 3px; } #proa-ui-components .home-rail-section .home-rail-item:hover .home-rail-name a { color: var(--home-theme-accent); } #proa-ui-components .home-rail-section .home-rail-name svg { width: 0.85rem; height: 0.85rem; transition: transform 0.14s; } #proa-ui-components .home-rail-section .home-rail-item:hover .home-rail-name svg { transform: translate(2px); } #proa-ui-components .home-rail-section .home-rail-summary { color: var(--home-theme-muted); margin-top: 0.4rem; font-size: 0.82rem; line-height: 1.55; } #proa-ui-components .home-rail-section .home-rail-chart { gap: 0.1rem; width: 100%; display: grid; } #proa-ui-components .home-rail-section .home-rail-chart span { color: var(--home-theme-muted); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; font-weight: 650; } #proa-ui-components .home-rail-section .home-rail-chart strong { color: var(--home-theme-text); font-family: var(--font-display); margin-bottom: 0.5rem; font-size: 1.9rem; font-weight: 700; line-height: 1.1; } #proa-ui-components .home-rail-section .home-rail-otp { justify-items: center; gap: 1rem; display: grid; } #proa-ui-components .home-rail-section .home-rail-otp-lead { max-width: 15rem; color: var(--home-theme-text); text-align: center; font-size: 0.86rem; line-height: 1.5; } #proa-ui-components .home-rail-section .home-rail-otp-note { color: var(--home-theme-muted); text-align: center; font-size: 0.76rem; } #proa-ui-components .home-rail-section .home-rail-buttons { justify-items: center; gap: 0.75rem; width: 100%; display: grid; } #proa-ui-components .home-rail-section .home-rail-buttons > div { flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; display: flex; } #proa-ui-components .home-rail-section .home-rail-table { width: 100%; padding: 0.35rem 0.35rem 0px; font-size: 0.82rem; } #proa-ui-components .home-rail-section .home-rail-field-row { align-items: center; gap: 0.6rem; display: flex; } #proa-ui-components .home-rail-section .home-rail-field-row span { color: var(--home-theme-text); font-size: 0.82rem; } #proa-ui-components .home-rail-section .home-rail-card-stats { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0.75rem; margin: 0px; display: grid; } #proa-ui-components .home-rail-section .home-rail-card-stats dt { color: var(--home-theme-muted); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; font-weight: 650; } #proa-ui-components .home-rail-section .home-rail-card-stats dd { color: var(--home-theme-text); font-family: var(--font-display); margin: 0.2rem 0px 0px; font-size: 1.5rem; font-weight: 700; line-height: 1.1; } #proa-ui-components .home-rail-section .home-rail-card-stats dd em { color: var(--home-theme-muted); font-size: 0.8rem; font-style: normal; font-weight: 600; } #proa-ui-components .home-rail-section .home-rail-card-foot { color: var(--home-theme-muted); font-size: 0.76rem; } #proa-ui-components .home-rail-section .home-rail-stage-cta { border-style: dashed; border-color: var(--home-theme-accent); } @supports (color:color-mix(in lab, red, red)) { #proa-ui-components .home-rail-section .home-rail-stage-cta { border-color: color-mix(in srgb, var(--home-theme-accent) 38%, transparent); } } #proa-ui-components .home-rail-section .home-rail-stage-cta { background-color: var(--home-theme-accent); } @supports (color:color-mix(in lab, red, red)) { #proa-ui-components .home-rail-section .home-rail-stage-cta { background-color: color-mix(in srgb, var(--home-theme-accent) 7%, var(--home-theme-surface)); } } #proa-ui-components .home-rail-section .home-rail-stage-cta { background-image: none; } #proa-ui-components .home-rail-section .home-rail-cta { text-align: center; justify-items: center; gap: 0.6rem; display: grid; } #proa-ui-components .home-rail-section .home-rail-cta-count { color: var(--home-theme-accent); font-family: var(--font-display); font-size: 3.4rem; font-weight: 760; line-height: 1; } #proa-ui-components .home-rail-section .home-rail-cta-label { max-width: 15rem; color: var(--home-theme-muted); font-size: 0.84rem; line-height: 1.55; } @media (prefers-reduced-motion: reduce) { #proa-ui-components .home-rail-section .home-rail { scroll-behavior: auto; } } @media (prefers-reduced-motion: reduce) { #proa-ui-components .home-rail-section .home-rail-item:hover .home-rail-stage, #proa-ui-components .home-rail-section .home-rail-item:focus-within .home-rail-stage, #proa-ui-components .home-rail-section .home-rail-item:hover .home-rail-name svg { transform: none; } } @media (min-width: 640px) { #proa-ui-components .home-rail-section { --rail-gutter: 1.5rem; --rail-tile: 20rem; --rail-stage: 18rem; } } @media (min-width: 1024px) { #proa-ui-components .home-rail-section { --rail-gutter: 2rem; --rail-tile: 21rem; --rail-stage: 19rem; padding: 1.75rem 0px 3rem; } } @media (min-width: 1024px) { #proa-ui-components .home-rail-section .home-rail-frame::after { width: 5rem; } } #proa-ui-components .home-rail-section .component-tier-badge { min-height: 1.45rem; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; border: 1px solid rgba(0, 0, 0, 0); border-radius: 999px; justify-content: center; align-items: center; padding: 0.28rem 0.5rem; font-size: 0.68rem; font-weight: 700; line-height: 1; display: inline-flex; } #proa-ui-components .home-rail-section .component-tier-badge-compact { min-height: 1.15rem; padding: 0.2rem 0.34rem; font-size: 0.58rem; } #proa-ui-components .home-rail-section .component-tier-badge[data-tier="free"] { color: rgb(15, 118, 110); background: rgba(20, 184, 166, 0.12); border-color: rgba(20, 121, 94, 0.2); } #proa-ui-components .home-rail-section .component-tier-badge[data-tier="pro"] { color: rgb(155, 79, 20); background: rgba(221, 118, 39, 0.13); border-color: rgba(221, 118, 39, 0.24); } @keyframes ui-rail-nav-sheet-in { 0% { transform: translate(-100%); } 100% { transform: translate(0px); } } @property --ui-rail-tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --ui-rail-tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --ui-rail-tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --ui-rail-tw-rotate-x { syntax: "*"; inherits: false; } @property --ui-rail-tw-rotate-y { syntax: "*"; inherits: false; } @property --ui-rail-tw-rotate-z { syntax: "*"; inherits: false; } @property --ui-rail-tw-skew-x { syntax: "*"; inherits: false; } @property --ui-rail-tw-skew-y { syntax: "*"; inherits: false; } @property --ui-rail-tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --ui-rail-tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --ui-rail-tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --ui-rail-tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --ui-rail-tw-gradient-position { syntax: "*"; inherits: false; } @property --ui-rail-tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } @property --ui-rail-tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } @property --ui-rail-tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } @property --ui-rail-tw-gradient-stops { syntax: "*"; inherits: false; } @property --ui-rail-tw-gradient-via-stops { syntax: "*"; inherits: false; } @property --ui-rail-tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } @property --ui-rail-tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } @property --ui-rail-tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } @property --ui-rail-tw-leading { syntax: "*"; inherits: false; } @property --ui-rail-tw-font-weight { syntax: "*"; inherits: false; } @property --ui-rail-tw-tracking { syntax: "*"; inherits: false; } @property --ui-rail-tw-ordinal { syntax: "*"; inherits: false; } @property --ui-rail-tw-slashed-zero { syntax: "*"; inherits: false; } @property --ui-rail-tw-numeric-figure { syntax: "*"; inherits: false; } @property --ui-rail-tw-numeric-spacing { syntax: "*"; inherits: false; } @property --ui-rail-tw-numeric-fraction { syntax: "*"; inherits: false; } @property --ui-rail-tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --ui-rail-tw-shadow-color { syntax: "*"; inherits: false; } @property --ui-rail-tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --ui-rail-tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --ui-rail-tw-inset-shadow-color { syntax: "*"; inherits: false; } @property --ui-rail-tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --ui-rail-tw-ring-color { syntax: "*"; inherits: false; } @property --ui-rail-tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --ui-rail-tw-inset-ring-color { syntax: "*"; inherits: false; } @property --ui-rail-tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --ui-rail-tw-ring-inset { syntax: "*"; inherits: false; } @property --ui-rail-tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0; } @property --ui-rail-tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --ui-rail-tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --ui-rail-tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @property --ui-rail-tw-blur { syntax: "*"; inherits: false; } @property --ui-rail-tw-brightness { syntax: "*"; inherits: false; } @property --ui-rail-tw-contrast { syntax: "*"; inherits: false; } @property --ui-rail-tw-grayscale { syntax: "*"; inherits: false; } @property --ui-rail-tw-hue-rotate { syntax: "*"; inherits: false; } @property --ui-rail-tw-invert { syntax: "*"; inherits: false; } @property --ui-rail-tw-opacity { syntax: "*"; inherits: false; } @property --ui-rail-tw-saturate { syntax: "*"; inherits: false; } @property --ui-rail-tw-sepia { syntax: "*"; inherits: false; } @property --ui-rail-tw-drop-shadow { syntax: "*"; inherits: false; } @property --ui-rail-tw-drop-shadow-color { syntax: "*"; inherits: false; } @property --ui-rail-tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --ui-rail-tw-drop-shadow-size { syntax: "*"; inherits: false; } @property --ui-rail-tw-backdrop-blur { syntax: "*"; inherits: false; } @property --ui-rail-tw-backdrop-brightness { syntax: "*"; inherits: false; } @property --ui-rail-tw-backdrop-contrast { syntax: "*"; inherits: false; } @property --ui-rail-tw-backdrop-grayscale { syntax: "*"; inherits: false; } @property --ui-rail-tw-backdrop-hue-rotate { syntax: "*"; inherits: false; } @property --ui-rail-tw-backdrop-invert { syntax: "*"; inherits: false; } @property --ui-rail-tw-backdrop-opacity { syntax: "*"; inherits: false; } @property --ui-rail-tw-backdrop-saturate { syntax: "*"; inherits: false; } @property --ui-rail-tw-backdrop-sepia { syntax: "*"; inherits: false; } @property --ui-rail-tw-duration { syntax: "*"; inherits: false; } @property --ui-rail-tw-ease { syntax: "*"; inherits: false; } @property --ui-rail-tw-content { syntax: "*"; inherits: false; initial-value: ""; } @property --ui-rail-tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } @property --ui-rail-tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } @property --ui-rail-tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } @keyframes ui-rail-spin { 100% { transform: rotate(360deg); } } @keyframes ui-rail-ping { 75%, 100% { opacity: 0; transform: scale(2); } } @keyframes ui-rail-pulse { 50% { opacity: 0.5; } } @keyframes ui-rail-bounce { 0%, 100% { animation-timing-function: cubic-bezier(0.8, 0, 1, 1); transform: translateY(-25%); } 50% { animation-timing-function: cubic-bezier(0, 0, 0.2, 1); transform: none; } } #proa-ui-components .home-rail-section { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.94 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark #proa-ui-components .home-rail-section { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.985 0 0); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); } #proa-ui-components .home-rail-section { --proa-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --proa-duration-fast: 150ms; --proa-duration-normal: 200ms; } @keyframes ui-rail-proa-overlay-show { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes ui-rail-proa-overlay-hide { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes ui-rail-proa-dialog-show { 0% { opacity: 0; translate: none; transform: translate(-50%, -48%) scale(0.96); } 100% { opacity: 1; translate: none; transform: translate(-50%, -50%) scale(1); } } @keyframes ui-rail-proa-dialog-hide { 0% { opacity: 1; translate: none; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; translate: none; transform: translate(-50%, -48%) scale(0.96); } } @keyframes ui-rail-proa-popover-show-bottom { 0% { opacity: 0; transform: translateY(-4px) scale(0.96); } 100% { opacity: 1; transform: translateY(0px) scale(1); } } @keyframes ui-rail-proa-popover-hide-bottom { 0% { opacity: 1; transform: translateY(0px) scale(1); } 100% { opacity: 0; transform: translateY(-4px) scale(0.96); } } @keyframes ui-rail-proa-popover-show-top { 0% { opacity: 0; transform: translateY(4px) scale(0.96); } 100% { opacity: 1; transform: translateY(0px) scale(1); } } @keyframes ui-rail-proa-popover-hide-top { 0% { opacity: 1; transform: translateY(0px) scale(1); } 100% { opacity: 0; transform: translateY(4px) scale(0.96); } } @keyframes ui-rail-proa-popover-show-left { 0% { opacity: 0; transform: translateX(4px) scale(0.96); } 100% { opacity: 1; transform: translateX(0px) scale(1); } } @keyframes ui-rail-proa-popover-hide-left { 0% { opacity: 1; transform: translateX(0px) scale(1); } 100% { opacity: 0; transform: translateX(4px) scale(0.96); } } @keyframes ui-rail-proa-popover-show-right { 0% { opacity: 0; transform: translateX(-4px) scale(0.96); } 100% { opacity: 1; transform: translateX(0px) scale(1); } } @keyframes ui-rail-proa-popover-hide-right { 0% { opacity: 1; transform: translateX(0px) scale(1); } 100% { opacity: 0; transform: translateX(-4px) scale(0.96); } } @keyframes ui-rail-proa-dropdown-show { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } @keyframes ui-rail-proa-dropdown-hide { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.95); } } @keyframes ui-rail-proa-accordion-open { 0% { height: 0px; opacity: 0; } 100% { height: var(--proa-accordion-height, auto); opacity: 1; } } @keyframes ui-rail-proa-accordion-close { 0% { height: var(--proa-accordion-height, auto); opacity: 1; } 100% { height: 0px; opacity: 0; } } @keyframes ui-rail-proa-toast-slide-in { 0% { opacity: 0; transform: translateY(100%); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes ui-rail-proa-toast-slide-out { 0% { opacity: 1; transform: translateY(0px); } 100% { opacity: 0; transform: translateY(100%); } } @keyframes ui-rail-proa-tooltip-show-top { 0% { opacity: 0; transform: translateY(4px) scale(0.96); } 100% { opacity: 1; transform: translateY(0px) scale(1); } } @keyframes ui-rail-proa-tooltip-hide-top { 0% { opacity: 1; transform: translateY(0px) scale(1); } 100% { opacity: 0; transform: translateY(4px) scale(0.96); } } @keyframes ui-rail-proa-tooltip-show-bottom { 0% { opacity: 0; transform: translateY(-4px) scale(0.96); } 100% { opacity: 1; transform: translateY(0px) scale(1); } } @keyframes ui-rail-proa-tooltip-hide-bottom { 0% { opacity: 1; transform: translateY(0px) scale(1); } 100% { opacity: 0; transform: translateY(-4px) scale(0.96); } } @keyframes ui-rail-proa-tooltip-show-left { 0% { opacity: 0; transform: translateX(4px) scale(0.96); } 100% { opacity: 1; transform: translateX(0px) scale(1); } } @keyframes ui-rail-proa-tooltip-hide-left { 0% { opacity: 1; transform: translateX(0px) scale(1); } 100% { opacity: 0; transform: translateX(4px) scale(0.96); } } @keyframes ui-rail-proa-tooltip-show-right { 0% { opacity: 0; transform: translateX(-4px) scale(0.96); } 100% { opacity: 1; transform: translateX(0px) scale(1); } } @keyframes ui-rail-proa-tooltip-hide-right { 0% { opacity: 1; transform: translateX(0px) scale(1); } 100% { opacity: 0; transform: translateX(-4px) scale(0.96); } } #proa-ui-components .home-rail-section input[type="checkbox"][data-slot="checkbox"] { box-sizing: border-box; } #proa-ui-components .home-rail-section input[type="checkbox"][data-slot="checkbox"] { position: relative; } #proa-ui-components .home-rail-section input[type="checkbox"][data-slot="checkbox"]:checked::before { content: ""; position: absolute; inset: 0px; background-color: var(--checkbox-icon-color, var(--primary-foreground)); mask-image: var(--checkbox-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")); mask-size: 100% 100%; mask-position: center center; mask-repeat: no-repeat; pointer-events: none; } #proa-ui-components .home-rail-section { --proa-drawer-duration: 500ms; --proa-drawer-ease: cubic-bezier(0.32, 0.72, 0, 1); } @keyframes ui-rail-proa-drawer-slide-in-bottom { 0% { transform: translateY(100%); } 100% { transform: translateY(0px); } } @keyframes ui-rail-proa-drawer-slide-out-bottom { 0% { transform: translateY(0px); } 100% { transform: translateY(100%); } } @keyframes ui-rail-proa-drawer-slide-in-top { 0% { transform: translateY(-100%); } 100% { transform: translateY(0px); } } @keyframes ui-rail-proa-drawer-slide-out-top { 0% { transform: translateY(0px); } 100% { transform: translateY(-100%); } } @keyframes ui-rail-proa-drawer-slide-in-right { 0% { transform: translateX(100%); } 100% { transform: translateX(0px); } } @keyframes ui-rail-proa-drawer-slide-out-right { 0% { transform: translateX(0px); } 100% { transform: translateX(100%); } } @keyframes ui-rail-proa-drawer-slide-in-left { 0% { transform: translateX(-100%); } 100% { transform: translateX(0px); } } @keyframes ui-rail-proa-drawer-slide-out-left { 0% { transform: translateX(0px); } 100% { transform: translateX(-100%); } } @keyframes ui-rail-proa-sheet-slide-in-right { 0% { transform: translateX(100%); } 100% { transform: translateX(0px); } } @keyframes ui-rail-proa-sheet-slide-out-right { 0% { transform: translateX(0px); } 100% { transform: translateX(100%); } } @keyframes ui-rail-proa-sheet-slide-in-left { 0% { transform: translateX(-100%); } 100% { transform: translateX(0px); } } @keyframes ui-rail-proa-sheet-slide-out-left { 0% { transform: translateX(0px); } 100% { transform: translateX(-100%); } } @keyframes ui-rail-proa-sheet-slide-in-top { 0% { transform: translateY(-100%); } 100% { transform: translateY(0px); } } @keyframes ui-rail-proa-sheet-slide-out-top { 0% { transform: translateY(0px); } 100% { transform: translateY(-100%); } } @keyframes ui-rail-proa-sheet-slide-in-bottom { 0% { transform: translateY(100%); } 100% { transform: translateY(0px); } } @keyframes ui-rail-proa-sheet-slide-out-bottom { 0% { transform: translateY(0px); } 100% { transform: translateY(100%); } } #proa-ui-components .home-rail-section [data-switch] { border-color: transparent; box-shadow: oklch(0 0 0 / 0.1) 0px 0px 0px 1px; transition: background-color 150ms, box-shadow 150ms; } #proa-ui-components .home-rail-section [data-switch][data-state="checked"] { background-color: var(--primary); } #proa-ui-components .home-rail-section [data-switch]:focus-visible { box-shadow: oklch(0 0 0 / 0.1) 0px 0px 0px 1px; outline: 2px solid var(--ring); outline-offset: 2px; } #proa-ui-components .home-rail-section [data-switch]:disabled { cursor: not-allowed; opacity: 0.5; } #proa-ui-components .home-rail-section [data-switch-thumb] { background-color: var(--background); box-shadow: oklch(0 0 0 / 0.2) 0px 1px 2px 0px, oklch(0 0 0 / 0.12) 0px 1px 3px 0px; transition: transform 150ms, translate 150ms; } @keyframes ui-rail-proa-caret-blink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: 0; } } #proa-ui-components .home-rail-section [data-otp-caret] { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; pointer-events: none; } #proa-ui-components .home-rail-section [data-otp-caret]::after { content: ""; width: 1px; height: 1.25em; background: var(--foreground); animation: 1s step-end 0s infinite normal none running ui-rail-proa-caret-blink; } #proa-ui-components .home-rail-section [data-calendar], #proa-ui-components .home-rail-section [data-slot="calendar"] { --calendar-range: color-mix(in oklch, var(--primary) 18%, var(--background)); --calendar-range-hover: color-mix(in oklch, var(--primary) 32%, var(--background)); --calendar-day-radius: 0.375rem; } #proa-ui-components .home-rail-section [data-code-block] { background: rgb(13, 17, 23); } #proa-ui-components .home-rail-section [data-code-block] code { color: rgb(230, 237, 243); } #proa-ui-components .home-rail-section .hl-function-macro { color: rgb(210, 168, 255); } #proa-ui-components .home-rail-section .hl-punctuation-bracket { color: rgb(230, 237, 243); } #proa-ui-components .home-rail-section .hl-punctuation-delimiter { color: rgb(230, 237, 243); } #proa-ui-components .home-rail-section .hl-constructor { color: rgb(255, 166, 87); } #proa-ui-components .home-rail-section .chart-dot { cursor: pointer; transition: transform 0.15s, opacity 0.15s; } #proa-ui-components .home-rail-section .chart-dot:hover circle.dot-vis { r: 5.5; } #proa-ui-components .home-rail-section .chart-dot:hover .dot-val { opacity: 1; } #proa-ui-components .home-rail-section .dot-val { opacity: 0; pointer-events: none; transition: opacity 0.15s; } .dark #proa-ui-components .home-rail-section .home-rail-stage { background-image: radial-gradient(rgba(255, 255, 255, 0.07) 0.75px, rgba(0, 0, 0, 0) 0.75px); } .dark #proa-ui-components .home-rail-section .component-tier-badge[data-tier="free"] { color: rgb(94, 234, 212); background: rgba(20, 184, 166, 0.14); border-color: rgba(45, 212, 191, 0.22); } .dark #proa-ui-components .home-rail-section .component-tier-badge[data-tier="pro"] { color: rgb(255, 176, 112); background: rgba(221, 118, 39, 0.18); border-color: rgba(255, 176, 112, 0.24); } .dark #proa-ui-components .home-rail-section [data-switch], .dark #proa-ui-components .home-rail-section [data-switch]:focus-visible { box-shadow: oklch(1 0 0 / 0.16) 0px 0px 0px 1px; } .dark #proa-ui-components .home-rail-section [data-switch][data-state="checked"] [data-switch-thumb] { background-color: var(--primary-foreground); } .dark #proa-ui-components .home-rail-section [data-calendar], .dark #proa-ui-components .home-rail-section [data-slot="calendar"] { --calendar-range: color-mix(in oklch, var(--primary) 26%, var(--background)); --calendar-range-hover: color-mix(in oklch, var(--primary) 40%, var(--background)); } /* Show the host section background and match the rail's edge fade to its theme. */ #proa-ui-components .home-rail-section { --home-page-bg: #fff; background: transparent; } .dark #proa-ui-components .home-rail-section { --home-page-bg: #0b0b0d; background: transparent; }