@layer properties { @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) { *, ::backdrop, ::after, ::before { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-space-y-reverse: 0; --tw-border-style: solid; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-duration: initial; --tw-ease: initial; } } } @layer theme { :host, :root { --font-mono: var(--font-mono-face),ui-monospace,"SF Mono",monospace; --color-red-50: oklch(97.1% .013 17.38); --color-red-200: oklch(88.5% .062 18.334); --color-red-400: oklch(70.4% .191 22.216); --color-red-600: oklch(57.7% .245 27.325); --color-red-700: oklch(50.5% .213 27.518); --color-orange-100: oklch(95.4% .038 75.164); --color-orange-700: oklch(55.3% .195 38.402); --color-green-50: oklch(98.2% .018 155.826); --color-green-200: oklch(92.5% .084 155.995); --color-green-700: oklch(52.7% .154 150.069); --color-blue-50: oklch(97% .014 254.604); --color-blue-400: oklch(70.7% .165 254.624); --color-blue-600: oklch(54.6% .245 262.881); --color-gray-50: oklch(98.5% .002 247.839); --color-gray-100: oklch(96.7% .003 264.542); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338); --color-gray-400: oklch(70.7% .022 261.325); --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-800: oklch(27.8% .033 256.848); --color-gray-900: oklch(21% .034 264.665); --color-black: #000; --color-white: #fff; --spacing: .25rem; --container-sm: 24rem; --container-xl: 36rem; --container-3xl: 48rem; --container-4xl: 56rem; --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); --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-tight: -.025em; --tracking-wide: .025em; --leading-tight: 1.25; --leading-relaxed: 1.625; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --shadow-xs: 0 0 4px 0 #0000000a; --shadow-sm: 0 18px 47px 0 #00000008,0 7.5px 19px 0 #00000005,0 4px 10.5px 0 #00000005,0 2.3px 5.8px 0 #00000003,0 1.2px 3.1px 0 #00000003,0 .5px 1.3px 0 #00000003; --shadow-md: 0 17.54px 23.39px 0 #0000000a,0 9.4px 12.5px 0 #00000008,0 5.25px 7px 0 #00000005,0 2.79px 3.72px -2px #00000003,0 1.16px 1.5px 0 #00000003; --shadow-lg: 0 25px 50px 0 #0000000d,0 12px 24px 0 #0000000a,0 6px 12px 0 #00000008,0 3px 6px 0 #00000005,0 1.5px 3px 0 #00000005; --ease-out: cubic-bezier(0,0,.2,1); --animate-pulse: pulse 2s cubic-bezier(.4,0,.6,1) infinite; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4,0,.2,1); --default-font-family: var(--font-inter),ui-sans-serif,system-ui,sans-serif; --default-mono-font-family: var(--font-mono-face),ui-monospace,"SF Mono",monospace; --color-surface: var(--surface); --color-ink: var(--ink); --color-ink-2: var(--ink-2); --color-field: var(--field); --color-red: var(--red); --shadow-hairline: var(--shadow-hairline); --shadow-btn: var(--shadow-btn); --shadow-inset-field: var(--shadow-inset-field); --shadow-card: var(--shadow-card); --shadow-raised: var(--shadow-raised); --shadow-overlay: var(--shadow-overlay); --radius-control: 8px; --radius-card: 10px; --ease-link: cubic-bezier(.16,1,.3,1); } } @layer base { *, ::backdrop, ::after, ::before { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; } ::file-selector-button { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; } :host, html { 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; } hr { height: 0px; color: inherit; border-top-width: 1px; } abbr:where([title]) { text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, pre, samp { font-family: var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace); font-feature-settings: var(--default-mono-font-feature-settings,normal); font-variation-settings: var(--default-mono-font-variation-settings,normal); font-size: 1em; } small { font-size: 80%; } sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0px; border-color: inherit; border-collapse: collapse; } progress { vertical-align: baseline; } summary { display: list-item; } menu, ol, ul { list-style: none; } audio, canvas, embed, iframe, img, object, svg, video { vertical-align: middle; display: block; } img, video { max-width: 100%; height: auto; } button, input, optgroup, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; } ::file-selector-button { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) { ::placeholder { color: currentcolor; } @supports (color:color-mix(in lab,red,red)) { ::placeholder { color: color-mix(currentcolor, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { 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: 0px; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field { padding-block: 0px; } ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-month-field { padding-block: 0px; } ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field { padding-block: 0px; } ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-second-field { padding-block: 0px; } ::-webkit-datetime-edit-meridiem-field { padding-block: 0px; } ::-webkit-calendar-picker-indicator { line-height: 1; } button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; } ::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 components { .lh-scroll { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .lh-prose { color: var(--ink); letter-spacing: -0.006em; overflow-wrap: break-word; font-size: 15px; line-height: 1.65; } .lh-prose.is-compact { font-size: 14px; line-height: 1.55; } .lh-prose > :first-child { margin-top: 0px; } .lh-prose > :last-child { margin-bottom: 0px; } .lh-prose p { margin: 0.5em 0px; } .lh-prose.is-compact p { margin: 0.3em 0px; } .lh-prose h1, .lh-prose h2, .lh-prose h3 { letter-spacing: -0.02em; color: var(--ink); font-weight: 600; line-height: 1.3; } .lh-prose h1 { margin: 1.2em 0px 0.4em; font-size: 1.6em; } .lh-prose h2 { margin: 1.3em 0px 0.35em; font-size: 1.25em; } .lh-prose h3 { margin: 1.1em 0px 0.3em; font-size: 1.06em; } .lh-prose.is-compact h1, .lh-prose.is-compact h2, .lh-prose.is-compact h3 { margin: 0.8em 0px 0.2em; font-size: 1em; } .lh-prose ol, .lh-prose ul { margin: 0.4em 0px; padding-left: 1.35em; } .lh-prose ul { list-style: outside; } .lh-prose ol { list-style: decimal; } .lh-prose li { margin: 0.15em 0px; } .lh-prose li > p { margin: 0px; } .lh-prose li::marker { color: var(--ink-3); } .lh-prose ul.contains-task-list, .lh-prose ul[data-type="taskList"] { padding-left: 0.2em; list-style: none; } .lh-prose ul[data-type="taskList"] li { align-items: flex-start; gap: 0.5em; display: flex; } .lh-prose ul[data-type="taskList"] li > label { flex-shrink: 0; margin-top: 0.36em; } .lh-prose ul[data-type="taskList"] li > div { flex: 1 1 0%; min-width: 0px; } .lh-prose ul[data-type="taskList"] li[data-checked="true"] > div { color: var(--ink-3); text-decoration-line: line-through; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: var(--ink-3); } @supports (color:color-mix(in lab,red,red)) { .lh-prose ul[data-type="taskList"] li[data-checked="true"] > div { text-decoration-color: color-mix(in srgb,var(--ink-3) 60%,transparent); } } .lh-prose input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } .lh-prose blockquote { border-left: 2px solid var(--line-strong); color: var(--ink-2); margin: 0.6em 0px; padding-left: 0.9em; } .lh-prose a { color: var(--accent-ink); text-decoration: underline; } @supports (color:color-mix(in lab,red,red)) { .lh-prose a { text-decoration-color: color-mix(in srgb, currentcolor 35%, transparent 65%); } } .lh-prose a { text-underline-offset: 3px; } .lh-prose code { background: var(--field); border-radius: 5px; padding: 0.1em 0.35em; font-size: 0.86em; } .lh-prose code, .lh-prose pre { font-family: var(--font-mono); box-shadow: var(--shadow-hairline); } .lh-prose pre { background: var(--inset); border-radius: var(--radius-card); margin: 0.7em 0px; padding: 12px 14px; font-size: 12.5px; line-height: 1.6; overflow-x: auto; } .lh-prose pre code { box-shadow: none; font-size: inherit; background: 0px 0px; padding: 0px; } .lh-prose hr { border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--line-strong); margin: 1.4em 0px; } .lh-prose table { border-collapse: separate; border-spacing: 0px; border: 1px solid var(--line); border-radius: var(--radius-card); width: 100%; margin: 0.8em 0px; font-size: 0.92em; overflow: hidden; } .lh-prose td, .lh-prose th { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: left; vertical-align: top; padding: 6px 10px; } .lh-prose th { background: var(--inset); color: var(--ink-2); font-weight: 500; } .lh-prose tr > :last-child { border-right: 0px; } .lh-prose tr:last-child > td { border-bottom: 0px; } .lh-prose strong { font-weight: 600; } .lh-table th { text-align: left; color: var(--ink-3); border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--inset); padding: 8px 12px; font-size: 11.5px; font-weight: 500; } .lh-table td { border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--ink); padding: 8px 12px; } .lh-table tr:last-child > td { border-bottom: 0px; } .lh-table tbody tr:hover > td { background: var(--hover); } .lh-table th:first-child { border-top-left-radius: var(--radius-card); } .lh-table th:last-child { border-top-right-radius: var(--radius-card); } .lh-details > summary::-webkit-details-marker { display: none; } .lh-diff-add { background: var(--green-tint); color: var(--green); } .lh-diff-del { background: var(--red-tint); color: var(--red); } .lh-diff-hunk { color: var(--accent-ink); } } @layer utilities { .visible { visibility: visible; } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .sticky { position: sticky; } .inset-0 { inset: 0px; } .top-0 { top: 0px; } .top-1 { top: var(--spacing); } .top-1\/2 { top: 50%; } .right-1 { right: var(--spacing); } .bottom-0 { bottom: 0px; } .bottom-1 { bottom: var(--spacing); } .bottom-36 { bottom: calc(var(--spacing) * 36); } .left-1\/2 { left: 50%; } .left-3 { left: calc(var(--spacing) * 3); } .z-10 { z-index: 10; } .z-50 { z-index: 50; } .col-span-2 { grid-column: span 2 / span 2; } .\!mx-0 { margin-inline: 0px !important; } .-mx-1 { margin-inline: calc(var(--spacing) * -1); } .mx-0\.5 { margin-inline: calc(var(--spacing) * .5); } .mx-2 { margin-inline: calc(var(--spacing) * 2); } .mx-auto { margin-inline: auto; } .my-3 { margin-block: calc(var(--spacing) * 3); } .my-4 { margin-block: calc(var(--spacing) * 4); } .mt-0\.5 { margin-top: calc(var(--spacing) * .5); } .mt-1 { margin-top: var(--spacing); } .mt-1\.5 { margin-top: calc(var(--spacing) * 1.5); } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-2\.5 { margin-top: calc(var(--spacing) * 2.5); } .mt-3 { margin-top: calc(var(--spacing) * 3); } .mt-3\.5 { margin-top: calc(var(--spacing) * 3.5); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mt-5 { margin-top: calc(var(--spacing) * 5); } .mt-6 { margin-top: calc(var(--spacing) * 6); } .mt-9 { margin-top: calc(var(--spacing) * 9); } .mt-12 { margin-top: calc(var(--spacing) * 12); } .mt-16 { margin-top: calc(var(--spacing) * 16); } .mt-px { margin-top: 1px; } .mr-1\.5 { margin-right: calc(var(--spacing) * 1.5); } .mr-\[2px\] { margin-right: 2px; } .-mb-px { margin-bottom: -1px; } .mb-1 { margin-bottom: var(--spacing); } .mb-1\.5 { margin-bottom: calc(var(--spacing) * 1.5); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } .mb-3 { margin-bottom: calc(var(--spacing) * 3); } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .mb-5 { margin-bottom: calc(var(--spacing) * 5); } .ml-1 { margin-left: var(--spacing); } .ml-1\.5 { margin-left: calc(var(--spacing) * 1.5); } .ml-2 { margin-left: calc(var(--spacing) * 2); } .ml-\[3px\] { margin-left: 3px; } .ml-auto { margin-left: auto; } .line-clamp-2 { -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .block { display: block; } .contents { display: contents; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } .inline { display: inline; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .inline-grid { display: inline-grid; } .table { display: table; } .size-1\.5 { width: calc(var(--spacing) * 1.5); height: calc(var(--spacing) * 1.5); } .size-2\.5 { width: calc(var(--spacing) * 2.5); height: calc(var(--spacing) * 2.5); } .size-3 { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } .size-3\.5 { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } .size-4 { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .size-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-\[7px\] { width: 7px; height: 7px; } .size-\[15px\] { width: 15px; height: 15px; } .h-1\.5 { height: calc(var(--spacing) * 1.5); } .h-2 { height: calc(var(--spacing) * 2); } .h-2\.5 { height: calc(var(--spacing) * 2.5); } .h-3 { height: calc(var(--spacing) * 3); } .h-3\.5 { height: calc(var(--spacing) * 3.5); } .h-4 { height: calc(var(--spacing) * 4); } .h-5 { height: calc(var(--spacing) * 5); } .h-6 { height: calc(var(--spacing) * 6); } .h-7 { height: calc(var(--spacing) * 7); } .h-8 { height: calc(var(--spacing) * 8); } .h-9 { height: calc(var(--spacing) * 9); } .h-12 { height: calc(var(--spacing) * 12); } .h-\[3px\] { height: 3px; } .h-\[27px\] { height: 27px; } .h-\[30px\] { height: 30px; } .h-\[150px\] { height: 150px; } .h-dvh { height: 100dvh; } .h-full { height: 100%; } .h-px { height: 1px; } .max-h-40 { max-height: calc(var(--spacing) * 40); } .max-h-48 { max-height: calc(var(--spacing) * 48); } .max-h-56 { max-height: calc(var(--spacing) * 56); } .max-h-64 { max-height: calc(var(--spacing) * 64); } .max-h-72 { max-height: calc(var(--spacing) * 72); } .max-h-\[38vh\] { max-height: 38vh; } .max-h-\[40vh\] { max-height: 40vh; } .max-h-\[62vh\] { max-height: 62vh; } .max-h-\[70vh\] { max-height: 70vh; } .max-h-\[220px\] { max-height: 220px; } .max-h-\[420px\] { max-height: 420px; } .max-h-\[560px\] { max-height: 560px; } .min-h-0 { min-height: 0px; } .min-h-\[20px\] { min-height: 20px; } .min-h-\[32px\] { min-height: 32px; } .min-h-\[34px\] { min-height: 34px; } .min-h-\[60vh\] { min-height: 60vh; } .min-h-\[120px\] { min-height: 120px; } .min-h-\[300px\] { min-height: 300px; } .min-h-dvh { min-height: 100dvh; } .w-1\.5 { width: calc(var(--spacing) * 1.5); } .w-2 { width: calc(var(--spacing) * 2); } .w-2\.5 { width: calc(var(--spacing) * 2.5); } .w-3 { width: calc(var(--spacing) * 3); } .w-3\.5 { width: calc(var(--spacing) * 3.5); } .w-4 { width: calc(var(--spacing) * 4); } .w-6 { width: calc(var(--spacing) * 6); } .w-7 { width: calc(var(--spacing) * 7); } .w-8 { width: calc(var(--spacing) * 8); } .w-\[3px\] { width: 3px; } .w-\[100px\] { width: 100px; } .w-\[118px\] { width: 118px; } .w-\[140px\] { width: 140px; } .w-\[150px\] { width: 150px; } .w-\[170px\] { width: 170px; } .w-\[180px\] { width: 180px; } .w-\[200px\] { width: 200px; } .w-\[210px\] { width: 210px; } .w-\[220px\] { width: 220px; } .w-\[232px\] { width: 232px; } .w-\[300px\] { width: 300px; } .w-\[480px\] { width: 480px; } .w-auto { width: auto; } .w-full { width: 100%; } .w-px { width: 1px; } .max-w-3xl { max-width: var(--container-3xl); } .max-w-4xl { max-width: var(--container-4xl); } .max-w-\[85\%\] { max-width: 85%; } .max-w-\[200px\] { max-width: 200px; } .max-w-\[220px\] { max-width: 220px; } .max-w-\[260px\] { max-width: 260px; } .max-w-\[320px\] { max-width: 320px; } .max-w-\[340px\] { max-width: 340px; } .max-w-\[380px\] { max-width: 380px; } .max-w-\[420px\] { max-width: 420px; } .max-w-\[520px\] { max-width: 520px; } .max-w-\[560px\] { max-width: 560px; } .max-w-\[620px\] { max-width: 620px; } .max-w-\[640px\] { max-width: 640px; } .max-w-\[860px\] { max-width: 860px; } .max-w-\[980px\] { max-width: 980px; } .max-w-\[1080px\] { max-width: 1080px; } .max-w-\[1180px\] { max-width: 1180px; } .max-w-full { max-width: 100%; } .max-w-sm { max-width: var(--container-sm); } .max-w-xl { max-width: var(--container-xl); } .min-w-0 { min-width: 0px; } .min-w-\[220px\] { min-width: 220px; } .min-w-\[240px\] { min-width: 240px; } .min-w-full { min-width: 100%; } .flex-1 { flex: 1 1 0%; } .shrink-0 { flex-shrink: 0; } .border-collapse { border-collapse: collapse; } .-translate-x-1\/2 { --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); } .-translate-x-1\/2, .-translate-y-1\/2 { translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-1\/2 { --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); } .-rotate-90 { rotate: -90deg; } .animate-pulse { animation: var(--animate-pulse); } .cursor-pointer { cursor: pointer; } .resize-none { resize: none; } .resize-y { resize: vertical; } .list-decimal { list-style-type: decimal; } .list-disc { list-style-type: disc; } .list-none { list-style-type: none; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); } .grid-cols-\[1fr_320px\] { grid-template-columns: 1fr 320px; } .grid-cols-\[240px_1fr\] { grid-template-columns: 240px 1fr; } .grid-cols-\[250px_1fr\] { grid-template-columns: 250px 1fr; } .grid-cols-\[300px_minmax\(0\,1fr\)\] { grid-template-columns: 300px minmax(0px, 1fr); } .flex-col { flex-direction: column; } .flex-col-reverse { flex-direction: column-reverse; } .flex-wrap { flex-wrap: wrap; } .items-baseline { align-items: baseline; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-start { justify-content: flex-start; } .gap-0\.5 { gap: calc(var(--spacing) * .5); } .gap-1 { gap: var(--spacing); } .gap-1\.5 { gap: calc(var(--spacing) * 1.5); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-2\.5 { gap: calc(var(--spacing) * 2.5); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-3\.5 { gap: calc(var(--spacing) * 3.5); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-5 { gap: calc(var(--spacing) * 5); } .gap-6 { gap: calc(var(--spacing) * 6); } .gap-\[2px\] { gap: 2px; } :where(.space-y-1 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-2 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-2\.5 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-5 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-7 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 7) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 7) * calc(1 - var(--tw-space-y-reverse))); } .gap-x-1\.5 { column-gap: calc(var(--spacing) * 1.5); } .gap-x-3 { column-gap: calc(var(--spacing) * 3); } .gap-x-4 { column-gap: calc(var(--spacing) * 4); } .gap-x-5 { column-gap: calc(var(--spacing) * 5); } .gap-y-0\.5 { row-gap: calc(var(--spacing) * .5); } .gap-y-1 { row-gap: var(--spacing); } .gap-y-1\.5 { row-gap: calc(var(--spacing) * 1.5); } .gap-y-2 { row-gap: calc(var(--spacing) * 2); } .self-center { align-self: center; } .truncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .rounded { border-radius: 0.25rem; } .rounded-2xl { border-radius: var(--radius-2xl); } .rounded-\[3px\] { border-radius: 3px; } .rounded-\[6px\] { border-radius: 6px; } .rounded-\[7px\] { border-radius: 7px; } .rounded-\[9px\] { border-radius: 9px; } .rounded-\[16px\] { border-radius: 16px; } .rounded-card { border-radius: 10px; } .rounded-chip { border-radius: 6px; } .rounded-control { border-radius: 8px; } .rounded-full { border-radius: 3.40282e+38px; } .rounded-lg { border-radius: var(--radius-lg); } .rounded-md { border-radius: var(--radius-md); } .rounded-sm { border-radius: var(--radius-sm); } .rounded-window { border-radius: 14px; } .rounded-xl { border-radius: var(--radius-xl); } .rounded-t-\[4px\] { border-top-left-radius: 4px; border-top-right-radius: 4px; } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-0 { border-style: var(--tw-border-style); border-width: 0px; } .border-2 { border-style: var(--tw-border-style); border-width: 2px; } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-b-2 { border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; } .border-l { border-left-style: var(--tw-border-style); border-left-width: 1px; } .border-l-4 { border-left-style: var(--tw-border-style); border-left-width: 4px; } .border-dashed { --tw-border-style: dashed; border-style: dashed; } .border-gray-100 { border-color: var(--color-gray-100); } .border-gray-200 { border-color: var(--color-gray-200); } .border-gray-300 { border-color: var(--color-gray-300); } .border-gray-400 { border-color: var(--color-gray-400); } .border-gray-900 { border-color: var(--color-gray-900); } .border-green-200 { border-color: var(--color-green-200); } .border-ink { border-color: var(--ink); } .border-line { border-color: var(--line); } .border-line-strong { border-color: var(--line-strong); } .border-red-200 { border-color: var(--color-red-200); } .border-transparent { border-color: rgba(0, 0, 0, 0); } .\!bg-red { background-color: var(--red) !important; } .bg-\[\#1a1a1a\] { background-color: rgb(26, 26, 26); } .bg-\[\#f8f6f1\] { background-color: rgb(248, 246, 241); } .bg-\[oklch\(0\.2_0\.01_260\/0\.18\)\] { background-color: oklch(0.2 0.01 260 / 0.18); } .bg-accent { background-color: var(--accent); } .bg-accent-tint, .bg-accent-tint\/50 { background-color: var(--accent-tint); } @supports (color:color-mix(in lab,red,red)) { .bg-accent-tint\/50 { background-color: color-mix(in oklab,var(--accent-tint) 50%,transparent); } } .bg-accent-tint\/60 { background-color: var(--accent-tint); } @supports (color:color-mix(in lab,red,red)) { .bg-accent-tint\/60 { background-color: color-mix(in oklab,var(--accent-tint) 60%,transparent); } } .bg-black { background-color: var(--color-black); } .bg-blue-50 { background-color: var(--color-blue-50); } .bg-blue-400 { background-color: var(--color-blue-400); } .bg-canvas { background-color: var(--canvas); } .bg-field { background-color: var(--field); } .bg-gray-50 { background-color: var(--color-gray-50); } .bg-gray-100 { background-color: var(--color-gray-100); } .bg-gray-200 { background-color: var(--color-gray-200); } .bg-gray-300 { background-color: var(--color-gray-300); } .bg-gray-800 { background-color: var(--color-gray-800); } .bg-gray-900 { background-color: var(--color-gray-900); } .bg-green { background-color: var(--green); } .bg-green-50 { background-color: var(--color-green-50); } .bg-green-tint { background-color: var(--green-tint); } .bg-hover-2 { background-color: var(--hover-2); } .bg-ink { background-color: var(--ink); } .bg-ink-2 { background-color: var(--ink-2); } .bg-ink-3 { background-color: var(--ink-3); } .bg-inset { background-color: var(--inset); } .bg-line-strong { background-color: var(--line-strong); } .bg-orange { background-color: var(--orange); } .bg-orange-100 { background-color: var(--color-orange-100); } .bg-orange-tint { background-color: var(--orange-tint); } .bg-page { background-color: var(--page); } .bg-red { background-color: var(--red); } .bg-red-50 { background-color: var(--color-red-50); } .bg-red-400 { background-color: var(--color-red-400); } .bg-red-tint { background-color: var(--red-tint); } .bg-surface { background-color: var(--surface); } .bg-transparent { background-color: rgba(0, 0, 0, 0); } .bg-white { background-color: var(--color-white); } .bg-gradient-to-b { --tw-gradient-position: to bottom in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-none { background-image: none; } .from-gray-50 { --tw-gradient-from: var(--color-gray-50); --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-white { --tw-gradient-to: var(--color-white); --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position)); } .bg-clip-text { background-clip: text; } .fill-current { fill: currentcolor; } .object-contain { object-fit: contain; } .p-1 { padding: var(--spacing); } .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-10 { padding: calc(var(--spacing) * 10); } .px-0 { padding-inline: 0px; } .px-1 { padding-inline: var(--spacing); } .px-1\.5 { padding-inline: calc(var(--spacing) * 1.5); } .px-2 { padding-inline: calc(var(--spacing) * 2); } .px-2\.5 { padding-inline: calc(var(--spacing) * 2.5); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .px-4 { padding-inline: calc(var(--spacing) * 4); } .px-5 { padding-inline: calc(var(--spacing) * 5); } .px-6 { padding-inline: calc(var(--spacing) * 6); } .px-8 { padding-inline: calc(var(--spacing) * 8); } .py-0 { padding-block: 0px; } .py-0\.5 { padding-block: calc(var(--spacing) * .5); } .py-1 { padding-block: var(--spacing); } .py-1\.5 { padding-block: calc(var(--spacing) * 1.5); } .py-2 { padding-block: calc(var(--spacing) * 2); } .py-2\.5 { padding-block: calc(var(--spacing) * 2.5); } .py-3 { padding-block: calc(var(--spacing) * 3); } .py-4 { padding-block: calc(var(--spacing) * 4); } .py-6 { padding-block: calc(var(--spacing) * 6); } .py-7 { padding-block: calc(var(--spacing) * 7); } .py-8 { padding-block: calc(var(--spacing) * 8); } .py-12 { padding-block: calc(var(--spacing) * 12); } .py-16 { padding-block: calc(var(--spacing) * 16); } .py-20 { padding-block: calc(var(--spacing) * 20); } .py-\[3px\] { padding-block: 3px; } .py-\[6px\] { padding-block: 6px; } .py-\[8vh\] { padding-block: 8vh; } .py-\[9px\] { padding-block: 9px; } .py-px { padding-block: 1px; } .pt-0\.5 { padding-top: calc(var(--spacing) * .5); } .pt-1 { padding-top: var(--spacing); } .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-5 { padding-top: calc(var(--spacing) * 5); } .pt-6 { padding-top: calc(var(--spacing) * 6); } .pt-8 { padding-top: calc(var(--spacing) * 8); } .pt-\[20vh\] { padding-top: 20vh; } .pt-px { padding-top: 1px; } .pr-0\.5 { padding-right: calc(var(--spacing) * .5); } .pr-1\.5 { padding-right: calc(var(--spacing) * 1.5); } .pr-2 { padding-right: calc(var(--spacing) * 2); } .pr-7 { padding-right: calc(var(--spacing) * 7); } .pb-1 { padding-bottom: var(--spacing); } .pb-3 { padding-bottom: calc(var(--spacing) * 3); } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } .pb-6 { padding-bottom: calc(var(--spacing) * 6); } .pb-10 { padding-bottom: calc(var(--spacing) * 10); } .pl-2 { padding-left: calc(var(--spacing) * 2); } .pl-3 { padding-left: calc(var(--spacing) * 3); } .pl-3\.5 { padding-left: calc(var(--spacing) * 3.5); } .pl-4 { padding-left: calc(var(--spacing) * 4); } .pl-5 { padding-left: calc(var(--spacing) * 5); } .pl-6 { padding-left: calc(var(--spacing) * 6); } .pl-11 { padding-left: calc(var(--spacing) * 11); } .pl-\[3px\] { padding-left: 3px; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .align-baseline { vertical-align: baseline; } .align-middle { vertical-align: middle; } .font-mono { font-family: var(--font-mono-face),ui-monospace,"SF Mono",monospace; } .font-sans { font-family: var(--font-inter),ui-sans-serif,system-ui,sans-serif; } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading,var(--text-2xl--line-height)); } .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading,var(--text-3xl--line-height)); } .text-base { font-size: var(--text-base); line-height: var(--tw-leading,var(--text-base--line-height)); } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading,var(--text-lg--line-height)); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading,var(--text-sm--line-height)); } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading,var(--text-xl--line-height)); } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading,var(--text-xs--line-height)); } .text-\[0\.9em\] { font-size: 0.9em; } .text-\[9\.5px\] { font-size: 9.5px; } .text-\[9px\] { font-size: 9px; } .text-\[10\.5px\] { font-size: 10.5px; } .text-\[10px\] { font-size: 10px; } .text-\[11\.5px\] { font-size: 11.5px; } .text-\[11px\] { font-size: 11px; } .text-\[12\.5px\] { font-size: 12.5px; } .text-\[12px\] { font-size: 12px; } .text-\[13\.5px\] { font-size: 13.5px; } .text-\[13px\] { font-size: 13px; } .text-\[14px\] { font-size: 14px; } .text-\[15px\] { font-size: 15px; } .text-\[16px\] { font-size: 16px; } .text-\[17px\] { font-size: 17px; } .text-\[18px\] { font-size: 18px; } .text-\[19px\] { font-size: 19px; } .text-\[28px\] { font-size: 28px; } .leading-5 { --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); } .leading-6 { --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); } .leading-7 { --tw-leading: calc(var(--spacing) * 7); line-height: calc(var(--spacing) * 7); } .leading-\[1\.5\] { --tw-leading: 1.5; line-height: 1.5; } .leading-\[1\.6\] { --tw-leading: 1.6; line-height: 1.6; } .leading-\[17px\] { --tw-leading: 17px; line-height: 17px; } .leading-\[18px\] { --tw-leading: 18px; line-height: 18px; } .leading-none { --tw-leading: 1; line-height: 1; } .leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .tracking-\[-0\.01em\] { --tw-tracking: -.01em; letter-spacing: -0.01em; } .tracking-\[-0\.02em\] { --tw-tracking: -.02em; letter-spacing: -0.02em; } .tracking-tight { --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .tracking-wide { --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); } .break-words { overflow-wrap: break-word; } .whitespace-nowrap { white-space: nowrap; } .whitespace-pre { white-space: pre; } .whitespace-pre-wrap { white-space: pre-wrap; } .text-accent-ink { color: var(--accent-ink); } .text-black { color: var(--color-black); } .text-blue-600 { color: var(--color-blue-600); } .text-canvas { color: var(--canvas); } .text-gray-400 { color: var(--color-gray-400); } .text-gray-500 { color: var(--color-gray-500); } .text-gray-600 { color: var(--color-gray-600); } .text-gray-700 { color: var(--color-gray-700); } .text-gray-800 { color: var(--color-gray-800); } .text-gray-900 { color: var(--color-gray-900); } .text-green { color: var(--green); } .text-green-700 { color: var(--color-green-700); } .text-ink { color: var(--ink); } .text-ink-2 { color: var(--ink-2); } .text-ink-3 { color: var(--ink-3); } .text-orange { color: var(--orange); } .text-orange-700 { color: var(--color-orange-700); } .text-red { color: var(--red); } .text-red-600 { color: var(--color-red-600); } .text-red-700 { color: var(--color-red-700); } .text-transparent { color: rgba(0, 0, 0, 0); } .text-white { color: var(--color-white); } .lowercase { text-transform: lowercase; } .uppercase { text-transform: uppercase; } .italic { font-style: italic; } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } .line-through { text-decoration-line: line-through; } .underline { text-decoration-line: underline; } .underline-offset-2 { text-underline-offset: 2px; } .accent-\[var\(--accent\)\] { accent-color: var(--accent); } .opacity-0 { opacity: 0; } .opacity-50 { opacity: 0.5; } .opacity-55 { opacity: 0.55; } .opacity-60 { opacity: 0.6; } .opacity-70 { opacity: 0.7; } .opacity-90 { opacity: 0.9; } .shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.03\)\] { --tw-shadow: 0 1px 2px var(--tw-shadow-color,#00000008); } .shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.03\)\], .shadow-\[inset_0_1px_0_rgba\(255\,255\,255\,0\.14\)\] { box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); } .shadow-\[inset_0_1px_0_rgba\(255\,255\,255\,0\.14\)\] { --tw-shadow: inset 0 1px 0 var(--tw-shadow-color,#ffffff24); } .shadow-btn { --tw-shadow: var(--shadow-btn); } .shadow-btn, .shadow-card { box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); } .shadow-card { --tw-shadow: var(--shadow-card); } .shadow-hairline { --tw-shadow: var(--shadow-hairline); } .shadow-hairline, .shadow-lg { box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 25px 50px 0 var(--tw-shadow-color,#0000000d),0 12px 24px 0 var(--tw-shadow-color,#0000000a),0 6px 12px 0 var(--tw-shadow-color,#00000008),0 3px 6px 0 var(--tw-shadow-color,#00000005),0 1.5px 3px 0 var(--tw-shadow-color,#00000005); } .shadow-none { --tw-shadow: 0 0 #0000; } .shadow-none, .shadow-overlay { box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); } .shadow-overlay { --tw-shadow: var(--shadow-overlay); } .shadow-raised { --tw-shadow: var(--shadow-raised); } .shadow-raised, .shadow-sm { box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 18px 47px 0 var(--tw-shadow-color,#00000008),0 7.5px 19px 0 var(--tw-shadow-color,#00000005),0 4px 10.5px 0 var(--tw-shadow-color,#00000005),0 2.3px 5.8px 0 var(--tw-shadow-color,#00000003),0 1.2px 3.1px 0 var(--tw-shadow-color,#00000003),0 .5px 1.3px 0 var(--tw-shadow-color,#00000003); } .ring, .ring-1 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor); } .ring, .ring-1, .ring-2 { box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); } .ring-2 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor); } .ring-accent { --tw-ring-color: var(--accent); } .ring-inset { --tw-ring-color: var(--inset); } .ring-line { --tw-ring-color: var(--line); } .ring-transparent { --tw-ring-color: transparent; } .filter { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .transition-\[border-color\,box-shadow\,background-color\] { transition-property: border-color, box-shadow, background-color; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); } .transition-\[opacity\,transform\] { transition-property: opacity, transform; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); } .transition-\[transform\,background-color\,opacity\] { transition-property: transform, background-color, opacity; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); } .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); } .transition-opacity { transition-property: opacity; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); } .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); } .duration-100 { --tw-duration: .1s; transition-duration: 0.1s; } .duration-150 { --tw-duration: .15s; transition-duration: 0.15s; } .ease-out { --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); } .outline-none { --tw-outline-style: none; outline-style: none; } .select-none { user-select: none; } .ring-inset { --tw-ring-inset: inset; } .group-open\:rotate-0:is(:where(.group):is([open], :popover-open, :open) *) { rotate: 0deg; } @media (hover: hover) { .group-hover\:opacity-80:is(:where(.group):hover *) { opacity: 0.8; } .group-hover\/chat\:opacity-100:is(:where(.group\/chat):hover *), .group-hover\:opacity-100:is(:where(.group):hover *) { opacity: 1; } } .placeholder\:text-gray-400::placeholder { color: var(--color-gray-400); } .placeholder\:text-ink-3::placeholder { color: var(--ink-3); } .last\:border-0:last-child { border-style: var(--tw-border-style); border-width: 0px; } .even\:bg-gray-50:nth-child(2n) { background-color: var(--color-gray-50); } @media (hover: hover) { .hover\:border-gray-400:hover { border-color: var(--color-gray-400); } .hover\:bg-accent-ink:hover { background-color: var(--accent-ink); } .hover\:bg-black:hover { background-color: var(--color-black); } .hover\:bg-gray-50:hover { background-color: var(--color-gray-50); } .hover\:bg-gray-100:hover { background-color: var(--color-gray-100); } .hover\:bg-gray-200:hover { background-color: var(--color-gray-200); } .hover\:bg-gray-800:hover { background-color: var(--color-gray-800); } .hover\:bg-hover:hover { background-color: var(--hover); } .hover\:bg-hover-2:hover { background-color: var(--hover-2); } .hover\:bg-inset:hover { background-color: var(--inset); } .hover\:bg-line-strong:hover { background-color: var(--line-strong); } .hover\:text-gray-700:hover { color: var(--color-gray-700); } .hover\:text-gray-900:hover { color: var(--color-gray-900); } .hover\:text-ink:hover { color: var(--ink); } .hover\:text-red:hover { color: var(--red); } .hover\:underline:hover { text-decoration-line: underline; } .hover\:opacity-90:hover { opacity: 0.9; } .hover\:brightness-95:hover { --tw-brightness: brightness(95%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } } .focus\:border-gray-400:focus { border-color: var(--color-gray-400); } .focus\:border-gray-900:focus { border-color: var(--color-gray-900); } .focus\:border-line-strong:focus { border-color: var(--line-strong); } .focus\:bg-surface:focus { background-color: var(--surface); } .focus\:shadow-none:focus { --tw-shadow: 0 0 #0000; } .focus\:ring-1:focus, .focus\:shadow-none:focus { box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); } .focus\:ring-1:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor); } .focus\:ring-gray-900:focus { --tw-ring-color: var(--color-gray-900); } .focus-visible\:opacity-100:focus-visible { opacity: 1; } .active\:scale-\[0\.94\]:active { scale: 0.94; } .active\:scale-\[0\.96\]:active { scale: 0.96; } .disabled\:pointer-events-none:disabled { pointer-events: none; } .disabled\:cursor-default:disabled { cursor: default; } .disabled\:opacity-30:disabled { opacity: 0.3; } .disabled\:opacity-40:disabled { opacity: 0.4; } .disabled\:opacity-50:disabled { opacity: 0.5; } .disabled\:opacity-60:disabled { opacity: 0.6; } .has-\[\:checked\]\:bg-accent-tint:has(:checked) { background-color: var(--accent-tint); } .has-\[\:checked\]\:shadow-\[0_0_0_1px_var\(--accent\)\]:has(:checked) { --tw-shadow: 0 0 0 1px var(--tw-shadow-color,var(--accent)); box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); } .aria-expanded\:bg-hover[aria-expanded="true"] { background-color: var(--hover); } @media (min-width: 40rem) { .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); } .sm\:px-6 { padding-inline: calc(var(--spacing) * 6); } .sm\:px-12 { padding-inline: calc(var(--spacing) * 12); } .sm\:text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading,var(--text-4xl--line-height)); } } @media (min-width: 64rem) { .lg\:flex { display: flex; } .lg\:hidden { display: none; } } @media (min-width: 80rem) { .xl\:w-\[520px\] { width: 520px; } } .dark\:border-green\/30:where(.dark, .dark *) { border-color: var(--green); } @supports (color:color-mix(in lab,red,red)) { .dark\:border-green\/30:where(.dark, .dark *) { border-color: color-mix(in oklab,var(--green) 30%,transparent); } } .dark\:border-ink:where(.dark, .dark *) { border-color: var(--ink); } .dark\:border-line:where(.dark, .dark *) { border-color: var(--line); } .dark\:border-line-strong:where(.dark, .dark *) { border-color: var(--line-strong); } .dark\:border-red\/40:where(.dark, .dark *) { border-color: var(--red); } @supports (color:color-mix(in lab,red,red)) { .dark\:border-red\/40:where(.dark, .dark *) { border-color: color-mix(in oklab,var(--red) 40%,transparent); } } .dark\:bg-field:where(.dark, .dark *) { background-color: var(--field); } .dark\:bg-green-tint:where(.dark, .dark *) { background-color: var(--green-tint); } .dark\:bg-hover-2:where(.dark, .dark *) { background-color: var(--hover-2); } .dark\:bg-ink:where(.dark, .dark *) { background-color: var(--ink); } .dark\:bg-inset:where(.dark, .dark *) { background-color: var(--inset); } .dark\:bg-page:where(.dark, .dark *) { background-color: var(--page); } .dark\:bg-red-tint:where(.dark, .dark *) { background-color: var(--red-tint); } .dark\:bg-surface:where(.dark, .dark *) { background-color: var(--surface); } .dark\:from-surface:where(.dark, .dark *) { --tw-gradient-from: var(--surface); --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position)); } .dark\:to-surface:where(.dark, .dark *) { --tw-gradient-to: var(--surface); --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position)); } .dark\:text-accent-ink:where(.dark, .dark *) { color: var(--accent-ink); } .dark\:text-canvas:where(.dark, .dark *) { color: var(--canvas); } .dark\:text-green:where(.dark, .dark *) { color: var(--green); } .dark\:text-ink:where(.dark, .dark *) { color: var(--ink); } .dark\:text-ink-2:where(.dark, .dark *) { color: var(--ink-2); } .dark\:text-ink-3:where(.dark, .dark *) { color: var(--ink-3); } .dark\:text-page:where(.dark, .dark *) { color: var(--page); } .dark\:text-red:where(.dark, .dark *) { color: var(--red); } .dark\:placeholder\:text-ink-3:where(.dark, .dark *)::placeholder { color: var(--ink-3); } .dark\:even\:bg-inset:where(.dark, .dark *):nth-child(2n) { background-color: var(--inset); } @media (hover: hover) { .dark\:hover\:bg-hover:where(.dark, .dark *):hover { background-color: var(--hover); } .dark\:hover\:bg-hover-2:where(.dark, .dark *):hover { background-color: var(--hover-2); } .dark\:hover\:bg-ink:where(.dark, .dark *):hover { background-color: var(--ink); } .dark\:hover\:text-ink:where(.dark, .dark *):hover { color: var(--ink); } } .\[\&_\*\]\:text-ink * { color: var(--ink); } .\[\&_a\]\:text-gray-900 a { color: var(--color-gray-900); } .\[\&_a\]\:underline a { text-decoration-line: underline; } .\[\&_a\]\:underline-offset-2 a { text-underline-offset: 2px; } .\[\&_h2\]\:mt-10 h2 { margin-top: calc(var(--spacing) * 10); } .\[\&_h2\]\:mb-3 h2 { margin-bottom: calc(var(--spacing) * 3); } .\[\&_h2\]\:text-lg h2 { font-size: var(--text-lg); line-height: var(--tw-leading,var(--text-lg--line-height)); } .\[\&_h2\]\:font-semibold h2 { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .\[\&_h2\]\:text-gray-900 h2 { color: var(--color-gray-900); } .\[\&_h3\]\:mt-6 h3 { margin-top: calc(var(--spacing) * 6); } .\[\&_h3\]\:mb-2 h3 { margin-bottom: calc(var(--spacing) * 2); } .\[\&_h3\]\:font-semibold h3 { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .\[\&_h3\]\:text-gray-900 h3 { color: var(--color-gray-900); } .\[\&_li\]\:mt-1\.5 li { margin-top: calc(var(--spacing) * 1.5); } .\[\&_p\]\:mt-3 p { margin-top: calc(var(--spacing) * 3); } .\[\&_strong\]\:font-semibold strong { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .\[\&_strong\]\:text-gray-900 strong { color: var(--color-gray-900); } .\[\&_ul\]\:mt-3 ul { margin-top: calc(var(--spacing) * 3); } .\[\&_ul\]\:list-disc ul { list-style-type: disc; } .\[\&_ul\]\:pl-5 ul { padding-left: calc(var(--spacing) * 5); } .\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker { display: none; } } :root { --smooth-ring-color: #0000000d; --smooth-ring-width: 1px; } @supports (color:light-dark(black,white)) { :root { --smooth-ring-color: light-dark(#0000000d,#ffffff2e); } } .light, [data-theme="light"] { --smooth-ring-color: #0000000d; } .dark, [data-theme="dark"] { --smooth-ring-color: #ffffff2e; } :root { --page: oklch(98.5% .001 286.376); --canvas: oklch(96.1% .002 247.84); --surface: oklch(100% 0 0); --inset: oklch(97.9% .002 247.839); --hover: oklch(97% .002 247.839); --hover-2: oklch(93.3% .003 247.86); --ink: oklch(24.7% .006 258.361); --ink-2: oklch(50.6% .01 264.477); --ink-3: oklch(69.5% .009 264.505); --line: oklch(94.6% .003 264.542); --line-strong: oklch(91.2% .005 258.326); --line-soft: oklch(96.6% .002 264.542); --grid-line: var(--line); } @supports (color:color-mix(in lab,red,red)) { :root { --grid-line: color-mix(in srgb,var(--line) 78%,transparent); } } :root { --field: oklch(96.1% .001 286.375); --stripe: oklch(40.5% 0 0/.075); --stripe-bg: oklch(97% 0 0); --accent: oklch(62.6% .205 254.947); --accent-ink: oklch(55.6% .187 255.617); --accent-tint: oklch(96% .019 252.878); --green: oklch(60.3% .155 150.883); --green-tint: oklch(95.8% .017 159.118); --orange: oklch(68.9% .179 49.902); --orange-tint: oklch(96.4% .021 67.581); --red: oklch(62.1% .192 23.042); --red-tint: oklch(95.6% .017 17.462); --tooltip-bg: oklch(27.2% .008 264.435); --tooltip-fg: oklch(97.6% .002 247.839); --tooltip-muted: oklch(73.1% .008 260.731); --tooltip-border: oklch(35.6% .007 264.474); --shadow-hairline: 0 0 0 1px var(--line); --shadow-btn: 0 0 0 1px var(--line-strong),var(--shadow-xs); --shadow-card: 0 0 0 1px var(--line),var(--shadow-sm); --shadow-raised: 0 0 0 1px var(--line),var(--shadow-md); --shadow-overlay: 0 0 0 1px var(--line),var(--shadow-lg); --shadow-inset-field: inset 0 1px 2px oklch(0% 0 0/.12); } .dark { --page: oklch(20.9% .004 264.477); --canvas: oklch(23.1% .004 264.487); --surface: oklch(26% .006 271.191); --inset: oklch(24.3% .004 264.492); --hover: oklch(28.9% .006 271.22); --hover-2: oklch(31.8% .007 274.747); --ink: oklch(96.4% .002 247.839); --ink-2: oklch(73.1% .008 260.731); --ink-3: oklch(54.1% .01 264.484); --line: oklch(30.8% .006 258.354); --line-strong: oklch(35.6% .007 264.474); --line-soft: oklch(27.8% .006 258.354); --field: oklch(29.3% .006 271.223); --stripe: oklch(100% 0 0/.055); --stripe-bg: oklch(22.6% .004 264.485); --accent: oklch(68% .173 253.301); --accent-ink: oklch(78.8% .113 248.33); --accent-tint: oklch(68% .173 253.301/.16); --green: oklch(70.5% .154 153.814); --green-tint: oklch(70.5% .154 153.814/.14); --orange: oklch(74.6% .156 55.642); --orange-tint: oklch(74.6% .156 55.642/.14); --red: oklch(66.6% .18 21.433); --red-tint: oklch(66.6% .18 21.433/.14); --tooltip-bg: oklch(18.2% .004 264.459); --tooltip-fg: oklch(96.4% .002 247.839); --tooltip-muted: oklch(73.1% .008 260.731); --tooltip-border: oklch(30.8% .006 258.354); --shadow-hairline: 0 0 0 1px var(--line); --shadow-btn: 0 0 0 1px oklch(100% 0 0/.1),0 1px 2px oklch(0% 0 0/.3); --shadow-card: 0 0 0 1px oklch(100% 0 0/.11),0 1px 2px oklch(0% 0 0/.2),0 2px 6px oklch(0% 0 0/.2); --shadow-raised: 0 0 0 1px oklch(100% 0 0/.13),0 2px 10px oklch(0% 0 0/.22); --shadow-overlay: 0 0 0 1px oklch(100% 0 0/.15),0 8px 28px oklch(0% 0 0/.34); --shadow-inset-field: inset 0 1px 2px oklch(0% 0 0/.4); } html { -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; } body { background-color: var(--stripe-bg); background-image: repeating-linear-gradient(-45deg,transparent 0,transparent 7px,var(--stripe) 7px,var(--stripe) 8px); color: var(--ink); font-feature-settings: "cv11", "ss01"; letter-spacing: -0.01em; background-attachment: fixed; font-size: 14px; line-height: 1.5; } ::selection { background: var(--accent-tint); color: var(--ink); } h1, h2, h3, h4 { text-wrap: balance; } p { text-wrap: pretty; } a { text-underline-position: from-font; text-decoration-skip-ink: auto; } .theme-switching *, .theme-switching ::after, .theme-switching ::before { transition: none !important; } @media (hover: none) { .records-row:hover > .records-cell { background: 0px 0px; } .records-row:hover > td.is-colsel { background: var(--accent); } @supports (color:color-mix(in lab,red,red)) { .records-row:hover > td.is-colsel { background: color-mix(in srgb,var(--accent) 4%,var(--surface)); } } .records-header-button:hover { color: var(--ink-2); background: 0px 0px; } } .component-nav-scroll { scrollbar-width: none; } .component-nav-scroll::-webkit-scrollbar { display: none; } @media (min-width: 64rem) { .component-nav-scroll { mask-image: linear-gradient(oklch(0 0 0) 0px, oklch(0 0 0) calc(100% - 6rem), rgba(0, 0, 0, 0) 100%); } } @media (hover: none) and (pointer: coarse) { .primitive-showcase { user-select: none; } .primitive-showcase :is(input, textarea, [contenteditable="true"], pre, code) { user-select: text; } .primitive-showcase :is(a, button, [role="button"]) { -webkit-tap-highlight-color: transparent; } .primitive-showcase :is(a, button, [role="button"]):focus-visible { outline: none; } .primitive-showcase :is(img, svg, canvas) { -webkit-user-drag: none; } .insight-chart-stage { touch-action: pan-y; } } [role="button"]:not([aria-disabled="true"]), a, button:not(:disabled), label:has(input) { cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } [contenteditable]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; } .animated-underline { display: inline-block; position: relative; } .animated-underline::after { content: ""; transform-origin: 0px center; height: 1px; transition: transform .28s var(--ease-link); background: currentcolor; position: absolute; bottom: -1px; left: 0px; right: 0px; transform: scaleX(0); } a:focus-visible .animated-underline::after, a:hover .animated-underline::after { transform: scaleX(1); } .source-avatar { box-shadow: oklch(0.21 0.034 263.436 / 0.1) 0px 0px 0px 1px; } .dark .source-avatar { box-shadow: oklch(1 0 0 / 0.08) 0px 0px 0px 1px; } .primitive-card-pad { padding: 12px; } .primitive-card-bar { padding: 10px 12px; } .primitive-card-footer { padding: 10px; } .primitive-table-cell { padding: 10px 12px; } .primitive-icon-button { border-radius: var(--radius-control); justify-content: center; align-items: center; width: 28px; height: 28px; display: inline-flex; } @keyframes shimmer-text { 0% { background-position: 150% center; } 100% { background-position: -50% center; } } @keyframes fade-up { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0px); } } .home-reveal { will-change: opacity, transform, filter; } .filter-status-done, .filter-status-progress, .filter-status-todo { border: 1px solid rgba(0, 0, 0, 0); } .insight-chart-stage { overflow: hidden; } .insight-chart-cursor { z-index: 4; background: var(--ink); opacity: 0.26; pointer-events: none; width: 1px; position: absolute; top: 0px; bottom: 0px; } .insight-chart-tooltip-anchor { z-index: 5; pointer-events: none; position: absolute; top: 8px; transform: translate(-50%); } .insight-chart-tooltip { border: 1px solid var(--line-strong); color: var(--tooltip-fg); background: var(--tooltip-bg); box-shadow: var(--shadow-overlay); font-variant-numeric: tabular-nums; white-space: nowrap; border-radius: 8px; align-items: center; gap: 12px; padding: 5px 9px; font-size: 11.5px; display: flex; } .insight-chart-tooltip-item { align-items: center; gap: 6px; display: inline-flex; } .insight-chart-tooltip-dot { border-radius: 50%; flex: 0 0 8px; width: 8px; height: 8px; } .filter-status-todo { --tag-base: oklch(75.7% .153 66.401); } .filter-status-progress { --tag-base: oklch(67.1% .118 219.351); } .filter-status-done { --tag-base: oklch(65.2% .131 162.865); } .filter-status-done, .filter-status-progress, .filter-status-todo { color: var(--tag-base); } @supports (color:color-mix(in lab,red,red)) { .filter-status-done, .filter-status-progress, .filter-status-todo { color: color-mix(in srgb,var(--tag-base) 92%,var(--ink)); } } .filter-status-done, .filter-status-progress, .filter-status-todo { background: var(--tag-base); } @supports (color:color-mix(in lab,red,red)) { .filter-status-done, .filter-status-progress, .filter-status-todo { background: color-mix(in srgb,var(--tag-base) 20%,var(--surface)); } } .filter-status-done, .filter-status-progress, .filter-status-todo { border-color: var(--tag-base); } @supports (color:color-mix(in lab,red,red)) { .filter-status-done, .filter-status-progress, .filter-status-todo { border-color: color-mix(in srgb,var(--tag-base) 34%,var(--surface)); } } .dark .filter-status-done, .dark .filter-status-progress, .dark .filter-status-todo, .dark .records-tag { color: var(--tag-base); } @supports (color:color-mix(in lab,red,red)) { .dark .filter-status-done, .dark .filter-status-progress, .dark .filter-status-todo, .dark .records-tag { color: color-mix(in srgb,var(--tag-base) 86%,white); } } .dark .filter-status-done, .dark .filter-status-progress, .dark .filter-status-todo, .dark .records-tag { background: var(--tag-base); } @supports (color:color-mix(in lab,red,red)) { .dark .filter-status-done, .dark .filter-status-progress, .dark .filter-status-todo, .dark .records-tag { background: color-mix(in srgb,var(--tag-base) 34%,var(--surface)); } } .dark .filter-status-done, .dark .filter-status-progress, .dark .filter-status-todo, .dark .records-tag { border-color: var(--tag-base); } @supports (color:color-mix(in lab,red,red)) { .dark .filter-status-done, .dark .filter-status-progress, .dark .filter-status-todo, .dark .records-tag { border-color: color-mix(in srgb,var(--tag-base) 34%,var(--surface)); } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes eq-bounce { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } } .stream-tail { filter: blur(1.6px); mask-image: linear-gradient(90deg, oklch(0 0 0) 20%, oklch(0 0 0 / 0.2)); } .stream-caret { background: var(--ink); vertical-align: text-bottom; border-radius: 1px; width: 2px; height: 1.05em; margin-left: 1.5px; animation: 1s step-end 0s infinite normal none running caret-blink; display: inline-block; translate: 0px -0.5px; } .stream-caret.is-streaming { animation: auto ease 0s 1 normal none running none; } @keyframes caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .stream-caret { animation: auto ease 0s 1 normal none running none; } .stream-tail { filter: none; mask-image: none; } } @keyframes pop-in { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } @keyframes spin { 100% { transform: rotate(1turn); } } @keyframes pixel-on { 0%, 100% { opacity: 0.15; } 18%, 42% { opacity: 1; } 62% { opacity: 0.15; } } @media (prefers-reduced-motion: reduce) { *, ::after, ::before { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } :root { --font-inter: var(--font-inter-next),"Inter"; --font-mono-face: var(--font-mono-next),"JetBrains Mono"; } body, html { height: 100%; } body { background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-image: none; } .lh-viz { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; } .dark .lh-viz { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; } input:-webkit-autofill, input:-webkit-autofill:hover { -webkit-text-fill-color: var(--color-ink); box-shadow: 0 0 0 1000px var(--color-field) inset; caret-color: var(--color-ink); transition: background-color 9999s ease-out; } input:-webkit-autofill:focus, textarea:-webkit-autofill { -webkit-text-fill-color: var(--color-ink); box-shadow: 0 0 0 1000px var(--color-field) inset; caret-color: var(--color-ink); transition: background-color 9999s ease-out; } select:-webkit-autofill { -webkit-text-fill-color: var(--color-ink); box-shadow: 0 0 0 1000px var(--color-field) inset; caret-color: var(--color-ink); transition: background-color 9999s ease-out; } @keyframes dt-shine-sweep { 0% { background-position: -200% 0px; } 100% { background-position: 200% 0px; } } .dt-shine { color: rgba(0, 0, 0, 0); background: linear-gradient(90deg, rgb(156, 163, 175) 0px, rgb(156, 163, 175) 30%, rgb(31, 41, 55) 42%, rgb(255, 255, 255) 50%, rgb(31, 41, 55) 58%, rgb(156, 163, 175) 70%, rgb(156, 163, 175) 100%) 0px 0px / 200% 100% text; animation: 1.7s ease-in-out 0s infinite normal none running dt-shine-sweep; } @keyframes dt-task-in { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: translateY(0px); } } .dt-task { animation: 0.4s ease-out 0s 1 normal both running dt-task-in; } @keyframes dt-check-in { 0% { opacity: 0; transform: scale(0.4); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } .dt-check { animation: 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0s 1 normal both running dt-check-in; } @keyframes dt-fade-slide { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: translateY(0px); } } .dt-fade { animation: 0.25s ease-out 0s 1 normal none running dt-fade-slide; } @keyframes dt-grid-pulse { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } } .dt-grid-dot { animation: 1.2s ease-in-out 0s infinite normal none running dt-grid-pulse; } .dark .dt-shine { background-image: linear-gradient(90deg, rgb(107, 114, 128) 0px, rgb(107, 114, 128) 30%, rgb(229, 231, 235) 42%, rgb(255, 255, 255) 50%, rgb(229, 231, 235) 58%, rgb(107, 114, 128) 70%, rgb(107, 114, 128) 100%); } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-gradient-position { syntax: "*"; inherits: false; } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-stops { syntax: "*"; inherits: false; } @property --tw-gradient-via-stops { syntax: "*"; inherits: false; } @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0; } @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-leading { syntax: "*"; inherits: false; } @property --tw-font-weight { syntax: "*"; inherits: false; } @property --tw-tracking { syntax: "*"; inherits: false; } @property --tw-ordinal { syntax: "*"; inherits: false; } @property --tw-slashed-zero { syntax: "*"; inherits: false; } @property --tw-numeric-figure { syntax: "*"; inherits: false; } @property --tw-numeric-spacing { syntax: "*"; inherits: false; } @property --tw-numeric-fraction { syntax: "*"; inherits: false; } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false; } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false; } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false; } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false; } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false; } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-blur { syntax: "*"; inherits: false; } @property --tw-brightness { syntax: "*"; inherits: false; } @property --tw-contrast { syntax: "*"; inherits: false; } @property --tw-grayscale { syntax: "*"; inherits: false; } @property --tw-hue-rotate { syntax: "*"; inherits: false; } @property --tw-invert { syntax: "*"; inherits: false; } @property --tw-opacity { syntax: "*"; inherits: false; } @property --tw-saturate { syntax: "*"; inherits: false; } @property --tw-sepia { syntax: "*"; inherits: false; } @property --tw-drop-shadow { syntax: "*"; inherits: false; } @property --tw-drop-shadow-color { syntax: "*"; inherits: false; } @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false; } @property --tw-duration { syntax: "*"; inherits: false; } @property --tw-ease { syntax: "*"; inherits: false; } @keyframes pulse { 50% { opacity: 0.5; } } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/ba9851c3c22cd980-s.woff2") format("woff2"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/21350d82a1f187e9-s.woff2") format("woff2"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/c5fe6dc8356a8c31-s.woff2") format("woff2"); unicode-range: U+1F00-1FFF; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/19cfc7226ec3afaa-s.woff2") format("woff2"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/df0a9ae256c0569c-s.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/8e9860b6e62d6359-s.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/e4af272ccee01ff0-s.p.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter Fallback"; src: local("Arial"); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; } .__className_d8ebd1 { font-family: Inter, "Inter Fallback"; font-style: normal; } .__variable_d8ebd1 { --font-inter-next: "Inter","Inter Fallback"; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/_next/static/media/886030b0b59bc5a7-s.woff2") format("woff2"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/_next/static/media/0aa834ed78bf6d07-s.woff2") format("woff2"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/_next/static/media/67957d42bae0796d-s.woff2") format("woff2"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/_next/static/media/f911b923c6adde36-s.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/_next/static/media/939c4f875ee75fbb-s.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/_next/static/media/bb3ef058b751a6ad-s.p.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono Fallback"; src: local("Arial"); ascent-override: 75.79%; descent-override: 22.29%; line-gap-override: 0%; size-adjust: 134.59%; } .__className_4dc837 { font-family: "JetBrains Mono", "JetBrains Mono Fallback"; font-style: normal; } .__variable_4dc837 { --font-mono-next: "JetBrains Mono","JetBrains Mono Fallback"; } @layer clerk { .cl-internal-151wlmb { box-sizing: border-box; width: fit-content; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-style: normal; } } @layer clerk { .cl-internal-ppiu2p { isolation: isolate; max-width: calc(-2.5rem + 100vw); width: 25rem; border-style: solid; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); border-radius: calc(1rem); color: rgb(17, 24, 39); position: relative; overflow: hidden; border-width: 0px; box-shadow: 0px 5px 15px 0px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 8%),0px 15px 35px -5px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 20%),0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } } @layer clerk { .cl-internal-1kmeu1r { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; isolation: isolate; max-width: calc(-2.5rem + 100vw); width: 25rem; border-style: solid; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); border-radius: calc(1rem); color: rgb(17, 24, 39); position: relative; overflow: hidden; border-width: 0px; box-shadow: 0px 5px 15px 0px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 8%),0px 15px 35px -5px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 20%),0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } } @layer clerk { .cl-internal-1vu4pdb { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; isolation: isolate; max-width: calc(-2.5rem + 100vw); width: 25rem; border-style: solid; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); border-radius: calc(1rem); color: rgb(17, 24, 39); position: relative; overflow: hidden; border-width: 0px; box-shadow: 0px 5px 15px 0px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 8%),0px 15px 35px -5px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 20%),0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } } @layer clerk { .cl-internal-jg3nn9 { background-color: rgb(255, 255, 255); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 200ms; text-align: center; z-index: 10; border-style: solid; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); border-radius: calc(0.666667rem); position: relative; padding: calc(var(--clerk-spacing, 1rem) * 2) calc(var(--clerk-spacing, 1rem) * 2.5); -webkit-box-pack: center; place-content: center; margin-block-start: -1px; margin-inline: -1px; border-width: 0px; box-shadow: 0px 0px 2px 0px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 8%),0px 1px 2px 0px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 6%),0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 3%); } } @layer clerk { .cl-internal-1wvi3u7 { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; gap: calc(var(--clerk-spacing, 1rem) * 2); background-color: rgb(255, 255, 255); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 200ms; text-align: center; z-index: 10; border-style: solid; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); border-radius: calc(0.666667rem); position: relative; padding: calc(var(--clerk-spacing, 1rem) * 2) calc(var(--clerk-spacing, 1rem) * 2.5); -webkit-box-pack: center; place-content: center; margin-block-start: -1px; margin-inline: -1px; border-width: 0px; box-shadow: 0px 0px 2px 0px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 8%),0px 1px 2px 0px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 6%),0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 3%); } } @layer clerk { .cl-internal-156d19r { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; gap: calc(var(--clerk-spacing, 1rem) * 2); background-color: rgb(255, 255, 255); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 200ms; text-align: center; z-index: 10; border-style: solid; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); border-radius: calc(0.666667rem); position: relative; padding: calc(var(--clerk-spacing, 1rem) * 2) calc(var(--clerk-spacing, 1rem) * 2.5); -webkit-box-pack: center; place-content: center; margin-block-start: -1px; margin-inline: -1px; border-width: 0px; box-shadow: 0px 0px 2px 0px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 8%),0px 1px 2px 0px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 6%),0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 3%); } } @layer clerk { .cl-internal-1401ma { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: var(--clerk-spacing, 1rem); } } @layer clerk { .cl-internal-1f4p2mz { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: var(--clerk-spacing, 1rem); } } @layer clerk { .cl-internal-1ojlvuy { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 0.25); } } @layer clerk { .cl-internal-x0fvpz { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 0.25); } } @layer clerk { .cl-internal-4ksob8 { box-sizing: border-box; color: rgb(17, 24, 39); margin: 0px; text-wrap: balance; font-family: inherit; letter-spacing: normal; font-weight: var(--clerk-font-weight-bold, 700); font-size: var(--clerk-font-size-lg, calc(var(--clerk-font-size, 0.8125rem) * 17 / 13)); line-height: calc(1.41176); } } @layer clerk { .cl-internal-17hg0sr { overflow-wrap: break-word; } } @layer clerk { .cl-internal-1af6ceg { box-sizing: border-box; margin: 0px; font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); text-wrap: pretty; font-family: inherit; letter-spacing: normal; font-weight: var(--clerk-font-weight-normal, var(--clerk-font-weight, 400)); line-height: calc(1.38462); color: rgb(107, 114, 128); overflow-wrap: break-word; } .cl-internal-1af6ceg:disabled, .cl-internal-1af6ceg[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } } @layer clerk { .cl-internal-1hzklve { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 1.5); } } @layer clerk { .cl-internal-vvtys3 { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 1.5); } } @layer clerk { .cl-internal-1grkfuk { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 0.5); } } @layer clerk { .cl-internal-kpc0nc { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 0.5); } } @layer clerk { .cl-internal-jw6knv { -webkit-box-pack: center; justify-content: center; grid-template-columns: repeat(1, minmax(0px, 1fr)); } } @layer clerk { .cl-internal-9zv1kb { display: grid; -webkit-box-align: stretch; align-items: stretch; gap: calc(var(--clerk-spacing, 1rem) * 0.5); -webkit-box-pack: center; justify-content: center; grid-template-columns: repeat(1, minmax(0px, 1fr)); } } @layer clerk { .cl-internal-twlk36 { box-sizing: border-box; display: grid; -webkit-box-align: stretch; align-items: stretch; gap: calc(var(--clerk-spacing, 1rem) * 0.5); -webkit-box-pack: center; justify-content: center; grid-template-columns: repeat(1, minmax(0px, 1fr)); } } @layer clerk { .cl-internal-z1qyxy { gap: var(--clerk-spacing, 1rem); position: relative; -webkit-box-pack: start; justify-content: flex-start; } .cl-internal-z1qyxy[data-variant="solid"] { border-width: 0px; } .cl-internal-z1qyxy[data-variant="solid"]::after { position: absolute; content: ""; border-radius: inherit; z-index: -1; inset: 0px; opacity: 1; transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 100ms; background: linear-gradient(rgba(255, 255, 255, 0.11) 0%, transparent 100%); } .cl-internal-z1qyxy[data-variant="solid"]:hover::after { opacity: 0; } .cl-internal-z1qyxy[data-variant="solid"]:active::after { opacity: 1; } .cl-internal-z1qyxy[data-variant="solid"][data-color="primary"] { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-z1qyxy[data-variant="solid"][data-color="primary"]:focus { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-z1qyxy[data-variant="solid"][data-color="primary"]:focus:not(:focus-visible) { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-z1qyxy[data-variant="solid"][data-color="primary"]:focus-visible { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-z1qyxy[data-variant="solid"][data-color="danger"] { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-z1qyxy[data-variant="solid"][data-color="danger"]:focus { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-z1qyxy[data-variant="solid"][data-color="danger"]:focus:not(:focus-visible) { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-z1qyxy[data-variant="solid"][data-color="danger"]:focus-visible { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-z1qyxy[data-variant="outline"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-z1qyxy[data-variant="outline"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-z1qyxy[data-variant="outline"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-z1qyxy[data-variant="outline"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-z1qyxy[data-variant="bordered"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-z1qyxy[data-variant="bordered"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-z1qyxy[data-variant="bordered"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-z1qyxy[data-variant="bordered"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } } @layer clerk { .cl-internal-3jzzfg { margin: 0px; padding: calc(var(--clerk-spacing, 1rem) * 0.4375) calc(var(--clerk-spacing, 1rem) * 0.75); border-width: 1px; outline: 0px; user-select: none; cursor: pointer; background-color: unset; color: color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 62%); border-radius: 0.5rem; isolation: isolate; display: inline-flex; -webkit-box-align: center; align-items: center; transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 100ms; font-family: var(--clerk-font-family-buttons, var(--clerk-font-family, inherit)); letter-spacing: normal; font-weight: var(--clerk-font-weight-medium, 500); font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); line-height: calc(1.38462); border-style: solid; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); width: 100%; --accent: #111827; --accentHover: color-mix(in srgb, #111827, white 20%); --border: #111827; --accentContrast: var(--clerk-color-primary-foreground, light-dark(white, black)); --alpha: color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%); gap: var(--clerk-spacing, 1rem); position: relative; -webkit-box-pack: start; justify-content: flex-start; } .cl-internal-3jzzfg:disabled, .cl-internal-3jzzfg[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } .cl-internal-3jzzfg:hover { background-color: color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%); } .cl-internal-3jzzfg:focus-visible { background-color: color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%); border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%); -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: ease; transition-duration: 200ms; } .cl-internal-3jzzfg:focus { -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: ease; transition-duration: 200ms; } .cl-internal-3jzzfg:focus:not(:focus-visible) { box-shadow: none; } .cl-internal-3jzzfg[data-variant="solid"] { border-width: 0px; } .cl-internal-3jzzfg[data-variant="solid"]::after { position: absolute; content: ""; border-radius: inherit; z-index: -1; inset: 0px; opacity: 1; transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 100ms; background: linear-gradient(rgba(255, 255, 255, 0.11) 0%, transparent 100%); } .cl-internal-3jzzfg[data-variant="solid"]:hover::after { opacity: 0; } .cl-internal-3jzzfg[data-variant="solid"]:active::after { opacity: 1; } .cl-internal-3jzzfg[data-variant="solid"][data-color="primary"] { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-3jzzfg[data-variant="solid"][data-color="primary"]:focus { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-3jzzfg[data-variant="solid"][data-color="primary"]:focus:not(:focus-visible) { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-3jzzfg[data-variant="solid"][data-color="primary"]:focus-visible { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-3jzzfg[data-variant="solid"][data-color="danger"] { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-3jzzfg[data-variant="solid"][data-color="danger"]:focus { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-3jzzfg[data-variant="solid"][data-color="danger"]:focus:not(:focus-visible) { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-3jzzfg[data-variant="solid"][data-color="danger"]:focus-visible { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-3jzzfg[data-variant="outline"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-3jzzfg[data-variant="outline"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-3jzzfg[data-variant="outline"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-3jzzfg[data-variant="outline"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-3jzzfg[data-variant="bordered"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-3jzzfg[data-variant="bordered"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-3jzzfg[data-variant="bordered"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-3jzzfg[data-variant="bordered"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } } @layer clerk { .cl-internal-1afp10f { width: 100%; overflow: hidden; } } @layer clerk { .cl-internal-1m8tgpy { display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; gap: calc(var(--clerk-spacing, 1rem) * 0.75); width: 100%; overflow: hidden; } } @layer clerk { .cl-internal-11tkpc3 { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; gap: calc(var(--clerk-spacing, 1rem) * 0.75); width: 100%; overflow: hidden; } } @layer clerk { .cl-internal-18j3vrq { flex: 0 0 var(--clerk-spacing, 1rem); } } @layer clerk { .cl-internal-gpghoi { display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; flex: 0 0 var(--clerk-spacing, 1rem); } } @layer clerk { .cl-internal-1jcbc2a { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; flex: 0 0 var(--clerk-spacing, 1rem); } } @layer clerk { .cl-internal-vn3zkh { display: inline-block; width: 1rem; height: 1rem; max-width: 100%; opacity: 1; background-image: url("https://img.clerk.com/static/google.svg"); background-size: cover; background-position: center center; background-repeat: no-repeat; } } @layer clerk { .cl-internal-16ez36o { box-sizing: border-box; margin: 0px; font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); text-wrap: nowrap pretty; font-family: var(--clerk-font-family-buttons, var(--clerk-font-family, inherit)); letter-spacing: normal; font-weight: var(--clerk-font-weight-medium, 500); line-height: calc(1.38462); color: inherit; text-overflow: ellipsis; white-space-collapse: collapse; overflow: hidden; } .cl-internal-16ez36o:disabled, .cl-internal-16ez36o[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } } @layer clerk { .cl-internal-kk6ji1 { display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } } @layer clerk { .cl-internal-ovdovs { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } } @layer clerk { .cl-internal-1nh648b { flex: 1 1 0%; background-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); height: 1px; } } @layer clerk { .cl-internal-2rvl11 { display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; flex: 1 1 0%; background-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); height: 1px; } } @layer clerk { .cl-internal-1q223lr { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; flex: 1 1 0%; background-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); height: 1px; } } @layer clerk { .cl-internal-1y1uzsb { margin: 0 var(--clerk-spacing, 1rem); } } @layer clerk { .cl-internal-ap9qgs { box-sizing: border-box; font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); text-wrap: pretty; font-family: inherit; letter-spacing: normal; font-weight: var(--clerk-font-weight-normal, var(--clerk-font-weight, 400)); line-height: calc(1.38462); color: rgb(107, 114, 128); margin: 0 var(--clerk-spacing, 1rem); } .cl-internal-ap9qgs:disabled, .cl-internal-ap9qgs[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } } @layer clerk { .cl-internal-1gtme29 { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 2); } } @layer clerk { .cl-internal-ji79b9 { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 2); } } @layer clerk { .cl-internal-1llpz65 { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 1.5); } } @layer clerk { .cl-internal-ht35d7 { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 1.5); } } @layer clerk { .cl-internal-mx8yle { display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: justify; justify-content: space-between; gap: var(--clerk-spacing, 1rem); } } @layer clerk { .cl-internal-k7wlaf { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: justify; justify-content: space-between; gap: var(--clerk-spacing, 1rem); } } @layer clerk { .cl-internal-222wc8 { position: relative; flex: 1 1 auto; } } @layer clerk { .cl-internal-yjg8ip { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; position: relative; flex: 1 1 auto; } } @layer clerk { .cl-internal-10rdw13 { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; position: relative; flex: 1 1 auto; } } @layer clerk { .cl-internal-151yidv { gap: calc(var(--clerk-spacing, 1rem) * 0.5); } } @layer clerk { .cl-internal-h82k1 { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 0.5); } } @layer clerk { .cl-internal-17uj465 { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 0.5); } } @layer clerk { .cl-internal-6fmoj3 { display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between; } } @layer clerk { .cl-internal-66mzqw { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between; } } @layer clerk { .cl-internal-1sr07cd { display: flex; -webkit-box-align: center; align-items: center; } } @layer clerk { .cl-internal-1mq2keo { color: rgb(17, 24, 39); font-family: inherit; letter-spacing: normal; font-weight: var(--clerk-font-weight-medium, 500); font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); line-height: calc(1.38462); display: flex; -webkit-box-align: center; align-items: center; } .cl-internal-1mq2keo:disabled, .cl-internal-1mq2keo[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } } @layer clerk { .cl-internal-t64bqq[data-variant="default"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } .cl-internal-t64bqq[data-variant="default"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); } .cl-internal-t64bqq[data-variant="default"]:focus-within, .cl-internal-t64bqq[data-variant="default"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-t64bqq[data-variant="default"][data-feedback="error"] { box-shadow: color-mix(in srgb, transparent 59%, rgb(220, 38, 38) 41%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px; } .cl-internal-t64bqq[data-variant="default"][data-feedback="error"]:hover { box-shadow: color-mix(in srgb, transparent 47%, rgb(220, 38, 38) 53%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px; } .cl-internal-t64bqq[data-variant="default"][data-feedback="error"]:focus-within, .cl-internal-t64bqq[data-variant="default"][data-feedback="error"][data-focus-within="true"] { box-shadow: color-mix(in srgb, transparent 47%, rgb(220, 38, 38) 53%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-t64bqq[data-variant="default"][data-feedback="warning"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 41%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-t64bqq[data-variant="default"][data-feedback="warning"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-t64bqq[data-variant="default"][data-feedback="warning"]:focus-within, .cl-internal-t64bqq[data-variant="default"][data-feedback="warning"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-t64bqq[data-variant="default"][data-feedback="success"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 41%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } .cl-internal-t64bqq[data-variant="default"][data-feedback="success"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } .cl-internal-t64bqq[data-variant="default"][data-feedback="success"]:focus-within, .cl-internal-t64bqq[data-variant="default"][data-feedback="success"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } } @layer clerk { .cl-internal-1jqxhyo { box-sizing: border-box; margin: 0px; padding: calc(var(--clerk-spacing, 1rem) * 0.4375) calc(var(--clerk-spacing, 1rem) * 0.75); background-color: rgb(255, 255, 255); color: rgb(17, 24, 39); outline: transparent solid 2px; outline-offset: 2px; max-height: 2.25rem; width: 100%; accent-color: rgb(17, 24, 39); font-family: inherit; letter-spacing: normal; font-weight: var(--clerk-font-weight-normal, var(--clerk-font-weight, 400)); font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); line-height: calc(1.38462); border-radius: 0.5rem; border-width: 1px; border-style: solid; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); box-shadow: 0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: ease; transition-duration: 200ms; } .cl-internal-1jqxhyo:disabled, .cl-internal-1jqxhyo[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } @supports (-webkit-touch-callout: none) { .cl-internal-1jqxhyo { font-size: var(--clerk-font-size-lg, calc(var(--clerk-font-size, 0.8125rem) * 17 / 13)); } .cl-internal-1jqxhyo:not([type="checkbox"]):not([type="radio"]) { appearance: none; } } .cl-internal-1jqxhyo:autofill { animation-name: onAutoFillStart; } .cl-internal-1jqxhyo::-webkit-input-placeholder { color: rgb(107, 114, 128); } .cl-internal-1jqxhyo::placeholder { color: rgb(107, 114, 128); } .cl-internal-1jqxhyo:hover { -webkit-tap-highlight-color: transparent; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%); box-shadow: 0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); } .cl-internal-1jqxhyo:focus { border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%); -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); } .cl-internal-1jqxhyo:focus:not(:focus-visible) { border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); box-shadow: 0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } .cl-internal-1jqxhyo:focus-visible { border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%); -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); } .cl-internal-1jqxhyo[data-variant="default"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } .cl-internal-1jqxhyo[data-variant="default"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); } .cl-internal-1jqxhyo[data-variant="default"]:focus-within, .cl-internal-1jqxhyo[data-variant="default"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1jqxhyo[data-variant="default"][data-feedback="error"] { box-shadow: color-mix(in srgb, transparent 59%, rgb(220, 38, 38) 41%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px; } .cl-internal-1jqxhyo[data-variant="default"][data-feedback="error"]:hover { box-shadow: color-mix(in srgb, transparent 47%, rgb(220, 38, 38) 53%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px; } .cl-internal-1jqxhyo[data-variant="default"][data-feedback="error"]:focus-within, .cl-internal-1jqxhyo[data-variant="default"][data-feedback="error"][data-focus-within="true"] { box-shadow: color-mix(in srgb, transparent 47%, rgb(220, 38, 38) 53%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-1jqxhyo[data-variant="default"][data-feedback="warning"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 41%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-1jqxhyo[data-variant="default"][data-feedback="warning"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-1jqxhyo[data-variant="default"][data-feedback="warning"]:focus-within, .cl-internal-1jqxhyo[data-variant="default"][data-feedback="warning"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-1jqxhyo[data-variant="default"][data-feedback="success"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 41%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } .cl-internal-1jqxhyo[data-variant="default"][data-feedback="success"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } .cl-internal-1jqxhyo[data-variant="default"][data-feedback="success"]:focus-within, .cl-internal-1jqxhyo[data-variant="default"][data-feedback="success"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } } @layer clerk { .cl-internal-5ur8x { clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } } @layer clerk { .cl-internal-17w1bz5 { animation: 450ms ease 0s 1 normal none running animation-148r1a6; transition-property: height; transition-duration: 200ms; transition-timing-function: ease; } } @layer clerk { @-webkit-keyframes animation-148r1a6 { 0% { opacity: 1; transform: translateY(0px); max-height: 6rem; visibility: visible; } 100% { opacity: 0; transform: translateY(5px); max-height: 0px; visibility: visible; } } @keyframes animation-148r1a6 { 0% { opacity: 1; transform: translateY(0px); max-height: 6rem; visibility: visible; } 100% { opacity: 0; transform: translateY(5px); max-height: 0px; visibility: visible; } } } @layer clerk { .cl-internal-x8cg1h { display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; animation: 450ms ease 0s 1 normal none running animation-148r1a6; transition-property: height; transition-duration: 200ms; transition-timing-function: ease; } } @layer clerk { .cl-internal-10uqczv { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; animation: 450ms ease 0s 1 normal none running animation-148r1a6; transition-property: height; transition-duration: 200ms; transition-timing-function: ease; } } @layer clerk { .cl-internal-m5xf1l { visibility: visible; animation: 450ms ease 0s 1 normal none running animation-16i29iq; transition-property: height; transition-duration: 200ms; transition-timing-function: ease; } } @layer clerk { @-webkit-keyframes animation-16i29iq { 0% { opacity: 0; transform: translateY(-5px); max-height: 0px; } 50% { opacity: 0; transform: translateY(-5px); max-height: 0px; } 100% { opacity: 1; transform: translateY(0px); max-height: 6rem; } } @keyframes animation-16i29iq { 0% { opacity: 0; transform: translateY(-5px); max-height: 0px; } 50% { opacity: 0; transform: translateY(-5px); max-height: 0px; } 100% { opacity: 1; transform: translateY(0px); max-height: 6rem; } } } @layer clerk { .cl-internal-18ufa2r { visibility: hidden; animation: 450ms ease 0s 1 normal none running animation-148r1a6; transition-property: height; transition-duration: 200ms; transition-timing-function: ease; } } @layer clerk { @-webkit-keyframes animation-148r1a6 { 0% { opacity: 1; transform: translateY(0px); max-height: 6rem; visibility: visible; } 100% { opacity: 0; transform: translateY(5px); max-height: 0px; visibility: visible; } } @keyframes animation-148r1a6 { 0% { opacity: 1; transform: translateY(0px); max-height: 6rem; visibility: visible; } 100% { opacity: 0; transform: translateY(5px); max-height: 0px; visibility: visible; } } } @layer clerk { .cl-internal-1xj9xsy { position: relative; } } @layer clerk { .cl-internal-3xmvdt { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: center; justify-content: center; position: relative; } } @layer clerk { .cl-internal-i1u4p8 { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: center; justify-content: center; position: relative; } } @layer clerk { .cl-internal-19a4kfm { padding-inline-end: calc(var(--clerk-spacing, 1rem) * 2.5); } .cl-internal-19a4kfm[data-variant="default"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } .cl-internal-19a4kfm[data-variant="default"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); } .cl-internal-19a4kfm[data-variant="default"]:focus-within, .cl-internal-19a4kfm[data-variant="default"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-19a4kfm[data-variant="default"][data-feedback="error"] { box-shadow: color-mix(in srgb, transparent 59%, rgb(220, 38, 38) 41%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px; } .cl-internal-19a4kfm[data-variant="default"][data-feedback="error"]:hover { box-shadow: color-mix(in srgb, transparent 47%, rgb(220, 38, 38) 53%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px; } .cl-internal-19a4kfm[data-variant="default"][data-feedback="error"]:focus-within, .cl-internal-19a4kfm[data-variant="default"][data-feedback="error"][data-focus-within="true"] { box-shadow: color-mix(in srgb, transparent 47%, rgb(220, 38, 38) 53%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-19a4kfm[data-variant="default"][data-feedback="warning"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 41%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-19a4kfm[data-variant="default"][data-feedback="warning"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-19a4kfm[data-variant="default"][data-feedback="warning"]:focus-within, .cl-internal-19a4kfm[data-variant="default"][data-feedback="warning"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-19a4kfm[data-variant="default"][data-feedback="success"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 41%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } .cl-internal-19a4kfm[data-variant="default"][data-feedback="success"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } .cl-internal-19a4kfm[data-variant="default"][data-feedback="success"]:focus-within, .cl-internal-19a4kfm[data-variant="default"][data-feedback="success"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } } @layer clerk { .cl-internal-12lwdv3 { box-sizing: border-box; margin: 0px; padding: calc(var(--clerk-spacing, 1rem) * 0.4375) calc(var(--clerk-spacing, 1rem) * 0.75); background-color: rgb(255, 255, 255); color: rgb(17, 24, 39); outline: transparent solid 2px; outline-offset: 2px; max-height: 2.25rem; width: 100%; accent-color: rgb(17, 24, 39); font-family: inherit; letter-spacing: normal; font-weight: var(--clerk-font-weight-normal, var(--clerk-font-weight, 400)); font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); line-height: calc(1.38462); border-radius: 0.5rem; border-width: 1px; border-style: solid; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); box-shadow: 0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: ease; transition-duration: 200ms; padding-inline-end: calc(var(--clerk-spacing, 1rem) * 2.5); } .cl-internal-12lwdv3:disabled, .cl-internal-12lwdv3[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } @supports (-webkit-touch-callout: none) { .cl-internal-12lwdv3 { font-size: var(--clerk-font-size-lg, calc(var(--clerk-font-size, 0.8125rem) * 17 / 13)); } .cl-internal-12lwdv3:not([type="checkbox"]):not([type="radio"]) { appearance: none; } } .cl-internal-12lwdv3:autofill { animation-name: onAutoFillStart; } .cl-internal-12lwdv3::-webkit-input-placeholder { color: rgb(107, 114, 128); } .cl-internal-12lwdv3::placeholder { color: rgb(107, 114, 128); } .cl-internal-12lwdv3:hover { -webkit-tap-highlight-color: transparent; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%); box-shadow: 0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); } .cl-internal-12lwdv3:focus { border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%); -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); } .cl-internal-12lwdv3:focus:not(:focus-visible) { border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); box-shadow: 0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } .cl-internal-12lwdv3:focus-visible { border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%); -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); } .cl-internal-12lwdv3[data-variant="default"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } .cl-internal-12lwdv3[data-variant="default"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); } .cl-internal-12lwdv3[data-variant="default"]:focus-within, .cl-internal-12lwdv3[data-variant="default"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-12lwdv3[data-variant="default"][data-feedback="error"] { box-shadow: color-mix(in srgb, transparent 59%, rgb(220, 38, 38) 41%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px; } .cl-internal-12lwdv3[data-variant="default"][data-feedback="error"]:hover { box-shadow: color-mix(in srgb, transparent 47%, rgb(220, 38, 38) 53%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px; } .cl-internal-12lwdv3[data-variant="default"][data-feedback="error"]:focus-within, .cl-internal-12lwdv3[data-variant="default"][data-feedback="error"][data-focus-within="true"] { box-shadow: color-mix(in srgb, transparent 47%, rgb(220, 38, 38) 53%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-12lwdv3[data-variant="default"][data-feedback="warning"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 41%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-12lwdv3[data-variant="default"][data-feedback="warning"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-12lwdv3[data-variant="default"][data-feedback="warning"]:focus-within, .cl-internal-12lwdv3[data-variant="default"][data-feedback="warning"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-12lwdv3[data-variant="default"][data-feedback="success"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 41%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } .cl-internal-12lwdv3[data-variant="default"][data-feedback="success"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } .cl-internal-12lwdv3[data-variant="default"][data-feedback="success"]:focus-within, .cl-internal-12lwdv3[data-variant="default"][data-feedback="success"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } } @layer clerk { .cl-internal-1k0jdth { position: absolute; color: color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 41%); padding-inline: calc(var(--clerk-spacing, 1rem) * 0.5); inset-inline-end: calc(var(--clerk-spacing, 1rem) * 0.1875); inset-block: calc(var(--clerk-spacing, 1rem) * 0.1875); border-radius: calc(0.5rem - calc(var(--clerk-spacing, 1rem) * 0.1875)); } .cl-internal-1k0jdth::before { content: ""; position: absolute; inset: calc(calc(var(--clerk-spacing, 1rem) * 0.25) * -1); display: block; border-radius: 0.5rem; } .cl-internal-1k0jdth[data-variant="solid"] { border-width: 0px; } .cl-internal-1k0jdth[data-variant="solid"]::after { position: absolute; content: ""; border-radius: inherit; z-index: -1; inset: 0px; opacity: 1; transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 100ms; background: linear-gradient(rgba(255, 255, 255, 0.11) 0%, transparent 100%); } .cl-internal-1k0jdth[data-variant="solid"]:hover::after { opacity: 0; } .cl-internal-1k0jdth[data-variant="solid"]:active::after { opacity: 1; } .cl-internal-1k0jdth[data-variant="solid"][data-color="primary"] { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1k0jdth[data-variant="solid"][data-color="primary"]:focus { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1k0jdth[data-variant="solid"][data-color="primary"]:focus:not(:focus-visible) { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1k0jdth[data-variant="solid"][data-color="primary"]:focus-visible { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1k0jdth[data-variant="solid"][data-color="danger"] { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1k0jdth[data-variant="solid"][data-color="danger"]:focus { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-1k0jdth[data-variant="solid"][data-color="danger"]:focus:not(:focus-visible) { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1k0jdth[data-variant="solid"][data-color="danger"]:focus-visible { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-1k0jdth[data-variant="outline"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1k0jdth[data-variant="outline"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1k0jdth[data-variant="outline"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1k0jdth[data-variant="outline"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1k0jdth[data-variant="bordered"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1k0jdth[data-variant="bordered"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1k0jdth[data-variant="bordered"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1k0jdth[data-variant="bordered"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1k0jdth::before { inset: calc(calc(var(--clerk-spacing, 1rem) * 0.1875) * -1); } } @layer clerk { .cl-internal-1f6m3ho { margin: 0px; padding: calc(var(--clerk-spacing, 1rem) * 0.25) calc(var(--clerk-spacing, 1rem) * 0.75); border-width: 0px; outline: 0px; user-select: none; cursor: pointer; background-color: unset; isolation: isolate; display: inline-flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 100ms; font-family: var(--clerk-font-family-buttons, var(--clerk-font-family, inherit)); letter-spacing: normal; font-weight: var(--clerk-font-weight-medium, 500); font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); line-height: calc(1.38462); --accent: #111827; --accentHover: color-mix(in srgb, #111827, white 20%); --border: #111827; --accentContrast: var(--clerk-color-primary-foreground, light-dark(white, black)); --alpha: color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%); position: absolute; color: color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 41%); padding-inline: calc(var(--clerk-spacing, 1rem) * 0.5); inset-inline-end: calc(var(--clerk-spacing, 1rem) * 0.1875); inset-block: calc(var(--clerk-spacing, 1rem) * 0.1875); border-radius: calc(0.5rem - calc(var(--clerk-spacing, 1rem) * 0.1875)); } .cl-internal-1f6m3ho:disabled, .cl-internal-1f6m3ho[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } .cl-internal-1f6m3ho:hover { background-color: var(--alpha); color: var(--accentHover); } .cl-internal-1f6m3ho:focus { -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: ease; transition-duration: 200ms; } .cl-internal-1f6m3ho:focus:not(:focus-visible) { box-shadow: none; } .cl-internal-1f6m3ho:focus-visible { -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: ease; transition-duration: 200ms; } .cl-internal-1f6m3ho::before { content: ""; position: absolute; inset: calc(calc(var(--clerk-spacing, 1rem) * 0.25) * -1); display: block; border-radius: 0.5rem; } .cl-internal-1f6m3ho[data-variant="solid"] { border-width: 0px; } .cl-internal-1f6m3ho[data-variant="solid"]::after { position: absolute; content: ""; border-radius: inherit; z-index: -1; inset: 0px; opacity: 1; transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 100ms; background: linear-gradient(rgba(255, 255, 255, 0.11) 0%, transparent 100%); } .cl-internal-1f6m3ho[data-variant="solid"]:hover::after { opacity: 0; } .cl-internal-1f6m3ho[data-variant="solid"]:active::after { opacity: 1; } .cl-internal-1f6m3ho[data-variant="solid"][data-color="primary"] { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1f6m3ho[data-variant="solid"][data-color="primary"]:focus { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1f6m3ho[data-variant="solid"][data-color="primary"]:focus:not(:focus-visible) { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1f6m3ho[data-variant="solid"][data-color="primary"]:focus-visible { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1f6m3ho[data-variant="solid"][data-color="danger"] { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1f6m3ho[data-variant="solid"][data-color="danger"]:focus { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-1f6m3ho[data-variant="solid"][data-color="danger"]:focus:not(:focus-visible) { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1f6m3ho[data-variant="solid"][data-color="danger"]:focus-visible { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-1f6m3ho[data-variant="outline"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1f6m3ho[data-variant="outline"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1f6m3ho[data-variant="outline"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1f6m3ho[data-variant="outline"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1f6m3ho[data-variant="bordered"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1f6m3ho[data-variant="bordered"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1f6m3ho[data-variant="bordered"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1f6m3ho[data-variant="bordered"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1f6m3ho::before { inset: calc(calc(var(--clerk-spacing, 1rem) * 0.1875) * -1); } } @layer clerk { .cl-internal-oaq42g { flex-shrink: 0; width: 1rem; height: 1rem; } } @layer clerk { .cl-internal-1fx5buc { display: flex; flex-flow: column; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } } @layer clerk { .cl-internal-1pnppin { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } } @layer clerk { .cl-internal-8atqhb { width: 100%; } } @layer clerk { .cl-internal-1inqoqm { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 1.5); width: 100%; } } @layer clerk { .cl-internal-ojuur1 { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 1.5); width: 100%; } } @layer clerk { .cl-internal-1ddv0qf[data-variant="solid"] { border-width: 0px; } .cl-internal-1ddv0qf[data-variant="solid"]::after { position: absolute; content: ""; border-radius: inherit; z-index: -1; inset: 0px; opacity: 1; transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 100ms; background: linear-gradient(rgba(255, 255, 255, 0.11) 0%, transparent 100%); } .cl-internal-1ddv0qf[data-variant="solid"]:hover::after { opacity: 0; } .cl-internal-1ddv0qf[data-variant="solid"]:active::after { opacity: 1; } .cl-internal-1ddv0qf[data-variant="solid"][data-color="primary"] { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1ddv0qf[data-variant="solid"][data-color="primary"]:focus { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1ddv0qf[data-variant="solid"][data-color="primary"]:focus:not(:focus-visible) { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1ddv0qf[data-variant="solid"][data-color="primary"]:focus-visible { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1ddv0qf[data-variant="solid"][data-color="danger"] { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1ddv0qf[data-variant="solid"][data-color="danger"]:focus { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-1ddv0qf[data-variant="solid"][data-color="danger"]:focus:not(:focus-visible) { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1ddv0qf[data-variant="solid"][data-color="danger"]:focus-visible { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-1ddv0qf[data-variant="outline"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1ddv0qf[data-variant="outline"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1ddv0qf[data-variant="outline"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1ddv0qf[data-variant="outline"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1ddv0qf[data-variant="bordered"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1ddv0qf[data-variant="bordered"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1ddv0qf[data-variant="bordered"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1ddv0qf[data-variant="bordered"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } } @layer clerk { .cl-internal-k8ebj8 { margin: 0px; padding: calc(var(--clerk-spacing, 1rem) * 0.4375) calc(var(--clerk-spacing, 1rem) * 0.75); border-width: 1px; outline: 0px; user-select: none; cursor: pointer; background-color: var(--accent); color: var(--accentContrast); border-radius: 0.5rem; position: relative; isolation: isolate; display: inline-flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 100ms; font-family: var(--clerk-font-family-buttons, var(--clerk-font-family, inherit)); letter-spacing: normal; font-weight: var(--clerk-font-weight-medium, 500); font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); line-height: calc(1.38462); border-style: solid; border-color: var(--accent); width: 100%; --accent: #111827; --accentHover: color-mix(in srgb, #111827, white 20%); --border: #111827; --accentContrast: var(--clerk-color-primary-foreground, light-dark(white, black)); --alpha: color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%); } .cl-internal-k8ebj8:disabled, .cl-internal-k8ebj8[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } .cl-internal-k8ebj8:hover { background-color: var(--accentHover); } .cl-internal-k8ebj8:focus { -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: ease; transition-duration: 200ms; } .cl-internal-k8ebj8:focus:not(:focus-visible) { box-shadow: none; } .cl-internal-k8ebj8:focus-visible { -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: ease; transition-duration: 200ms; } .cl-internal-k8ebj8[data-variant="solid"] { border-width: 0px; } .cl-internal-k8ebj8[data-variant="solid"]::after { position: absolute; content: ""; border-radius: inherit; z-index: -1; inset: 0px; opacity: 1; transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 100ms; background: linear-gradient(rgba(255, 255, 255, 0.11) 0%, transparent 100%); } .cl-internal-k8ebj8[data-variant="solid"]:hover::after { opacity: 0; } .cl-internal-k8ebj8[data-variant="solid"]:active::after { opacity: 1; } .cl-internal-k8ebj8[data-variant="solid"][data-color="primary"] { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-k8ebj8[data-variant="solid"][data-color="primary"]:focus { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-k8ebj8[data-variant="solid"][data-color="primary"]:focus:not(:focus-visible) { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-k8ebj8[data-variant="solid"][data-color="primary"]:focus-visible { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-k8ebj8[data-variant="solid"][data-color="danger"] { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-k8ebj8[data-variant="solid"][data-color="danger"]:focus { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-k8ebj8[data-variant="solid"][data-color="danger"]:focus:not(:focus-visible) { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-k8ebj8[data-variant="solid"][data-color="danger"]:focus-visible { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-k8ebj8[data-variant="outline"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-k8ebj8[data-variant="outline"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-k8ebj8[data-variant="outline"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-k8ebj8[data-variant="outline"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-k8ebj8[data-variant="bordered"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-k8ebj8[data-variant="bordered"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-k8ebj8[data-variant="bordered"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-k8ebj8[data-variant="bordered"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } } @layer clerk { .cl-internal-14iiguq { display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: start; justify-content: flex-start; } } @layer clerk { .cl-internal-2iusy0 { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: start; justify-content: flex-start; } } @layer clerk { .cl-internal-dzombt { margin-inline-start: calc(var(--clerk-spacing, 1rem) * 0.5); width: 1rem; height: 1rem; opacity: 0.62; } [dir="rtl"] .cl-internal-dzombt { transform: scaleX(-1); } } @layer clerk { .cl-internal-ykgfs8 { flex-shrink: 0; margin-inline-start: calc(var(--clerk-spacing, 1rem) * 0.5); width: 1rem; height: 1rem; opacity: 0.62; } [dir="rtl"] .cl-internal-ykgfs8 { transform: scaleX(-1); } } @layer clerk { .cl-internal-aurft1 { box-sizing: border-box; } } @layer clerk { .cl-internal-1kn6j1q { margin-top: calc(calc(var(--clerk-spacing, 1rem) * 0.5) * -1); padding-top: calc(var(--clerk-spacing, 1rem) * 0.5); background: var(--clerk-color-muted, linear-gradient(color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%),color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%)), linear-gradient(hsl(from #ffffff h s l / 1), hsl(from #ffffff h s l / 1))); } .cl-internal-1kn6j1q:empty { padding: 0px; margin-top: 0px; } .cl-internal-1kn6j1q > :first-of-type { padding: var(--clerk-spacing, 1rem) calc(var(--clerk-spacing, 1rem) * 2) var(--clerk-spacing, 1rem) calc(var(--clerk-spacing, 1rem) * 2); } .cl-internal-1kn6j1q > :not(:first-of-type) { padding: var(--clerk-spacing, 1rem) calc(var(--clerk-spacing, 1rem) * 2); border-top-width: 1px; border-top-style: solid; border-top-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } } @layer clerk { .cl-internal-mi24g { display: flex; flex-flow: column; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; margin-top: calc(calc(var(--clerk-spacing, 1rem) * 0.5) * -1); padding-top: calc(var(--clerk-spacing, 1rem) * 0.5); background: var(--clerk-color-muted, linear-gradient(color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%),color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%)), linear-gradient(hsl(from #ffffff h s l / 1), hsl(from #ffffff h s l / 1))); } .cl-internal-mi24g:empty { padding: 0px; margin-top: 0px; } .cl-internal-mi24g > :first-of-type { padding: var(--clerk-spacing, 1rem) calc(var(--clerk-spacing, 1rem) * 2) var(--clerk-spacing, 1rem) calc(var(--clerk-spacing, 1rem) * 2); } .cl-internal-mi24g > :not(:first-of-type) { padding: var(--clerk-spacing, 1rem) calc(var(--clerk-spacing, 1rem) * 2); border-top-width: 1px; border-top-style: solid; border-top-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } } @layer clerk { .cl-internal-1i34tw6 { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; margin-top: calc(calc(var(--clerk-spacing, 1rem) * 0.5) * -1); padding-top: calc(var(--clerk-spacing, 1rem) * 0.5); background: var(--clerk-color-muted, linear-gradient(color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%),color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%)), linear-gradient(hsl(from #ffffff h s l / 1), hsl(from #ffffff h s l / 1))); } .cl-internal-1i34tw6:empty { padding: 0px; margin-top: 0px; } .cl-internal-1i34tw6 > :first-of-type { padding: var(--clerk-spacing, 1rem) calc(var(--clerk-spacing, 1rem) * 2) var(--clerk-spacing, 1rem) calc(var(--clerk-spacing, 1rem) * 2); } .cl-internal-1i34tw6 > :not(:first-of-type) { padding: var(--clerk-spacing, 1rem) calc(var(--clerk-spacing, 1rem) * 2); border-top-width: 1px; border-top-style: solid; border-top-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } } @layer clerk { .cl-internal-1yn6e66 { margin: 0px auto; } } @layer clerk { .cl-internal-1xzxnua { display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 0.25); margin: 0px auto; } } @layer clerk { .cl-internal-h2zfvr { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 0.25); margin: 0px auto; } } @layer clerk { .cl-internal-177dtwn { box-sizing: border-box; margin: 0px; font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); text-wrap: pretty; font-family: inherit; letter-spacing: normal; font-weight: var(--clerk-font-weight-normal, var(--clerk-font-weight, 400)); line-height: calc(1.38462); color: rgb(107, 114, 128); } .cl-internal-177dtwn:disabled, .cl-internal-177dtwn[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } } @layer clerk { .cl-internal-fkws6y { box-sizing: border-box; display: inline-flex; -webkit-box-align: center; align-items: center; margin: 0px; cursor: pointer; text-decoration: none; font-family: var(--clerk-font-family-buttons, var(--clerk-font-family, inherit)); letter-spacing: normal; font-weight: var(--clerk-font-weight-medium, 500); font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); line-height: calc(1.38462); color: rgb(17, 24, 39); } .cl-internal-fkws6y:disabled, .cl-internal-fkws6y[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } .cl-internal-fkws6y:hover { text-decoration: underline; color: hsl(from rgb(17, 24, 39) h s calc(l + (0.142857 * (97 - l)))); } .cl-internal-fkws6y:active { color: hsl(from rgb(17, 24, 39) h s calc(l - (0.142857 * (-12 + l)))); } } @layer clerk { .cl-internal-tbo0es { width: 100%; position: relative; } } @layer clerk { .cl-internal-r93pb5 { box-sizing: border-box; width: 100%; position: relative; } } @layer clerk { .cl-internal-8v1h51 { gap: var(--clerk-spacing, 1rem); margin-inline: auto; width: 100%; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; position: relative; } } @layer clerk { .cl-internal-1dkhggt { display: flex; flex-flow: column; gap: var(--clerk-spacing, 1rem); margin-inline: auto; width: 100%; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; position: relative; } } @layer clerk { .cl-internal-95w9vp { box-sizing: border-box; display: flex; flex-flow: column; gap: var(--clerk-spacing, 1rem); margin-inline: auto; width: 100%; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; position: relative; } } @layer clerk { .cl-internal-1bjbgcx { -webkit-box-pack: justify; justify-content: space-between; width: 100%; } .cl-internal-1bjbgcx:has(div:only-child) { -webkit-box-pack: center; justify-content: center; } } @layer clerk { .cl-internal-zh74vi { display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: justify; justify-content: space-between; width: 100%; } .cl-internal-zh74vi:has(div:only-child) { -webkit-box-pack: center; justify-content: center; } } @layer clerk { .cl-internal-y44tp9 { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: justify; justify-content: space-between; width: 100%; } .cl-internal-y44tp9:has(div:only-child) { -webkit-box-pack: center; justify-content: center; } } @layer clerk { .cl-internal-15b6qwm { color: rgb(107, 114, 128); } } @layer clerk { .cl-internal-1eepiuh { display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; gap: calc(var(--clerk-spacing, 1rem) * 0.25); color: rgb(107, 114, 128); } } @layer clerk { .cl-internal-l895qh { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; gap: calc(var(--clerk-spacing, 1rem) * 0.25); color: rgb(107, 114, 128); } } @layer clerk { .cl-internal-560t1i { box-sizing: border-box; margin: 0px; font-size: var(--clerk-font-size-sm, calc(var(--clerk-font-size, 0.8125rem) * 12 / 13)); text-wrap: pretty; font-family: var(--clerk-font-family-buttons, var(--clerk-font-family, inherit)); letter-spacing: normal; font-weight: var(--clerk-font-weight-medium, 500); line-height: calc(1.33333); color: inherit; } .cl-internal-560t1i:disabled, .cl-internal-560t1i[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } } @layer clerk { .cl-internal-1scxde7 { box-sizing: border-box; display: inline-flex; -webkit-box-align: center; align-items: center; margin: 0px; cursor: pointer; text-decoration: none; font-family: inherit; letter-spacing: normal; font-weight: var(--clerk-font-weight-normal, var(--clerk-font-weight, 400)); font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); line-height: calc(1.38462); color: inherit; } .cl-internal-1scxde7:disabled, .cl-internal-1scxde7[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } .cl-internal-1scxde7:hover { text-decoration: underline; } } @layer clerk { .cl-internal-1qw8mqg { width: 3rem; height: 0.875rem; } } @layer clerk { .cl-internal-5ghyhf { flex-shrink: 0; width: 3rem; height: 0.875rem; } } @layer properties { @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) { *, ::backdrop, ::after, ::before { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-space-y-reverse: 0; --tw-border-style: solid; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-duration: initial; --tw-ease: initial; } } } @layer theme { :host, :root { --font-mono: var(--font-mono-face),ui-monospace,"SF Mono",monospace; --color-red-50: oklch(97.1% .013 17.38); --color-red-200: oklch(88.5% .062 18.334); --color-red-400: oklch(70.4% .191 22.216); --color-red-600: oklch(57.7% .245 27.325); --color-red-700: oklch(50.5% .213 27.518); --color-orange-100: oklch(95.4% .038 75.164); --color-orange-700: oklch(55.3% .195 38.402); --color-green-50: oklch(98.2% .018 155.826); --color-green-200: oklch(92.5% .084 155.995); --color-green-700: oklch(52.7% .154 150.069); --color-blue-50: oklch(97% .014 254.604); --color-blue-400: oklch(70.7% .165 254.624); --color-blue-600: oklch(54.6% .245 262.881); --color-gray-50: oklch(98.5% .002 247.839); --color-gray-100: oklch(96.7% .003 264.542); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338); --color-gray-400: oklch(70.7% .022 261.325); --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-800: oklch(27.8% .033 256.848); --color-gray-900: oklch(21% .034 264.665); --color-black: #000; --color-white: #fff; --spacing: .25rem; --container-sm: 24rem; --container-xl: 36rem; --container-3xl: 48rem; --container-4xl: 56rem; --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); --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-tight: -.025em; --tracking-wide: .025em; --leading-tight: 1.25; --leading-relaxed: 1.625; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --shadow-xs: 0 0 4px 0 #0000000a; --shadow-sm: 0 18px 47px 0 #00000008,0 7.5px 19px 0 #00000005,0 4px 10.5px 0 #00000005,0 2.3px 5.8px 0 #00000003,0 1.2px 3.1px 0 #00000003,0 .5px 1.3px 0 #00000003; --shadow-md: 0 17.54px 23.39px 0 #0000000a,0 9.4px 12.5px 0 #00000008,0 5.25px 7px 0 #00000005,0 2.79px 3.72px -2px #00000003,0 1.16px 1.5px 0 #00000003; --shadow-lg: 0 25px 50px 0 #0000000d,0 12px 24px 0 #0000000a,0 6px 12px 0 #00000008,0 3px 6px 0 #00000005,0 1.5px 3px 0 #00000005; --ease-out: cubic-bezier(0,0,.2,1); --animate-pulse: pulse 2s cubic-bezier(.4,0,.6,1) infinite; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4,0,.2,1); --default-font-family: var(--font-inter),ui-sans-serif,system-ui,sans-serif; --default-mono-font-family: var(--font-mono-face),ui-monospace,"SF Mono",monospace; --color-surface: var(--surface); --color-ink: var(--ink); --color-ink-2: var(--ink-2); --color-field: var(--field); --color-red: var(--red); --shadow-hairline: var(--shadow-hairline); --shadow-btn: var(--shadow-btn); --shadow-inset-field: var(--shadow-inset-field); --shadow-card: var(--shadow-card); --shadow-raised: var(--shadow-raised); --shadow-overlay: var(--shadow-overlay); --radius-control: 8px; --radius-card: 10px; --ease-link: cubic-bezier(.16,1,.3,1); } } @layer base { *, ::backdrop, ::after, ::before { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; } ::file-selector-button { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; } :host, html { 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; } hr { height: 0px; color: inherit; border-top-width: 1px; } abbr:where([title]) { text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, pre, samp { font-family: var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace); font-feature-settings: var(--default-mono-font-feature-settings,normal); font-variation-settings: var(--default-mono-font-variation-settings,normal); font-size: 1em; } small { font-size: 80%; } sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0px; border-color: inherit; border-collapse: collapse; } progress { vertical-align: baseline; } summary { display: list-item; } menu, ol, ul { list-style: none; } audio, canvas, embed, iframe, img, object, svg, video { vertical-align: middle; display: block; } img, video { max-width: 100%; height: auto; } button, input, optgroup, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; } ::file-selector-button { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) { ::placeholder { color: currentcolor; } @supports (color:color-mix(in lab,red,red)) { ::placeholder { color: color-mix(currentcolor, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { 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: 0px; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field { padding-block: 0px; } ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-month-field { padding-block: 0px; } ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field { padding-block: 0px; } ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-second-field { padding-block: 0px; } ::-webkit-datetime-edit-meridiem-field { padding-block: 0px; } ::-webkit-calendar-picker-indicator { line-height: 1; } button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; } ::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 components { .lh-scroll { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .lh-prose { color: var(--ink); letter-spacing: -0.006em; overflow-wrap: break-word; font-size: 15px; line-height: 1.65; } .lh-prose.is-compact { font-size: 14px; line-height: 1.55; } .lh-prose > :first-child { margin-top: 0px; } .lh-prose > :last-child { margin-bottom: 0px; } .lh-prose p { margin: 0.5em 0px; } .lh-prose.is-compact p { margin: 0.3em 0px; } .lh-prose h1, .lh-prose h2, .lh-prose h3 { letter-spacing: -0.02em; color: var(--ink); font-weight: 600; line-height: 1.3; } .lh-prose h1 { margin: 1.2em 0px 0.4em; font-size: 1.6em; } .lh-prose h2 { margin: 1.3em 0px 0.35em; font-size: 1.25em; } .lh-prose h3 { margin: 1.1em 0px 0.3em; font-size: 1.06em; } .lh-prose.is-compact h1, .lh-prose.is-compact h2, .lh-prose.is-compact h3 { margin: 0.8em 0px 0.2em; font-size: 1em; } .lh-prose ol, .lh-prose ul { margin: 0.4em 0px; padding-left: 1.35em; } .lh-prose ul { list-style: outside; } .lh-prose ol { list-style: decimal; } .lh-prose li { margin: 0.15em 0px; } .lh-prose li > p { margin: 0px; } .lh-prose li::marker { color: var(--ink-3); } .lh-prose ul.contains-task-list, .lh-prose ul[data-type="taskList"] { padding-left: 0.2em; list-style: none; } .lh-prose ul[data-type="taskList"] li { align-items: flex-start; gap: 0.5em; display: flex; } .lh-prose ul[data-type="taskList"] li > label { flex-shrink: 0; margin-top: 0.36em; } .lh-prose ul[data-type="taskList"] li > div { flex: 1 1 0%; min-width: 0px; } .lh-prose ul[data-type="taskList"] li[data-checked="true"] > div { color: var(--ink-3); text-decoration-line: line-through; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: var(--ink-3); } @supports (color:color-mix(in lab,red,red)) { .lh-prose ul[data-type="taskList"] li[data-checked="true"] > div { text-decoration-color: color-mix(in srgb,var(--ink-3) 60%,transparent); } } .lh-prose input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } .lh-prose blockquote { border-left: 2px solid var(--line-strong); color: var(--ink-2); margin: 0.6em 0px; padding-left: 0.9em; } .lh-prose a { color: var(--accent-ink); text-decoration: underline; } @supports (color:color-mix(in lab,red,red)) { .lh-prose a { text-decoration-color: color-mix(in srgb, currentcolor 35%, transparent 65%); } } .lh-prose a { text-underline-offset: 3px; } .lh-prose code { background: var(--field); border-radius: 5px; padding: 0.1em 0.35em; font-size: 0.86em; } .lh-prose code, .lh-prose pre { font-family: var(--font-mono); box-shadow: var(--shadow-hairline); } .lh-prose pre { background: var(--inset); border-radius: var(--radius-card); margin: 0.7em 0px; padding: 12px 14px; font-size: 12.5px; line-height: 1.6; overflow-x: auto; } .lh-prose pre code { box-shadow: none; font-size: inherit; background: 0px 0px; padding: 0px; } .lh-prose hr { border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--line-strong); margin: 1.4em 0px; } .lh-prose table { border-collapse: separate; border-spacing: 0px; border: 1px solid var(--line); border-radius: var(--radius-card); width: 100%; margin: 0.8em 0px; font-size: 0.92em; overflow: hidden; } .lh-prose td, .lh-prose th { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: left; vertical-align: top; padding: 6px 10px; } .lh-prose th { background: var(--inset); color: var(--ink-2); font-weight: 500; } .lh-prose tr > :last-child { border-right: 0px; } .lh-prose tr:last-child > td { border-bottom: 0px; } .lh-prose strong { font-weight: 600; } .lh-table th { text-align: left; color: var(--ink-3); border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--inset); padding: 8px 12px; font-size: 11.5px; font-weight: 500; } .lh-table td { border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--ink); padding: 8px 12px; } .lh-table tr:last-child > td { border-bottom: 0px; } .lh-table tbody tr:hover > td { background: var(--hover); } .lh-table th:first-child { border-top-left-radius: var(--radius-card); } .lh-table th:last-child { border-top-right-radius: var(--radius-card); } .lh-details > summary::-webkit-details-marker { display: none; } .lh-diff-add { background: var(--green-tint); color: var(--green); } .lh-diff-del { background: var(--red-tint); color: var(--red); } .lh-diff-hunk { color: var(--accent-ink); } } @layer utilities { .visible { visibility: visible; } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .sticky { position: sticky; } .inset-0 { inset: 0px; } .top-0 { top: 0px; } .top-1 { top: var(--spacing); } .top-1\/2 { top: 50%; } .right-1 { right: var(--spacing); } .bottom-0 { bottom: 0px; } .bottom-1 { bottom: var(--spacing); } .bottom-36 { bottom: calc(var(--spacing) * 36); } .left-1\/2 { left: 50%; } .left-3 { left: calc(var(--spacing) * 3); } .z-10 { z-index: 10; } .z-50 { z-index: 50; } .col-span-2 { grid-column: span 2 / span 2; } .\!mx-0 { margin-inline: 0px !important; } .-mx-1 { margin-inline: calc(var(--spacing) * -1); } .mx-0\.5 { margin-inline: calc(var(--spacing) * .5); } .mx-2 { margin-inline: calc(var(--spacing) * 2); } .mx-auto { margin-inline: auto; } .my-3 { margin-block: calc(var(--spacing) * 3); } .my-4 { margin-block: calc(var(--spacing) * 4); } .mt-0\.5 { margin-top: calc(var(--spacing) * .5); } .mt-1 { margin-top: var(--spacing); } .mt-1\.5 { margin-top: calc(var(--spacing) * 1.5); } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-2\.5 { margin-top: calc(var(--spacing) * 2.5); } .mt-3 { margin-top: calc(var(--spacing) * 3); } .mt-3\.5 { margin-top: calc(var(--spacing) * 3.5); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mt-5 { margin-top: calc(var(--spacing) * 5); } .mt-6 { margin-top: calc(var(--spacing) * 6); } .mt-9 { margin-top: calc(var(--spacing) * 9); } .mt-12 { margin-top: calc(var(--spacing) * 12); } .mt-16 { margin-top: calc(var(--spacing) * 16); } .mt-px { margin-top: 1px; } .mr-1\.5 { margin-right: calc(var(--spacing) * 1.5); } .mr-\[2px\] { margin-right: 2px; } .-mb-px { margin-bottom: -1px; } .mb-1 { margin-bottom: var(--spacing); } .mb-1\.5 { margin-bottom: calc(var(--spacing) * 1.5); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } .mb-3 { margin-bottom: calc(var(--spacing) * 3); } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .mb-5 { margin-bottom: calc(var(--spacing) * 5); } .ml-1 { margin-left: var(--spacing); } .ml-1\.5 { margin-left: calc(var(--spacing) * 1.5); } .ml-2 { margin-left: calc(var(--spacing) * 2); } .ml-\[3px\] { margin-left: 3px; } .ml-auto { margin-left: auto; } .line-clamp-2 { -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .block { display: block; } .contents { display: contents; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } .inline { display: inline; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .inline-grid { display: inline-grid; } .table { display: table; } .size-1\.5 { width: calc(var(--spacing) * 1.5); height: calc(var(--spacing) * 1.5); } .size-2\.5 { width: calc(var(--spacing) * 2.5); height: calc(var(--spacing) * 2.5); } .size-3 { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } .size-3\.5 { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } .size-4 { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .size-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-\[7px\] { width: 7px; height: 7px; } .size-\[15px\] { width: 15px; height: 15px; } .h-1\.5 { height: calc(var(--spacing) * 1.5); } .h-2 { height: calc(var(--spacing) * 2); } .h-2\.5 { height: calc(var(--spacing) * 2.5); } .h-3 { height: calc(var(--spacing) * 3); } .h-3\.5 { height: calc(var(--spacing) * 3.5); } .h-4 { height: calc(var(--spacing) * 4); } .h-5 { height: calc(var(--spacing) * 5); } .h-6 { height: calc(var(--spacing) * 6); } .h-7 { height: calc(var(--spacing) * 7); } .h-8 { height: calc(var(--spacing) * 8); } .h-9 { height: calc(var(--spacing) * 9); } .h-12 { height: calc(var(--spacing) * 12); } .h-\[3px\] { height: 3px; } .h-\[27px\] { height: 27px; } .h-\[30px\] { height: 30px; } .h-\[150px\] { height: 150px; } .h-dvh { height: 100dvh; } .h-full { height: 100%; } .h-px { height: 1px; } .max-h-40 { max-height: calc(var(--spacing) * 40); } .max-h-48 { max-height: calc(var(--spacing) * 48); } .max-h-56 { max-height: calc(var(--spacing) * 56); } .max-h-64 { max-height: calc(var(--spacing) * 64); } .max-h-72 { max-height: calc(var(--spacing) * 72); } .max-h-\[38vh\] { max-height: 38vh; } .max-h-\[40vh\] { max-height: 40vh; } .max-h-\[62vh\] { max-height: 62vh; } .max-h-\[70vh\] { max-height: 70vh; } .max-h-\[220px\] { max-height: 220px; } .max-h-\[420px\] { max-height: 420px; } .max-h-\[560px\] { max-height: 560px; } .min-h-0 { min-height: 0px; } .min-h-\[20px\] { min-height: 20px; } .min-h-\[32px\] { min-height: 32px; } .min-h-\[34px\] { min-height: 34px; } .min-h-\[60vh\] { min-height: 60vh; } .min-h-\[120px\] { min-height: 120px; } .min-h-\[300px\] { min-height: 300px; } .min-h-dvh { min-height: 100dvh; } .w-1\.5 { width: calc(var(--spacing) * 1.5); } .w-2 { width: calc(var(--spacing) * 2); } .w-2\.5 { width: calc(var(--spacing) * 2.5); } .w-3 { width: calc(var(--spacing) * 3); } .w-3\.5 { width: calc(var(--spacing) * 3.5); } .w-4 { width: calc(var(--spacing) * 4); } .w-6 { width: calc(var(--spacing) * 6); } .w-7 { width: calc(var(--spacing) * 7); } .w-8 { width: calc(var(--spacing) * 8); } .w-\[3px\] { width: 3px; } .w-\[100px\] { width: 100px; } .w-\[118px\] { width: 118px; } .w-\[140px\] { width: 140px; } .w-\[150px\] { width: 150px; } .w-\[170px\] { width: 170px; } .w-\[180px\] { width: 180px; } .w-\[200px\] { width: 200px; } .w-\[210px\] { width: 210px; } .w-\[220px\] { width: 220px; } .w-\[232px\] { width: 232px; } .w-\[300px\] { width: 300px; } .w-\[480px\] { width: 480px; } .w-auto { width: auto; } .w-full { width: 100%; } .w-px { width: 1px; } .max-w-3xl { max-width: var(--container-3xl); } .max-w-4xl { max-width: var(--container-4xl); } .max-w-\[85\%\] { max-width: 85%; } .max-w-\[200px\] { max-width: 200px; } .max-w-\[220px\] { max-width: 220px; } .max-w-\[260px\] { max-width: 260px; } .max-w-\[320px\] { max-width: 320px; } .max-w-\[340px\] { max-width: 340px; } .max-w-\[380px\] { max-width: 380px; } .max-w-\[420px\] { max-width: 420px; } .max-w-\[520px\] { max-width: 520px; } .max-w-\[560px\] { max-width: 560px; } .max-w-\[620px\] { max-width: 620px; } .max-w-\[640px\] { max-width: 640px; } .max-w-\[860px\] { max-width: 860px; } .max-w-\[980px\] { max-width: 980px; } .max-w-\[1080px\] { max-width: 1080px; } .max-w-\[1180px\] { max-width: 1180px; } .max-w-full { max-width: 100%; } .max-w-sm { max-width: var(--container-sm); } .max-w-xl { max-width: var(--container-xl); } .min-w-0 { min-width: 0px; } .min-w-\[220px\] { min-width: 220px; } .min-w-\[240px\] { min-width: 240px; } .min-w-full { min-width: 100%; } .flex-1 { flex: 1 1 0%; } .shrink-0 { flex-shrink: 0; } .border-collapse { border-collapse: collapse; } .-translate-x-1\/2 { --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); } .-translate-x-1\/2, .-translate-y-1\/2 { translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-1\/2 { --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); } .-rotate-90 { rotate: -90deg; } .animate-pulse { animation: var(--animate-pulse); } .cursor-pointer { cursor: pointer; } .resize-none { resize: none; } .resize-y { resize: vertical; } .list-decimal { list-style-type: decimal; } .list-disc { list-style-type: disc; } .list-none { list-style-type: none; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); } .grid-cols-\[1fr_320px\] { grid-template-columns: 1fr 320px; } .grid-cols-\[240px_1fr\] { grid-template-columns: 240px 1fr; } .grid-cols-\[250px_1fr\] { grid-template-columns: 250px 1fr; } .grid-cols-\[300px_minmax\(0\,1fr\)\] { grid-template-columns: 300px minmax(0px, 1fr); } .flex-col { flex-direction: column; } .flex-col-reverse { flex-direction: column-reverse; } .flex-wrap { flex-wrap: wrap; } .items-baseline { align-items: baseline; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-start { justify-content: flex-start; } .gap-0\.5 { gap: calc(var(--spacing) * .5); } .gap-1 { gap: var(--spacing); } .gap-1\.5 { gap: calc(var(--spacing) * 1.5); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-2\.5 { gap: calc(var(--spacing) * 2.5); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-3\.5 { gap: calc(var(--spacing) * 3.5); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-5 { gap: calc(var(--spacing) * 5); } .gap-6 { gap: calc(var(--spacing) * 6); } .gap-\[2px\] { gap: 2px; } :where(.space-y-1 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-2 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-2\.5 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-5 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-7 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 7) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 7) * calc(1 - var(--tw-space-y-reverse))); } .gap-x-1\.5 { column-gap: calc(var(--spacing) * 1.5); } .gap-x-3 { column-gap: calc(var(--spacing) * 3); } .gap-x-4 { column-gap: calc(var(--spacing) * 4); } .gap-x-5 { column-gap: calc(var(--spacing) * 5); } .gap-y-0\.5 { row-gap: calc(var(--spacing) * .5); } .gap-y-1 { row-gap: var(--spacing); } .gap-y-1\.5 { row-gap: calc(var(--spacing) * 1.5); } .gap-y-2 { row-gap: calc(var(--spacing) * 2); } .self-center { align-self: center; } .truncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .rounded { border-radius: 0.25rem; } .rounded-2xl { border-radius: var(--radius-2xl); } .rounded-\[3px\] { border-radius: 3px; } .rounded-\[6px\] { border-radius: 6px; } .rounded-\[7px\] { border-radius: 7px; } .rounded-\[9px\] { border-radius: 9px; } .rounded-\[16px\] { border-radius: 16px; } .rounded-card { border-radius: 10px; } .rounded-chip { border-radius: 6px; } .rounded-control { border-radius: 8px; } .rounded-full { border-radius: 3.40282e+38px; } .rounded-lg { border-radius: var(--radius-lg); } .rounded-md { border-radius: var(--radius-md); } .rounded-sm { border-radius: var(--radius-sm); } .rounded-window { border-radius: 14px; } .rounded-xl { border-radius: var(--radius-xl); } .rounded-t-\[4px\] { border-top-left-radius: 4px; border-top-right-radius: 4px; } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-0 { border-style: var(--tw-border-style); border-width: 0px; } .border-2 { border-style: var(--tw-border-style); border-width: 2px; } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-b-2 { border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; } .border-l { border-left-style: var(--tw-border-style); border-left-width: 1px; } .border-l-4 { border-left-style: var(--tw-border-style); border-left-width: 4px; } .border-dashed { --tw-border-style: dashed; border-style: dashed; } .border-gray-100 { border-color: var(--color-gray-100); } .border-gray-200 { border-color: var(--color-gray-200); } .border-gray-300 { border-color: var(--color-gray-300); } .border-gray-400 { border-color: var(--color-gray-400); } .border-gray-900 { border-color: var(--color-gray-900); } .border-green-200 { border-color: var(--color-green-200); } .border-ink { border-color: var(--ink); } .border-line { border-color: var(--line); } .border-line-strong { border-color: var(--line-strong); } .border-red-200 { border-color: var(--color-red-200); } .border-transparent { border-color: rgba(0, 0, 0, 0); } .\!bg-red { background-color: var(--red) !important; } .bg-\[\#1a1a1a\] { background-color: rgb(26, 26, 26); } .bg-\[\#f8f6f1\] { background-color: rgb(248, 246, 241); } .bg-\[oklch\(0\.2_0\.01_260\/0\.18\)\] { background-color: oklch(0.2 0.01 260 / 0.18); } .bg-accent { background-color: var(--accent); } .bg-accent-tint, .bg-accent-tint\/50 { background-color: var(--accent-tint); } @supports (color:color-mix(in lab,red,red)) { .bg-accent-tint\/50 { background-color: color-mix(in oklab,var(--accent-tint) 50%,transparent); } } .bg-accent-tint\/60 { background-color: var(--accent-tint); } @supports (color:color-mix(in lab,red,red)) { .bg-accent-tint\/60 { background-color: color-mix(in oklab,var(--accent-tint) 60%,transparent); } } .bg-black { background-color: var(--color-black); } .bg-blue-50 { background-color: var(--color-blue-50); } .bg-blue-400 { background-color: var(--color-blue-400); } .bg-canvas { background-color: var(--canvas); } .bg-field { background-color: var(--field); } .bg-gray-50 { background-color: var(--color-gray-50); } .bg-gray-100 { background-color: var(--color-gray-100); } .bg-gray-200 { background-color: var(--color-gray-200); } .bg-gray-300 { background-color: var(--color-gray-300); } .bg-gray-800 { background-color: var(--color-gray-800); } .bg-gray-900 { background-color: var(--color-gray-900); } .bg-green { background-color: var(--green); } .bg-green-50 { background-color: var(--color-green-50); } .bg-green-tint { background-color: var(--green-tint); } .bg-hover-2 { background-color: var(--hover-2); } .bg-ink { background-color: var(--ink); } .bg-ink-2 { background-color: var(--ink-2); } .bg-ink-3 { background-color: var(--ink-3); } .bg-inset { background-color: var(--inset); } .bg-line-strong { background-color: var(--line-strong); } .bg-orange { background-color: var(--orange); } .bg-orange-100 { background-color: var(--color-orange-100); } .bg-orange-tint { background-color: var(--orange-tint); } .bg-page { background-color: var(--page); } .bg-red { background-color: var(--red); } .bg-red-50 { background-color: var(--color-red-50); } .bg-red-400 { background-color: var(--color-red-400); } .bg-red-tint { background-color: var(--red-tint); } .bg-surface { background-color: var(--surface); } .bg-transparent { background-color: rgba(0, 0, 0, 0); } .bg-white { background-color: var(--color-white); } .bg-gradient-to-b { --tw-gradient-position: to bottom in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-none { background-image: none; } .from-gray-50 { --tw-gradient-from: var(--color-gray-50); --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-white { --tw-gradient-to: var(--color-white); --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position)); } .bg-clip-text { background-clip: text; } .fill-current { fill: currentcolor; } .object-contain { object-fit: contain; } .p-1 { padding: var(--spacing); } .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-10 { padding: calc(var(--spacing) * 10); } .px-0 { padding-inline: 0px; } .px-1 { padding-inline: var(--spacing); } .px-1\.5 { padding-inline: calc(var(--spacing) * 1.5); } .px-2 { padding-inline: calc(var(--spacing) * 2); } .px-2\.5 { padding-inline: calc(var(--spacing) * 2.5); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .px-4 { padding-inline: calc(var(--spacing) * 4); } .px-5 { padding-inline: calc(var(--spacing) * 5); } .px-6 { padding-inline: calc(var(--spacing) * 6); } .px-8 { padding-inline: calc(var(--spacing) * 8); } .py-0 { padding-block: 0px; } .py-0\.5 { padding-block: calc(var(--spacing) * .5); } .py-1 { padding-block: var(--spacing); } .py-1\.5 { padding-block: calc(var(--spacing) * 1.5); } .py-2 { padding-block: calc(var(--spacing) * 2); } .py-2\.5 { padding-block: calc(var(--spacing) * 2.5); } .py-3 { padding-block: calc(var(--spacing) * 3); } .py-4 { padding-block: calc(var(--spacing) * 4); } .py-6 { padding-block: calc(var(--spacing) * 6); } .py-7 { padding-block: calc(var(--spacing) * 7); } .py-8 { padding-block: calc(var(--spacing) * 8); } .py-12 { padding-block: calc(var(--spacing) * 12); } .py-16 { padding-block: calc(var(--spacing) * 16); } .py-20 { padding-block: calc(var(--spacing) * 20); } .py-\[3px\] { padding-block: 3px; } .py-\[6px\] { padding-block: 6px; } .py-\[8vh\] { padding-block: 8vh; } .py-\[9px\] { padding-block: 9px; } .py-px { padding-block: 1px; } .pt-0\.5 { padding-top: calc(var(--spacing) * .5); } .pt-1 { padding-top: var(--spacing); } .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-5 { padding-top: calc(var(--spacing) * 5); } .pt-6 { padding-top: calc(var(--spacing) * 6); } .pt-8 { padding-top: calc(var(--spacing) * 8); } .pt-\[20vh\] { padding-top: 20vh; } .pt-px { padding-top: 1px; } .pr-0\.5 { padding-right: calc(var(--spacing) * .5); } .pr-1\.5 { padding-right: calc(var(--spacing) * 1.5); } .pr-2 { padding-right: calc(var(--spacing) * 2); } .pr-7 { padding-right: calc(var(--spacing) * 7); } .pb-1 { padding-bottom: var(--spacing); } .pb-3 { padding-bottom: calc(var(--spacing) * 3); } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } .pb-6 { padding-bottom: calc(var(--spacing) * 6); } .pb-10 { padding-bottom: calc(var(--spacing) * 10); } .pl-2 { padding-left: calc(var(--spacing) * 2); } .pl-3 { padding-left: calc(var(--spacing) * 3); } .pl-3\.5 { padding-left: calc(var(--spacing) * 3.5); } .pl-4 { padding-left: calc(var(--spacing) * 4); } .pl-5 { padding-left: calc(var(--spacing) * 5); } .pl-6 { padding-left: calc(var(--spacing) * 6); } .pl-11 { padding-left: calc(var(--spacing) * 11); } .pl-\[3px\] { padding-left: 3px; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .align-baseline { vertical-align: baseline; } .align-middle { vertical-align: middle; } .font-mono { font-family: var(--font-mono-face),ui-monospace,"SF Mono",monospace; } .font-sans { font-family: var(--font-inter),ui-sans-serif,system-ui,sans-serif; } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading,var(--text-2xl--line-height)); } .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading,var(--text-3xl--line-height)); } .text-base { font-size: var(--text-base); line-height: var(--tw-leading,var(--text-base--line-height)); } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading,var(--text-lg--line-height)); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading,var(--text-sm--line-height)); } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading,var(--text-xl--line-height)); } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading,var(--text-xs--line-height)); } .text-\[0\.9em\] { font-size: 0.9em; } .text-\[9\.5px\] { font-size: 9.5px; } .text-\[9px\] { font-size: 9px; } .text-\[10\.5px\] { font-size: 10.5px; } .text-\[10px\] { font-size: 10px; } .text-\[11\.5px\] { font-size: 11.5px; } .text-\[11px\] { font-size: 11px; } .text-\[12\.5px\] { font-size: 12.5px; } .text-\[12px\] { font-size: 12px; } .text-\[13\.5px\] { font-size: 13.5px; } .text-\[13px\] { font-size: 13px; } .text-\[14px\] { font-size: 14px; } .text-\[15px\] { font-size: 15px; } .text-\[16px\] { font-size: 16px; } .text-\[17px\] { font-size: 17px; } .text-\[18px\] { font-size: 18px; } .text-\[19px\] { font-size: 19px; } .text-\[28px\] { font-size: 28px; } .leading-5 { --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); } .leading-6 { --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); } .leading-7 { --tw-leading: calc(var(--spacing) * 7); line-height: calc(var(--spacing) * 7); } .leading-\[1\.5\] { --tw-leading: 1.5; line-height: 1.5; } .leading-\[1\.6\] { --tw-leading: 1.6; line-height: 1.6; } .leading-\[17px\] { --tw-leading: 17px; line-height: 17px; } .leading-\[18px\] { --tw-leading: 18px; line-height: 18px; } .leading-none { --tw-leading: 1; line-height: 1; } .leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .tracking-\[-0\.01em\] { --tw-tracking: -.01em; letter-spacing: -0.01em; } .tracking-\[-0\.02em\] { --tw-tracking: -.02em; letter-spacing: -0.02em; } .tracking-tight { --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .tracking-wide { --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); } .break-words { overflow-wrap: break-word; } .whitespace-nowrap { white-space: nowrap; } .whitespace-pre { white-space: pre; } .whitespace-pre-wrap { white-space: pre-wrap; } .text-accent-ink { color: var(--accent-ink); } .text-black { color: var(--color-black); } .text-blue-600 { color: var(--color-blue-600); } .text-canvas { color: var(--canvas); } .text-gray-400 { color: var(--color-gray-400); } .text-gray-500 { color: var(--color-gray-500); } .text-gray-600 { color: var(--color-gray-600); } .text-gray-700 { color: var(--color-gray-700); } .text-gray-800 { color: var(--color-gray-800); } .text-gray-900 { color: var(--color-gray-900); } .text-green { color: var(--green); } .text-green-700 { color: var(--color-green-700); } .text-ink { color: var(--ink); } .text-ink-2 { color: var(--ink-2); } .text-ink-3 { color: var(--ink-3); } .text-orange { color: var(--orange); } .text-orange-700 { color: var(--color-orange-700); } .text-red { color: var(--red); } .text-red-600 { color: var(--color-red-600); } .text-red-700 { color: var(--color-red-700); } .text-transparent { color: rgba(0, 0, 0, 0); } .text-white { color: var(--color-white); } .lowercase { text-transform: lowercase; } .uppercase { text-transform: uppercase; } .italic { font-style: italic; } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } .line-through { text-decoration-line: line-through; } .underline { text-decoration-line: underline; } .underline-offset-2 { text-underline-offset: 2px; } .accent-\[var\(--accent\)\] { accent-color: var(--accent); } .opacity-0 { opacity: 0; } .opacity-50 { opacity: 0.5; } .opacity-55 { opacity: 0.55; } .opacity-60 { opacity: 0.6; } .opacity-70 { opacity: 0.7; } .opacity-90 { opacity: 0.9; } .shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.03\)\] { --tw-shadow: 0 1px 2px var(--tw-shadow-color,#00000008); } .shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.03\)\], .shadow-\[inset_0_1px_0_rgba\(255\,255\,255\,0\.14\)\] { box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); } .shadow-\[inset_0_1px_0_rgba\(255\,255\,255\,0\.14\)\] { --tw-shadow: inset 0 1px 0 var(--tw-shadow-color,#ffffff24); } .shadow-btn { --tw-shadow: var(--shadow-btn); } .shadow-btn, .shadow-card { box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); } .shadow-card { --tw-shadow: var(--shadow-card); } .shadow-hairline { --tw-shadow: var(--shadow-hairline); } .shadow-hairline, .shadow-lg { box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 25px 50px 0 var(--tw-shadow-color,#0000000d),0 12px 24px 0 var(--tw-shadow-color,#0000000a),0 6px 12px 0 var(--tw-shadow-color,#00000008),0 3px 6px 0 var(--tw-shadow-color,#00000005),0 1.5px 3px 0 var(--tw-shadow-color,#00000005); } .shadow-none { --tw-shadow: 0 0 #0000; } .shadow-none, .shadow-overlay { box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); } .shadow-overlay { --tw-shadow: var(--shadow-overlay); } .shadow-raised { --tw-shadow: var(--shadow-raised); } .shadow-raised, .shadow-sm { box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 18px 47px 0 var(--tw-shadow-color,#00000008),0 7.5px 19px 0 var(--tw-shadow-color,#00000005),0 4px 10.5px 0 var(--tw-shadow-color,#00000005),0 2.3px 5.8px 0 var(--tw-shadow-color,#00000003),0 1.2px 3.1px 0 var(--tw-shadow-color,#00000003),0 .5px 1.3px 0 var(--tw-shadow-color,#00000003); } .ring, .ring-1 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor); } .ring, .ring-1, .ring-2 { box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); } .ring-2 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor); } .ring-accent { --tw-ring-color: var(--accent); } .ring-inset { --tw-ring-color: var(--inset); } .ring-line { --tw-ring-color: var(--line); } .ring-transparent { --tw-ring-color: transparent; } .filter { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .transition-\[border-color\,box-shadow\,background-color\] { transition-property: border-color, box-shadow, background-color; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); } .transition-\[opacity\,transform\] { transition-property: opacity, transform; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); } .transition-\[transform\,background-color\,opacity\] { transition-property: transform, background-color, opacity; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); } .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); } .transition-opacity { transition-property: opacity; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); } .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); } .duration-100 { --tw-duration: .1s; transition-duration: 0.1s; } .duration-150 { --tw-duration: .15s; transition-duration: 0.15s; } .ease-out { --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); } .outline-none { --tw-outline-style: none; outline-style: none; } .select-none { user-select: none; } .ring-inset { --tw-ring-inset: inset; } .group-open\:rotate-0:is(:where(.group):is([open], :popover-open, :open) *) { rotate: 0deg; } @media (hover: hover) { .group-hover\:opacity-80:is(:where(.group):hover *) { opacity: 0.8; } .group-hover\/chat\:opacity-100:is(:where(.group\/chat):hover *), .group-hover\:opacity-100:is(:where(.group):hover *) { opacity: 1; } } .placeholder\:text-gray-400::placeholder { color: var(--color-gray-400); } .placeholder\:text-ink-3::placeholder { color: var(--ink-3); } .last\:border-0:last-child { border-style: var(--tw-border-style); border-width: 0px; } .even\:bg-gray-50:nth-child(2n) { background-color: var(--color-gray-50); } @media (hover: hover) { .hover\:border-gray-400:hover { border-color: var(--color-gray-400); } .hover\:bg-accent-ink:hover { background-color: var(--accent-ink); } .hover\:bg-black:hover { background-color: var(--color-black); } .hover\:bg-gray-50:hover { background-color: var(--color-gray-50); } .hover\:bg-gray-100:hover { background-color: var(--color-gray-100); } .hover\:bg-gray-200:hover { background-color: var(--color-gray-200); } .hover\:bg-gray-800:hover { background-color: var(--color-gray-800); } .hover\:bg-hover:hover { background-color: var(--hover); } .hover\:bg-hover-2:hover { background-color: var(--hover-2); } .hover\:bg-inset:hover { background-color: var(--inset); } .hover\:bg-line-strong:hover { background-color: var(--line-strong); } .hover\:text-gray-700:hover { color: var(--color-gray-700); } .hover\:text-gray-900:hover { color: var(--color-gray-900); } .hover\:text-ink:hover { color: var(--ink); } .hover\:text-red:hover { color: var(--red); } .hover\:underline:hover { text-decoration-line: underline; } .hover\:opacity-90:hover { opacity: 0.9; } .hover\:brightness-95:hover { --tw-brightness: brightness(95%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } } .focus\:border-gray-400:focus { border-color: var(--color-gray-400); } .focus\:border-gray-900:focus { border-color: var(--color-gray-900); } .focus\:border-line-strong:focus { border-color: var(--line-strong); } .focus\:bg-surface:focus { background-color: var(--surface); } .focus\:shadow-none:focus { --tw-shadow: 0 0 #0000; } .focus\:ring-1:focus, .focus\:shadow-none:focus { box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); } .focus\:ring-1:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor); } .focus\:ring-gray-900:focus { --tw-ring-color: var(--color-gray-900); } .focus-visible\:opacity-100:focus-visible { opacity: 1; } .active\:scale-\[0\.94\]:active { scale: 0.94; } .active\:scale-\[0\.96\]:active { scale: 0.96; } .disabled\:pointer-events-none:disabled { pointer-events: none; } .disabled\:cursor-default:disabled { cursor: default; } .disabled\:opacity-30:disabled { opacity: 0.3; } .disabled\:opacity-40:disabled { opacity: 0.4; } .disabled\:opacity-50:disabled { opacity: 0.5; } .disabled\:opacity-60:disabled { opacity: 0.6; } .has-\[\:checked\]\:bg-accent-tint:has(:checked) { background-color: var(--accent-tint); } .has-\[\:checked\]\:shadow-\[0_0_0_1px_var\(--accent\)\]:has(:checked) { --tw-shadow: 0 0 0 1px var(--tw-shadow-color,var(--accent)); box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); } .aria-expanded\:bg-hover[aria-expanded="true"] { background-color: var(--hover); } @media (min-width: 40rem) { .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); } .sm\:px-6 { padding-inline: calc(var(--spacing) * 6); } .sm\:px-12 { padding-inline: calc(var(--spacing) * 12); } .sm\:text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading,var(--text-4xl--line-height)); } } @media (min-width: 64rem) { .lg\:flex { display: flex; } .lg\:hidden { display: none; } } @media (min-width: 80rem) { .xl\:w-\[520px\] { width: 520px; } } .dark\:border-green\/30:where(.dark, .dark *) { border-color: var(--green); } @supports (color:color-mix(in lab,red,red)) { .dark\:border-green\/30:where(.dark, .dark *) { border-color: color-mix(in oklab,var(--green) 30%,transparent); } } .dark\:border-ink:where(.dark, .dark *) { border-color: var(--ink); } .dark\:border-line:where(.dark, .dark *) { border-color: var(--line); } .dark\:border-line-strong:where(.dark, .dark *) { border-color: var(--line-strong); } .dark\:border-red\/40:where(.dark, .dark *) { border-color: var(--red); } @supports (color:color-mix(in lab,red,red)) { .dark\:border-red\/40:where(.dark, .dark *) { border-color: color-mix(in oklab,var(--red) 40%,transparent); } } .dark\:bg-field:where(.dark, .dark *) { background-color: var(--field); } .dark\:bg-green-tint:where(.dark, .dark *) { background-color: var(--green-tint); } .dark\:bg-hover-2:where(.dark, .dark *) { background-color: var(--hover-2); } .dark\:bg-ink:where(.dark, .dark *) { background-color: var(--ink); } .dark\:bg-inset:where(.dark, .dark *) { background-color: var(--inset); } .dark\:bg-page:where(.dark, .dark *) { background-color: var(--page); } .dark\:bg-red-tint:where(.dark, .dark *) { background-color: var(--red-tint); } .dark\:bg-surface:where(.dark, .dark *) { background-color: var(--surface); } .dark\:from-surface:where(.dark, .dark *) { --tw-gradient-from: var(--surface); --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position)); } .dark\:to-surface:where(.dark, .dark *) { --tw-gradient-to: var(--surface); --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position)); } .dark\:text-accent-ink:where(.dark, .dark *) { color: var(--accent-ink); } .dark\:text-canvas:where(.dark, .dark *) { color: var(--canvas); } .dark\:text-green:where(.dark, .dark *) { color: var(--green); } .dark\:text-ink:where(.dark, .dark *) { color: var(--ink); } .dark\:text-ink-2:where(.dark, .dark *) { color: var(--ink-2); } .dark\:text-ink-3:where(.dark, .dark *) { color: var(--ink-3); } .dark\:text-page:where(.dark, .dark *) { color: var(--page); } .dark\:text-red:where(.dark, .dark *) { color: var(--red); } .dark\:placeholder\:text-ink-3:where(.dark, .dark *)::placeholder { color: var(--ink-3); } .dark\:even\:bg-inset:where(.dark, .dark *):nth-child(2n) { background-color: var(--inset); } @media (hover: hover) { .dark\:hover\:bg-hover:where(.dark, .dark *):hover { background-color: var(--hover); } .dark\:hover\:bg-hover-2:where(.dark, .dark *):hover { background-color: var(--hover-2); } .dark\:hover\:bg-ink:where(.dark, .dark *):hover { background-color: var(--ink); } .dark\:hover\:text-ink:where(.dark, .dark *):hover { color: var(--ink); } } .\[\&_\*\]\:text-ink * { color: var(--ink); } .\[\&_a\]\:text-gray-900 a { color: var(--color-gray-900); } .\[\&_a\]\:underline a { text-decoration-line: underline; } .\[\&_a\]\:underline-offset-2 a { text-underline-offset: 2px; } .\[\&_h2\]\:mt-10 h2 { margin-top: calc(var(--spacing) * 10); } .\[\&_h2\]\:mb-3 h2 { margin-bottom: calc(var(--spacing) * 3); } .\[\&_h2\]\:text-lg h2 { font-size: var(--text-lg); line-height: var(--tw-leading,var(--text-lg--line-height)); } .\[\&_h2\]\:font-semibold h2 { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .\[\&_h2\]\:text-gray-900 h2 { color: var(--color-gray-900); } .\[\&_h3\]\:mt-6 h3 { margin-top: calc(var(--spacing) * 6); } .\[\&_h3\]\:mb-2 h3 { margin-bottom: calc(var(--spacing) * 2); } .\[\&_h3\]\:font-semibold h3 { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .\[\&_h3\]\:text-gray-900 h3 { color: var(--color-gray-900); } .\[\&_li\]\:mt-1\.5 li { margin-top: calc(var(--spacing) * 1.5); } .\[\&_p\]\:mt-3 p { margin-top: calc(var(--spacing) * 3); } .\[\&_strong\]\:font-semibold strong { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .\[\&_strong\]\:text-gray-900 strong { color: var(--color-gray-900); } .\[\&_ul\]\:mt-3 ul { margin-top: calc(var(--spacing) * 3); } .\[\&_ul\]\:list-disc ul { list-style-type: disc; } .\[\&_ul\]\:pl-5 ul { padding-left: calc(var(--spacing) * 5); } .\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker { display: none; } } :root { --smooth-ring-color: #0000000d; --smooth-ring-width: 1px; } @supports (color:light-dark(black,white)) { :root { --smooth-ring-color: light-dark(#0000000d,#ffffff2e); } } .light, [data-theme="light"] { --smooth-ring-color: #0000000d; } .dark, [data-theme="dark"] { --smooth-ring-color: #ffffff2e; } :root { --page: oklch(98.5% .001 286.376); --canvas: oklch(96.1% .002 247.84); --surface: oklch(100% 0 0); --inset: oklch(97.9% .002 247.839); --hover: oklch(97% .002 247.839); --hover-2: oklch(93.3% .003 247.86); --ink: oklch(24.7% .006 258.361); --ink-2: oklch(50.6% .01 264.477); --ink-3: oklch(69.5% .009 264.505); --line: oklch(94.6% .003 264.542); --line-strong: oklch(91.2% .005 258.326); --line-soft: oklch(96.6% .002 264.542); --grid-line: var(--line); } @supports (color:color-mix(in lab,red,red)) { :root { --grid-line: color-mix(in srgb,var(--line) 78%,transparent); } } :root { --field: oklch(96.1% .001 286.375); --stripe: oklch(40.5% 0 0/.075); --stripe-bg: oklch(97% 0 0); --accent: oklch(62.6% .205 254.947); --accent-ink: oklch(55.6% .187 255.617); --accent-tint: oklch(96% .019 252.878); --green: oklch(60.3% .155 150.883); --green-tint: oklch(95.8% .017 159.118); --orange: oklch(68.9% .179 49.902); --orange-tint: oklch(96.4% .021 67.581); --red: oklch(62.1% .192 23.042); --red-tint: oklch(95.6% .017 17.462); --tooltip-bg: oklch(27.2% .008 264.435); --tooltip-fg: oklch(97.6% .002 247.839); --tooltip-muted: oklch(73.1% .008 260.731); --tooltip-border: oklch(35.6% .007 264.474); --shadow-hairline: 0 0 0 1px var(--line); --shadow-btn: 0 0 0 1px var(--line-strong),var(--shadow-xs); --shadow-card: 0 0 0 1px var(--line),var(--shadow-sm); --shadow-raised: 0 0 0 1px var(--line),var(--shadow-md); --shadow-overlay: 0 0 0 1px var(--line),var(--shadow-lg); --shadow-inset-field: inset 0 1px 2px oklch(0% 0 0/.12); } .dark { --page: oklch(20.9% .004 264.477); --canvas: oklch(23.1% .004 264.487); --surface: oklch(26% .006 271.191); --inset: oklch(24.3% .004 264.492); --hover: oklch(28.9% .006 271.22); --hover-2: oklch(31.8% .007 274.747); --ink: oklch(96.4% .002 247.839); --ink-2: oklch(73.1% .008 260.731); --ink-3: oklch(54.1% .01 264.484); --line: oklch(30.8% .006 258.354); --line-strong: oklch(35.6% .007 264.474); --line-soft: oklch(27.8% .006 258.354); --field: oklch(29.3% .006 271.223); --stripe: oklch(100% 0 0/.055); --stripe-bg: oklch(22.6% .004 264.485); --accent: oklch(68% .173 253.301); --accent-ink: oklch(78.8% .113 248.33); --accent-tint: oklch(68% .173 253.301/.16); --green: oklch(70.5% .154 153.814); --green-tint: oklch(70.5% .154 153.814/.14); --orange: oklch(74.6% .156 55.642); --orange-tint: oklch(74.6% .156 55.642/.14); --red: oklch(66.6% .18 21.433); --red-tint: oklch(66.6% .18 21.433/.14); --tooltip-bg: oklch(18.2% .004 264.459); --tooltip-fg: oklch(96.4% .002 247.839); --tooltip-muted: oklch(73.1% .008 260.731); --tooltip-border: oklch(30.8% .006 258.354); --shadow-hairline: 0 0 0 1px var(--line); --shadow-btn: 0 0 0 1px oklch(100% 0 0/.1),0 1px 2px oklch(0% 0 0/.3); --shadow-card: 0 0 0 1px oklch(100% 0 0/.11),0 1px 2px oklch(0% 0 0/.2),0 2px 6px oklch(0% 0 0/.2); --shadow-raised: 0 0 0 1px oklch(100% 0 0/.13),0 2px 10px oklch(0% 0 0/.22); --shadow-overlay: 0 0 0 1px oklch(100% 0 0/.15),0 8px 28px oklch(0% 0 0/.34); --shadow-inset-field: inset 0 1px 2px oklch(0% 0 0/.4); } html { -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; } body { background-color: var(--stripe-bg); background-image: repeating-linear-gradient(-45deg,transparent 0,transparent 7px,var(--stripe) 7px,var(--stripe) 8px); color: var(--ink); font-feature-settings: "cv11", "ss01"; letter-spacing: -0.01em; background-attachment: fixed; font-size: 14px; line-height: 1.5; } ::selection { background: var(--accent-tint); color: var(--ink); } h1, h2, h3, h4 { text-wrap: balance; } p { text-wrap: pretty; } a { text-underline-position: from-font; text-decoration-skip-ink: auto; } .theme-switching *, .theme-switching ::after, .theme-switching ::before { transition: none !important; } @media (hover: none) { .records-row:hover > .records-cell { background: 0px 0px; } .records-row:hover > td.is-colsel { background: var(--accent); } @supports (color:color-mix(in lab,red,red)) { .records-row:hover > td.is-colsel { background: color-mix(in srgb,var(--accent) 4%,var(--surface)); } } .records-header-button:hover { color: var(--ink-2); background: 0px 0px; } } .component-nav-scroll { scrollbar-width: none; } .component-nav-scroll::-webkit-scrollbar { display: none; } @media (min-width: 64rem) { .component-nav-scroll { mask-image: linear-gradient(oklch(0 0 0) 0px, oklch(0 0 0) calc(100% - 6rem), rgba(0, 0, 0, 0) 100%); } } @media (hover: none) and (pointer: coarse) { .primitive-showcase { user-select: none; } .primitive-showcase :is(input, textarea, [contenteditable="true"], pre, code) { user-select: text; } .primitive-showcase :is(a, button, [role="button"]) { -webkit-tap-highlight-color: transparent; } .primitive-showcase :is(a, button, [role="button"]):focus-visible { outline: none; } .primitive-showcase :is(img, svg, canvas) { -webkit-user-drag: none; } .insight-chart-stage { touch-action: pan-y; } } [role="button"]:not([aria-disabled="true"]), a, button:not(:disabled), label:has(input) { cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } [contenteditable]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; } .animated-underline { display: inline-block; position: relative; } .animated-underline::after { content: ""; transform-origin: 0px center; height: 1px; transition: transform .28s var(--ease-link); background: currentcolor; position: absolute; bottom: -1px; left: 0px; right: 0px; transform: scaleX(0); } a:focus-visible .animated-underline::after, a:hover .animated-underline::after { transform: scaleX(1); } .source-avatar { box-shadow: oklch(0.21 0.034 263.436 / 0.1) 0px 0px 0px 1px; } .dark .source-avatar { box-shadow: oklch(1 0 0 / 0.08) 0px 0px 0px 1px; } .primitive-card-pad { padding: 12px; } .primitive-card-bar { padding: 10px 12px; } .primitive-card-footer { padding: 10px; } .primitive-table-cell { padding: 10px 12px; } .primitive-icon-button { border-radius: var(--radius-control); justify-content: center; align-items: center; width: 28px; height: 28px; display: inline-flex; } @keyframes shimmer-text { 0% { background-position: 150% center; } 100% { background-position: -50% center; } } @keyframes fade-up { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0px); } } .home-reveal { will-change: opacity, transform, filter; } .filter-status-done, .filter-status-progress, .filter-status-todo { border: 1px solid rgba(0, 0, 0, 0); } .insight-chart-stage { overflow: hidden; } .insight-chart-cursor { z-index: 4; background: var(--ink); opacity: 0.26; pointer-events: none; width: 1px; position: absolute; top: 0px; bottom: 0px; } .insight-chart-tooltip-anchor { z-index: 5; pointer-events: none; position: absolute; top: 8px; transform: translate(-50%); } .insight-chart-tooltip { border: 1px solid var(--line-strong); color: var(--tooltip-fg); background: var(--tooltip-bg); box-shadow: var(--shadow-overlay); font-variant-numeric: tabular-nums; white-space: nowrap; border-radius: 8px; align-items: center; gap: 12px; padding: 5px 9px; font-size: 11.5px; display: flex; } .insight-chart-tooltip-item { align-items: center; gap: 6px; display: inline-flex; } .insight-chart-tooltip-dot { border-radius: 50%; flex: 0 0 8px; width: 8px; height: 8px; } .filter-status-todo { --tag-base: oklch(75.7% .153 66.401); } .filter-status-progress { --tag-base: oklch(67.1% .118 219.351); } .filter-status-done { --tag-base: oklch(65.2% .131 162.865); } .filter-status-done, .filter-status-progress, .filter-status-todo { color: var(--tag-base); } @supports (color:color-mix(in lab,red,red)) { .filter-status-done, .filter-status-progress, .filter-status-todo { color: color-mix(in srgb,var(--tag-base) 92%,var(--ink)); } } .filter-status-done, .filter-status-progress, .filter-status-todo { background: var(--tag-base); } @supports (color:color-mix(in lab,red,red)) { .filter-status-done, .filter-status-progress, .filter-status-todo { background: color-mix(in srgb,var(--tag-base) 20%,var(--surface)); } } .filter-status-done, .filter-status-progress, .filter-status-todo { border-color: var(--tag-base); } @supports (color:color-mix(in lab,red,red)) { .filter-status-done, .filter-status-progress, .filter-status-todo { border-color: color-mix(in srgb,var(--tag-base) 34%,var(--surface)); } } .dark .filter-status-done, .dark .filter-status-progress, .dark .filter-status-todo, .dark .records-tag { color: var(--tag-base); } @supports (color:color-mix(in lab,red,red)) { .dark .filter-status-done, .dark .filter-status-progress, .dark .filter-status-todo, .dark .records-tag { color: color-mix(in srgb,var(--tag-base) 86%,white); } } .dark .filter-status-done, .dark .filter-status-progress, .dark .filter-status-todo, .dark .records-tag { background: var(--tag-base); } @supports (color:color-mix(in lab,red,red)) { .dark .filter-status-done, .dark .filter-status-progress, .dark .filter-status-todo, .dark .records-tag { background: color-mix(in srgb,var(--tag-base) 34%,var(--surface)); } } .dark .filter-status-done, .dark .filter-status-progress, .dark .filter-status-todo, .dark .records-tag { border-color: var(--tag-base); } @supports (color:color-mix(in lab,red,red)) { .dark .filter-status-done, .dark .filter-status-progress, .dark .filter-status-todo, .dark .records-tag { border-color: color-mix(in srgb,var(--tag-base) 34%,var(--surface)); } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes eq-bounce { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } } .stream-tail { filter: blur(1.6px); mask-image: linear-gradient(90deg, oklch(0 0 0) 20%, oklch(0 0 0 / 0.2)); } .stream-caret { background: var(--ink); vertical-align: text-bottom; border-radius: 1px; width: 2px; height: 1.05em; margin-left: 1.5px; animation: 1s step-end 0s infinite normal none running caret-blink; display: inline-block; translate: 0px -0.5px; } .stream-caret.is-streaming { animation: auto ease 0s 1 normal none running none; } @keyframes caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .stream-caret { animation: auto ease 0s 1 normal none running none; } .stream-tail { filter: none; mask-image: none; } } @keyframes pop-in { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } @keyframes spin { 100% { transform: rotate(1turn); } } @keyframes pixel-on { 0%, 100% { opacity: 0.15; } 18%, 42% { opacity: 1; } 62% { opacity: 0.15; } } @media (prefers-reduced-motion: reduce) { *, ::after, ::before { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } :root { --font-inter: var(--font-inter-next),"Inter"; --font-mono-face: var(--font-mono-next),"JetBrains Mono"; } body, html { height: 100%; } body { background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-image: none; } .lh-viz { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; } .dark .lh-viz { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; } input:-webkit-autofill, input:-webkit-autofill:hover { -webkit-text-fill-color: var(--color-ink); box-shadow: 0 0 0 1000px var(--color-field) inset; caret-color: var(--color-ink); transition: background-color 9999s ease-out; } input:-webkit-autofill:focus, textarea:-webkit-autofill { -webkit-text-fill-color: var(--color-ink); box-shadow: 0 0 0 1000px var(--color-field) inset; caret-color: var(--color-ink); transition: background-color 9999s ease-out; } select:-webkit-autofill { -webkit-text-fill-color: var(--color-ink); box-shadow: 0 0 0 1000px var(--color-field) inset; caret-color: var(--color-ink); transition: background-color 9999s ease-out; } @keyframes dt-shine-sweep { 0% { background-position: -200% 0px; } 100% { background-position: 200% 0px; } } .dt-shine { color: rgba(0, 0, 0, 0); background: linear-gradient(90deg, rgb(156, 163, 175) 0px, rgb(156, 163, 175) 30%, rgb(31, 41, 55) 42%, rgb(255, 255, 255) 50%, rgb(31, 41, 55) 58%, rgb(156, 163, 175) 70%, rgb(156, 163, 175) 100%) 0px 0px / 200% 100% text; animation: 1.7s ease-in-out 0s infinite normal none running dt-shine-sweep; } @keyframes dt-task-in { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: translateY(0px); } } .dt-task { animation: 0.4s ease-out 0s 1 normal both running dt-task-in; } @keyframes dt-check-in { 0% { opacity: 0; transform: scale(0.4); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } .dt-check { animation: 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0s 1 normal both running dt-check-in; } @keyframes dt-fade-slide { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: translateY(0px); } } .dt-fade { animation: 0.25s ease-out 0s 1 normal none running dt-fade-slide; } @keyframes dt-grid-pulse { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } } .dt-grid-dot { animation: 1.2s ease-in-out 0s infinite normal none running dt-grid-pulse; } .dark .dt-shine { background-image: linear-gradient(90deg, rgb(107, 114, 128) 0px, rgb(107, 114, 128) 30%, rgb(229, 231, 235) 42%, rgb(255, 255, 255) 50%, rgb(229, 231, 235) 58%, rgb(107, 114, 128) 70%, rgb(107, 114, 128) 100%); } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-gradient-position { syntax: "*"; inherits: false; } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-stops { syntax: "*"; inherits: false; } @property --tw-gradient-via-stops { syntax: "*"; inherits: false; } @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0; } @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-leading { syntax: "*"; inherits: false; } @property --tw-font-weight { syntax: "*"; inherits: false; } @property --tw-tracking { syntax: "*"; inherits: false; } @property --tw-ordinal { syntax: "*"; inherits: false; } @property --tw-slashed-zero { syntax: "*"; inherits: false; } @property --tw-numeric-figure { syntax: "*"; inherits: false; } @property --tw-numeric-spacing { syntax: "*"; inherits: false; } @property --tw-numeric-fraction { syntax: "*"; inherits: false; } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false; } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false; } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false; } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false; } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false; } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-blur { syntax: "*"; inherits: false; } @property --tw-brightness { syntax: "*"; inherits: false; } @property --tw-contrast { syntax: "*"; inherits: false; } @property --tw-grayscale { syntax: "*"; inherits: false; } @property --tw-hue-rotate { syntax: "*"; inherits: false; } @property --tw-invert { syntax: "*"; inherits: false; } @property --tw-opacity { syntax: "*"; inherits: false; } @property --tw-saturate { syntax: "*"; inherits: false; } @property --tw-sepia { syntax: "*"; inherits: false; } @property --tw-drop-shadow { syntax: "*"; inherits: false; } @property --tw-drop-shadow-color { syntax: "*"; inherits: false; } @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false; } @property --tw-duration { syntax: "*"; inherits: false; } @property --tw-ease { syntax: "*"; inherits: false; } @keyframes pulse { 50% { opacity: 0.5; } } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/ba9851c3c22cd980-s.woff2") format("woff2"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/21350d82a1f187e9-s.woff2") format("woff2"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/c5fe6dc8356a8c31-s.woff2") format("woff2"); unicode-range: U+1F00-1FFF; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/19cfc7226ec3afaa-s.woff2") format("woff2"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/df0a9ae256c0569c-s.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/8e9860b6e62d6359-s.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/e4af272ccee01ff0-s.p.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter Fallback"; src: local("Arial"); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; } .__className_d8ebd1 { font-family: Inter, "Inter Fallback"; font-style: normal; } .__variable_d8ebd1 { --font-inter-next: "Inter","Inter Fallback"; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/_next/static/media/886030b0b59bc5a7-s.woff2") format("woff2"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/_next/static/media/0aa834ed78bf6d07-s.woff2") format("woff2"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/_next/static/media/67957d42bae0796d-s.woff2") format("woff2"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/_next/static/media/f911b923c6adde36-s.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/_next/static/media/939c4f875ee75fbb-s.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/_next/static/media/bb3ef058b751a6ad-s.p.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono Fallback"; src: local("Arial"); ascent-override: 75.79%; descent-override: 22.29%; line-gap-override: 0%; size-adjust: 134.59%; } .__className_4dc837 { font-family: "JetBrains Mono", "JetBrains Mono Fallback"; font-style: normal; } .__variable_4dc837 { --font-mono-next: "JetBrains Mono","JetBrains Mono Fallback"; } @layer clerk { .cl-internal-151wlmb { box-sizing: border-box; width: fit-content; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-style: normal; } } @layer clerk { .cl-internal-ppiu2p { isolation: isolate; max-width: calc(-2.5rem + 100vw); width: 25rem; border-style: solid; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); border-radius: calc(1rem); color: rgb(17, 24, 39); position: relative; overflow: hidden; border-width: 0px; box-shadow: 0px 5px 15px 0px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 8%),0px 15px 35px -5px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 20%),0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } } @layer clerk { .cl-internal-1kmeu1r { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; isolation: isolate; max-width: calc(-2.5rem + 100vw); width: 25rem; border-style: solid; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); border-radius: calc(1rem); color: rgb(17, 24, 39); position: relative; overflow: hidden; border-width: 0px; box-shadow: 0px 5px 15px 0px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 8%),0px 15px 35px -5px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 20%),0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } } @layer clerk { .cl-internal-1vu4pdb { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; isolation: isolate; max-width: calc(-2.5rem + 100vw); width: 25rem; border-style: solid; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); border-radius: calc(1rem); color: rgb(17, 24, 39); position: relative; overflow: hidden; border-width: 0px; box-shadow: 0px 5px 15px 0px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 8%),0px 15px 35px -5px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 20%),0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } } @layer clerk { .cl-internal-jg3nn9 { background-color: rgb(255, 255, 255); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 200ms; text-align: center; z-index: 10; border-style: solid; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); border-radius: calc(0.666667rem); position: relative; padding: calc(var(--clerk-spacing, 1rem) * 2) calc(var(--clerk-spacing, 1rem) * 2.5); -webkit-box-pack: center; place-content: center; margin-block-start: -1px; margin-inline: -1px; border-width: 0px; box-shadow: 0px 0px 2px 0px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 8%),0px 1px 2px 0px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 6%),0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 3%); } } @layer clerk { .cl-internal-1wvi3u7 { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; gap: calc(var(--clerk-spacing, 1rem) * 2); background-color: rgb(255, 255, 255); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 200ms; text-align: center; z-index: 10; border-style: solid; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); border-radius: calc(0.666667rem); position: relative; padding: calc(var(--clerk-spacing, 1rem) * 2) calc(var(--clerk-spacing, 1rem) * 2.5); -webkit-box-pack: center; place-content: center; margin-block-start: -1px; margin-inline: -1px; border-width: 0px; box-shadow: 0px 0px 2px 0px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 8%),0px 1px 2px 0px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 6%),0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 3%); } } @layer clerk { .cl-internal-156d19r { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; gap: calc(var(--clerk-spacing, 1rem) * 2); background-color: rgb(255, 255, 255); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 200ms; text-align: center; z-index: 10; border-style: solid; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); border-radius: calc(0.666667rem); position: relative; padding: calc(var(--clerk-spacing, 1rem) * 2) calc(var(--clerk-spacing, 1rem) * 2.5); -webkit-box-pack: center; place-content: center; margin-block-start: -1px; margin-inline: -1px; border-width: 0px; box-shadow: 0px 0px 2px 0px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 8%),0px 1px 2px 0px color-mix(in srgb, transparent, var(--clerk-color-shadow, #000000) 6%),0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 3%); } } @layer clerk { .cl-internal-1401ma { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: var(--clerk-spacing, 1rem); } } @layer clerk { .cl-internal-1f4p2mz { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: var(--clerk-spacing, 1rem); } } @layer clerk { .cl-internal-1ojlvuy { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 0.25); } } @layer clerk { .cl-internal-x0fvpz { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 0.25); } } @layer clerk { .cl-internal-4ksob8 { box-sizing: border-box; color: rgb(17, 24, 39); margin: 0px; text-wrap: balance; font-family: inherit; letter-spacing: normal; font-weight: var(--clerk-font-weight-bold, 700); font-size: var(--clerk-font-size-lg, calc(var(--clerk-font-size, 0.8125rem) * 17 / 13)); line-height: calc(1.41176); } } @layer clerk { .cl-internal-1u9prf3 { overflow-wrap: break-word; } .cl-internal-1u9prf3:empty { display: none; } } @layer clerk { .cl-internal-zfzhac { box-sizing: border-box; margin: 0px; font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); text-wrap: pretty; font-family: inherit; letter-spacing: normal; font-weight: var(--clerk-font-weight-normal, var(--clerk-font-weight, 400)); line-height: calc(1.38462); color: rgb(107, 114, 128); overflow-wrap: break-word; } .cl-internal-zfzhac:disabled, .cl-internal-zfzhac[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } .cl-internal-zfzhac:empty { display: none; } } @layer clerk { .cl-internal-1hzklve { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 1.5); } } @layer clerk { .cl-internal-vvtys3 { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 1.5); } } @layer clerk { .cl-internal-1grkfuk { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 0.5); } } @layer clerk { .cl-internal-kpc0nc { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 0.5); } } @layer clerk { .cl-internal-jw6knv { -webkit-box-pack: center; justify-content: center; grid-template-columns: repeat(1, minmax(0px, 1fr)); } } @layer clerk { .cl-internal-9zv1kb { display: grid; -webkit-box-align: stretch; align-items: stretch; gap: calc(var(--clerk-spacing, 1rem) * 0.5); -webkit-box-pack: center; justify-content: center; grid-template-columns: repeat(1, minmax(0px, 1fr)); } } @layer clerk { .cl-internal-twlk36 { box-sizing: border-box; display: grid; -webkit-box-align: stretch; align-items: stretch; gap: calc(var(--clerk-spacing, 1rem) * 0.5); -webkit-box-pack: center; justify-content: center; grid-template-columns: repeat(1, minmax(0px, 1fr)); } } @layer clerk { .cl-internal-z1qyxy { gap: var(--clerk-spacing, 1rem); position: relative; -webkit-box-pack: start; justify-content: flex-start; } .cl-internal-z1qyxy[data-variant="solid"] { border-width: 0px; } .cl-internal-z1qyxy[data-variant="solid"]::after { position: absolute; content: ""; border-radius: inherit; z-index: -1; inset: 0px; opacity: 1; transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 100ms; background: linear-gradient(rgba(255, 255, 255, 0.11) 0%, transparent 100%); } .cl-internal-z1qyxy[data-variant="solid"]:hover::after { opacity: 0; } .cl-internal-z1qyxy[data-variant="solid"]:active::after { opacity: 1; } .cl-internal-z1qyxy[data-variant="solid"][data-color="primary"] { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-z1qyxy[data-variant="solid"][data-color="primary"]:focus { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-z1qyxy[data-variant="solid"][data-color="primary"]:focus:not(:focus-visible) { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-z1qyxy[data-variant="solid"][data-color="primary"]:focus-visible { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-z1qyxy[data-variant="solid"][data-color="danger"] { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-z1qyxy[data-variant="solid"][data-color="danger"]:focus { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-z1qyxy[data-variant="solid"][data-color="danger"]:focus:not(:focus-visible) { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-z1qyxy[data-variant="solid"][data-color="danger"]:focus-visible { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-z1qyxy[data-variant="outline"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-z1qyxy[data-variant="outline"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-z1qyxy[data-variant="outline"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-z1qyxy[data-variant="outline"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-z1qyxy[data-variant="bordered"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-z1qyxy[data-variant="bordered"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-z1qyxy[data-variant="bordered"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-z1qyxy[data-variant="bordered"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } } @layer clerk { .cl-internal-3jzzfg { margin: 0px; padding: calc(var(--clerk-spacing, 1rem) * 0.4375) calc(var(--clerk-spacing, 1rem) * 0.75); border-width: 1px; outline: 0px; user-select: none; cursor: pointer; background-color: unset; color: color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 62%); border-radius: 0.5rem; isolation: isolate; display: inline-flex; -webkit-box-align: center; align-items: center; transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 100ms; font-family: var(--clerk-font-family-buttons, var(--clerk-font-family, inherit)); letter-spacing: normal; font-weight: var(--clerk-font-weight-medium, 500); font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); line-height: calc(1.38462); border-style: solid; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); width: 100%; --accent: #111827; --accentHover: color-mix(in srgb, #111827, white 20%); --border: #111827; --accentContrast: var(--clerk-color-primary-foreground, light-dark(white, black)); --alpha: color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%); gap: var(--clerk-spacing, 1rem); position: relative; -webkit-box-pack: start; justify-content: flex-start; } .cl-internal-3jzzfg:disabled, .cl-internal-3jzzfg[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } .cl-internal-3jzzfg:hover { background-color: color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%); } .cl-internal-3jzzfg:focus-visible { background-color: color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%); border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%); -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: ease; transition-duration: 200ms; } .cl-internal-3jzzfg:focus { -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: ease; transition-duration: 200ms; } .cl-internal-3jzzfg:focus:not(:focus-visible) { box-shadow: none; } .cl-internal-3jzzfg[data-variant="solid"] { border-width: 0px; } .cl-internal-3jzzfg[data-variant="solid"]::after { position: absolute; content: ""; border-radius: inherit; z-index: -1; inset: 0px; opacity: 1; transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 100ms; background: linear-gradient(rgba(255, 255, 255, 0.11) 0%, transparent 100%); } .cl-internal-3jzzfg[data-variant="solid"]:hover::after { opacity: 0; } .cl-internal-3jzzfg[data-variant="solid"]:active::after { opacity: 1; } .cl-internal-3jzzfg[data-variant="solid"][data-color="primary"] { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-3jzzfg[data-variant="solid"][data-color="primary"]:focus { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-3jzzfg[data-variant="solid"][data-color="primary"]:focus:not(:focus-visible) { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-3jzzfg[data-variant="solid"][data-color="primary"]:focus-visible { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-3jzzfg[data-variant="solid"][data-color="danger"] { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-3jzzfg[data-variant="solid"][data-color="danger"]:focus { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-3jzzfg[data-variant="solid"][data-color="danger"]:focus:not(:focus-visible) { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-3jzzfg[data-variant="solid"][data-color="danger"]:focus-visible { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-3jzzfg[data-variant="outline"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-3jzzfg[data-variant="outline"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-3jzzfg[data-variant="outline"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-3jzzfg[data-variant="outline"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-3jzzfg[data-variant="bordered"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-3jzzfg[data-variant="bordered"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-3jzzfg[data-variant="bordered"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-3jzzfg[data-variant="bordered"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } } @layer clerk { .cl-internal-1afp10f { width: 100%; overflow: hidden; } } @layer clerk { .cl-internal-1m8tgpy { display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; gap: calc(var(--clerk-spacing, 1rem) * 0.75); width: 100%; overflow: hidden; } } @layer clerk { .cl-internal-11tkpc3 { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; gap: calc(var(--clerk-spacing, 1rem) * 0.75); width: 100%; overflow: hidden; } } @layer clerk { .cl-internal-18j3vrq { flex: 0 0 var(--clerk-spacing, 1rem); } } @layer clerk { .cl-internal-gpghoi { display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; flex: 0 0 var(--clerk-spacing, 1rem); } } @layer clerk { .cl-internal-1jcbc2a { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; flex: 0 0 var(--clerk-spacing, 1rem); } } @layer clerk { .cl-internal-vn3zkh { display: inline-block; width: 1rem; height: 1rem; max-width: 100%; opacity: 1; background-image: url("https://img.clerk.com/static/google.svg"); background-size: cover; background-position: center center; background-repeat: no-repeat; } } @layer clerk { .cl-internal-16ez36o { box-sizing: border-box; margin: 0px; font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); text-wrap: nowrap pretty; font-family: var(--clerk-font-family-buttons, var(--clerk-font-family, inherit)); letter-spacing: normal; font-weight: var(--clerk-font-weight-medium, 500); line-height: calc(1.38462); color: inherit; text-overflow: ellipsis; white-space-collapse: collapse; overflow: hidden; } .cl-internal-16ez36o:disabled, .cl-internal-16ez36o[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } } @layer clerk { .cl-internal-kk6ji1 { display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } } @layer clerk { .cl-internal-ovdovs { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } } @layer clerk { .cl-internal-1nh648b { flex: 1 1 0%; background-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); height: 1px; } } @layer clerk { .cl-internal-2rvl11 { display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; flex: 1 1 0%; background-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); height: 1px; } } @layer clerk { .cl-internal-1q223lr { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; flex: 1 1 0%; background-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); height: 1px; } } @layer clerk { .cl-internal-1y1uzsb { margin: 0 var(--clerk-spacing, 1rem); } } @layer clerk { .cl-internal-ap9qgs { box-sizing: border-box; font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); text-wrap: pretty; font-family: inherit; letter-spacing: normal; font-weight: var(--clerk-font-weight-normal, var(--clerk-font-weight, 400)); line-height: calc(1.38462); color: rgb(107, 114, 128); margin: 0 var(--clerk-spacing, 1rem); } .cl-internal-ap9qgs:disabled, .cl-internal-ap9qgs[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } } @layer clerk { .cl-internal-1gtme29 { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 2); } } @layer clerk { .cl-internal-ji79b9 { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 2); } } @layer clerk { .cl-internal-1llpz65 { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 1.5); } } @layer clerk { .cl-internal-ht35d7 { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 1.5); } } @layer clerk { .cl-internal-mx8yle { display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: justify; justify-content: space-between; gap: var(--clerk-spacing, 1rem); } } @layer clerk { .cl-internal-k7wlaf { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: justify; justify-content: space-between; gap: var(--clerk-spacing, 1rem); } } @layer clerk { .cl-internal-222wc8 { position: relative; flex: 1 1 auto; } } @layer clerk { .cl-internal-yjg8ip { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; position: relative; flex: 1 1 auto; } } @layer clerk { .cl-internal-10rdw13 { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; position: relative; flex: 1 1 auto; } } @layer clerk { .cl-internal-151yidv { gap: calc(var(--clerk-spacing, 1rem) * 0.5); } } @layer clerk { .cl-internal-h82k1 { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 0.5); } } @layer clerk { .cl-internal-17uj465 { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 0.5); } } @layer clerk { .cl-internal-6fmoj3 { display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between; } } @layer clerk { .cl-internal-66mzqw { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between; } } @layer clerk { .cl-internal-1sr07cd { display: flex; -webkit-box-align: center; align-items: center; } } @layer clerk { .cl-internal-1mq2keo { color: rgb(17, 24, 39); font-family: inherit; letter-spacing: normal; font-weight: var(--clerk-font-weight-medium, 500); font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); line-height: calc(1.38462); display: flex; -webkit-box-align: center; align-items: center; } .cl-internal-1mq2keo:disabled, .cl-internal-1mq2keo[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } } @layer clerk { .cl-internal-t64bqq[data-variant="default"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } .cl-internal-t64bqq[data-variant="default"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); } .cl-internal-t64bqq[data-variant="default"]:focus-within, .cl-internal-t64bqq[data-variant="default"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-t64bqq[data-variant="default"][data-feedback="error"] { box-shadow: color-mix(in srgb, transparent 59%, rgb(220, 38, 38) 41%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px; } .cl-internal-t64bqq[data-variant="default"][data-feedback="error"]:hover { box-shadow: color-mix(in srgb, transparent 47%, rgb(220, 38, 38) 53%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px; } .cl-internal-t64bqq[data-variant="default"][data-feedback="error"]:focus-within, .cl-internal-t64bqq[data-variant="default"][data-feedback="error"][data-focus-within="true"] { box-shadow: color-mix(in srgb, transparent 47%, rgb(220, 38, 38) 53%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-t64bqq[data-variant="default"][data-feedback="warning"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 41%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-t64bqq[data-variant="default"][data-feedback="warning"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-t64bqq[data-variant="default"][data-feedback="warning"]:focus-within, .cl-internal-t64bqq[data-variant="default"][data-feedback="warning"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-t64bqq[data-variant="default"][data-feedback="success"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 41%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } .cl-internal-t64bqq[data-variant="default"][data-feedback="success"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } .cl-internal-t64bqq[data-variant="default"][data-feedback="success"]:focus-within, .cl-internal-t64bqq[data-variant="default"][data-feedback="success"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } } @layer clerk { .cl-internal-1jqxhyo { box-sizing: border-box; margin: 0px; padding: calc(var(--clerk-spacing, 1rem) * 0.4375) calc(var(--clerk-spacing, 1rem) * 0.75); background-color: rgb(255, 255, 255); color: rgb(17, 24, 39); outline: transparent solid 2px; outline-offset: 2px; max-height: 2.25rem; width: 100%; accent-color: rgb(17, 24, 39); font-family: inherit; letter-spacing: normal; font-weight: var(--clerk-font-weight-normal, var(--clerk-font-weight, 400)); font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); line-height: calc(1.38462); border-radius: 0.5rem; border-width: 1px; border-style: solid; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); box-shadow: 0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: ease; transition-duration: 200ms; } .cl-internal-1jqxhyo:disabled, .cl-internal-1jqxhyo[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } @supports (-webkit-touch-callout: none) { .cl-internal-1jqxhyo { font-size: var(--clerk-font-size-lg, calc(var(--clerk-font-size, 0.8125rem) * 17 / 13)); } .cl-internal-1jqxhyo:not([type="checkbox"]):not([type="radio"]) { appearance: none; } } .cl-internal-1jqxhyo:autofill { animation-name: onAutoFillStart; } .cl-internal-1jqxhyo::-webkit-input-placeholder { color: rgb(107, 114, 128); } .cl-internal-1jqxhyo::placeholder { color: rgb(107, 114, 128); } .cl-internal-1jqxhyo:hover { -webkit-tap-highlight-color: transparent; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%); box-shadow: 0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); } .cl-internal-1jqxhyo:focus { border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%); -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); } .cl-internal-1jqxhyo:focus:not(:focus-visible) { border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); box-shadow: 0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } .cl-internal-1jqxhyo:focus-visible { border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%); -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); } .cl-internal-1jqxhyo[data-variant="default"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } .cl-internal-1jqxhyo[data-variant="default"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); } .cl-internal-1jqxhyo[data-variant="default"]:focus-within, .cl-internal-1jqxhyo[data-variant="default"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1jqxhyo[data-variant="default"][data-feedback="error"] { box-shadow: color-mix(in srgb, transparent 59%, rgb(220, 38, 38) 41%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px; } .cl-internal-1jqxhyo[data-variant="default"][data-feedback="error"]:hover { box-shadow: color-mix(in srgb, transparent 47%, rgb(220, 38, 38) 53%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px; } .cl-internal-1jqxhyo[data-variant="default"][data-feedback="error"]:focus-within, .cl-internal-1jqxhyo[data-variant="default"][data-feedback="error"][data-focus-within="true"] { box-shadow: color-mix(in srgb, transparent 47%, rgb(220, 38, 38) 53%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-1jqxhyo[data-variant="default"][data-feedback="warning"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 41%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-1jqxhyo[data-variant="default"][data-feedback="warning"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-1jqxhyo[data-variant="default"][data-feedback="warning"]:focus-within, .cl-internal-1jqxhyo[data-variant="default"][data-feedback="warning"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-1jqxhyo[data-variant="default"][data-feedback="success"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 41%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } .cl-internal-1jqxhyo[data-variant="default"][data-feedback="success"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } .cl-internal-1jqxhyo[data-variant="default"][data-feedback="success"]:focus-within, .cl-internal-1jqxhyo[data-variant="default"][data-feedback="success"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } } @layer clerk { .cl-internal-5ur8x { clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } } @layer clerk { .cl-internal-17w1bz5 { animation: 450ms ease 0s 1 normal none running animation-148r1a6; transition-property: height; transition-duration: 200ms; transition-timing-function: ease; } } @layer clerk { @-webkit-keyframes animation-148r1a6 { 0% { opacity: 1; transform: translateY(0px); max-height: 6rem; visibility: visible; } 100% { opacity: 0; transform: translateY(5px); max-height: 0px; visibility: visible; } } @keyframes animation-148r1a6 { 0% { opacity: 1; transform: translateY(0px); max-height: 6rem; visibility: visible; } 100% { opacity: 0; transform: translateY(5px); max-height: 0px; visibility: visible; } } } @layer clerk { .cl-internal-x8cg1h { display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; animation: 450ms ease 0s 1 normal none running animation-148r1a6; transition-property: height; transition-duration: 200ms; transition-timing-function: ease; } } @layer clerk { .cl-internal-10uqczv { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; animation: 450ms ease 0s 1 normal none running animation-148r1a6; transition-property: height; transition-duration: 200ms; transition-timing-function: ease; } } @layer clerk { .cl-internal-m5xf1l { visibility: visible; animation: 450ms ease 0s 1 normal none running animation-16i29iq; transition-property: height; transition-duration: 200ms; transition-timing-function: ease; } } @layer clerk { @-webkit-keyframes animation-16i29iq { 0% { opacity: 0; transform: translateY(-5px); max-height: 0px; } 50% { opacity: 0; transform: translateY(-5px); max-height: 0px; } 100% { opacity: 1; transform: translateY(0px); max-height: 6rem; } } @keyframes animation-16i29iq { 0% { opacity: 0; transform: translateY(-5px); max-height: 0px; } 50% { opacity: 0; transform: translateY(-5px); max-height: 0px; } 100% { opacity: 1; transform: translateY(0px); max-height: 6rem; } } } @layer clerk { .cl-internal-18ufa2r { visibility: hidden; animation: 450ms ease 0s 1 normal none running animation-148r1a6; transition-property: height; transition-duration: 200ms; transition-timing-function: ease; } } @layer clerk { @-webkit-keyframes animation-148r1a6 { 0% { opacity: 1; transform: translateY(0px); max-height: 6rem; visibility: visible; } 100% { opacity: 0; transform: translateY(5px); max-height: 0px; visibility: visible; } } @keyframes animation-148r1a6 { 0% { opacity: 1; transform: translateY(0px); max-height: 6rem; visibility: visible; } 100% { opacity: 0; transform: translateY(5px); max-height: 0px; visibility: visible; } } } @layer clerk { .cl-internal-vdy8ev { position: absolute; opacity: 0; height: 0px; overflow: hidden; pointer-events: none; margin-top: -1rem; } } @layer clerk { .cl-internal-1dykdcz { display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: justify; justify-content: space-between; gap: var(--clerk-spacing, 1rem); position: absolute; opacity: 0; height: 0px; overflow: hidden; pointer-events: none; margin-top: -1rem; } } @layer clerk { .cl-internal-17ks1e2 { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: justify; justify-content: space-between; gap: var(--clerk-spacing, 1rem); position: absolute; opacity: 0; height: 0px; overflow: hidden; pointer-events: none; margin-top: -1rem; } } @layer clerk { .cl-internal-1xj9xsy { position: relative; } } @layer clerk { .cl-internal-3xmvdt { display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: center; justify-content: center; position: relative; } } @layer clerk { .cl-internal-i1u4p8 { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: center; justify-content: center; position: relative; } } @layer clerk { .cl-internal-19a4kfm { padding-inline-end: calc(var(--clerk-spacing, 1rem) * 2.5); } .cl-internal-19a4kfm[data-variant="default"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } .cl-internal-19a4kfm[data-variant="default"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); } .cl-internal-19a4kfm[data-variant="default"]:focus-within, .cl-internal-19a4kfm[data-variant="default"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-19a4kfm[data-variant="default"][data-feedback="error"] { box-shadow: color-mix(in srgb, transparent 59%, rgb(220, 38, 38) 41%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px; } .cl-internal-19a4kfm[data-variant="default"][data-feedback="error"]:hover { box-shadow: color-mix(in srgb, transparent 47%, rgb(220, 38, 38) 53%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px; } .cl-internal-19a4kfm[data-variant="default"][data-feedback="error"]:focus-within, .cl-internal-19a4kfm[data-variant="default"][data-feedback="error"][data-focus-within="true"] { box-shadow: color-mix(in srgb, transparent 47%, rgb(220, 38, 38) 53%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-19a4kfm[data-variant="default"][data-feedback="warning"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 41%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-19a4kfm[data-variant="default"][data-feedback="warning"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-19a4kfm[data-variant="default"][data-feedback="warning"]:focus-within, .cl-internal-19a4kfm[data-variant="default"][data-feedback="warning"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-19a4kfm[data-variant="default"][data-feedback="success"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 41%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } .cl-internal-19a4kfm[data-variant="default"][data-feedback="success"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } .cl-internal-19a4kfm[data-variant="default"][data-feedback="success"]:focus-within, .cl-internal-19a4kfm[data-variant="default"][data-feedback="success"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } } @layer clerk { .cl-internal-12lwdv3 { box-sizing: border-box; margin: 0px; padding: calc(var(--clerk-spacing, 1rem) * 0.4375) calc(var(--clerk-spacing, 1rem) * 0.75); background-color: rgb(255, 255, 255); color: rgb(17, 24, 39); outline: transparent solid 2px; outline-offset: 2px; max-height: 2.25rem; width: 100%; accent-color: rgb(17, 24, 39); font-family: inherit; letter-spacing: normal; font-weight: var(--clerk-font-weight-normal, var(--clerk-font-weight, 400)); font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); line-height: calc(1.38462); border-radius: 0.5rem; border-width: 1px; border-style: solid; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); box-shadow: 0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: ease; transition-duration: 200ms; padding-inline-end: calc(var(--clerk-spacing, 1rem) * 2.5); } .cl-internal-12lwdv3:disabled, .cl-internal-12lwdv3[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } @supports (-webkit-touch-callout: none) { .cl-internal-12lwdv3 { font-size: var(--clerk-font-size-lg, calc(var(--clerk-font-size, 0.8125rem) * 17 / 13)); } .cl-internal-12lwdv3:not([type="checkbox"]):not([type="radio"]) { appearance: none; } } .cl-internal-12lwdv3:autofill { animation-name: onAutoFillStart; } .cl-internal-12lwdv3::-webkit-input-placeholder { color: rgb(107, 114, 128); } .cl-internal-12lwdv3::placeholder { color: rgb(107, 114, 128); } .cl-internal-12lwdv3:hover { -webkit-tap-highlight-color: transparent; border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%); box-shadow: 0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); } .cl-internal-12lwdv3:focus { border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%); -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); } .cl-internal-12lwdv3:focus:not(:focus-visible) { border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); box-shadow: 0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } .cl-internal-12lwdv3:focus-visible { border-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%); -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); } .cl-internal-12lwdv3[data-variant="default"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } .cl-internal-12lwdv3[data-variant="default"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%); } .cl-internal-12lwdv3[data-variant="default"]:focus-within, .cl-internal-12lwdv3[data-variant="default"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 28%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 11%),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-12lwdv3[data-variant="default"][data-feedback="error"] { box-shadow: color-mix(in srgb, transparent 59%, rgb(220, 38, 38) 41%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px; } .cl-internal-12lwdv3[data-variant="default"][data-feedback="error"]:hover { box-shadow: color-mix(in srgb, transparent 47%, rgb(220, 38, 38) 53%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px; } .cl-internal-12lwdv3[data-variant="default"][data-feedback="error"]:focus-within, .cl-internal-12lwdv3[data-variant="default"][data-feedback="error"][data-focus-within="true"] { box-shadow: color-mix(in srgb, transparent 47%, rgb(220, 38, 38) 53%) 0px 0px 0px 1px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-12lwdv3[data-variant="default"][data-feedback="warning"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 41%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-12lwdv3[data-variant="default"][data-feedback="warning"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-12lwdv3[data-variant="default"][data-feedback="warning"]:focus-within, .cl-internal-12lwdv3[data-variant="default"][data-feedback="warning"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-warning, #F36B16) 15%); } .cl-internal-12lwdv3[data-variant="default"][data-feedback="success"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 41%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } .cl-internal-12lwdv3[data-variant="default"][data-feedback="success"]:hover { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } .cl-internal-12lwdv3[data-variant="default"][data-feedback="success"]:focus-within, .cl-internal-12lwdv3[data-variant="default"][data-feedback="success"][data-focus-within="true"] { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 53%),0px 0px 1px 0px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%),0px 0px 0px 4px color-mix(in srgb, transparent, var(--clerk-color-success, #22C543) 15%); } } @layer clerk { .cl-internal-1k0jdth { position: absolute; color: color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 41%); padding-inline: calc(var(--clerk-spacing, 1rem) * 0.5); inset-inline-end: calc(var(--clerk-spacing, 1rem) * 0.1875); inset-block: calc(var(--clerk-spacing, 1rem) * 0.1875); border-radius: calc(0.5rem - calc(var(--clerk-spacing, 1rem) * 0.1875)); } .cl-internal-1k0jdth::before { content: ""; position: absolute; inset: calc(calc(var(--clerk-spacing, 1rem) * 0.25) * -1); display: block; border-radius: 0.5rem; } .cl-internal-1k0jdth[data-variant="solid"] { border-width: 0px; } .cl-internal-1k0jdth[data-variant="solid"]::after { position: absolute; content: ""; border-radius: inherit; z-index: -1; inset: 0px; opacity: 1; transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 100ms; background: linear-gradient(rgba(255, 255, 255, 0.11) 0%, transparent 100%); } .cl-internal-1k0jdth[data-variant="solid"]:hover::after { opacity: 0; } .cl-internal-1k0jdth[data-variant="solid"]:active::after { opacity: 1; } .cl-internal-1k0jdth[data-variant="solid"][data-color="primary"] { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1k0jdth[data-variant="solid"][data-color="primary"]:focus { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1k0jdth[data-variant="solid"][data-color="primary"]:focus:not(:focus-visible) { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1k0jdth[data-variant="solid"][data-color="primary"]:focus-visible { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1k0jdth[data-variant="solid"][data-color="danger"] { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1k0jdth[data-variant="solid"][data-color="danger"]:focus { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-1k0jdth[data-variant="solid"][data-color="danger"]:focus:not(:focus-visible) { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1k0jdth[data-variant="solid"][data-color="danger"]:focus-visible { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-1k0jdth[data-variant="outline"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1k0jdth[data-variant="outline"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1k0jdth[data-variant="outline"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1k0jdth[data-variant="outline"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1k0jdth[data-variant="bordered"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1k0jdth[data-variant="bordered"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1k0jdth[data-variant="bordered"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1k0jdth[data-variant="bordered"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1k0jdth::before { inset: calc(calc(var(--clerk-spacing, 1rem) * 0.1875) * -1); } } @layer clerk { .cl-internal-1f6m3ho { margin: 0px; padding: calc(var(--clerk-spacing, 1rem) * 0.25) calc(var(--clerk-spacing, 1rem) * 0.75); border-width: 0px; outline: 0px; user-select: none; cursor: pointer; background-color: unset; isolation: isolate; display: inline-flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 100ms; font-family: var(--clerk-font-family-buttons, var(--clerk-font-family, inherit)); letter-spacing: normal; font-weight: var(--clerk-font-weight-medium, 500); font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); line-height: calc(1.38462); --accent: #111827; --accentHover: color-mix(in srgb, #111827, white 20%); --border: #111827; --accentContrast: var(--clerk-color-primary-foreground, light-dark(white, black)); --alpha: color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%); position: absolute; color: color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 41%); padding-inline: calc(var(--clerk-spacing, 1rem) * 0.5); inset-inline-end: calc(var(--clerk-spacing, 1rem) * 0.1875); inset-block: calc(var(--clerk-spacing, 1rem) * 0.1875); border-radius: calc(0.5rem - calc(var(--clerk-spacing, 1rem) * 0.1875)); } .cl-internal-1f6m3ho:disabled, .cl-internal-1f6m3ho[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } .cl-internal-1f6m3ho:hover { background-color: var(--alpha); color: var(--accentHover); } .cl-internal-1f6m3ho:focus { -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: ease; transition-duration: 200ms; } .cl-internal-1f6m3ho:focus:not(:focus-visible) { box-shadow: none; } .cl-internal-1f6m3ho:focus-visible { -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: ease; transition-duration: 200ms; } .cl-internal-1f6m3ho::before { content: ""; position: absolute; inset: calc(calc(var(--clerk-spacing, 1rem) * 0.25) * -1); display: block; border-radius: 0.5rem; } .cl-internal-1f6m3ho[data-variant="solid"] { border-width: 0px; } .cl-internal-1f6m3ho[data-variant="solid"]::after { position: absolute; content: ""; border-radius: inherit; z-index: -1; inset: 0px; opacity: 1; transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 100ms; background: linear-gradient(rgba(255, 255, 255, 0.11) 0%, transparent 100%); } .cl-internal-1f6m3ho[data-variant="solid"]:hover::after { opacity: 0; } .cl-internal-1f6m3ho[data-variant="solid"]:active::after { opacity: 1; } .cl-internal-1f6m3ho[data-variant="solid"][data-color="primary"] { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1f6m3ho[data-variant="solid"][data-color="primary"]:focus { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1f6m3ho[data-variant="solid"][data-color="primary"]:focus:not(:focus-visible) { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1f6m3ho[data-variant="solid"][data-color="primary"]:focus-visible { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1f6m3ho[data-variant="solid"][data-color="danger"] { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1f6m3ho[data-variant="solid"][data-color="danger"]:focus { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-1f6m3ho[data-variant="solid"][data-color="danger"]:focus:not(:focus-visible) { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1f6m3ho[data-variant="solid"][data-color="danger"]:focus-visible { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-1f6m3ho[data-variant="outline"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1f6m3ho[data-variant="outline"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1f6m3ho[data-variant="outline"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1f6m3ho[data-variant="outline"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1f6m3ho[data-variant="bordered"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1f6m3ho[data-variant="bordered"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1f6m3ho[data-variant="bordered"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1f6m3ho[data-variant="bordered"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1f6m3ho::before { inset: calc(calc(var(--clerk-spacing, 1rem) * 0.1875) * -1); } } @layer clerk { .cl-internal-oaq42g { flex-shrink: 0; width: 1rem; height: 1rem; } } @layer clerk { .cl-internal-1fx5buc { display: flex; flex-flow: column; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } } @layer clerk { .cl-internal-1pnppin { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } } @layer clerk { .cl-internal-1ddv0qf[data-variant="solid"] { border-width: 0px; } .cl-internal-1ddv0qf[data-variant="solid"]::after { position: absolute; content: ""; border-radius: inherit; z-index: -1; inset: 0px; opacity: 1; transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 100ms; background: linear-gradient(rgba(255, 255, 255, 0.11) 0%, transparent 100%); } .cl-internal-1ddv0qf[data-variant="solid"]:hover::after { opacity: 0; } .cl-internal-1ddv0qf[data-variant="solid"]:active::after { opacity: 1; } .cl-internal-1ddv0qf[data-variant="solid"][data-color="primary"] { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1ddv0qf[data-variant="solid"][data-color="primary"]:focus { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1ddv0qf[data-variant="solid"][data-color="primary"]:focus:not(:focus-visible) { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1ddv0qf[data-variant="solid"][data-color="primary"]:focus-visible { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1ddv0qf[data-variant="solid"][data-color="danger"] { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1ddv0qf[data-variant="solid"][data-color="danger"]:focus { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-1ddv0qf[data-variant="solid"][data-color="danger"]:focus:not(:focus-visible) { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-1ddv0qf[data-variant="solid"][data-color="danger"]:focus-visible { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-1ddv0qf[data-variant="outline"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1ddv0qf[data-variant="outline"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1ddv0qf[data-variant="outline"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1ddv0qf[data-variant="outline"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1ddv0qf[data-variant="bordered"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1ddv0qf[data-variant="bordered"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-1ddv0qf[data-variant="bordered"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-1ddv0qf[data-variant="bordered"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } } @layer clerk { .cl-internal-k8ebj8 { margin: 0px; padding: calc(var(--clerk-spacing, 1rem) * 0.4375) calc(var(--clerk-spacing, 1rem) * 0.75); border-width: 1px; outline: 0px; user-select: none; cursor: pointer; background-color: var(--accent); color: var(--accentContrast); border-radius: 0.5rem; position: relative; isolation: isolate; display: inline-flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 100ms; font-family: var(--clerk-font-family-buttons, var(--clerk-font-family, inherit)); letter-spacing: normal; font-weight: var(--clerk-font-weight-medium, 500); font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); line-height: calc(1.38462); border-style: solid; border-color: var(--accent); width: 100%; --accent: #111827; --accentHover: color-mix(in srgb, #111827, white 20%); --border: #111827; --accentContrast: var(--clerk-color-primary-foreground, light-dark(white, black)); --alpha: color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%); } .cl-internal-k8ebj8:disabled, .cl-internal-k8ebj8[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } .cl-internal-k8ebj8:hover { background-color: var(--accentHover); } .cl-internal-k8ebj8:focus { -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: ease; transition-duration: 200ms; } .cl-internal-k8ebj8:focus:not(:focus-visible) { box-shadow: none; } .cl-internal-k8ebj8:focus-visible { -webkit-tap-highlight-color: transparent; box-shadow: 0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: ease; transition-duration: 200ms; } .cl-internal-k8ebj8[data-variant="solid"] { border-width: 0px; } .cl-internal-k8ebj8[data-variant="solid"]::after { position: absolute; content: ""; border-radius: inherit; z-index: -1; inset: 0px; opacity: 1; transition-property: background-color, background, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 100ms; background: linear-gradient(rgba(255, 255, 255, 0.11) 0%, transparent 100%); } .cl-internal-k8ebj8[data-variant="solid"]:hover::after { opacity: 0; } .cl-internal-k8ebj8[data-variant="solid"]:active::after { opacity: 1; } .cl-internal-k8ebj8[data-variant="solid"][data-color="primary"] { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-k8ebj8[data-variant="solid"][data-color="primary"]:focus { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-k8ebj8[data-variant="solid"][data-color="primary"]:focus:not(:focus-visible) { box-shadow: rgb(17, 24, 39) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-k8ebj8[data-variant="solid"][data-color="primary"]:focus-visible { box-shadow: 0px 0px 0px 1px #111827,0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset,0px 2px 3px 0px rgba(34, 42, 53, 0.20),0px 1px 1px 0px rgba(0, 0, 0, 0.24),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-k8ebj8[data-variant="solid"][data-color="danger"] { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-k8ebj8[data-variant="solid"][data-color="danger"]:focus { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-k8ebj8[data-variant="solid"][data-color="danger"]:focus:not(:focus-visible) { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px; } .cl-internal-k8ebj8[data-variant="solid"][data-color="danger"]:focus-visible { box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgba(34, 42, 53, 0.2) 0px 2px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, color-mix(in srgb, transparent 85%, rgb(220, 38, 38) 15%) 0px 0px 0px 4px; } .cl-internal-k8ebj8[data-variant="outline"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-k8ebj8[data-variant="outline"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-k8ebj8[data-variant="outline"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-k8ebj8[data-variant="outline"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-k8ebj8[data-variant="bordered"] { border-width: 0px; box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-k8ebj8[data-variant="bordered"]:focus { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } .cl-internal-k8ebj8[data-variant="bordered"]:focus:not(:focus-visible) { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02); } .cl-internal-k8ebj8[data-variant="bordered"]:focus-visible { box-shadow: 0px 0px 0px 1px color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%),0px 2px 3px -1px rgba(0, 0, 0, 0.08),0px 1px 0px 0px rgba(0, 0, 0, 0.02),0px 0px 0px 4px var(--clerk-color-ring, color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 15.000000000000002%)); } } @layer clerk { .cl-internal-14iiguq { display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: start; justify-content: flex-start; } } @layer clerk { .cl-internal-2iusy0 { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: start; justify-content: flex-start; } } @layer clerk { .cl-internal-dzombt { margin-inline-start: calc(var(--clerk-spacing, 1rem) * 0.5); width: 1rem; height: 1rem; opacity: 0.62; } [dir="rtl"] .cl-internal-dzombt { transform: scaleX(-1); } } @layer clerk { .cl-internal-ykgfs8 { flex-shrink: 0; margin-inline-start: calc(var(--clerk-spacing, 1rem) * 0.5); width: 1rem; height: 1rem; opacity: 0.62; } [dir="rtl"] .cl-internal-ykgfs8 { transform: scaleX(-1); } } @layer clerk { .cl-internal-aurft1 { box-sizing: border-box; } } @layer clerk { .cl-internal-1kn6j1q { margin-top: calc(calc(var(--clerk-spacing, 1rem) * 0.5) * -1); padding-top: calc(var(--clerk-spacing, 1rem) * 0.5); background: var(--clerk-color-muted, linear-gradient(color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%),color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%)), linear-gradient(hsl(from #ffffff h s l / 1), hsl(from #ffffff h s l / 1))); } .cl-internal-1kn6j1q:empty { padding: 0px; margin-top: 0px; } .cl-internal-1kn6j1q > :first-of-type { padding: var(--clerk-spacing, 1rem) calc(var(--clerk-spacing, 1rem) * 2) var(--clerk-spacing, 1rem) calc(var(--clerk-spacing, 1rem) * 2); } .cl-internal-1kn6j1q > :not(:first-of-type) { padding: var(--clerk-spacing, 1rem) calc(var(--clerk-spacing, 1rem) * 2); border-top-width: 1px; border-top-style: solid; border-top-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } } @layer clerk { .cl-internal-mi24g { display: flex; flex-flow: column; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; margin-top: calc(calc(var(--clerk-spacing, 1rem) * 0.5) * -1); padding-top: calc(var(--clerk-spacing, 1rem) * 0.5); background: var(--clerk-color-muted, linear-gradient(color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%),color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%)), linear-gradient(hsl(from #ffffff h s l / 1), hsl(from #ffffff h s l / 1))); } .cl-internal-mi24g:empty { padding: 0px; margin-top: 0px; } .cl-internal-mi24g > :first-of-type { padding: var(--clerk-spacing, 1rem) calc(var(--clerk-spacing, 1rem) * 2) var(--clerk-spacing, 1rem) calc(var(--clerk-spacing, 1rem) * 2); } .cl-internal-mi24g > :not(:first-of-type) { padding: var(--clerk-spacing, 1rem) calc(var(--clerk-spacing, 1rem) * 2); border-top-width: 1px; border-top-style: solid; border-top-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } } @layer clerk { .cl-internal-1i34tw6 { box-sizing: border-box; display: flex; flex-flow: column; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; margin-top: calc(calc(var(--clerk-spacing, 1rem) * 0.5) * -1); padding-top: calc(var(--clerk-spacing, 1rem) * 0.5); background: var(--clerk-color-muted, linear-gradient(color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%),color-mix(in srgb, transparent, var(--clerk-color-neutral, light-dark(#000000, #ffffff)) 3%)), linear-gradient(hsl(from #ffffff h s l / 1), hsl(from #ffffff h s l / 1))); } .cl-internal-1i34tw6:empty { padding: 0px; margin-top: 0px; } .cl-internal-1i34tw6 > :first-of-type { padding: var(--clerk-spacing, 1rem) calc(var(--clerk-spacing, 1rem) * 2) var(--clerk-spacing, 1rem) calc(var(--clerk-spacing, 1rem) * 2); } .cl-internal-1i34tw6 > :not(:first-of-type) { padding: var(--clerk-spacing, 1rem) calc(var(--clerk-spacing, 1rem) * 2); border-top-width: 1px; border-top-style: solid; border-top-color: color-mix(in srgb, transparent, var(--clerk-color-border, var(--clerk-color-neutral, light-dark(#000000, #ffffff))) 7%); } } @layer clerk { .cl-internal-1yn6e66 { margin: 0px auto; } } @layer clerk { .cl-internal-1xzxnua { display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 0.25); margin: 0px auto; } } @layer clerk { .cl-internal-h2zfvr { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: start; justify-content: flex-start; gap: calc(var(--clerk-spacing, 1rem) * 0.25); margin: 0px auto; } } @layer clerk { .cl-internal-177dtwn { box-sizing: border-box; margin: 0px; font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); text-wrap: pretty; font-family: inherit; letter-spacing: normal; font-weight: var(--clerk-font-weight-normal, var(--clerk-font-weight, 400)); line-height: calc(1.38462); color: rgb(107, 114, 128); } .cl-internal-177dtwn:disabled, .cl-internal-177dtwn[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } } @layer clerk { .cl-internal-fkws6y { box-sizing: border-box; display: inline-flex; -webkit-box-align: center; align-items: center; margin: 0px; cursor: pointer; text-decoration: none; font-family: var(--clerk-font-family-buttons, var(--clerk-font-family, inherit)); letter-spacing: normal; font-weight: var(--clerk-font-weight-medium, 500); font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); line-height: calc(1.38462); color: rgb(17, 24, 39); } .cl-internal-fkws6y:disabled, .cl-internal-fkws6y[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } .cl-internal-fkws6y:hover { text-decoration: underline; color: hsl(from rgb(17, 24, 39) h s calc(l + (0.142857 * (97 - l)))); } .cl-internal-fkws6y:active { color: hsl(from rgb(17, 24, 39) h s calc(l - (0.142857 * (-12 + l)))); } } @layer clerk { .cl-internal-tbo0es { width: 100%; position: relative; } } @layer clerk { .cl-internal-r93pb5 { box-sizing: border-box; width: 100%; position: relative; } } @layer clerk { .cl-internal-8v1h51 { gap: var(--clerk-spacing, 1rem); margin-inline: auto; width: 100%; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; position: relative; } } @layer clerk { .cl-internal-1dkhggt { display: flex; flex-flow: column; gap: var(--clerk-spacing, 1rem); margin-inline: auto; width: 100%; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; position: relative; } } @layer clerk { .cl-internal-95w9vp { box-sizing: border-box; display: flex; flex-flow: column; gap: var(--clerk-spacing, 1rem); margin-inline: auto; width: 100%; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; position: relative; } } @layer clerk { .cl-internal-1bjbgcx { -webkit-box-pack: justify; justify-content: space-between; width: 100%; } .cl-internal-1bjbgcx:has(div:only-child) { -webkit-box-pack: center; justify-content: center; } } @layer clerk { .cl-internal-zh74vi { display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: justify; justify-content: space-between; width: 100%; } .cl-internal-zh74vi:has(div:only-child) { -webkit-box-pack: center; justify-content: center; } } @layer clerk { .cl-internal-y44tp9 { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: stretch; align-items: stretch; -webkit-box-pack: justify; justify-content: space-between; width: 100%; } .cl-internal-y44tp9:has(div:only-child) { -webkit-box-pack: center; justify-content: center; } } @layer clerk { .cl-internal-15b6qwm { color: rgb(107, 114, 128); } } @layer clerk { .cl-internal-1eepiuh { display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; gap: calc(var(--clerk-spacing, 1rem) * 0.25); color: rgb(107, 114, 128); } } @layer clerk { .cl-internal-l895qh { box-sizing: border-box; display: flex; flex-flow: row; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; gap: calc(var(--clerk-spacing, 1rem) * 0.25); color: rgb(107, 114, 128); } } @layer clerk { .cl-internal-560t1i { box-sizing: border-box; margin: 0px; font-size: var(--clerk-font-size-sm, calc(var(--clerk-font-size, 0.8125rem) * 12 / 13)); text-wrap: pretty; font-family: var(--clerk-font-family-buttons, var(--clerk-font-family, inherit)); letter-spacing: normal; font-weight: var(--clerk-font-weight-medium, 500); line-height: calc(1.33333); color: inherit; } .cl-internal-560t1i:disabled, .cl-internal-560t1i[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } } @layer clerk { .cl-internal-1scxde7 { box-sizing: border-box; display: inline-flex; -webkit-box-align: center; align-items: center; margin: 0px; cursor: pointer; text-decoration: none; font-family: inherit; letter-spacing: normal; font-weight: var(--clerk-font-weight-normal, var(--clerk-font-weight, 400)); font-size: var(--clerk-font-size-md, var(--clerk-font-size, 0.8125rem)); line-height: calc(1.38462); color: inherit; } .cl-internal-1scxde7:disabled, .cl-internal-1scxde7[data-disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.5; } .cl-internal-1scxde7:hover { text-decoration: underline; } } @layer clerk { .cl-internal-1qw8mqg { width: 3rem; height: 0.875rem; } } @layer clerk { .cl-internal-5ghyhf { flex-shrink: 0; width: 3rem; height: 0.875rem; } } @media(min-width:1024px){aside img[alt="Neral"]{filter:invert(1)}}