/* Optics physics tokens (Design Language v2 §09) — must precede the @tailwind directives per the CSS @import rule. web-app only; do NOT add to website/seo-app. The 6 shadcn vars re-pointed below resolve through these (--bg-0..3, --ink..--ink-4, --hair). */ *, ::before, ::after{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } /* ! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: var(--gray-200); /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: var(--gray-400); /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: var(--gray-400); /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden]:where(:not([hidden="until-found"])) { display: none; } :root { /* Brand Identity*/ --vh-brand-pink: #EC15B9; --vh-brad-dark-blue: #2B66EF; --vh-brand-light-blue: #11BEF1; --app-tall-header-height: 48px; /* 40px + mt-2 (8px) Default header height smaller than lg: */ --app-thin-header-height: 48px; /* 8px + mt-2 (8px) Default header height smaller than lg: */ --app-footer-height: 8px; /* 8px + mb-2 (8px) Default footer height smaller than lg: */ --tabs-list-height: 34.5px; --summary-header-height: 52px; /* Summary Header (Search TextArea) - 40 px + the mt-2 (i.e. 8px) + mb-1 (4px) */ --transcript-header-height: 56px; /* Transcript Header (Search TextArea) - 48 px + the mt-2 top margin (i.e. 8px) */ --gradient-1: #00ccb1; --gradient-1-v2: #2c7be5; --gradient-2: #7b61ff; --gradient-3: #ffc414; --gradient-4: #1ca0fb; --gradient-5: #141316; /* dimensions */ --radius: 0.625rem; /* 10px - unified across all apps */ --navigation-height: 3.5rem; /* colors */ /* Optics semantic bridge (v2 §09): field/surfaces/ink point at the physics tokens in optics.tokens.css. --backdrop follows --background (obvious 1:1) so the sidebar+content shared canvas stays seamless as the field flips. */ --backdrop: var(--bg-0); /* same as --background; sidebar + content share canvas */ --backdrop-accent: rgba(9, 9, 11, 0.06); --backdrop-accent-foreground: hsl(222.2 47.4% 11.2%); --background: var(--bg-0); --foreground: var(--ink); --card: var(--bg-1); /* larger accent panels (Hero, prominent surfaces) */ --card-foreground: #282a30; /* Popover = a forward surface. Re-pointed to the light pane (--bg-1 = #FFFFFF); the old #FBFBFD was the pre-Optics light field, now orphaned. Foreground is near-black ink, still correct against #FFFFFF. */ --popover: var(--bg-1); --popover-foreground: hsl(240 10% 3.9%); --muted: var(--bg-2); --muted-foreground: var(--ink-3); --primary: #2c7be5; --primary-foreground: #f9fbfd; --secondary: #EEEEF0; --secondary-transparent: rgba(238, 238, 240, 0.5); --secondary-foreground: #3c4149; --accent: #EEEEF0; --accent-foreground: hsl(222.2 47.4% 11.2%); --danger: var(--red); --danger-foreground: #fef2f2; --destructive: var(--red); --destructive-foreground: #fef2f2; --success: var(--green); --success-foreground: #f9fef2; /* Near-limit warning for usage bars. Tokenised amber so nothing off-palette creeps in; the .dark override mirrors the usage label's existing dark:amber-400. */ --warning: #f59e0b; /*--blue: rgb(78, 167, 252);*/ /*--blue-light: rgba(78, 167, 252, 0.2);*/ /*--blue-light: rgba(44, 123, 229, 0.2);*/ /* from primary */ /*--blue: rgba(44, 123, 229, 0.27);*/ /*--blue-light: rgba(44, 123, 229, 0.2);*/ /*--green: rgb(0, 177, 108);*/ /*--green-light: rgba(0, 177, 108, 0.2);*/ /*--orange: rgb(255, 166, 49);*/ /*--orange-light: rgba(255, 166, 49, 0.2);*/ --pink: rgb(255, 0, 95); --pink-light: rgba(255, 0, 95, 0.2); /*--yellow: rgb(255, 223, 0);*/ /*--yellow-light: rgba(255, 223, 0, 0.2);*/ /*--pink: #f7c8c1;*/ /*--dark-blue: #161C2D; !* for gradient *!*/ --dark-blue: rgb(21, 26, 38); --gray-100: rgba(249, 251, 253, 0.5); --gray-200: #F1F4F8; --gray-300: #D9E2EF; --gray-400: #C6D3E6; --gray-500: #ABBCD5; --gray-600: #869AB8; --gray-700: rgba(255, 255, 255, 0.85); --gray-800: #384C74; --gray-900: #1B2A4E; --temp: rgb(40, 87, 255); --temp-dark: rgb(48, 58, 117); --blue: rgb(78, 167, 252); --blue-light: rgba(78, 167, 252, 0.3); --darkgray1: #95a2b3; --gray1: #bec2c8; --green: rgb(76, 183, 130); --green-light: rgba(76, 183, 130, 0.5); --orange: rgb(242, 153, 74); --orange-light: rgba(242, 153, 74, 0.5); --purple1: #bb87fc; --purple2: #5e6ad2; /*--red: rgb(235, 87, 87);*/ /*--red-light: rgba(235, 87, 87, 0.5);*/ /*--red: rgb(235, 40, 182);*/ /*--red-light: rgba(235, 40, 182, 0.2);*/ --red: rgb(255, 0, 95); --red-light: rgba(255, 0, 95, 0.2); /* Calmer red for a depleted usage bar: the full --destructive stays on the "0 min left" text as the signal, while the bar fill softens so it informs rather than alarms. Solid equivalent of destructive at ~72% over the dark track; same value serves both themes. */ --progress-danger: #D65A70; --teal: #26b5ce; --yellow: rgb(242, 201, 76); --yellow-light: rgba(242, 201, 76, 0.5); --vh-pink: #5049E7; --vh-dark-blue: #184ED6; --vh-light-blue: #3848B1; --border: var(--hair); /* every border is a .5px hairline of light (Law 2) */ --border-contrast: rgb(206, 206, 206); /* required for key buttons, that need more visibility, like the timestamp and highlight buttons */ --input: #E5E5EA; --ring: hsl(240 5% 64.9%); /*--progress-gradient-start: #ED7C9E;*/ /*--progress-gradient-end: #C29FFB;*/ --progress-gradient-end: rgba(236, 72, 153, 0.6); --progress-gradient-start: rgba(99, 102, 241, 0.4); --progress-background: rgba(224, 224, 224, 0.33); --progress-background-pop: rgba(224, 224, 224, 0.6); } .dark { /* Optics semantic bridge (v2 §09) — dark physics flip via optics.tokens.css .dark: the field darkens #0C0D0F -> #08090B (--bg-0), resting cards sit on #0C0D0F (--bg-1). */ --backdrop: var(--bg-0); /* same as --background; sidebar + content share canvas */ --backdrop-accent: rgba(255, 255, 255, 0.07); --backdrop-accent-foreground: hsl(210 40% 98%); --background: var(--bg-0); --foreground: var(--ink); --card: var(--bg-1); /* larger accent panels (Hero, prominent surfaces) */ --card-foreground: #f7f8f8; /* Popover = a forward surface, so it sits on the z6 forward plane (--bg-3 = #1F2024), not on #121315 which now equals bridged --muted (--bg-2) and would collapse popover/muted apart. Foreground is near-white ink, still correct against #1F2024. */ --popover: var(--bg-3); --popover-foreground: hsl(0 0% 98%); --muted: var(--bg-2); --muted-foreground: var(--ink-3); --primary: #2C7BE5; --primary-foreground: hsl(0 0% 98%); --warning: #fbbf24; --secondary: #1F2024; --secondary-transparent: rgba(31, 32, 36, 0.6); --secondary-foreground: #d7d8db; --accent: #1F2024; --accent-foreground: hsl(210 40% 98%); --border: var(--hair); /* every border is a .5px hairline of light (Law 2) */ --border-contrast: rgb(55, 57, 64); /* required for key buttons, that need more visibility, like the timestamp and highlight buttons */ --border-card: #26272B; --input: #26272B; --ring: #17181A; /*--radius: 0.5rem;*/ --progress-background: rgba(224, 224, 224, 0.08); /* this needs a lighter gray to not be overpowering */ --progress-background-pop: rgba(224, 224, 224, 0.16); /* needs to stand out, given the lack of lighter card background */ } @media (min-width: 768px) { /* md: sidebar appears; header restored, footer reclaimed */ :root { --app-tall-header-height: 48px; --app-thin-header-height: 16px; --app-footer-height: 0px; } } /* Video-ai list shell (VideoAiLayout, tall header): on desktop the top strip carries no title or actions — it was an empty bar that clipped the scroll 48px too early. Zero the tall-header token *within this subtree only* so content fills the full height and the strip can be hidden on md+. Settings/admin/summary keep their own tokens untouched. Mobile (< md) is unaffected: the override is desktop-scoped, so the mobile header + its height are preserved. */ @media (min-width: 768px) { [data-flush-header] { --app-tall-header-height: 0px; } } /* Prevent any ScrollArea page from overflowing horizontally. The Radix viewport's inner wrapper is display:table (shrink-to-fit), so a child wider than the viewport (e.g. a wide data table) stretches the wrapper and pushes the whole page — header, search, action buttons — off-screen to the right (the "mobile list too wide" bug). Every ScrollArea in the app is a *vertical* scroller (no horizontal ScrollBar is ever rendered), so capping the wrapper at the viewport width is always safe; wide content then scrolls inside its own overflow-x container (see the data-table wrapper) instead of dragging the page with it. */ [data-radix-scroll-area-viewport] > * { max-width: 100%; } /* Radix wraps scroll content in a `display:table` box. CSS tables grow to their content's max-content and ignore `max-width` below it — so content with a wide min-content (e.g. the Members rows: avatar + non-wrapping email + a shrink-0 role control) pushed that wrapper past the padded width, overflowing the viewport and clipping the right-edge control. `table-layout:fixed` + `width:100%` pins the wrapper to the available width, so inner flex/min-w-0 content truncates instead of overflowing. Opt-in via `data-sa-fit` on the scroll content, so the ring-fenced summary page and other layouts are untouched. */ [data-radix-scroll-area-viewport] > *:has(> [data-sa-fit]) { table-layout: fixed; width: 100%; } /* Responsive table-column collapse. Applied to / via TanStack column meta (see DataTableBase's headerClassName/cellClassName). Turbopack's JIT doesn't emit `md:table-cell`/`xl:table-cell` mid-session, so these live as literal CSS. Below the breakpoint the WHOLE column (cell + header) is display:none — not an empty padded eating horizontal space. That dead space was making narrow tables wider than the mobile viewport (horizontal scroll) and starving the title column so it truncated early. */ .tbl-col-from-md, .tbl-col-from-lg, .tbl-col-from-xl { display: none; } @media (min-width: 768px) { .tbl-col-from-md { display: table-cell; } } @media (min-width: 1280px) { .tbl-col-from-xl { display: table-cell; } } /* Flush-header list pages must scroll like a normal page. Vertical spacing has to live INSIDE the scroll content so it scrolls away — never a fixed block that content slides under (top) or stops short of (bottom). SCOPED TO `main` so it only touches the content column's scroll area, NOT the sidebar (which has its own Radix ScrollArea and would otherwise get shoved down). (1) Zero the top/bottom padding on the scroll *container* (the div wrapping the viewport). */ [data-flush-header] main div:has(> [data-radix-scroll-area-viewport]) { padding-top: 0; padding-bottom: 0; } /* (2) Put the breathing room on the scrolling content itself (first element inside the viewport), so top and bottom scroll to the edges like any other content. */ [data-flush-header] main [data-radix-scroll-area-viewport] > * > * { padding-top: 1.5rem; /* mobile: the header above still provides the top chrome */ padding-bottom: 2rem; /* clearance so paginators/last rows aren't jammed to the edge */ } @media (min-width: 768px) { [data-flush-header] main [data-radix-scroll-area-viewport] > * > * { /* desktop: no header — align the page title's optical center with the first sidebar menu item (~81px), so the two columns read as one line. */ padding-top: 4.125rem; } } *{ border-color: var(--border); } html { /*@apply border-border;*/ background-color: var(--background); font-family: var(--font-hkgroteskpro), system-ui, sans-serif; font-size: 1rem; font-weight: 600; color: var(--foreground); } .\!container{ width: 100% !important; margin-right: auto !important; margin-left: auto !important; padding-right: 2rem !important; padding-left: 2rem !important; } .container{ width: 100%; margin-right: auto; margin-left: auto; padding-right: 2rem; padding-left: 2rem; } @media (min-width: 1536px){ .\!container{ max-width: 1536px !important; } .container{ max-width: 1536px; } } @media (min-width: 1920px){ .\!container{ max-width: 1920px !important; } .container{ max-width: 1920px; } } @media (min-width: 2560px){ .\!container{ max-width: 2560px !important; } .container{ max-width: 2560px; } } .prose{ color: var(--tw-prose-body); max-width: 65ch; } .prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 1.25em; margin-bottom: 1.25em; } .prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-lead); font-size: 1.25em; line-height: 1.6; margin-top: 1.2em; margin-bottom: 1.2em; } .prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-links); text-decoration: underline; font-weight: 500; } .prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-bold); font-weight: 600; } .prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: inherit; } .prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: inherit; } .prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: inherit; } .prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: decimal; margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em; } .prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: upper-alpha; } .prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: lower-alpha; } .prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: upper-alpha; } .prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: lower-alpha; } .prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: upper-roman; } .prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: lower-roman; } .prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: upper-roman; } .prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: lower-roman; } .prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: decimal; } .prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: disc; margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em; } .prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{ font-weight: 400; color: var(--tw-prose-counters); } .prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{ color: var(--tw-prose-bullets); } .prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.25em; } .prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){ border-color: var(--tw-prose-hr); border-top-width: 1px; margin-top: 3em; margin-bottom: 3em; } .prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){ font-weight: 500; font-style: italic; color: var(--tw-prose-quotes); border-inline-start-width: 0.25rem; border-inline-start-color: var(--tw-prose-quote-borders); quotes: "\201C""\201D""\2018""\2019"; margin-top: 1.6em; margin-bottom: 1.6em; padding-inline-start: 1em; } .prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{ content: open-quote; } .prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{ content: close-quote; } .prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){ font-weight: 700; font-size: 1.1875rem; margin-top: 0; margin-bottom: 0.8888889em; line-height: 1.1111111; } .prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ font-weight: 900; color: inherit; } .prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){ font-weight: 700; font-size: 1rem; margin-top: 2em; margin-bottom: 1em; line-height: 1.3333333; } .prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ font-weight: 800; color: inherit; } .prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-headings); font-weight: 600; font-size: 1.25em; margin-top: 1.6em; margin-bottom: 0.6em; line-height: 1.6; } .prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ font-weight: 700; color: inherit; } .prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.5; } .prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ font-weight: 700; color: inherit; } .prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 2em; margin-bottom: 2em; } .prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){ display: block; margin-top: 2em; margin-bottom: 2em; } .prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 2em; margin-bottom: 2em; } .prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){ font-weight: 500; font-family: inherit; color: var(--tw-prose-kbd); box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows); font-size: 0.875em; border-radius: 0.3125rem; padding-top: 0.1875em; padding-inline-end: 0.375em; padding-bottom: 0.1875em; padding-inline-start: 0.375em; } .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-code); font-weight: 600; font-size: 0.875em; } .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{ content: "`"; } .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{ content: "`"; } .prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: inherit; } .prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: inherit; } .prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: inherit; font-size: 0.875em; } .prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: inherit; font-size: 0.9em; } .prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: inherit; } .prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: inherit; } .prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: inherit; } .prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-pre-code); background-color: var(--tw-prose-pre-bg); overflow-x: auto; font-weight: 400; font-size: 0.875em; line-height: 1.7142857; margin-top: 1.7142857em; margin-bottom: 1.7142857em; border-radius: 0.375rem; padding-top: 0.8571429em; padding-inline-end: 1.1428571em; padding-bottom: 0.8571429em; padding-inline-start: 1.1428571em; } .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ background-color: transparent; border-width: 0; border-radius: 0; padding: 0; font-weight: inherit; color: inherit; font-size: inherit; font-family: inherit; line-height: inherit; } .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{ content: none; } .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{ content: none; } .prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){ width: 100%; table-layout: auto; margin-top: 2em; margin-bottom: 2em; font-size: 0.875em; line-height: 1.7142857; } .prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)){ border-bottom-width: 1px; border-bottom-color: var(--tw-prose-th-borders); } .prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-headings); font-weight: 600; vertical-align: bottom; padding-inline-end: 0.5714286em; padding-bottom: 0.5714286em; padding-inline-start: 0.5714286em; } .prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)){ border-bottom-width: 1px; border-bottom-color: var(--tw-prose-td-borders); } .prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ border-bottom-width: 0; } .prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)){ vertical-align: baseline; } .prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)){ border-top-width: 1px; border-top-color: var(--tw-prose-th-borders); } .prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){ vertical-align: top; } .prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)){ text-align: start; } .prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0; margin-bottom: 0; } .prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-captions); font-size: 0.875em; line-height: 1.4285714; margin-top: 0.8571429em; } .prose{ --tw-prose-body: #374151; --tw-prose-headings: #111827; --tw-prose-lead: #4b5563; --tw-prose-links: #111827; --tw-prose-bold: #111827; --tw-prose-counters: #6b7280; --tw-prose-bullets: #d1d5db; --tw-prose-hr: #e5e7eb; --tw-prose-quotes: #111827; --tw-prose-quote-borders: #e5e7eb; --tw-prose-captions: #6b7280; --tw-prose-kbd: #111827; --tw-prose-kbd-shadows: rgb(17 24 39 / 10%); --tw-prose-code: #111827; --tw-prose-pre-code: #e5e7eb; --tw-prose-pre-bg: #1f2937; --tw-prose-th-borders: #d1d5db; --tw-prose-td-borders: #e5e7eb; --tw-prose-invert-body: #d1d5db; --tw-prose-invert-headings: #fff; --tw-prose-invert-lead: #9ca3af; --tw-prose-invert-links: #fff; --tw-prose-invert-bold: #fff; --tw-prose-invert-counters: #9ca3af; --tw-prose-invert-bullets: #4b5563; --tw-prose-invert-hr: #374151; --tw-prose-invert-quotes: #f3f4f6; --tw-prose-invert-quote-borders: #374151; --tw-prose-invert-captions: #9ca3af; --tw-prose-invert-kbd: #fff; --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%); --tw-prose-invert-code: #fff; --tw-prose-invert-pre-code: #d1d5db; --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); --tw-prose-invert-th-borders: #4b5563; --tw-prose-invert-td-borders: #374151; font-size: 1rem; line-height: 1.75; } .prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0; margin-bottom: 0; } .prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0.5em; margin-bottom: 0.5em; } .prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){ padding-inline-start: 0.375em; } .prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){ padding-inline-start: 0.375em; } .prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0.75em; margin-bottom: 0.75em; } .prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 1.25em; } .prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-bottom: 1.25em; } .prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 1.25em; } .prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-bottom: 1.25em; } .prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0.75em; margin-bottom: 0.75em; } .prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 1.25em; margin-bottom: 1.25em; } .prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0.5em; padding-inline-start: 1.625em; } .prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0; } .prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0; } .prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0; } .prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0; } .prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ padding-inline-start: 0; } .prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ padding-inline-end: 0; } .prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){ padding-top: 0.5714286em; padding-inline-end: 0.5714286em; padding-bottom: 0.5714286em; padding-inline-start: 0.5714286em; } .prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ padding-inline-start: 0; } .prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ padding-inline-end: 0; } .prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 2em; margin-bottom: 2em; } .prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0; } .prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-bottom: 0; } .prose :where(.prose):not(:where([class~="not-prose"],[class~="not-prose"] *)){ font-family: var(--font-hkgroteskpro); font-family: system-ui; font-family: sans-serif; font-weight: 600; color: var(--foreground); } .prose :where(.prose p):not(:where([class~="not-prose"],[class~="not-prose"] *)){ font-size: 1rem; color: var(--foreground); } .prose :where(.prose li):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0; } .prose :where(.prose h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){ font-weight: 700; color: var(--foreground); } .prose :where(.prose h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){ font-weight: 700; color: var(--foreground); } li .ts-button{ margin-inline-start: -0.25rem; /* given each button has a px-2 */ } .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .pointer-events-none{ pointer-events: none; } .pointer-events-auto{ pointer-events: auto; } .visible{ visibility: visible; } .invisible{ visibility: hidden; } .collapse{ visibility: collapse; } .static{ position: static; } .fixed{ position: fixed; } .absolute{ position: absolute; } .relative{ position: relative; } .sticky{ position: sticky; } .inset-0{ inset: 0px; } .inset-\[3px\]{ inset: 3px; } .inset-x-0{ left: 0px; right: 0px; } .inset-x-4{ left: 1rem; right: 1rem; } .inset-y-0{ top: 0px; bottom: 0px; } .-right-0{ right: -0px; } .-right-0\.5{ right: -0.125rem; } .-right-1{ right: -0.25rem; } .-top-0\.5{ top: -0.125rem; } .-top-1{ top: -0.25rem; } .-top-2{ top: -0.5rem; } .bottom-0{ bottom: 0px; } .bottom-0\.5{ bottom: 0.125rem; } .bottom-1{ bottom: 0.25rem; } .bottom-2{ bottom: 0.5rem; } .bottom-3{ bottom: 0.75rem; } .bottom-4{ bottom: 1rem; } .left-0{ left: 0px; } .left-1{ left: 0.25rem; } .left-1\.5{ left: 0.375rem; } .left-1\/2{ left: 50%; } .left-2{ left: 0.5rem; } .left-2\.5{ left: 0.625rem; } .left-4{ left: 1rem; } .left-\[50\%\]{ left: 50%; } .right-0{ right: 0px; } .right-0\.5{ right: 0.125rem; } .right-1{ right: 0.25rem; } .right-12{ right: 3rem; } .right-2{ right: 0.5rem; } .right-3{ right: 0.75rem; } .right-4{ right: 1rem; } .right-8{ right: 2rem; } .right-\[3\.75rem\]{ right: 3.75rem; } .top-0{ top: 0px; } .top-0\.5{ top: 0.125rem; } .top-1{ top: 0.25rem; } .top-1\.5{ top: 0.375rem; } .top-2{ top: 0.5rem; } .top-3\.5{ top: 0.875rem; } .top-4{ top: 1rem; } .top-\[1px\]{ top: 1px; } .top-\[50\%\]{ top: 50%; } .top-\[60\%\]{ top: 60%; } .top-full{ top: 100%; } .isolate{ isolation: isolate; } .z-10{ z-index: 10; } .z-20{ z-index: 20; } .z-30{ z-index: 30; } .z-40{ z-index: 40; } .z-50{ z-index: 50; } .z-\[100\]{ z-index: 100; } .z-\[1\]{ z-index: 1; } .float-end{ float: inline-end; } .-m-2{ margin: -0.5rem; } .m-0{ margin: 0px; } .m-10{ margin: 2.5rem; } .m-2{ margin: 0.5rem; } .-mx-0\.5{ margin-left: -0.125rem; margin-right: -0.125rem; } .-mx-1{ margin-left: -0.25rem; margin-right: -0.25rem; } .-mx-2{ margin-left: -0.5rem; margin-right: -0.5rem; } .-mx-5{ margin-left: -1.25rem; margin-right: -1.25rem; } .mx-0{ margin-left: 0px; margin-right: 0px; } .mx-1{ margin-left: 0.25rem; margin-right: 0.25rem; } .mx-2{ margin-left: 0.5rem; margin-right: 0.5rem; } .mx-5{ margin-left: 1.25rem; margin-right: 1.25rem; } .mx-6{ margin-left: 1.5rem; margin-right: 1.5rem; } .mx-\[-1px\]{ margin-left: -1px; margin-right: -1px; } .mx-\[0\.5px\]{ margin-left: 0.5px; margin-right: 0.5px; } .mx-auto{ margin-left: auto; margin-right: auto; } .my-1{ margin-top: 0.25rem; margin-bottom: 0.25rem; } .my-16{ margin-top: 4rem; margin-bottom: 4rem; } .my-2{ margin-top: 0.5rem; margin-bottom: 0.5rem; } .my-20{ margin-top: 5rem; margin-bottom: 5rem; } .my-3{ margin-top: 0.75rem; margin-bottom: 0.75rem; } .my-4{ margin-top: 1rem; margin-bottom: 1rem; } .my-5{ margin-top: 1.25rem; margin-bottom: 1.25rem; } .my-7{ margin-top: 1.75rem; margin-bottom: 1.75rem; } .my-\[8px\]{ margin-top: 8px; margin-bottom: 8px; } .-ml-1{ margin-left: -0.25rem; } .-ml-3{ margin-left: -0.75rem; } .-ml-\[1\.2px\]{ margin-left: -1.2px; } .-mt-14{ margin-top: -3.5rem; } .mb-0{ margin-bottom: 0px; } .mb-0\.5{ margin-bottom: 0.125rem; } .mb-1{ margin-bottom: 0.25rem; } .mb-1\.5{ margin-bottom: 0.375rem; } .mb-11{ margin-bottom: 2.75rem; } .mb-12{ margin-bottom: 3rem; } .mb-14{ margin-bottom: 3.5rem; } .mb-16{ margin-bottom: 4rem; } .mb-2{ margin-bottom: 0.5rem; } .mb-20{ margin-bottom: 5rem; } .mb-3{ margin-bottom: 0.75rem; } .mb-4{ margin-bottom: 1rem; } .mb-5{ margin-bottom: 1.25rem; } .mb-6{ margin-bottom: 1.5rem; } .mb-7{ margin-bottom: 1.75rem; } .mb-8{ margin-bottom: 2rem; } .mb-\[-0\.05rem\]{ margin-bottom: -0.05rem; } .mb-\[7\.2rem\]{ margin-bottom: 7.2rem; } .me-2{ margin-inline-end: 0.5rem; } .me-3{ margin-inline-end: 0.75rem; } .ml-0{ margin-left: 0px; } .ml-0\.5{ margin-left: 0.125rem; } .ml-1{ margin-left: 0.25rem; } .ml-14{ margin-left: 3.5rem; } .ml-2{ margin-left: 0.5rem; } .ml-2\.5{ margin-left: 0.625rem; } .ml-3{ margin-left: 0.75rem; } .ml-4{ margin-left: 1rem; } .ml-6{ margin-left: 1.5rem; } .ml-\[-5px\]{ margin-left: -5px; } .ml-auto{ margin-left: auto; } .mr-0{ margin-right: 0px; } .mr-1{ margin-right: 0.25rem; } .mr-1\.5{ margin-right: 0.375rem; } .mr-2{ margin-right: 0.5rem; } .mr-3{ margin-right: 0.75rem; } .mr-4{ margin-right: 1rem; } .mr-6{ margin-right: 1.5rem; } .mr-auto{ margin-right: auto; } .mt-0{ margin-top: 0px; } .mt-0\.5{ margin-top: 0.125rem; } .mt-1{ margin-top: 0.25rem; } .mt-1\.5{ margin-top: 0.375rem; } .mt-10{ margin-top: 2.5rem; } .mt-11{ margin-top: 2.75rem; } .mt-12{ margin-top: 3rem; } .mt-16{ margin-top: 4rem; } .mt-2{ margin-top: 0.5rem; } .mt-2\.5{ margin-top: 0.625rem; } .mt-20{ margin-top: 5rem; } .mt-24{ margin-top: 6rem; } .mt-3{ margin-top: 0.75rem; } .mt-3\.5{ margin-top: 0.875rem; } .mt-4{ margin-top: 1rem; } .mt-5{ margin-top: 1.25rem; } .mt-6{ margin-top: 1.5rem; } .mt-7{ margin-top: 1.75rem; } .mt-8{ margin-top: 2rem; } .mt-\[10px\]{ margin-top: 10px; } .mt-\[17px\]{ margin-top: 17px; } .mt-\[4px\]{ margin-top: 4px; } .mt-\[6px\]{ margin-top: 6px; } .mt-\[8px\]{ margin-top: 8px; } .mt-\[9px\]{ margin-top: 9px; } .mt-auto{ margin-top: auto; } .mt-px{ margin-top: 1px; } .box-border{ box-sizing: border-box; } .line-clamp-1{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .line-clamp-2{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .block{ display: block; } .inline-block{ display: inline-block; } .inline{ display: inline; } .flex{ display: flex; } .inline-flex{ display: inline-flex; } .\!table{ display: table !important; } .table{ display: table; } .table-cell{ display: table-cell; } .grid{ display: grid; } .contents{ display: contents; } .hidden{ display: none; } .aspect-\[1\.1\/1\]{ aspect-ratio: 1.1/1; } .aspect-square{ aspect-ratio: 1 / 1; } .aspect-video{ aspect-ratio: 16/9; } .size-6{ width: 1.5rem; height: 1.5rem; } .h-0\.5{ height: 0.125rem; } .h-1{ height: 0.25rem; } .h-1\.5{ height: 0.375rem; } .h-10{ height: 2.5rem; } .h-11{ height: 2.75rem; } .h-12{ height: 3rem; } .h-14{ height: 3.5rem; } .h-16{ height: 4rem; } .h-2{ height: 0.5rem; } .h-2\.5{ height: 0.625rem; } .h-24{ height: 6rem; } .h-28{ height: 7rem; } .h-3{ height: 0.75rem; } .h-3\.5{ height: 0.875rem; } .h-4{ height: 1rem; } .h-5{ height: 1.25rem; } .h-6{ height: 1.5rem; } .h-64{ height: 16rem; } .h-7{ height: 1.75rem; } .h-8{ height: 2rem; } .h-9{ height: 2.25rem; } .h-\[0\.05rem\]{ height: 0.05rem; } .h-\[0\.1rem\]{ height: 0.1rem; } .h-\[1\.05rem\]{ height: 1.05rem; } .h-\[1\.15rem\]{ height: 1.15rem; } .h-\[1\.1rem\]{ height: 1.1rem; } .h-\[1\.2rem\]{ height: 1.2rem; } .h-\[1\.3rem\]{ height: 1.3rem; } .h-\[100svh\]{ height: 100svh; } .h-\[120px\]{ height: 120px; } .h-\[12px\]{ height: 12px; } .h-\[15px\]{ height: 15px; } .h-\[18px\]{ height: 18px; } .h-\[1px\]{ height: 1px; } .h-\[20px\]{ height: 20px; } .h-\[3px\]{ height: 3px; } .h-\[44px\]{ height: 44px; } .h-\[48px\]{ height: 48px; } .h-\[88vh\]{ height: 88vh; } .h-\[8px\]{ height: 8px; } .h-\[90vh\]{ height: 90vh; } .h-\[calc\(100\%-40px\)\]{ height: calc(100% - 40px); } .h-\[calc\(100svh-8rem\)\]{ height: calc(100svh - 8rem); } .h-\[calc\(100vh-120px\)\]{ height: calc(100vh - 120px); } .h-\[var\(--radix-navigation-menu-viewport-height\)\]{ height: var(--radix-navigation-menu-viewport-height); } .h-\[var\(--radix-select-trigger-height\)\]{ height: var(--radix-select-trigger-height); } .h-auto{ height: auto; } .h-full{ height: 100%; } .h-px{ height: 1px; } .h-screen{ height: 100vh; } .h-screen-between-tall-header-and-footer{ height: calc(100svh - var(--app-tall-header-height) - var(--app-footer-height) - 1px); } .h-screen-between-thin-header-and-footer{ height: calc(100svh - var(--app-thin-header-height) - var(--app-footer-height) - 1px); } .h-screen-under-app-header{ height: calc(100svh - 60px); } .h-summary-view-height{ height: calc(55svh - 0rem); } .max-h-32{ max-height: 8rem; } .max-h-52{ max-height: 13rem; } .max-h-60{ max-height: 15rem; } .max-h-96{ max-height: 24rem; } .max-h-\[300px\]{ max-height: 300px; } .max-h-\[70vh\]{ max-height: 70vh; } .max-h-\[85vh\]{ max-height: 85vh; } .max-h-screen{ max-height: 100vh; } .min-h-0{ min-height: 0px; } .min-h-10{ min-height: 2.5rem; } .min-h-40{ min-height: 10rem; } .min-h-6{ min-height: 1.5rem; } .min-h-7{ min-height: 1.75rem; } .min-h-8{ min-height: 2rem; } .min-h-9{ min-height: 2.25rem; } .min-h-\[120px\]{ min-height: 120px; } .min-h-\[2\.75rem\]{ min-height: 2.75rem; } .min-h-\[200px\]{ min-height: 200px; } .min-h-\[28px\]{ min-height: 28px; } .min-h-\[3\.5rem\]{ min-height: 3.5rem; } .min-h-\[360px\]{ min-height: 360px; } .min-h-\[4\.25rem\]{ min-height: 4.25rem; } .min-h-\[50px\]{ min-height: 50px; } .min-h-\[50svh\]{ min-height: 50svh; } .min-h-\[55svh\]{ min-height: 55svh; } .min-h-\[60px\]{ min-height: 60px; } .min-h-\[64px\]{ min-height: 64px; } .min-h-\[68px\]{ min-height: 68px; } .min-h-\[80px\]{ min-height: 80px; } .min-h-\[85px\]{ min-height: 85px; } .min-h-screen{ min-height: 100vh; } .w-0{ width: 0px; } .w-0\.5{ width: 0.125rem; } .w-1{ width: 0.25rem; } .w-1\.5{ width: 0.375rem; } .w-1\/2{ width: 50%; } .w-1\/3{ width: 33.333333%; } .w-1\/5{ width: 20%; } .w-10{ width: 2.5rem; } .w-11{ width: 2.75rem; } .w-11\/12{ width: 91.666667%; } .w-12{ width: 3rem; } .w-14{ width: 3.5rem; } .w-16{ width: 4rem; } .w-2{ width: 0.5rem; } .w-2\.5{ width: 0.625rem; } .w-2\/12{ width: 16.666667%; } .w-2\/5{ width: 40%; } .w-20{ width: 5rem; } .w-24{ width: 6rem; } .w-28{ width: 7rem; } .w-3{ width: 0.75rem; } .w-3\.5{ width: 0.875rem; } .w-3\/4{ width: 75%; } .w-3\/5{ width: 60%; } .w-32{ width: 8rem; } .w-4{ width: 1rem; } .w-4\/12{ width: 33.333333%; } .w-40{ width: 10rem; } .w-44{ width: 11rem; } .w-48{ width: 12rem; } .w-5{ width: 1.25rem; } .w-5\/12{ width: 41.666667%; } .w-56{ width: 14rem; } .w-6{ width: 1.5rem; } .w-64{ width: 16rem; } .w-7{ width: 1.75rem; } .w-72{ width: 18rem; } .w-8{ width: 2rem; } .w-80{ width: 20rem; } .w-9{ width: 2.25rem; } .w-\[1\.05rem\]{ width: 1.05rem; } .w-\[1\.15rem\]{ width: 1.15rem; } .w-\[1\.1rem\]{ width: 1.1rem; } .w-\[1\.2rem\]{ width: 1.2rem; } .w-\[100\%\]{ width: 100%; } .w-\[100px\]{ width: 100px; } .w-\[102\.4rem\]{ width: 102.4rem; } .w-\[110px\]{ width: 110px; } .w-\[120px\]{ width: 120px; } .w-\[140px\]{ width: 140px; } .w-\[145px\]{ width: 145px; } .w-\[150px\]{ width: 150px; } .w-\[15px\]{ width: 15px; } .w-\[15rem\]{ width: 15rem; } .w-\[160px\]{ width: 160px; } .w-\[180px\]{ width: 180px; } .w-\[1px\]{ width: 1px; } .w-\[20\%\]{ width: 20%; } .w-\[200px\]{ width: 200px; } .w-\[220px\]{ width: 220px; } .w-\[240px\]{ width: 240px; } .w-\[250px\]{ width: 250px; } .w-\[280px\]{ width: 280px; } .w-\[300px\]{ width: 300px; } .w-\[340px\]{ width: 340px; } .w-\[384px\]{ width: 384px; } .w-\[40px\]{ width: 40px; } .w-\[50\%\]{ width: 50%; } .w-\[50px\]{ width: 50px; } .w-\[560px\]{ width: 560px; } .w-\[56px\]{ width: 56px; } .w-\[68px\]{ width: 68px; } .w-\[720px\]{ width: 720px; } .w-\[78rem\]{ width: 78rem; } .w-\[80\%\]{ width: 80%; } .w-\[80px\]{ width: 80px; } .w-\[8px\]{ width: 8px; } .w-\[90\%\]{ width: 90%; } .w-\[90px\]{ width: 90px; } .w-\[90vw\]{ width: 90vw; } .w-\[95vw\]{ width: 95vw; } .w-\[calc\(100\%-2rem\)\]{ width: calc(100% - 2rem); } .w-\[calc\(100vw-2rem\)\]{ width: calc(100vw - 2rem); } .w-auto{ width: auto; } .w-fit{ width: -moz-fit-content; width: fit-content; } .w-full{ width: 100%; } .w-max{ width: -moz-max-content; width: max-content; } .w-px{ width: 1px; } .w-screen{ width: 100vw; } .min-w-0{ min-width: 0px; } .min-w-4{ min-width: 1rem; } .min-w-5{ min-width: 1.25rem; } .min-w-8{ min-width: 2rem; } .min-w-9{ min-width: 2.25rem; } .min-w-\[1040px\]{ min-width: 1040px; } .min-w-\[120px\]{ min-width: 120px; } .min-w-\[12px\]{ min-width: 12px; } .min-w-\[12rem\]{ min-width: 12rem; } .min-w-\[132px\]{ min-width: 132px; } .min-w-\[140px\]{ min-width: 140px; } .min-w-\[16rem\]{ min-width: 16rem; } .min-w-\[300px\]{ min-width: 300px; } .min-w-\[50\%\]{ min-width: 50%; } .min-w-\[50px\]{ min-width: 50px; } .min-w-\[70px\]{ min-width: 70px; } .min-w-\[8rem\]{ min-width: 8rem; } .min-w-\[960px\]{ min-width: 960px; } .min-w-\[var\(--radix-select-trigger-width\)\]{ min-width: var(--radix-select-trigger-width); } .min-w-max{ min-width: -moz-max-content; min-width: max-content; } .max-w-0{ max-width: 0px; } .max-w-2xl{ max-width: 42rem; } .max-w-3xl{ max-width: 48rem; } .max-w-4xl{ max-width: 56rem; } .max-w-6xl{ max-width: 72rem; } .max-w-7xl{ max-width: 80rem; } .max-w-\[110px\]{ max-width: 110px; } .max-w-\[1140px\]{ max-width: 1140px; } .max-w-\[120px\]{ max-width: 120px; } .max-w-\[12rem\]{ max-width: 12rem; } .max-w-\[130px\]{ max-width: 130px; } .max-w-\[150px\]{ max-width: 150px; } .max-w-\[182px\]{ max-width: 182px; } .max-w-\[200px\]{ max-width: 200px; } .max-w-\[25\.6rem\]{ max-width: 25.6rem; } .max-w-\[250px\]{ max-width: 250px; } .max-w-\[280px\]{ max-width: 280px; } .max-w-\[28ch\]{ max-width: 28ch; } .max-w-\[300px\]{ max-width: 300px; } .max-w-\[30px\]{ max-width: 30px; } .max-w-\[31rem\]{ max-width: 31rem; } .max-w-\[320px\]{ max-width: 320px; } .max-w-\[340px\]{ max-width: 340px; } .max-w-\[46ch\]{ max-width: 46ch; } .max-w-\[46rem\]{ max-width: 46rem; } .max-w-\[500px\]{ max-width: 500px; } .max-w-\[50px\]{ max-width: 50px; } .max-w-\[52ch\]{ max-width: 52ch; } .max-w-\[600px\]{ max-width: 600px; } .max-w-\[62ch\]{ max-width: 62ch; } .max-w-\[750px\]{ max-width: 750px; } .max-w-\[75rem\]{ max-width: 75rem; } .max-w-\[78rem\]{ max-width: 78rem; } .max-w-\[80px\]{ max-width: 80px; } .max-w-\[90\%\]{ max-width: 90%; } .max-w-\[9rem\]{ max-width: 9rem; } .max-w-\[calc\(100\%_-_5rem\)\]{ max-width: calc(100% - 5rem); } .max-w-\[calc\(100vw-1rem\)\]{ max-width: calc(100vw - 1rem); } .max-w-\[min\(20rem\2c calc\(100vw-1rem\)\)\]{ max-width: min(20rem,calc(100vw - 1rem)); } .max-w-full{ max-width: 100%; } .max-w-lg{ max-width: 32rem; } .max-w-max{ max-width: -moz-max-content; max-width: max-content; } .max-w-md{ max-width: 28rem; } .max-w-none{ max-width: none; } .max-w-screen-md{ max-width: 768px; } .max-w-screen-xl{ max-width: 1280px; } .max-w-sm{ max-width: 24rem; } .max-w-xl{ max-width: 36rem; } .max-w-xs{ max-width: 20rem; } .flex-1{ flex: 1 1 0%; } .flex-none{ flex: none; } .flex-shrink-0{ flex-shrink: 0; } .shrink{ flex-shrink: 1; } .shrink-0{ flex-shrink: 0; } .flex-grow{ flex-grow: 1; } .grow{ flex-grow: 1; } .table-fixed{ table-layout: fixed; } .caption-bottom{ caption-side: bottom; } .border-collapse{ border-collapse: collapse; } .border-separate{ border-collapse: separate; } .border-spacing-0{ --tw-border-spacing-x: 0px; --tw-border-spacing-y: 0px; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } .origin-left{ transform-origin: left; } .-translate-x-1\/2{ --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-x-\[-50\%\]{ --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-\[-50\%\]{ --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-\[2px\]{ --tw-translate-y: 2px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-\[40\%\]{ --tw-translate-y: 40%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-180{ --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-45{ --tw-rotate: 45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-90{ --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-\[-45deg\]{ --tw-rotate: -45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .scale-90{ --tw-scale-x: .9; --tw-scale-y: .9; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform{ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @keyframes fade-in{ from{ opacity: 0; transform: translateY(-10px); } to{ opacity: 1; transform: none; } } .animate-fade-in{ animation: fade-in 1000ms var(--animation-delay, 0ms) ease forwards; } @keyframes fade-in-static{ 0%{ opacity: 0; } 100%{ opacity: 1; } } .animate-fade-in-static{ animation: fade-in-static 500ms var(--animation-delay, 0ms) ease forwards; } @keyframes flash{ 0%, 100%{ opacity: 1; } 50%{ opacity: 0.5; } } .animate-flash{ animation: flash 1s infinite; } @keyframes pulse{ 50%{ opacity: .5; } } .animate-pulse{ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes shimmer{ 0%{ transform: translateX(-200%); } 100%{ transform: translateX(200%); } } .animate-shimmer{ animation: shimmer 3s linear infinite; } @keyframes skeleton-arrive{ 0%{ opacity: 0; transform: scale(0.98); } 100%{ opacity: 1; transform: none; } } .animate-skeleton-arrive{ animation: skeleton-arrive var(--t-arrive) var(--ease-lens) forwards; } @keyframes skeleton-pulse{ 0%, 100%{ opacity: 0.55; } 50%{ opacity: 0.9; } } .animate-skeleton-pulse{ animation: skeleton-pulse 1.6s ease-in-out infinite; } @keyframes spin{ to{ transform: rotate(360deg); } } .animate-spin{ animation: spin 1s linear infinite; } .cursor-default{ cursor: default; } .cursor-not-allowed{ cursor: not-allowed; } .cursor-pointer{ cursor: pointer; } .cursor-text{ cursor: text; } .touch-none{ touch-action: none; } .select-none{ -webkit-user-select: none; -moz-user-select: none; user-select: none; } .select-all{ -webkit-user-select: all; -moz-user-select: all; user-select: all; } .resize-none{ resize: none; } .resize-y{ resize: vertical; } .resize{ resize: both; } .scroll-mt-16{ scroll-margin-top: 4rem; } .list-inside{ list-style-position: inside; } .list-decimal{ list-style-type: decimal; } .list-disc{ list-style-type: disc; } .list-none{ list-style-type: none; } .grid-flow-col{ grid-auto-flow: column; } .grid-cols-1{ grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-\[118px_1fr_92px\]{ grid-template-columns: 118px 1fr 92px; } .grid-cols-\[minmax\(0\2c 1fr\)_auto\]{ grid-template-columns: minmax(0,1fr) auto; } .grid-rows-3{ grid-template-rows: repeat(3, minmax(0, 1fr)); } .flex-row{ flex-direction: row; } .flex-row-reverse{ flex-direction: row-reverse; } .flex-col{ flex-direction: column; } .flex-col-reverse{ flex-direction: column-reverse; } .flex-wrap{ flex-wrap: wrap; } .flex-nowrap{ flex-wrap: nowrap; } .place-items-center{ place-items: center; } .items-start{ align-items: flex-start; } .items-end{ align-items: flex-end; } .items-center{ align-items: center; } .items-baseline{ align-items: baseline; } .items-stretch{ align-items: stretch; } .justify-start{ justify-content: flex-start; } .justify-end{ justify-content: flex-end; } .justify-center{ justify-content: center; } .justify-between{ justify-content: space-between; } .justify-items-center{ justify-items: center; } .gap-0{ gap: 0px; } .gap-0\.5{ gap: 0.125rem; } .gap-1{ gap: 0.25rem; } .gap-1\.5{ gap: 0.375rem; } .gap-2{ gap: 0.5rem; } .gap-2\.5{ gap: 0.625rem; } .gap-3{ gap: 0.75rem; } .gap-3\.5{ gap: 0.875rem; } .gap-4{ gap: 1rem; } .gap-6{ gap: 1.5rem; } .gap-8{ gap: 2rem; } .gap-\[3px\]{ gap: 3px; } .gap-px{ gap: 1px; } .gap-x-1{ -moz-column-gap: 0.25rem; column-gap: 0.25rem; } .gap-x-2{ -moz-column-gap: 0.5rem; column-gap: 0.5rem; } .gap-x-3{ -moz-column-gap: 0.75rem; column-gap: 0.75rem; } .gap-x-4{ -moz-column-gap: 1rem; column-gap: 1rem; } .gap-x-5{ -moz-column-gap: 1.25rem; column-gap: 1.25rem; } .gap-y-1{ row-gap: 0.25rem; } .gap-y-10{ row-gap: 2.5rem; } .gap-y-2{ row-gap: 0.5rem; } .gap-y-4{ row-gap: 1rem; } .gap-y-6{ row-gap: 1.5rem; } .gap-y-9{ row-gap: 2.25rem; } .space-x-1 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(0.25rem * var(--tw-space-x-reverse)); margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); } .space-x-2 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } .space-x-3 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(0.75rem * var(--tw-space-x-reverse)); margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); } .space-x-4 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); } .space-x-6 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(1.5rem * var(--tw-space-x-reverse)); margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse))); } .space-y-0 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0px * var(--tw-space-y-reverse)); } .space-y-0\.5 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.125rem * var(--tw-space-y-reverse)); } .space-y-1 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } .space-y-1\.5 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); } .space-y-10 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2.5rem * var(--tw-space-y-reverse)); } .space-y-12 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(3rem * var(--tw-space-y-reverse)); } .space-y-2 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } .space-y-2\.5 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.625rem * var(--tw-space-y-reverse)); } .space-y-3 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .space-y-4 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } .space-y-5 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.25rem * var(--tw-space-y-reverse)); } .space-y-6 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } .space-y-7 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.75rem * var(--tw-space-y-reverse)); } .space-y-8 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2rem * var(--tw-space-y-reverse)); } .divide-y > :not([hidden]) ~ :not([hidden]){ --tw-divide-y-reverse: 0; border-top-width: calc(0.5px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(0.5px * var(--tw-divide-y-reverse)); } .divide-border > :not([hidden]) ~ :not([hidden]){ border-color: var(--border); } .self-start{ align-self: flex-start; } .self-center{ align-self: center; } .overflow-auto{ overflow: auto; } .overflow-hidden{ overflow: hidden; } .overflow-x-auto{ overflow-x: auto; } .overflow-y-auto{ overflow-y: auto; } .overflow-x-hidden{ overflow-x: hidden; } .overflow-x-clip{ overflow-x: clip; } .overflow-y-scroll{ overflow-y: scroll; } .truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whitespace-normal{ white-space: normal; } .whitespace-nowrap{ white-space: nowrap; } .whitespace-pre-line{ white-space: pre-line; } .break-words{ overflow-wrap: break-word; } .break-all{ word-break: break-all; } .rounded{ border-radius: 0.25rem; } .rounded-2xl{ border-radius: 1rem; } .rounded-3xl{ border-radius: 1.5rem; } .rounded-4xl{ border-radius: 2rem; } .rounded-\[10px\]{ border-radius: 10px; } .rounded-\[11px\]{ border-radius: 11px; } .rounded-\[14px\]{ border-radius: 14px; } .rounded-\[2\.4rem\]{ border-radius: 2.4rem; } .rounded-\[2px\]{ border-radius: 2px; } .rounded-\[inherit\]{ border-radius: inherit; } .rounded-\[var\(--r\)\]{ border-radius: var(--r); } .rounded-\[var\(--r-sm\)\]{ border-radius: var(--r-sm); } .rounded-full{ border-radius: 9999px; } .rounded-lg{ border-radius: var(--radius); } .rounded-md{ border-radius: calc(var(--radius) - 2px); } .rounded-sm{ border-radius: calc(var(--radius) - 4px); } .rounded-xl{ border-radius: calc(var(--radius) + 2px); } .rounded-b-lg{ border-bottom-right-radius: var(--radius); border-bottom-left-radius: var(--radius); } .rounded-t-lg{ border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } .rounded-bl-lg{ border-bottom-left-radius: var(--radius); } .rounded-tl-lg{ border-top-left-radius: var(--radius); } .rounded-tl-sm{ border-top-left-radius: calc(var(--radius) - 4px); } .rounded-tr-lg{ border-top-right-radius: var(--radius); } .border{ border-width: 0.5px; } .border-0{ border-width: 0px; } .border-0\.5{ border-width: 0.5px; } .border-1{ border-width: 1px; } .border-2{ border-width: 2px; } .border-\[0\.5px\]{ border-width: 0.5px; } .border-x{ border-left-width: 0.5px; border-right-width: 0.5px; } .border-b{ border-bottom-width: 0.5px; } .border-b-0\.5{ border-bottom-width: 0.5px; } .border-b-\[1px\]{ border-bottom-width: 1px; } .border-l{ border-left-width: 0.5px; } .border-l-2{ border-left-width: 2px; } .border-r{ border-right-width: 0.5px; } .border-t{ border-top-width: 0.5px; } .border-dashed{ border-style: dashed; } .border-dotted{ border-style: dotted; } .border-none{ border-style: none; } .border-\[color\:var\(--ink-4\)\]{ border-color: var(--ink-4); } .border-amber-500\/30{ border-color: rgb(245 158 11 / 0.3); } .border-amber-500\/40{ border-color: rgb(245 158 11 / 0.4); } .border-amber-600\/40{ border-color: rgb(217 119 6 / 0.4); } .border-border{ border-color: var(--border); } .border-border-contrast{ border-color: var(--border-contrast); } .border-current{ border-color: currentColor; } .border-destructive{ border-color: var(--destructive); } .border-green-600{ --tw-border-opacity: 1; border-color: rgb(22 163 74 / var(--tw-border-opacity, 1)); } .border-input{ border-color: var(--input); } .border-muted{ border-color: var(--muted); } .border-muted-foreground{ border-color: var(--muted-foreground); } .border-orange{ border-color: var(--orange); } .border-primary{ border-color: var(--primary); } .border-transparent{ border-color: transparent; } .border-white\/10{ border-color: rgb(255 255 255 / 0.1); } .border-white\/\[0\.07\]{ border-color: rgb(255 255 255 / 0.07); } .border-l-transparent{ border-left-color: transparent; } .border-t-transparent{ border-top-color: transparent; } .bg-\[\#00101d\]{ --tw-bg-opacity: 1; background-color: rgb(0 16 29 / var(--tw-bg-opacity, 1)); } .bg-\[\#121212\]{ --tw-bg-opacity: 1; background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1)); } .bg-\[\#202124\]{ --tw-bg-opacity: 1; background-color: rgb(32 33 36 / var(--tw-bg-opacity, 1)); } .bg-\[\#4EA7FC4D\]{ background-color: #4EA7FC4D; } .bg-\[\#C6C6C6\]{ --tw-bg-opacity: 1; background-color: rgb(198 198 198 / var(--tw-bg-opacity, 1)); } .bg-\[\#f43b00\]{ --tw-bg-opacity: 1; background-color: rgb(244 59 0 / var(--tw-bg-opacity, 1)); } .bg-\[color\:var\(--ink-4\)\]{ background-color: var(--ink-4); } .bg-\[rgba\(10\2c 12\2c 16\2c 0\.03\)\]{ background-color: rgba(10,12,16,0.03); } .bg-\[rgba\(10\2c 12\2c 16\2c 0\.04\)\]{ background-color: rgba(10,12,16,0.04); } .bg-\[rgba\(10\2c 12\2c 16\2c 0\.05\)\]{ background-color: rgba(10,12,16,0.05); } .bg-\[rgba\(10\2c 12\2c 16\2c 0\.08\)\]{ background-color: rgba(10,12,16,0.08); } .bg-\[rgba\(10\2c 12\2c 16\2c 0\.10\)\]{ background-color: rgba(10,12,16,0.10); } .bg-\[var\(--edge-faint\)\]{ background-color: var(--edge-faint); } .bg-\[var\(--progress-danger\)\]{ background-color: var(--progress-danger); } .bg-accent{ background-color: var(--accent); } .bg-amber-500\/10{ background-color: rgb(245 158 11 / 0.1); } .bg-amber-500\/5{ background-color: rgb(245 158 11 / 0.05); } .bg-backdrop{ background-color: var(--backdrop); } .bg-backdropAccent{ background-color: var(--backdrop-accent); } .bg-background{ background-color: var(--background); } .bg-black{ --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } .bg-black\/30{ background-color: rgb(0 0 0 / 0.3); } .bg-black\/40{ background-color: rgb(0 0 0 / 0.4); } .bg-black\/50{ background-color: rgb(0 0 0 / 0.5); } .bg-black\/55{ background-color: rgb(0 0 0 / 0.55); } .bg-blue-light{ background-color: var(--blue-light); } .bg-border{ background-color: var(--border); } .bg-card{ background-color: var(--card); } .bg-danger{ background-color: var(--danger); } .bg-destructive{ background-color: var(--destructive); } .bg-foreground{ background-color: var(--foreground); } .bg-gray-800{ background-color: var(--gray-800); } .bg-green-50{ --tw-bg-opacity: 1; background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1)); } .bg-green-500{ --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); } .bg-green-600{ --tw-bg-opacity: 1; background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); } .bg-green-light{ background-color: var(--green-light); } .bg-input{ background-color: var(--input); } .bg-muted{ background-color: var(--muted); } .bg-muted-foreground{ background-color: var(--muted-foreground); } .bg-orange{ background-color: var(--orange); } .bg-orange-500{ --tw-bg-opacity: 1; background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1)); } .bg-orange-light{ background-color: var(--orange-light); } .bg-pink{ background-color: var(--red); } .bg-pink-light{ background-color: var(--red-light); } .bg-popover{ background-color: var(--popover); } .bg-primary{ background-color: var(--primary); } .bg-red-500{ --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .bg-red-600{ --tw-bg-opacity: 1; background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); } .bg-secondary{ background-color: var(--secondary); } .bg-secondaryTransparent{ background-color: var(--secondary-transparent); } .bg-slate-400{ --tw-bg-opacity: 1; background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1)); } .bg-slate-800{ --tw-bg-opacity: 1; background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); } .bg-slate-950{ --tw-bg-opacity: 1; background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1)); } .bg-transparent{ background-color: transparent; } .bg-warning{ background-color: var(--warning); } .bg-white{ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .bg-white\/\[0\.12\]{ background-color: rgb(255 255 255 / 0.12); } .bg-white\/\[0\.18\]{ background-color: rgb(255 255 255 / 0.18); } .bg-yellow-500{ --tw-bg-opacity: 1; background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1)); } .bg-yellow-light{ background-color: var(--yellow-light); } .bg-zinc-100{ --tw-bg-opacity: 1; background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1)); } .bg-zinc-800{ --tw-bg-opacity: 1; background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1)); } .bg-zinc-950{ --tw-bg-opacity: 1; background-color: rgb(9 9 11 / var(--tw-bg-opacity, 1)); } .bg-opacity-80{ --tw-bg-opacity: 0.8; } .bg-opacity-90{ --tw-bg-opacity: 0.9; } .bg-\[linear-gradient\(to_right\2c transparent\2c rgba\(255\2c 255\2c 255\2c 0\.1\)_50\%\2c transparent\)\]{ background-image: linear-gradient(to right,transparent,rgba(255,255,255,0.1) 50%,transparent); } .bg-\[radial-gradient\(ellipse_at_center\2c rgba\(var\(--feature-color\)\2c 0\.15\)\2c transparent\)\]{ background-image: radial-gradient(ellipse at center,rgba(var(--feature-color),0.15),transparent); } .bg-\[radial-gradient\(ellipse_at_top_left\2c rgba\(var\(--feature-color\)\2c 0\.10\)\2c transparent\)\]{ background-image: radial-gradient(ellipse at top left,rgba(var(--feature-color),0.10),transparent); } .bg-gradient-to-b{ background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); } .bg-gradient-to-br{ background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); } .bg-gradient-to-r{ background-image: linear-gradient(to right, var(--tw-gradient-stops)); } .bg-gradient-to-t{ background-image: linear-gradient(to top, var(--tw-gradient-stops)); } .from-indigo-500{ --tw-gradient-from: #6366f1 var(--tw-gradient-from-position); --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-muted{ --tw-gradient-from: var(--muted) var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-purple-500{ --tw-gradient-from: #a855f7 var(--tw-gradient-from-position); --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-transparent{ --tw-gradient-from: transparent var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-vh-pink{ --tw-gradient-from: var(--vh-pink) var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-white{ --tw-gradient-from: #fff var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-zinc-700\/30{ --tw-gradient-from: rgb(63 63 70 / 0.3) var(--tw-gradient-from-position); --tw-gradient-to: rgb(63 63 70 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-10\%{ --tw-gradient-from-position: 10%; } .from-30\%{ --tw-gradient-from-position: 30%; } .via-blue-400\/25{ --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(96 165 250 / 0.25) var(--tw-gradient-via-position), var(--tw-gradient-to); } .via-purple-500{ --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to); } .via-vh-light-blue{ --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--vh-light-blue) var(--tw-gradient-via-position), var(--tw-gradient-to); } .via-25\%{ --tw-gradient-via-position: 25%; } .to-blue{ --tw-gradient-to: var(--blue) var(--tw-gradient-to-position); } .to-pink-500{ --tw-gradient-to: #ec4899 var(--tw-gradient-to-position); } .to-secondary{ --tw-gradient-to: var(--secondary) var(--tw-gradient-to-position); } .to-transparent{ --tw-gradient-to: transparent var(--tw-gradient-to-position); } .to-vh-dark-blue{ --tw-gradient-to: var(--vh-dark-blue) var(--tw-gradient-to-position); } .to-white\/40{ --tw-gradient-to: rgb(255 255 255 / 0.4) var(--tw-gradient-to-position); } .to-white\/60{ --tw-gradient-to: rgb(255 255 255 / 0.6) var(--tw-gradient-to-position); } .to-zinc-950\/90{ --tw-gradient-to: rgb(9 9 11 / 0.9) var(--tw-gradient-to-position); } .to-65\%{ --tw-gradient-to-position: 65%; } .bg-clip-text{ -webkit-background-clip: text; background-clip: text; } .fill-black{ fill: #000; } .fill-current{ fill: currentColor; } .fill-primary{ fill: var(--primary); } .fill-transparent{ fill: transparent; } .fill-white{ fill: #fff; } .stroke-\[\#DCDAD2\]{ stroke: #DCDAD2; } .stroke-foreground{ stroke: var(--foreground); } .stroke-1{ stroke-width: 1; } .stroke-2{ stroke-width: 2; } .stroke-\[1\.5\]{ stroke-width: 1.5; } .stroke-\[1\.5px\]{ stroke-width: 1.5px; } .object-cover{ -o-object-fit: cover; object-fit: cover; } .p-0{ padding: 0px; } .p-0\.5{ padding: 0.125rem; } .p-1{ padding: 0.25rem; } .p-1\.5{ padding: 0.375rem; } .p-10{ padding: 2.5rem; } .p-2{ padding: 0.5rem; } .p-3{ padding: 0.75rem; } .p-4{ padding: 1rem; } .p-5{ padding: 1.25rem; } .p-6{ padding: 1.5rem; } .p-\[1px\]{ padding: 1px; } .p-\[2\.5px\]{ padding: 2.5px; } .p-\[3px\]{ padding: 3px; } .px-0{ padding-left: 0px; padding-right: 0px; } .px-0\.5{ padding-left: 0.125rem; padding-right: 0.125rem; } .px-1{ padding-left: 0.25rem; padding-right: 0.25rem; } .px-1\.5{ padding-left: 0.375rem; padding-right: 0.375rem; } .px-10{ padding-left: 2.5rem; padding-right: 2.5rem; } .px-2{ padding-left: 0.5rem; padding-right: 0.5rem; } .px-2\.5{ padding-left: 0.625rem; padding-right: 0.625rem; } .px-20{ padding-left: 5rem; padding-right: 5rem; } .px-3{ padding-left: 0.75rem; padding-right: 0.75rem; } .px-3\.5{ padding-left: 0.875rem; padding-right: 0.875rem; } .px-4{ padding-left: 1rem; padding-right: 1rem; } .px-5{ padding-left: 1.25rem; padding-right: 1.25rem; } .px-6{ padding-left: 1.5rem; padding-right: 1.5rem; } .px-8{ padding-left: 2rem; padding-right: 2rem; } .px-\[18px\]{ padding-left: 18px; padding-right: 18px; } .px-\[3px\]{ padding-left: 3px; padding-right: 3px; } .px-\[6px\]{ padding-left: 6px; padding-right: 6px; } .px-\[7px\]{ padding-left: 7px; padding-right: 7px; } .px-\[8px\]{ padding-left: 8px; padding-right: 8px; } .py-0{ padding-top: 0px; padding-bottom: 0px; } .py-0\.5{ padding-top: 0.125rem; padding-bottom: 0.125rem; } .py-1{ padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-1\.5{ padding-top: 0.375rem; padding-bottom: 0.375rem; } .py-10{ padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-12{ padding-top: 3rem; padding-bottom: 3rem; } .py-16{ padding-top: 4rem; padding-bottom: 4rem; } .py-2{ padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-2\.5{ padding-top: 0.625rem; padding-bottom: 0.625rem; } .py-3{ padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-3\.5{ padding-top: 0.875rem; padding-bottom: 0.875rem; } .py-4{ padding-top: 1rem; padding-bottom: 1rem; } .py-6{ padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-8{ padding-top: 2rem; padding-bottom: 2rem; } .py-\[0\.5rem\]{ padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-\[10px\]{ padding-top: 10px; padding-bottom: 10px; } .py-\[1px\]{ padding-top: 1px; padding-bottom: 1px; } .py-\[1rem\]{ padding-top: 1rem; padding-bottom: 1rem; } .py-\[2px\]{ padding-top: 2px; padding-bottom: 2px; } .py-px{ padding-top: 1px; padding-bottom: 1px; } .pb-0{ padding-bottom: 0px; } .pb-0\.5{ padding-bottom: 0.125rem; } .pb-1{ padding-bottom: 0.25rem; } .pb-1\.5{ padding-bottom: 0.375rem; } .pb-10{ padding-bottom: 2.5rem; } .pb-2{ padding-bottom: 0.5rem; } .pb-3{ padding-bottom: 0.75rem; } .pb-4{ padding-bottom: 1rem; } .pb-40{ padding-bottom: 10rem; } .pb-6{ padding-bottom: 1.5rem; } .pb-8{ padding-bottom: 2rem; } .pb-\[0\.13em\]{ padding-bottom: 0.13em; } .pb-\[200px\]{ padding-bottom: 200px; } .pe-4{ padding-inline-end: 1rem; } .pl-0{ padding-left: 0px; } .pl-0\.5{ padding-left: 0.125rem; } .pl-1{ padding-left: 0.25rem; } .pl-1\.5{ padding-left: 0.375rem; } .pl-2{ padding-left: 0.5rem; } .pl-2\.5{ padding-left: 0.625rem; } .pl-3{ padding-left: 0.75rem; } .pl-3\.5{ padding-left: 0.875rem; } .pl-4{ padding-left: 1rem; } .pl-5{ padding-left: 1.25rem; } .pl-6{ padding-left: 1.5rem; } .pl-7{ padding-left: 1.75rem; } .pl-8{ padding-left: 2rem; } .pl-9{ padding-left: 2.25rem; } .pl-\[8px\]{ padding-left: 8px; } .pr-0{ padding-right: 0px; } .pr-1{ padding-right: 0.25rem; } .pr-1\.5{ padding-right: 0.375rem; } .pr-11{ padding-right: 2.75rem; } .pr-14{ padding-right: 3.5rem; } .pr-2{ padding-right: 0.5rem; } .pr-2\.5{ padding-right: 0.625rem; } .pr-24{ padding-right: 6rem; } .pr-3{ padding-right: 0.75rem; } .pr-3\.5{ padding-right: 0.875rem; } .pr-4{ padding-right: 1rem; } .pr-5{ padding-right: 1.25rem; } .pr-6{ padding-right: 1.5rem; } .pr-7{ padding-right: 1.75rem; } .pr-8{ padding-right: 2rem; } .pr-\[32px\]{ padding-right: 32px; } .pr-\[8px\]{ padding-right: 8px; } .ps-1{ padding-inline-start: 0.25rem; } .pt-0{ padding-top: 0px; } .pt-0\.5{ padding-top: 0.125rem; } .pt-1{ padding-top: 0.25rem; } .pt-1\.5{ padding-top: 0.375rem; } .pt-10{ padding-top: 2.5rem; } .pt-16{ padding-top: 4rem; } .pt-2{ padding-top: 0.5rem; } .pt-2\.5{ padding-top: 0.625rem; } .pt-24{ padding-top: 6rem; } .pt-3{ padding-top: 0.75rem; } .pt-3\.5{ padding-top: 0.875rem; } .pt-4{ padding-top: 1rem; } .pt-40{ padding-top: 10rem; } .pt-5{ padding-top: 1.25rem; } .pt-6{ padding-top: 1.5rem; } .pt-8{ padding-top: 2rem; } .pt-\[0\.12rem\]{ padding-top: 0.12rem; } .pt-\[0\.6rem\]{ padding-top: 0.6rem; } .pt-\[12rem\]{ padding-top: 12rem; } .pt-\[3px\]{ padding-top: 3px; } .text-left{ text-align: left; } .text-center{ text-align: center; } .text-right{ text-align: right; } .text-start{ text-align: start; } .align-baseline{ vertical-align: baseline; } .align-top{ vertical-align: top; } .align-middle{ vertical-align: middle; } .align-bottom{ vertical-align: bottom; } .font-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .font-sans{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .text-2xl{ font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.025em; } .text-3xl{ font-size: 2.25rem; line-height: 1.12; letter-spacing: -0.03em; } .text-4xl{ font-size: 3rem; line-height: 1.08; letter-spacing: -0.035em; } .text-6xl{ font-size: 3.75rem; line-height: 1; } .text-\[0\.75rem\]{ font-size: 0.75rem; } .text-\[0\.7rem\]{ font-size: 0.7rem; } .text-\[0\.8rem\]{ font-size: 0.8rem; } .text-\[10\.5px\]{ font-size: 10.5px; } .text-\[10px\]{ font-size: 10px; } .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-\[26px\]{ font-size: 26px; } .text-\[3rem\]{ font-size: 3rem; } .text-\[8px\]{ font-size: 8px; } .text-\[9\.5px\]{ font-size: 9.5px; } .text-base{ font-size: 1rem; } .text-lg{ font-size: 1.1875rem; } .text-md{ font-size: 1.125rem; } .text-sm{ font-size: 0.9375rem; } .text-xl{ font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.02em; } .text-xs{ font-size: 0.8125rem; } .font-bold{ font-weight: 700; } .font-light{ font-weight: 500; } .font-medium{ font-weight: 700; } .font-normal{ font-weight: 400; } .font-regular{ font-weight: 600; } .font-semibold{ font-weight: 600; } .font-thin{ font-weight: 100; } .uppercase{ text-transform: uppercase; } .lowercase{ text-transform: lowercase; } .capitalize{ text-transform: capitalize; } .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); } .leading-4{ line-height: 1rem; } .leading-5{ line-height: 1.25rem; } .leading-6{ line-height: 1.5rem; } .leading-\[1\.22\]{ line-height: 1.22; } .leading-\[20px\]{ line-height: 20px; } .leading-\[24px\]{ line-height: 24px; } .leading-\[28px\]{ line-height: 28px; } .leading-none{ line-height: 1; } .leading-relaxed{ line-height: 1.625; } .leading-snug{ line-height: 1.375; } .leading-tight{ line-height: 1.25; } .tracking-\[-0\.02rem\]{ letter-spacing: -0.02rem; } .tracking-\[0\.14em\]{ letter-spacing: 0.14em; } .tracking-\[0\.18em\]{ letter-spacing: 0.18em; } .tracking-tight{ letter-spacing: -0.025em; } .tracking-tighter{ letter-spacing: -0.05em; } .tracking-wide{ letter-spacing: 0.025em; } .tracking-wider{ letter-spacing: 0.05em; } .tracking-widest{ letter-spacing: 0.1em; } .text-\[\#00C969\]{ --tw-text-opacity: 1; color: rgb(0 201 105 / var(--tw-text-opacity, 1)); } .text-\[\#FF3638\]{ --tw-text-opacity: 1; color: rgb(255 54 56 / var(--tw-text-opacity, 1)); } .text-\[color\:var\(--ink-2\)\]{ color: var(--ink-2); } .text-\[color\:var\(--ink-4\)\]{ color: var(--ink-4); } .text-\[var\(--ink-2\)\]{ color: var(--ink-2); } .text-\[var\(--ink-3\)\]{ color: var(--ink-3); } .text-\[var\(--progress-danger\)\]{ color: var(--progress-danger); } .text-accent-foreground{ color: var(--accent-foreground); } .text-amber-500{ --tw-text-opacity: 1; color: rgb(245 158 11 / var(--tw-text-opacity, 1)); } .text-amber-600{ --tw-text-opacity: 1; color: rgb(217 119 6 / var(--tw-text-opacity, 1)); } .text-amber-700{ --tw-text-opacity: 1; color: rgb(180 83 9 / var(--tw-text-opacity, 1)); } .text-backdropAccentForeground{ color: var(--backdrop-accent-foreground); } .text-blue{ color: var(--blue); } .text-blue-500{ --tw-text-opacity: 1; color: rgb(59 130 246 / var(--tw-text-opacity, 1)); } .text-card{ color: var(--card); } .text-card-foreground{ color: var(--card-foreground); } .text-current{ color: currentColor; } .text-danger{ color: var(--danger); } .text-danger-foreground{ color: var(--danger-foreground); } .text-destructive{ color: var(--destructive); } .text-destructive-foreground{ color: var(--destructive-foreground); } .text-emerald-500{ --tw-text-opacity: 1; color: rgb(16 185 129 / var(--tw-text-opacity, 1)); } .text-foreground{ color: var(--foreground); } .text-gray-400{ color: var(--gray-400); } .text-gray-500{ color: var(--gray-500); } .text-gray-600{ color: var(--gray-600); } .text-gray-700{ color: var(--gray-700); } .text-gray-800{ color: var(--gray-800); } .text-gray-900{ color: var(--gray-900); } .text-green{ color: var(--green); } .text-green-600{ --tw-text-opacity: 1; color: rgb(22 163 74 / var(--tw-text-opacity, 1)); } .text-muted{ color: var(--muted); } .text-muted-foreground{ color: var(--muted-foreground); } .text-orange{ color: var(--orange); } .text-orange-500{ --tw-text-opacity: 1; color: rgb(249 115 22 / var(--tw-text-opacity, 1)); } .text-pink{ color: var(--red); } .text-popover-foreground{ color: var(--popover-foreground); } .text-primary{ color: var(--primary); } .text-primary-foreground{ color: var(--primary-foreground); } .text-red-500{ --tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity, 1)); } .text-red-600{ --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity, 1)); } .text-secondary-foreground{ color: var(--secondary-foreground); } .text-success{ color: var(--success); } .text-transparent{ color: transparent; } .text-warning{ color: var(--warning); } .text-white{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .text-white\/90{ color: rgb(255 255 255 / 0.9); } .text-yellow{ color: var(--yellow); } .text-yellow-600{ --tw-text-opacity: 1; color: rgb(202 138 4 / var(--tw-text-opacity, 1)); } .text-zinc-100{ --tw-text-opacity: 1; color: rgb(244 244 245 / var(--tw-text-opacity, 1)); } .text-zinc-50{ --tw-text-opacity: 1; color: rgb(250 250 250 / var(--tw-text-opacity, 1)); } .underline{ text-decoration-line: underline; } .line-through{ text-decoration-line: line-through; } .no-underline{ text-decoration-line: none; } .decoration-muted-foreground{ text-decoration-color: var(--muted-foreground); } .decoration-dotted{ text-decoration-style: dotted; } .decoration-1{ text-decoration-thickness: 1px; } .underline-offset-2{ text-underline-offset: 2px; } .underline-offset-4{ text-underline-offset: 4px; } .underline-offset-\[3px\]{ text-underline-offset: 3px; } .antialiased{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .placeholder-muted-foreground::-moz-placeholder{ color: var(--muted-foreground); } .placeholder-muted-foreground::placeholder{ color: var(--muted-foreground); } .accent-foreground{ accent-color: var(--foreground); } .opacity-0{ opacity: 0; } .opacity-100{ opacity: 1; } .opacity-40{ opacity: 0.4; } .opacity-50{ opacity: 0.5; } .opacity-55{ opacity: 0.55; } .opacity-60{ opacity: 0.6; } .opacity-70{ opacity: 0.7; } .opacity-75{ opacity: 0.75; } .opacity-80{ opacity: 0.8; } .opacity-90{ opacity: 0.9; } .opacity-\[\.85\]{ opacity: .85; } .shadow{ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-2xl{ --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[0_1px_1px_rgba\(0\2c 0\2c 0\2c 0\.2\)\]{ --tw-shadow: 0 1px 1px rgba(0,0,0,0.2); --tw-shadow-colored: 0 1px 1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[0_1px_2px_rgba\(20\2c 26\2c 38\2c 0\.04\)\2c 0_4px_16px_-6px_rgba\(20\2c 26\2c 38\2c 0\.10\)\]{ --tw-shadow: 0 1px 2px rgba(20,26,38,0.04),0 4px 16px -6px rgba(20,26,38,0.10); --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 4px 16px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-lg{ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-md{ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-none{ --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-pane{ --tw-shadow: var(--shadow); --tw-shadow-colored: var(--shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-sm{ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-black\/50{ --tw-shadow-color: rgb(0 0 0 / 0.5); --tw-shadow: var(--tw-shadow-colored); } .outline-none{ outline: 2px solid transparent; outline-offset: 2px; } .outline{ outline-style: solid; } .ring{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0.5px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ring-0{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ring-1{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ring-2{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ring-background{ --tw-ring-color: var(--background); } .ring-primary{ --tw-ring-color: var(--primary); } .ring-offset-backdrop{ --tw-ring-offset-color: var(--backdrop); } .ring-offset-background{ --tw-ring-offset-color: var(--background); } .blur{ --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .brightness-105{ --tw-brightness: brightness(1.05); 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); } .drop-shadow{ --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); 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); } .drop-shadow-\[0_1px_2px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]{ --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); 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); } .drop-shadow-sm{ --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)); 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); } .grayscale{ --tw-grayscale: grayscale(100%); 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); } .invert{ --tw-invert: invert(100%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .filter{ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .backdrop-blur{ --tw-backdrop-blur: blur(8px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-blur-0{ --tw-backdrop-blur: blur(0); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-blur-\[6px\]{ --tw-backdrop-blur: blur(6px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-blur-sm{ --tw-backdrop-blur: blur(4px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-filter{ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .transition{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-\[background-color\]{ transition-property: background-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-\[color\2c opacity\]{ transition-property: color,opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-\[width\]{ transition-property: width; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-all{ transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-colors{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-opacity{ transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-transform{ transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-150{ transition-duration: 150ms; } .duration-160{ transition-duration: 160ms; } .duration-200{ transition-duration: 200ms; } .duration-300{ transition-duration: 300ms; } .duration-500{ transition-duration: 500ms; } .duration-700{ transition-duration: 700ms; } .ease-in-out{ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ease-linear{ transition-timing-function: linear; } .ease-out{ transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } .ease-out-quad{ transition-timing-function: cubic-bezier(0.25,0.46,0.45,0.94); } @keyframes enter{ from{ opacity: var(--tw-enter-opacity, 1); transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0)); } } @keyframes exit{ to{ opacity: var(--tw-exit-opacity, 1); transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0)); } } .animate-in{ animation-name: enter; animation-duration: 150ms; --tw-enter-opacity: initial; --tw-enter-scale: initial; --tw-enter-rotate: initial; --tw-enter-translate-x: initial; --tw-enter-translate-y: initial; } .fade-in{ --tw-enter-opacity: 0; } .fade-in-50{ --tw-enter-opacity: 0.5; } .duration-150{ animation-duration: 150ms; } .duration-160{ animation-duration: 160ms; } .duration-200{ animation-duration: 200ms; } .duration-300{ animation-duration: 300ms; } .duration-500{ animation-duration: 500ms; } .duration-700{ animation-duration: 700ms; } .ease-in-out{ animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ease-linear{ animation-timing-function: linear; } .ease-out{ animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } .ease-out-quad{ animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94); } .\!running{ animation-play-state: running !important; } .running{ animation-play-state: running; } .paused{ animation-play-state: paused; } .\[--animation-delay\:200ms\]{ --animation-delay: 200ms; } .\[--wpb-rise\:24px\]{ --wpb-rise: 24px; } .\[outline\:none\]{ outline: none; } .\[scrollbar-width\:none\]{ scrollbar-width: none; } .\[text-decoration\:none\]{ text-decoration: none; } .\[transition\:transform_1000ms_cubic-bezier\(0\.3\2c _1\.17\2c _0\.55\2c _0\.99\)_0s\]{ transition: transform 1000ms cubic-bezier(0.3, 1.17, 0.55, 0.99) 0s; } /* ── Tab status ring (Sprint 3b · design-step-change workstream A · simplified) ────────────────── A tab's leading icon BECOMES a small monochrome progress ring while its surface generates, then closes once and returns to the icon — the slot stays filled so the label never re-centres. Monochrome ink only (never blue/green). ONE motion: the icon fades out, a thin arc fills, and on completion the arc closes, HOLDS as a closed circle, then crossfades (opacity only) back to the icon. No travelling point of light, no completion bloom. Timing (patience gate, min-visible floor, hold, fade) lives in tab-status-ring.tsx; this is the look. The ring is an SVG circle stroke (not a conic-gradient + mask, which stair-stepped at this size): track = --border hairline, arc = currentColor (the tab's own text colour). */ @property --p { syntax: ""; inherits: true; initial-value: 0; } .tsr-icon { display: inline-flex; align-items: center; justify-content: center; transition: opacity .3s; } .tsr-icon.is-hidden { opacity: 0; } .tsr-icon.is-invite { animation: tsr-invite 1.9s ease-in-out infinite; } .tsr-glyph { --p: 0; --tsr-trk: var(--border); /* The filled arc inherits the tab's own text colour (currentColor): muted-foreground on an inactive tab, full foreground on the active one — so the ring always matches the icon it replaced and brightens with the label when its tab is in focus, instead of a fixed grey. */ --tsr-arc: currentColor; position: absolute; inset: 1px; /* 14px box in the 16px slot; the SVG draws a ~12.6px ring inside it, a touch smaller than the old 14px conic that filled the box */ opacity: 0; /* base: faded out — the .3s opacity transition IS the crossfade */ pointer-events: none; transition: --p .18s linear, opacity .3s; } .tsr-glyph.is-show { opacity: 1; } /* SVG ring — a vector stroke, not a conic-gradient + thin radial mask. At this ~12px size the old conic technique aliased into visible stair-steps; an SVG circle stroke anti-aliases crisply. Two concentric circles share one 20-unit viewBox (r=8): a faint full track and the arc. The arc is stroke-dasharray = the circumference, revealed by shrinking stroke-dashoffset as --p (0..1) rises; rotate(-90deg) starts it at 12 o'clock and it grows clockwise (p=25% fills the top-right quadrant). Round caps for a softer end. */ .tsr-ring { display: block; width: 100%; height: 100%; transform: rotate(-90deg); } .tsr-ring circle { fill: none; stroke-width: 2; } .tsr-track { stroke: var(--tsr-trk); } .tsr-arc { stroke: var(--tsr-arc); stroke-linecap: round; stroke-dasharray: 50.265; /* 2π·8 for the r=8 circle in the 20-unit box */ stroke-dashoffset: calc(50.265 * (1 - var(--p))); } @keyframes tsr-invite { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } /* The in-band status pill (surface-status-pill.tsx). It dissolves in — opacity only — replacing the dead during-load search input; at the first streamed segment the header swaps it back for the real content (a hard swap, no exit tween). */ .ssp { animation: ssp-in .3s ease both; } @keyframes ssp-in { from { opacity: 0; } to { opacity: 1; } } /* The generation orb renders at ~80% ink wherever it stands in for a glyph — the band status pill and Ask's connecting beats — so it reads as a quiet companion to the verb, not a second focal point. One value, one place to tune. Applied to the orb's wrapper box (pill slot, chat preparation beat, chat-list Thinking row); the library orb and its wrapper are untouched. */ .status-orb { opacity: .8; } /* Ask empty-state starter prompts (empty-screen.tsx). They DROP IN FROM ABOVE, staggered top-to- bottom, so they read as falling from where the Analyzing…/Thinking loader stood. The from-state lives in the keyframe (not a base rule) so the reduced-motion `animation: none` below leaves each prompt at rest — visible — rather than stuck at opacity 0. Stagger is per-item via inline animation-delay. */ .chat-suggestion-in { animation: chat-suggestion-in .45s cubic-bezier(.16, .8, .3, 1) both; } @keyframes chat-suggestion-in { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { /* No --p transition, no crossfades, no invite breathing — a static arc only; the pill appears without its fade. */ .tsr-icon, .tsr-glyph, .ssp, .chat-suggestion-in { transition: none !important; animation: none !important; } } /**:focus {*/ /* outline: 4px solid red !important;*/ /*}*/ /* Shine - for boxes */ .shine { border-top: 0.5px solid rgba(255, 255, 255, 0.2); background-image: linear-gradient( to bottom, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) ); } .shine-large { border-top: 0.5px solid rgba(255, 255, 255, 0.3); background-image: linear-gradient( to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) ); } /* Split Pane */ .react-split__sash{ background-color: var(--muted); opacity: 0.1; /*width: 4px !important; */ } .react-split__sash:hover{ background-color: var(--muted-foreground); /* Example: Change background color */ } /* */ .widget-align-right { transform: scale(0.6); /* Adjust the scale as needed to change the size */ } #hubspot-messages-iframe-container { background-color: transparent !important; } .widget-app-container { background-color: blue !important; /* Change the background */ } /* Custom CSS for Vimeo Player vp-center */ .body.vp-center { background-color: #000 !important; } /* Custom CSS for slanted tabs */ .tab-slanted-start::before, .tab-slanted-both::before { content: ''; position: absolute; left: -15px; /* adjust as needed */ top: 0; bottom: 0; width: 15px; /* adjust as needed */ background: inherit; clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%); border-top-left-radius: 2px; } .tab-slanted-end::after, .tab-slanted-both::after { content: ''; position: absolute; right: -15px; /* adjust as needed */ top: 0; bottom: 0; width: 15px; /* adjust as needed */ background: inherit; clip-path: polygon(0 0, 0 0, 100% 100%, 0% 100%); border-bottom-right-radius: 2px; } /* Custom CSS for the circular progress */ .circular-progress { transform: rotate(-90deg); } .circular-progress-path { transition: stroke-dashoffset 0.35s ease; transform-origin: center; stroke-linecap: round; } /* Initial scrollbar state */ /* 1. Replace the Default Scrollbar */ .modern-scrollbar::-webkit-scrollbar { width: 0.45rem; margin-right: 0.9rem; } .modern-scrollbar::-webkit-scrollbar-thumb { background: transparent; /* Hide initially */ border-radius: 9999px; -webkit-transition: background 3s; transition: background 3s; /* Transition for background color */ } /* 2. Hover state for the scrollbar thumb */ .modern-scrollbar:hover::-webkit-scrollbar-thumb, .modern-scrollbar.show-scrollbar::-webkit-scrollbar-thumb { background: var(--border); /* Show scrollbar thumb on hover or when class is added */ } /* 3. Rest of your scrollbar styles */ .modern-scrollbar::-webkit-scrollbar-track { background: transparent; } .modern-scrollbar { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } /* Hide the scrollbar while keeping the element scrollable — used by the mobile filter-chip rail, which scrolls horizontally on one line rather than wrapping. */ .scrollbar-hide { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* old Edge */ } .scrollbar-hide::-webkit-scrollbar { display: none; /* Chrome / Safari */ } /* Softer resting-pane shadow. The standing `--shadow` (shadow-pane) ramp — a 44px-blur drop — read as a heavy halo on large white panes in LIGHT mode (the Continue-watching hero, the List table), fighting the pale page ground. This is a lighter, tighter lift for those panes. Dark keeps the full ramp (the heavy read was light-only). Owner review 2026-09-04. */ .shadow-pane-soft { box-shadow: 0 1px 0 #FFF inset, 0 10px 26px -20px rgba(20, 26, 38, .18), 0 3px 10px -8px rgba(20, 26, 38, .10); } .dark .shadow-pane-soft { box-shadow: var(--shadow); } /* Customise the VideoJS player */ .vjs-poster.vjs-poster img { -o-object-fit: cover !important; object-fit: cover !important; } /* At rest (before the user has started playback) show ONLY the big play button — never the loading spinner behind it. Video.js shows its spinner during initial metadata load, which layered a "swirl" behind the play triangle and read as "is this loading, or can I press play?". Once playback has begun (.vjs-has-started) the spinner behaves normally, so real mid-playback buffering still shows it. */ .video-js:not(.vjs-has-started) .vjs-loading-spinner { display: none !important; } /* Notification unread dot: a single gentle "pop" as the glyph's indicator circle fills with primary. Runs on mount — i.e. the moment there's something unread (and on a hard load while unread) — not on every render, so the arrival is what draws the eye, once. `transform-box: fill-box` makes `transform-origin: center` resolve within the SVG circle's own box. */ @keyframes vhNotificationDotPop { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .vh-notification-dot { transform-box: fill-box; transform-origin: center; animation: vhNotificationDotPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @media (prefers-reduced-motion: reduce) { .vh-notification-dot { animation: none; } } /* Intentional: Remove focus outlines from video player for better UX. Video.js has its own focus management and visual indicators for player controls. */ .video-js:focus, .video-js:focus-visible, .video-js:focus-within, .video-js *:focus, .video-js *:focus-visible, .vjs-control-bar:focus, .vjs-control-bar:focus-visible { outline: none !important; box-shadow: none !important; } /*ul {*/ /* @apply list-disc list-outside;*/ /*}*/ /* Arrow and row pulse animations */ @keyframes arrow-pulse-accent { 0% { transform: scale(1); filter: drop-shadow(0 0 0 var(--primary)); } 50% { transform: scale(1.07); /* make pulse a bit more obvious */ filter: drop-shadow(0 0 2px var(--secondary)); /* stronger primary glow */ } 100% { transform: scale(1); filter: drop-shadow(0 0 0 var(--primary)); } } .arrow-pulse-strong { animation: arrow-pulse-accent 800ms ease-in-out infinite; } /* Finite 8s pulse (800ms * 10 iterations) */ .arrow-pulse-10s { animation: arrow-pulse-accent 1000ms ease-in-out 10; } @keyframes row-pulse-highlight { 0% { outline: 0 solid transparent; outline-offset: 0; background-color: transparent; } 50% { outline: 3px solid var(--primary); outline-offset: 2px; background-color: rgba(44, 123, 229, 0.08); background-color: color-mix(in oklab, var(--primary) 12%, transparent); } 100% { outline: 0 solid transparent; outline-offset: 0; background-color: transparent; } } /* Finite ~10s pulse for rows (1000ms * 10 iterations) */ .row-pulse-highlight-10s { animation: row-pulse-highlight 1000ms ease-in-out 10; } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { .arrow-pulse-strong, .arrow-pulse-10s, .row-pulse-highlight-10s { animation: none !important; } } /* Content pulse (text/icons) for rows */ @keyframes row-content-pulse { 0% { filter: none; } 50% { filter: brightness(1.18) saturate(1.05); } 100% { filter: none; } } /* Apply animation to the entire row and its cells to ensure visibility across browsers */ .row-content-pulse-10s, .row-content-pulse-10s > td, .row-content-pulse-10s svg { animation: row-content-pulse 1000ms ease-in-out 10; } @media (prefers-reduced-motion: reduce) { .row-content-pulse-10s, .row-content-pulse-10s > td, .row-content-pulse-10s svg { animation: none !important; } } /* Tall content header: align the page title with the sidebar wordmark. The sidebar header is `h-12 items-center my-2 lg:mt-3`, so its wordmark centers at cy = (48 + marginTop)/2 → 28px at md, 30px at lg. The content header is a flush sticky `h-12` strip; matching top padding drops the title (and right-side actions) onto the same horizontal line. Written as literal CSS (not `lg:pt-3`) because the dev JIT would not emit that utility for the header file, leaving the title 2px high. `md:pt-2` (8px) is kept as a Tailwind class on the element for the md case; this only adds the extra 4px at lg. Attribute+element selector (0,1,1) outranks Tailwind's `.md\:pt-2` (0,1,0). */ @media (min-width: 1024px) { header[data-tall-header] { padding-top: 0.75rem; /* 12px → title cy 30, matches wordmark */ } } /* Page-title size — the single source of truth for every page's main title (PageHeader on Browse/Settings pages, the New Video hero, and the playlist-detail breadcrumb name). Folded into the Design Language v2 `xl` step (22px / 1.3 / −.02em, web-app tailwind.config.ts). `@apply` is resolved at build by the tailwindcss plugin into literal declarations here, so there is no JIT class-emission concern (the reason this stayed literal CSS before). */ .text-page-title{ font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.02em; } /* Mobile Summary and Research share one width-driven 16:9 stage. The surrounding resizable panel may make the stage smaller, but it must never stretch the video or give the two routes different geometry. The important overrides also neutralize Summary's legacy viewport-height inline style. */ .mobile-natural-video-player { display: flex; height: 100%; align-items: center; justify-content: center; } .mobile-natural-video-player #video-container { width: auto !important; max-width: 100%; height: 100% !important; aspect-ratio: 16 / 9; /* Clip once, on the wrapper. #video-container carries its own rounded-lg (matched to the desktop frame), but here the wrapper already rounds + clips, so a second, smaller radius inside it only shows as a stepped double-edge at the corners. Square the inner element and let the wrapper's single radius own the shape. */ border-radius: 0 !important; } .mobile-natural-video-player #video-container > div, .mobile-natural-video-player #video-wrapper { width: 100% !important; height: 100% !important; max-height: none !important; } /* Keep the mobile splitter visually identical to its desktop counterpart: a one-pixel rule. The element itself remains eight pixels tall, and its pseudo hit-area remains 44px, so touch ergonomics do not dictate the visual weight. */ .quiet-resize-handle, .quiet-resize-handle:hover, .quiet-resize-handle:active { background: transparent !important; } .quiet-resize-handle::before { content: ""; position: absolute; pointer-events: none; background: var(--border); } .quiet-resize-handle[data-panel-group-direction="vertical"]::before { top: 50%; right: 0; left: 0; height: 1px; transform: translateY(-50%); } .quiet-resize-handle[data-panel-group-direction="horizontal"]::before { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); } /* The mobile splitter briefly teaches itself, then gets out of the way. Its 44px pseudo hit-area remains active after the dots fade; touching, hovering, or keyboard-focusing the splitter brings the affordance back without dedicating more layout height to it. */ @keyframes mobile-resize-grip-fade { 0%, 65% { opacity: 1; } 100% { opacity: 0; } } .mobile-transient-resize-grip { animation: mobile-resize-grip-fade 4s ease-out 1s forwards; } .group:hover > .mobile-transient-resize-grip, .group:active > .mobile-transient-resize-grip, .group:focus-visible > .mobile-transient-resize-grip { animation: none; opacity: 1; } /* ============================================================================ Transcript per-row speaker bar (diarized transcripts). Each segment renders as a flex row: [timestamp] [bar-lane] [text]. The bar is a single SHORT tick per segment, hued by speaker (--seg, set inline per row). Hovering a bar tints the whole speaker TURN's text toward that hue — text only, no background block, so it never competes with a user-highlight span. The peek class is toggled imperatively in transcript-segments.tsx (one delegated listener, no per-row React state). Written as literal CSS (not Tailwind arbitrary values) so the dev turbopack JIT reliably emits these novel values; distances are vars so they can be tuned in one place. The offsetParent + per-segment offsetTop measurement is unchanged, so notebook note-card anchoring still works. ============================================================================ */ .transcript-rows { --gap-ts-bar: 4px; /* timestamp → bar */ --gap-text: 10px; /* bar → text (breathing room so the bar doesn't crowd the words) */ --bar-w: 1px; /* bar thickness (grows +1 on hover, inside a fixed lane → no text shift) */ --lane-w: 2px; /* the bar lane's fixed width — --bar-w + 1px of headroom for the hover grow */ --bar-h: 15px; /* bar height — short, never the full segment */ --bar-top: 7px; /* bar offset from row top → aligns to the first text line */ --ts-line-h: 1.5rem; /* shared first-line height (matches the text's leading-6) */ --bar-opacity: 0.7; /* detune: solid brand hues read too strong next to the ~0.3-alpha (#..4D) user highlights; a 1px line can't go to 0.3 and stay legible, so soften here */ } .transcript-row { display: flex; align-items: flex-start; } /* Timestamp cell: in-flow, left-aligned, hugs its own text. Never selectable, so it never leaks into a copied selection (proven by the cross-engine copy gate). */ .transcript-ts { flex: none; line-height: var(--ts-line-h); white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .transcript-ts .transcript-ts-btn { line-height: var(--ts-line-h); } /* Non-diarized transcripts render NO .speaker-lane (the row is just [timestamp][text]), and the lane's own margins were the only thing holding the text off the timestamp — so those rows came out flush. Worse than flush, in fact: .ce-body's -3px hug margin then pulls the first word back OVER the button's border. Reinstate exactly the gutter the lane occupies when it is present, so both transcript kinds read identically. The class is set in transcript-segments.tsx rather than derived with :has(), which would put a structural selector on a list that runs to thousands of rows. */ .transcript-row.no-lane .transcript-ts { margin-right: calc(var(--gap-ts-bar) + var(--lane-w) + var(--gap-text)); } /* Bar lane: fixed width so the bar can thicken on hover without shifting the text. The hit-zone (::before) extends toward the TIME only (left), never over the text, so a multi-line text drag-select is never intercepted by the bar. */ .speaker-lane { position: relative; flex: none; width: var(--lane-w); margin-left: var(--gap-ts-bar); margin-right: var(--gap-text); align-self: stretch; display: flex; justify-content: flex-start; cursor: default; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .speaker-lane::before { content: ''; position: absolute; top: 0; bottom: 0; left: -4px; right: 0; } .speaker-bar { width: var(--bar-w); height: var(--bar-h); margin-top: var(--bar-top); border-radius: 2px; background: var(--seg); opacity: var(--bar-opacity); transition: width 0.1s ease, opacity 0.1s; } /* The text body is inline (not a block) so a peek highlight HUGS the words via box-decoration-break — a text highlighter, not a full-width rectangle. Padding/margin are always present (transparent) so toggling only the background never reflows. The `#ce-` contract, the `index` attribute, and it being a real
are unchanged, so the multi-segment selection walk still works. */ .ce-body { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: 4px; padding: 1px 3px; margin: 0 -3px; } /* peek = a bar in this segment's speaker turn is hovered → highlight that turn's WORDS with a subtle neutral marker (no block, no bar resize — bar stays 1px). */ .transcript-row.peek .ce-body { background: color-mix(in srgb, var(--foreground) 13%, transparent); } /* Focused note card — set when its highlight is clicked (in the transcript or on the card). The hue rides on the card's EXISTING hairline border instead of adding a second coloured outline: a 1px box-shadow ring stacked on the 0.5px border read as ~1.5px of doubled-up colour. Detuned against --border so a thin coloured line sits WITH the UI rather than shouting over it — same reasoning as --bar-opacity on the speaker bars. --focus-hue is set inline by the card (the highlight's own palette colour); everything else lives here as literal CSS because JIT cannot see runtime-built class names. Deliberately NO width/height/top and NO transform: any geometry change would either shift the neighbouring cards or trip the per-card ResizeObserver -> updateHighlightNotebookHighlightHeight -> notebookHighlightTops, relaying out every card. The card omits `border-border`/`shadow-sm` while focused, so there is no specificity fight. */ .notebook-card-focused { /* The border is already 0.5px — one physical pixel on a 2x display — so "finer" comes from intensity, not width. 40% keeps the hue identifiable without the hairline reading as a drawn ring. This is the dial. The second operand is the OPAQUE forward-plane token --bg-3 (#E2E5EA), NOT --border: since Optics, --border is var(--hair) (~.10 alpha), and mixing hue into a translucent operand yields a ~46%-alpha border that washes the ring out. --bg-3 restores the near-opaque tint this dial was tuned against (≈ the old opaque #E5E5EA). */ border-color: color-mix(in srgb, var(--focus-hue) 40%, var(--bg-3)); box-shadow: 0 3px 12px -5px rgba(16, 18, 24, 0.12); z-index: 5; } .dark .notebook-card-focused { /* Same operand fix (opaque --bg-3 = #1F2024, not translucent --border/--hair). The plane is much darker here, so the same 40% mix lands dimmer than it reads in light mode; lift it slightly so the hue stays legible on the dark card. */ border-color: color-mix(in srgb, var(--focus-hue) 52%, var(--bg-3)); box-shadow: 0 3px 12px -5px rgba(0, 0, 0, 0.45); } /* Single shared speaker tooltip — one element for the whole list, positioned imperatively on bar hover (no per-row Radix tooltip). Styled to match the app's TooltipContent (bg-popover / border / rounded-md / shadow-md / text-xs) so it reads like every other tooltip in the product, not a bespoke pill. */ #speaker-tooltip { position: fixed; z-index: 50; pointer-events: none; opacity: 0; transition: opacity 0.1s; display: inline-flex; align-items: center; gap: 7px; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); font-size: 0.75rem; /* text-xs */ line-height: 1rem; font-weight: 400; padding: 0.375rem 0.75rem; /* py-1.5 px-3 */ border-radius: 0.375rem; /* rounded-md */ white-space: nowrap; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */ } #speaker-tooltip.show { opacity: 1; } /* small speaker-hue dot before the name (color set imperatively on hover) — the only thing shown besides the name; no "Speaker N" when a real name exists. */ #speaker-tooltip .speaker-tooltip-dot { width: 8px; height: 8px; border-radius: 9999px; flex: none; background: var(--seg-tip, currentColor); } @media (prefers-reduced-motion: reduce) { .speaker-bar, #speaker-tooltip { transition: none; } } /* "Jump to current" pill — floats at the bottom-centre of the transcript panel (absolute inside the panel's relative wrapper, so it stays put while content scrolls). Hidden until .is-visible, which the component toggles when the playing cue is off-screen while follow-mode is on. */ .jump-to-current { position: absolute; left: 50%; bottom: 16px; z-index: 20; display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px 6px 11px; border-radius: 9999px; border: 1px solid var(--border); background: var(--popover); color: var(--foreground); font-size: 12.5px; font-weight: 500; line-height: 1; white-space: nowrap; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.20); cursor: pointer; opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease, border-color 0.12s, background 0.12s; } .jump-to-current.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .jump-to-current:hover { border-color: var(--border-contrast); background: var(--secondary); } @media (prefers-reduced-motion: reduce) { .jump-to-current { transition: opacity 0.16s ease, border-color 0.12s, background 0.12s; } } /* ============================================================================ Depth planes (Design Language v2 §04/§07). Elevation is z-planes, carried by two shadow tokens (--shadow resting / --shadow-fwd forward, in optics.tokens.css) — not a boxShadow ramp. Recede/forward recipes for a pane that yields focus to a nearer plane (recede) or becomes the active surface (forward). Per the motion law only transform is transitioned; brightness is a discrete state (never animated). Reduced motion drops the transition. Additive class names, web-app only — nothing consumes them yet (Sprint 2 wires panes onto these). ============================================================================ */ .plane-recede { filter: brightness(0.955) saturate(0.98); transform: scale(0.993); transition: transform var(--t-hover, 200ms) var(--ease-lens, ease); } .plane-recede:hover { filter: none; transform: none; } .plane-fwd { box-shadow: var(--shadow-fwd); transform: translateY(-2px); transition: transform var(--t-hover, 200ms) var(--ease-lens, ease); } @media (prefers-reduced-motion: reduce) { .plane-recede, .plane-fwd { transition: none; } } .dark\:prose-invert:is(.dark *){ --tw-prose-body: var(--tw-prose-invert-body); --tw-prose-headings: var(--tw-prose-invert-headings); --tw-prose-lead: var(--tw-prose-invert-lead); --tw-prose-links: var(--tw-prose-invert-links); --tw-prose-bold: var(--tw-prose-invert-bold); --tw-prose-counters: var(--tw-prose-invert-counters); --tw-prose-bullets: var(--tw-prose-invert-bullets); --tw-prose-hr: var(--tw-prose-invert-hr); --tw-prose-quotes: var(--tw-prose-invert-quotes); --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders); --tw-prose-captions: var(--tw-prose-invert-captions); --tw-prose-kbd: var(--tw-prose-invert-kbd); --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows); --tw-prose-code: var(--tw-prose-invert-code); --tw-prose-pre-code: var(--tw-prose-invert-pre-code); --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg); --tw-prose-th-borders: var(--tw-prose-invert-th-borders); --tw-prose-td-borders: var(--tw-prose-invert-td-borders); } .marker\:text-muted-foreground *::marker{ color: var(--muted-foreground); } .marker\:text-muted-foreground::marker{ color: var(--muted-foreground); } .file\:border-0::file-selector-button{ border-width: 0px; } .file\:bg-transparent::file-selector-button{ background-color: transparent; } .file\:text-sm::file-selector-button{ font-size: 0.9375rem; } .file\:font-medium::file-selector-button{ font-weight: 700; } .placeholder\:text-muted-foreground::-moz-placeholder{ color: var(--muted-foreground); } .placeholder\:text-muted-foreground::placeholder{ color: var(--muted-foreground); } .before\:pointer-events-none::before{ content: var(--tw-content); pointer-events: none; } .before\:absolute::before{ content: var(--tw-content); position: absolute; } .before\:inset-0::before{ content: var(--tw-content); inset: 0px; } .before\:w-full::before{ content: var(--tw-content); width: 100%; } .before\:rounded-\[inherit\]::before{ content: var(--tw-content); border-radius: inherit; } .before\:bg-\[linear-gradient\(rgba\(255\2c _255\2c _255\2c _0\.3\)\2c _rgba\(255\2c _255\2c _255\2c _0\)_120\%\)\]::before{ content: var(--tw-content); background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 120%); } .before\:bg-glass-gradient::before{ content: var(--tw-content); background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 100%); } .before\:bg-no-repeat::before{ content: var(--tw-content); background-repeat: no-repeat; } .before\:p-\[1px\]::before{ content: var(--tw-content); padding: 1px; } .before\:transition-\[transform\2c opacity\]::before{ content: var(--tw-content); transition-property: transform,opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .before\:duration-1000::before{ content: var(--tw-content); transition-duration: 1000ms; } .before\:ease-in::before{ content: var(--tw-content); transition-timing-function: cubic-bezier(0.4, 0, 1, 1); } .before\:duration-1000::before{ content: var(--tw-content); animation-duration: 1000ms; } .before\:ease-in::before{ content: var(--tw-content); animation-timing-function: cubic-bezier(0.4, 0, 1, 1); } .before\:\[background-position\:1\%_0\%\2c 99\%_0\%\]::before{ content: var(--tw-content); background-position: 1% 0%,99% 0%; } .before\:\[background-size\:50\%_100\%\2c 50\%_100\%\]::before{ content: var(--tw-content); background-size: 50% 100%,50% 100%; } .before\:\[mask-composite\:xor\]::before{ content: var(--tw-content); -webkit-mask-composite: xor; mask-composite: xor; } .before\:\[mask\:linear-gradient\(black\2c _black\)_content-box_content-box\2c _linear-gradient\(black\2c _black\)\]::before{ content: var(--tw-content); -webkit-mask: linear-gradient(black, black) content-box content-box, linear-gradient(black, black); mask: linear-gradient(black, black) content-box content-box, linear-gradient(black, black); } .before\:\[mask\:radial-gradient\(100\%_50\%_at_center_center\2c _black\2c _transparent\)\]::before{ content: var(--tw-content); -webkit-mask: radial-gradient(100% 50% at center center, black, transparent); mask: radial-gradient(100% 50% at center center, black, transparent); } .after\:pointer-events-none::after{ content: var(--tw-content); pointer-events: none; } .after\:absolute::after{ content: var(--tw-content); position: absolute; } .after\:inset-0::after{ content: var(--tw-content); inset: 0px; } .after\:inset-y-0::after{ content: var(--tw-content); top: 0px; bottom: 0px; } .after\:left-1\/2::after{ content: var(--tw-content); left: 50%; } .after\:w-1::after{ content: var(--tw-content); width: 0.25rem; } .after\:-translate-x-1\/2::after{ content: var(--tw-content); --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .after\:rounded-\[inherit\]::after{ content: var(--tw-content); border-radius: inherit; } .after\:bg-\[rgba\(255\2c _255\2c _255\2c _0\.15\)\]::after{ content: var(--tw-content); background-color: rgba(255, 255, 255, 0.15); } .after\:\[mask\:linear-gradient\(black\2c transparent\)\]::after{ content: var(--tw-content); -webkit-mask: linear-gradient(black,transparent); mask: linear-gradient(black,transparent); } .first\:mt-0:first-child{ margin-top: 0px; } .last\:mb-0:last-child{ margin-bottom: 0px; } .last\:border-b-0:last-child{ border-bottom-width: 0px; } .focus-within\:relative:focus-within{ position: relative; } .focus-within\:z-20:focus-within{ z-index: 20; } .focus-within\:border-none:focus-within{ border-style: none; } .focus-within\:border-border:focus-within{ border-color: var(--border); } .focus-within\:bg-card:focus-within{ background-color: var(--card); } .focus-within\:outline-none:focus-within{ outline: 2px solid transparent; outline-offset: 2px; } .focus-within\:ring-1:focus-within{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-within\:ring-ring:focus-within{ --tw-ring-color: var(--ring); } .hover\:translate-y-\[-0px\]:hover{ --tw-translate-y: -0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hover\:rounded-lg:hover{ border-radius: var(--radius); } .hover\:border:hover{ border-width: 0.5px; } .hover\:border-0\.5:hover{ border-width: 0.5px; } .hover\:border-1:hover{ border-width: 1px; } .hover\:border-\[0\.5px\]:hover{ border-width: 0.5px; } .hover\:border-accent:hover{ border-color: var(--accent); } .hover\:border-border:hover{ border-color: var(--border); } .hover\:border-border-contrast:hover{ border-color: var(--border-contrast); } .hover\:border-foreground:hover{ border-color: var(--foreground); } .hover\:border-primary:hover{ border-color: var(--primary); } .hover\:bg-\[color-mix\(in_srgb\2c var\(--red\)_9\%\2c transparent\)\]:hover{ background-color: color-mix(in srgb,var(--red) 9%,transparent); } .hover\:bg-\[rgba\(10\2c 12\2c 16\2c 0\.05\)\]:hover{ background-color: rgba(10,12,16,0.05); } .hover\:bg-\[rgba\(10\2c 12\2c 16\2c 0\.06\)\]:hover{ background-color: rgba(10,12,16,0.06); } .hover\:bg-\[rgba\(10\2c 12\2c 16\2c 0\.08\)\]:hover{ background-color: rgba(10,12,16,0.08); } .hover\:bg-\[rgba\(10\2c 12\2c 16\2c 0\.14\)\]:hover{ background-color: rgba(10,12,16,0.14); } .hover\:bg-accent:hover{ background-color: var(--accent); } .hover\:bg-backdropAccent:hover{ background-color: var(--backdrop-accent); } .hover\:bg-background:hover{ background-color: var(--background); } .hover\:bg-black:hover{ --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } .hover\:bg-black\/50:hover{ background-color: rgb(0 0 0 / 0.5); } .hover\:bg-black\/\[\.04\]:hover{ background-color: rgb(0 0 0 / .04); } .hover\:bg-border:hover{ background-color: var(--border); } .hover\:bg-danger:hover{ background-color: var(--danger); } .hover\:bg-destructive:hover{ background-color: var(--destructive); } .hover\:bg-green-50:hover{ --tw-bg-opacity: 1; background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1)); } .hover\:bg-muted:hover{ background-color: var(--muted); } .hover\:bg-primary:hover{ background-color: var(--primary); } .hover\:bg-secondary:hover{ background-color: var(--secondary); } .hover\:bg-secondaryTransparent:hover{ background-color: var(--secondary-transparent); } .hover\:bg-transparent:hover{ background-color: transparent; } .hover\:bg-zinc-700:hover{ --tw-bg-opacity: 1; background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1)); } .hover\:bg-zinc-800:hover{ --tw-bg-opacity: 1; background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1)); } .hover\:bg-opacity-100:hover{ --tw-bg-opacity: 1; } .hover\:text-accent-foreground:hover{ color: var(--accent-foreground); } .hover\:text-backdropAccentForeground:hover{ color: var(--backdrop-accent-foreground); } .hover\:text-card-foreground:hover{ color: var(--card-foreground); } .hover\:text-destructive:hover{ color: var(--destructive); } .hover\:text-foreground:hover{ color: var(--foreground); } .hover\:text-green-700:hover{ --tw-text-opacity: 1; color: rgb(21 128 61 / var(--tw-text-opacity, 1)); } .hover\:text-primary:hover{ color: var(--primary); } .hover\:text-primary-foreground:hover{ color: var(--primary-foreground); } .hover\:text-secondary-foreground:hover{ color: var(--secondary-foreground); } .hover\:text-zinc-50:hover{ --tw-text-opacity: 1; color: rgb(250 250 250 / var(--tw-text-opacity, 1)); } .hover\:underline:hover{ text-decoration-line: underline; } .hover\:decoration-dotted:hover{ text-decoration-style: dotted; } .hover\:underline-offset-2:hover{ text-underline-offset: 2px; } .hover\:opacity-100:hover{ opacity: 1; } .hover\:opacity-80:hover{ opacity: 0.8; } .hover\:opacity-90:hover{ opacity: 0.9; } .hover\:shadow:hover{ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hover\:shadow-md:hover{ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hover\:shadow-none:hover{ --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hover\:shadow-sm:hover{ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hover\:ring-0\.5:hover{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0.5px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .hover\:ring-2:hover{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .hover\:ring-primary:hover{ --tw-ring-color: var(--primary); } .hover\:ring-ring:hover{ --tw-ring-color: var(--ring); } .hover\:ring-offset-1:hover{ --tw-ring-offset-width: 1px; } .hover\:brightness-110:hover{ --tw-brightness: brightness(1.1); 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-border:focus{ border-color: var(--border); } .focus\:border-border-contrast:focus{ border-color: var(--border-contrast); } .focus\:bg-accent:focus{ background-color: var(--accent); } .focus\:bg-primary:focus{ background-color: var(--primary); } .focus\:bg-secondary:focus{ background-color: var(--secondary); } .focus\:text-accent-foreground:focus{ color: var(--accent-foreground); } .focus\:text-destructive:focus{ color: var(--destructive); } .focus\:text-muted-foreground:focus{ color: var(--muted-foreground); } .focus\:text-primary-foreground:focus{ color: var(--primary-foreground); } .focus\:text-secondary-foreground:focus{ color: var(--secondary-foreground); } .focus\:opacity-100:focus{ opacity: 1; } .focus\:shadow-sm:focus{ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .focus\:outline-none:focus{ outline: 2px solid transparent; outline-offset: 2px; } .focus\:outline-0:focus{ outline-width: 0px; } .focus\:ring:focus{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0.5px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus\:ring-0:focus{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus\:ring-1:focus{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus\:ring-2:focus{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus\:ring-ring:focus{ --tw-ring-color: var(--ring); } .focus\:ring-offset-0:focus{ --tw-ring-offset-width: 0px; } .focus\:ring-offset-2:focus{ --tw-ring-offset-width: 2px; } .hover\:focus\:text-secondary-foreground:focus:hover{ color: var(--secondary-foreground); } .focus-visible\:border-ring:focus-visible{ border-color: var(--ring); } .focus-visible\:bg-backdropAccent:focus-visible{ background-color: var(--backdrop-accent); } .focus-visible\:opacity-100:focus-visible{ opacity: 1; } .focus-visible\:outline-none:focus-visible{ outline: 2px solid transparent; outline-offset: 2px; } .focus-visible\:ring:focus-visible{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0.5px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:ring-0:focus-visible{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:ring-0\.5:focus-visible{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0.5px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:ring-1:focus-visible{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:ring-2:focus-visible{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:ring-destructive:focus-visible{ --tw-ring-color: var(--destructive); } .focus-visible\:ring-muted:focus-visible{ --tw-ring-color: var(--muted); } .focus-visible\:ring-ring:focus-visible{ --tw-ring-color: var(--ring); } .focus-visible\:ring-slate-700:focus-visible{ --tw-ring-opacity: 1; --tw-ring-color: rgb(51 65 85 / var(--tw-ring-opacity, 1)); } .focus-visible\:ring-offset-0:focus-visible{ --tw-ring-offset-width: 0px; } .focus-visible\:ring-offset-1:focus-visible{ --tw-ring-offset-width: 1px; } .focus-visible\:ring-offset-2:focus-visible{ --tw-ring-offset-width: 2px; } .focus-visible\:ring-offset-background:focus-visible{ --tw-ring-offset-color: var(--background); } .active\:bg-\[rgba\(10\2c 12\2c 16\2c 0\.08\)\]:active{ background-color: rgba(10,12,16,0.08); } .active\:bg-border:active{ background-color: var(--border); } .disabled\:pointer-events-none:disabled{ pointer-events: none; } .disabled\:cursor-not-allowed:disabled{ cursor: not-allowed; } .disabled\:opacity-50:disabled{ opacity: 0.5; } .disabled\:opacity-60:disabled{ opacity: 0.6; } .disabled\:opacity-75:disabled{ opacity: 0.75; } .group:hover .group-hover\:block{ display: block; } .group:hover .group-hover\:flex{ display: flex; } .group:hover .group-hover\:hidden{ display: none; } .group:hover .group-hover\:border-\[0\.5px\]{ border-width: 0.5px; } .group:hover .group-hover\:border-\[1px\]{ border-width: 1px; } .group:hover .group-hover\:border-\[color\:var\(--ink-3\)\]{ border-color: var(--ink-3); } .group:hover .group-hover\:border-muted-foreground{ border-color: var(--muted-foreground); } .group:hover .group-hover\:border-white\/\[0\.05\]{ border-color: rgb(255 255 255 / 0.05); } .group:hover .group-hover\:bg-black\/40{ background-color: rgb(0 0 0 / 0.4); } .group:hover .group-hover\:bg-border{ background-color: var(--border); } .group:hover .group-hover\:bg-secondary{ background-color: var(--secondary); } .group:hover .group-hover\:text-accent-foreground{ color: var(--accent-foreground); } .group\/notebookToggle:hover .group-hover\/notebookToggle\:opacity-0{ opacity: 0; } .group\/notebookToggle:hover .group-hover\/notebookToggle\:opacity-100{ opacity: 1; } .group:hover .group-hover\:opacity-0{ opacity: 0; } .group:hover .group-hover\:opacity-100{ opacity: 1; } .group\/hero:hover .group-hover\/hero\:brightness-105{ --tw-brightness: brightness(1.05); 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); } .group:hover .group-hover\:brightness-105{ --tw-brightness: brightness(1.05); 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); } .group:hover .group-hover\:backdrop-blur-sm{ --tw-backdrop-blur: blur(4px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .group:active .group-active\:flex{ display: flex; } .group:active .group-active\:bg-border{ background-color: var(--border); } .group[data-collapsed=true] .group-\[\[data-collapsed\=true\]\]\:justify-center{ justify-content: center; } .group.destructive .group-\[\.destructive\]\:border-muted{ border-color: var(--muted); } .group.toaster .group-\[\.toaster\]\:border-border{ border-color: var(--border); } .group.destructive .group-\[\.destructive\]\:border-opacity-40{ --tw-border-opacity: 0.4; } .group.toast .group-\[\.toast\]\:bg-muted{ background-color: var(--muted); } .group.toast .group-\[\.toast\]\:bg-primary{ background-color: var(--primary); } .group.toaster .group-\[\.toaster\]\:bg-background{ background-color: var(--background); } .group[data-collapsed=true] .group-\[\[data-collapsed\=true\]\]\:px-2{ padding-left: 0.5rem; padding-right: 0.5rem; } .group[data-collapsed=true] .group-\[\[data-collapsed\=true\]\]\:pb-0{ padding-bottom: 0px; } .group.destructive .group-\[\.destructive\]\:text-destructive-foreground{ color: var(--destructive-foreground); } .group.toast .group-\[\.toast\]\:text-muted-foreground{ color: var(--muted-foreground); } .group.toast .group-\[\.toast\]\:text-primary-foreground{ color: var(--primary-foreground); } .group.toaster .group-\[\.toaster\]\:text-foreground{ color: var(--foreground); } .group.toaster .group-\[\.toaster\]\:shadow-lg{ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group.destructive .group-\[\.destructive\]\:hover\:border-destructive:hover{ border-color: var(--destructive); } .group.destructive .group-\[\.destructive\]\:hover\:border-opacity-30:hover{ --tw-border-opacity: 0.3; } .group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover{ background-color: var(--destructive); } .group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover{ color: var(--destructive-foreground); } .group.destructive .group-\[\.destructive\]\:hover\:text-foreground:hover{ color: var(--foreground); } .group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus{ --tw-ring-color: var(--destructive); } .group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus{ --tw-ring-opacity: 1; --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1)); } .group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus{ --tw-ring-offset-color: #dc2626; } .peer:disabled ~ .peer-disabled\:cursor-not-allowed{ cursor: not-allowed; } .peer:disabled ~ .peer-disabled\:opacity-70{ opacity: 0.7; } .aria-selected\:bg-accent[aria-selected="true"]{ background-color: var(--accent); } .aria-selected\:text-accent-foreground[aria-selected="true"]{ color: var(--accent-foreground); } .aria-selected\:text-muted-foreground[aria-selected="true"]{ color: var(--muted-foreground); } .aria-selected\:opacity-100[aria-selected="true"]{ opacity: 1; } .aria-selected\:opacity-30[aria-selected="true"]{ opacity: 0.3; } .data-\[disabled\]\:pointer-events-none[data-disabled]{ pointer-events: none; } .data-\[state\=inactive\]\:hidden[data-state="inactive"]{ display: none; } .data-\[panel-group-direction\=vertical\]\:h-2[data-panel-group-direction="vertical"]{ height: 0.5rem; } .data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"]{ height: 1px; } .data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"]{ width: 100%; } .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"]{ --tw-translate-y: 0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[side\=left\]\:-translate-x-1[data-side="left"]{ --tw-translate-x: -0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[side\=right\]\:translate-x-1[data-side="right"]{ --tw-translate-x: 0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[side\=top\]\:-translate-y-1[data-side="top"]{ --tw-translate-y: -0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[state\=checked\]\:translate-x-5[data-state="checked"]{ --tw-translate-x: 1.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"]{ --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"]{ --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"]{ --tw-translate-x: var(--radix-toast-swipe-end-x); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"]{ --tw-translate-x: var(--radix-toast-swipe-move-x); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @keyframes accordion-up{ from{ height: var(--radix-accordion-content-height); } to{ height: 0; } } .data-\[state\=closed\]\:animate-accordion-up[data-state="closed"]{ animation: accordion-up 0.2s ease-out; } @keyframes accordion-down{ from{ height: 0; } to{ height: var(--radix-accordion-content-height); } } .data-\[state\=open\]\:animate-accordion-down[data-state="open"]{ animation: accordion-down 0.2s ease-out; } .data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"]{ flex-direction: column; } .data-\[state\=open\]\:border[data-state="open"]{ border-width: 0.5px; } .data-\[state\=checked\]\:border-none[data-state="checked"]{ border-style: none; } .data-\[state\=open\]\:border-border[data-state="open"]{ border-color: var(--border); } .data-\[state\=open\]\:border-white\/\[0\.07\][data-state="open"]{ border-color: rgb(255 255 255 / 0.07); } .data-\[active\]\:bg-accent[data-active]{ background-color: var(--accent); } .data-\[state\=active\]\:bg-background[data-state="active"]{ background-color: var(--background); } .data-\[state\=checked\]\:bg-black\/\[\.06\][data-state="checked"]{ background-color: rgb(0 0 0 / .06); } .data-\[state\=checked\]\:bg-primary[data-state="checked"]{ background-color: var(--primary); } .data-\[state\=checked\]\:bg-secondary[data-state="checked"]{ background-color: var(--secondary); } .data-\[state\=open\]\:bg-accent[data-state="open"]{ background-color: var(--accent); } .data-\[state\=open\]\:bg-backdropAccent[data-state="open"]{ background-color: var(--backdrop-accent); } .data-\[state\=open\]\:bg-black\/55[data-state="open"]{ background-color: rgb(0 0 0 / 0.55); } .data-\[state\=open\]\:bg-muted[data-state="open"]{ background-color: var(--muted); } .data-\[state\=open\]\:bg-secondary[data-state="open"]{ background-color: var(--secondary); } .data-\[state\=open\]\:bg-transparent[data-state="open"]{ background-color: transparent; } .data-\[state\=selected\]\:bg-muted[data-state="selected"]{ background-color: var(--muted); } .data-\[state\=unchecked\]\:bg-input[data-state="unchecked"]{ background-color: var(--input); } .data-\[state\=active\]\:text-foreground[data-state="active"]{ color: var(--foreground); } .data-\[state\=checked\]\:text-accent-foreground[data-state="checked"]{ color: var(--accent-foreground); } .data-\[state\=checked\]\:text-foreground[data-state="checked"]{ color: var(--foreground); } .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"]{ color: var(--primary-foreground); } .data-\[state\=open\]\:text-accent-foreground[data-state="open"]{ color: var(--accent-foreground); } .data-\[active\]\:opacity-50[data-active]{ opacity: 0.5; } .data-\[disabled\]\:opacity-50[data-disabled]{ opacity: 0.5; } .data-\[state\=open\]\:opacity-50[data-state="open"]{ opacity: 0.5; } .data-\[state\=active\]\:shadow[data-state="active"]{ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .data-\[state\=open\]\:shadow-\[0_1px_1px_rgba\(0\2c 0\2c 0\2c 0\.2\)\][data-state="open"]{ --tw-shadow: 0 1px 1px rgba(0,0,0,0.2); --tw-shadow-colored: 0 1px 1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .data-\[state\=open\]\:brightness-110[data-state="open"]{ --tw-brightness: brightness(1.1); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .data-\[state\=active\]\:drop-shadow[data-state="active"]{ --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .data-\[state\=active\]\:drop-shadow-sm[data-state="active"]{ --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .data-\[state\=active\]\:filter[data-state="active"]{ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .data-\[state\=open\]\:backdrop-blur-sm[data-state="open"]{ --tw-backdrop-blur: blur(4px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .data-\[swipe\=move\]\:transition-none[data-swipe="move"]{ transition-property: none; } .data-\[state\=closed\]\:duration-300[data-state="closed"]{ transition-duration: 300ms; } .data-\[state\=open\]\:duration-500[data-state="open"]{ transition-duration: 500ms; } .data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"]{ animation-name: enter; animation-duration: 150ms; --tw-enter-opacity: initial; --tw-enter-scale: initial; --tw-enter-rotate: initial; --tw-enter-translate-x: initial; --tw-enter-translate-y: initial; } .data-\[state\=open\]\:animate-in[data-state="open"]{ animation-name: enter; animation-duration: 150ms; --tw-enter-opacity: initial; --tw-enter-scale: initial; --tw-enter-rotate: initial; --tw-enter-translate-x: initial; --tw-enter-translate-y: initial; } .data-\[state\=visible\]\:animate-in[data-state="visible"]{ animation-name: enter; animation-duration: 150ms; --tw-enter-opacity: initial; --tw-enter-scale: initial; --tw-enter-rotate: initial; --tw-enter-translate-x: initial; --tw-enter-translate-y: initial; } .data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"]{ animation-name: exit; animation-duration: 150ms; --tw-exit-opacity: initial; --tw-exit-scale: initial; --tw-exit-rotate: initial; --tw-exit-translate-x: initial; --tw-exit-translate-y: initial; } .data-\[state\=closed\]\:animate-out[data-state="closed"]{ animation-name: exit; animation-duration: 150ms; --tw-exit-opacity: initial; --tw-exit-scale: initial; --tw-exit-rotate: initial; --tw-exit-translate-x: initial; --tw-exit-translate-y: initial; } .data-\[state\=hidden\]\:animate-out[data-state="hidden"]{ animation-name: exit; animation-duration: 150ms; --tw-exit-opacity: initial; --tw-exit-scale: initial; --tw-exit-rotate: initial; --tw-exit-translate-x: initial; --tw-exit-translate-y: initial; } .data-\[swipe\=end\]\:animate-out[data-swipe="end"]{ animation-name: exit; animation-duration: 150ms; --tw-exit-opacity: initial; --tw-exit-scale: initial; --tw-exit-rotate: initial; --tw-exit-translate-x: initial; --tw-exit-translate-y: initial; } .data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"]{ --tw-enter-opacity: 0; } .data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"]{ --tw-exit-opacity: 0; } .data-\[state\=closed\]\:fade-out-0[data-state="closed"]{ --tw-exit-opacity: 0; } .data-\[state\=closed\]\:fade-out-80[data-state="closed"]{ --tw-exit-opacity: 0.8; } .data-\[state\=hidden\]\:fade-out[data-state="hidden"]{ --tw-exit-opacity: 0; } .data-\[state\=open\]\:fade-in-0[data-state="open"]{ --tw-enter-opacity: 0; } .data-\[state\=visible\]\:fade-in[data-state="visible"]{ --tw-enter-opacity: 0; } .data-\[state\=closed\]\:zoom-out-95[data-state="closed"]{ --tw-exit-scale: .95; } .data-\[state\=open\]\:zoom-in-90[data-state="open"]{ --tw-enter-scale: .9; } .data-\[state\=open\]\:zoom-in-95[data-state="open"]{ --tw-enter-scale: .95; } .data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"]{ --tw-enter-translate-x: 13rem; } .data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"]{ --tw-enter-translate-x: -13rem; } .data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"]{ --tw-exit-translate-x: 13rem; } .data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"]{ --tw-exit-translate-x: -13rem; } .data-\[side\=bottom\]\:slide-in-from-top-1[data-side="bottom"]{ --tw-enter-translate-y: -0.25rem; } .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"]{ --tw-enter-translate-y: -0.5rem; } .data-\[side\=left\]\:slide-in-from-right-1[data-side="left"]{ --tw-enter-translate-x: 0.25rem; } .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"]{ --tw-enter-translate-x: 0.5rem; } .data-\[side\=right\]\:slide-in-from-left-1[data-side="right"]{ --tw-enter-translate-x: -0.25rem; } .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"]{ --tw-enter-translate-x: -0.5rem; } .data-\[side\=top\]\:slide-in-from-bottom-1[data-side="top"]{ --tw-enter-translate-y: 0.25rem; } .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"]{ --tw-enter-translate-y: 0.5rem; } .data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"]{ --tw-exit-translate-y: 100%; } .data-\[state\=closed\]\:slide-out-to-left[data-state="closed"]{ --tw-exit-translate-x: -100%; } .data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"]{ --tw-exit-translate-x: -50%; } .data-\[state\=closed\]\:slide-out-to-right[data-state="closed"]{ --tw-exit-translate-x: 100%; } .data-\[state\=closed\]\:slide-out-to-right-full[data-state="closed"]{ --tw-exit-translate-x: 100%; } .data-\[state\=closed\]\:slide-out-to-top[data-state="closed"]{ --tw-exit-translate-y: -100%; } .data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"]{ --tw-exit-translate-y: -48%; } .data-\[state\=open\]\:slide-in-from-bottom[data-state="open"]{ --tw-enter-translate-y: 100%; } .data-\[state\=open\]\:slide-in-from-left[data-state="open"]{ --tw-enter-translate-x: -100%; } .data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"]{ --tw-enter-translate-x: -50%; } .data-\[state\=open\]\:slide-in-from-right[data-state="open"]{ --tw-enter-translate-x: 100%; } .data-\[state\=open\]\:slide-in-from-top[data-state="open"]{ --tw-enter-translate-y: -100%; } .data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"]{ --tw-enter-translate-y: -48%; } .data-\[state\=open\]\:slide-in-from-top-full[data-state="open"]{ --tw-enter-translate-y: -100%; } .data-\[state\=closed\]\:duration-300[data-state="closed"]{ animation-duration: 300ms; } .data-\[state\=open\]\:duration-500[data-state="open"]{ animation-duration: 500ms; } .data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after{ content: var(--tw-content); left: 0px; } .data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after{ content: var(--tw-content); height: 0.25rem; } .data-\[panel-group-direction\=vertical\]\:after\:h-11[data-panel-group-direction="vertical"]::after{ content: var(--tw-content); height: 2.75rem; } .data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after{ content: var(--tw-content); width: 100%; } .data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after{ content: var(--tw-content); --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after{ content: var(--tw-content); --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .group:hover .group-hover\:data-\[state\=open\]\:border-white\/\[0\.07\][data-state="open"]{ border-color: rgb(255 255 255 / 0.07); } .group:hover .group-hover\:data-\[state\=open\]\:bg-black\/55[data-state="open"]{ background-color: rgb(0 0 0 / 0.55); } .group:hover .group-hover\:data-\[state\=open\]\:shadow-\[0_1px_1px_rgba\(0\2c 0\2c 0\2c 0\.2\)\][data-state="open"]{ --tw-shadow: 0 1px 1px rgba(0,0,0,0.2); --tw-shadow-colored: 0 1px 1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group[data-state="open"] .group-data-\[state\=open\]\:rotate-180{ --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .group[data-state="checked"] .group-data-\[state\=checked\]\:border-\[1\.5px\]{ border-width: 1.5px; } .group[data-state="checked"] .group-data-\[state\=checked\]\:border-foreground{ border-color: var(--foreground); } .prose-p\:leading-relaxed :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))){ line-height: 1.625; } .prose-pre\:p-0 :is(:where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *))){ padding: 0px; } @media (prefers-reduced-motion: no-preference){ @keyframes pulse{ 50%{ opacity: .5; } } .motion-safe\:animate-pulse{ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } } @media (prefers-reduced-motion: reduce){ .motion-reduce\:animate-none{ animation: none; } .motion-reduce\:transition-none{ transition-property: none; } } .dark\:border-r:is(.dark *){ border-right-width: 0.5px; } .dark\:border-destructive:is(.dark *){ border-color: var(--destructive); } .dark\:border-white\/10:is(.dark *){ border-color: rgb(255 255 255 / 0.1); } .dark\:border-white\/\[0\.06\]:is(.dark *){ border-color: rgb(255 255 255 / 0.06); } .dark\:bg-\[\#E5E5E6\]:is(.dark *){ --tw-bg-opacity: 1; background-color: rgb(229 229 230 / var(--tw-bg-opacity, 1)); } .dark\:bg-\[\#F5F5F3\]:is(.dark *){ --tw-bg-opacity: 1; background-color: rgb(245 245 243 / var(--tw-bg-opacity, 1)); } .dark\:bg-\[rgba\(255\2c 255\2c 255\2c 0\.03\)\]:is(.dark *){ background-color: rgba(255,255,255,0.03); } .dark\:bg-\[rgba\(255\2c 255\2c 255\2c 0\.04\)\]:is(.dark *){ background-color: rgba(255,255,255,0.04); } .dark\:bg-\[rgba\(255\2c 255\2c 255\2c 0\.05\)\]:is(.dark *){ background-color: rgba(255,255,255,0.05); } .dark\:bg-\[rgba\(255\2c 255\2c 255\2c 0\.10\)\]:is(.dark *){ background-color: rgba(255,255,255,0.10); } .dark\:bg-green-950:is(.dark *){ --tw-bg-opacity: 1; background-color: rgb(5 46 22 / var(--tw-bg-opacity, 1)); } .dark\:bg-secondary:is(.dark *){ background-color: var(--secondary); } .dark\:bg-vh-dark-blue:is(.dark *){ background-color: var(--vh-dark-blue); } .dark\:via-white\/10:is(.dark *){ --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to); } .dark\:fill-black:is(.dark *){ fill: #000; } .dark\:fill-white:is(.dark *){ fill: #fff; } .dark\:stroke-\[\#2C2C2C\]:is(.dark *){ stroke: #2C2C2C; } .dark\:text-\[\#0a0b0d\]:is(.dark *){ --tw-text-opacity: 1; color: rgb(10 11 13 / var(--tw-text-opacity, 1)); } .dark\:text-amber-400:is(.dark *){ --tw-text-opacity: 1; color: rgb(251 191 36 / var(--tw-text-opacity, 1)); } .dark\:text-amber-500:is(.dark *){ --tw-text-opacity: 1; color: rgb(245 158 11 / var(--tw-text-opacity, 1)); } .dark\:text-background:is(.dark *){ color: var(--background); } .dark\:text-gray-400:is(.dark *){ color: var(--gray-400); } .dark\:text-muted:is(.dark *){ color: var(--muted); } .dark\:text-secondary-foreground:is(.dark *){ color: var(--secondary-foreground); } .dark\:text-transparent:is(.dark *){ color: transparent; } .dark\:text-white:is(.dark *){ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .dark\:shadow-pane:is(.dark *){ --tw-shadow: var(--shadow); --tw-shadow-colored: var(--shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .dark\:focus-within\:bg-secondary:focus-within:is(.dark *){ background-color: var(--secondary); } .dark\:hover\:bg-\[rgba\(255\2c 255\2c 255\2c 0\.05\)\]:hover:is(.dark *){ background-color: rgba(255,255,255,0.05); } .dark\:hover\:bg-\[rgba\(255\2c 255\2c 255\2c 0\.06\)\]:hover:is(.dark *){ background-color: rgba(255,255,255,0.06); } .dark\:hover\:bg-\[rgba\(255\2c 255\2c 255\2c 0\.07\)\]:hover:is(.dark *){ background-color: rgba(255,255,255,0.07); } .dark\:hover\:bg-\[rgba\(255\2c 255\2c 255\2c 0\.10\)\]:hover:is(.dark *){ background-color: rgba(255,255,255,0.10); } .dark\:hover\:bg-\[rgba\(255\2c 255\2c 255\2c 0\.14\)\]:hover:is(.dark *){ background-color: rgba(255,255,255,0.14); } .dark\:hover\:bg-green-950:hover:is(.dark *){ --tw-bg-opacity: 1; background-color: rgb(5 46 22 / var(--tw-bg-opacity, 1)); } .dark\:hover\:bg-white:hover:is(.dark *){ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .dark\:hover\:bg-white\/\[\.04\]:hover:is(.dark *){ background-color: rgb(255 255 255 / .04); } .dark\:active\:bg-\[rgba\(255\2c 255\2c 255\2c 0\.10\)\]:active:is(.dark *){ background-color: rgba(255,255,255,0.10); } .dark\:data-\[state\=checked\]\:bg-white\/\[\.06\][data-state="checked"]:is(.dark *){ background-color: rgb(255 255 255 / .06); } @media (min-width: 640px){ .sm\:inset-x-auto{ left: auto; right: auto; } .sm\:bottom-0{ bottom: 0px; } .sm\:bottom-4{ bottom: 1rem; } .sm\:left-0{ left: 0px; } .sm\:left-4{ left: 1rem; } .sm\:right-0{ right: 0px; } .sm\:right-3{ right: 0.75rem; } .sm\:right-4{ right: 1rem; } .sm\:top-auto{ top: auto; } .sm\:ml-0{ margin-left: 0px; } .sm\:mt-0{ margin-top: 0px; } .sm\:block{ display: block; } .sm\:inline{ display: inline; } .sm\:flex{ display: flex; } .sm\:inline-flex{ display: inline-flex; } .sm\:grid{ display: grid; } .sm\:contents{ display: contents; } .sm\:hidden{ display: none; } .sm\:w-64{ width: 16rem; } .sm\:w-\[350px\]{ width: 350px; } .sm\:w-\[420px\]{ width: 420px; } .sm\:w-auto{ width: auto; } .sm\:w-full{ width: 100%; } .sm\:max-w-3xl{ max-width: 48rem; } .sm\:max-w-\[440px\]{ max-width: 440px; } .sm\:max-w-\[475px\]{ max-width: 475px; } .sm\:max-w-\[480px\]{ max-width: 480px; } .sm\:max-w-\[500px\]{ max-width: 500px; } .sm\:max-w-\[70px\]{ max-width: 70px; } .sm\:max-w-md{ max-width: 28rem; } .sm\:max-w-sm{ max-width: 24rem; } .sm\:flex-1{ flex: 1 1 0%; } .sm\:flex-none{ flex: none; } .sm\:shrink-0{ flex-shrink: 0; } .sm\:grid-cols-1{ grid-template-columns: repeat(1, minmax(0, 1fr)); } .sm\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } .sm\:grid-cols-6{ grid-template-columns: repeat(6, minmax(0, 1fr)); } .sm\:flex-row{ flex-direction: row; } .sm\:flex-col{ flex-direction: column; } .sm\:flex-wrap{ flex-wrap: wrap; } .sm\:flex-nowrap{ flex-wrap: nowrap; } .sm\:items-start{ align-items: flex-start; } .sm\:items-center{ align-items: center; } .sm\:justify-end{ justify-content: flex-end; } .sm\:justify-between{ justify-content: space-between; } .sm\:gap-1{ gap: 0.25rem; } .sm\:gap-3{ gap: 0.75rem; } .sm\:gap-4{ gap: 1rem; } .sm\:gap-6{ gap: 1.5rem; } .sm\:space-x-0 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(0px * var(--tw-space-x-reverse)); margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse))); } .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); } .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0px * var(--tw-space-y-reverse)); } .sm\:overflow-visible{ overflow: visible; } .sm\:rounded-lg{ border-radius: var(--radius); } .sm\:rounded-xl{ border-radius: calc(var(--radius) + 2px); } .sm\:p-10{ padding: 2.5rem; } .sm\:p-7{ padding: 1.75rem; } .sm\:px-3{ padding-left: 0.75rem; padding-right: 0.75rem; } .sm\:px-5{ padding-left: 1.25rem; padding-right: 1.25rem; } .sm\:px-6{ padding-left: 1.5rem; padding-right: 1.5rem; } .sm\:text-left{ text-align: left; } .sm\:text-2xl{ font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.025em; } .sm\:text-xl{ font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.02em; } .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state="open"]{ --tw-enter-translate-y: 100%; } } @media (min-width: 768px){ .md\:fixed{ position: fixed; } .md\:absolute{ position: absolute; } .md\:-right-0{ right: -0px; } .md\:-top-2{ top: -0.5rem; } .md\:left-8{ left: 2rem; } .md\:left-\[20px\]{ left: 20px; } .md\:right-8{ right: 2rem; } .md\:top-0{ top: 0px; } .md\:top-8{ top: 2rem; } .md\:top-\[75px\]{ top: 75px; } .md\:my-6{ margin-top: 1.5rem; margin-bottom: 1.5rem; } .md\:-ml-12{ margin-left: -3rem; } .md\:mb-\[14rem\]{ margin-bottom: 14rem; } .md\:block{ display: block; } .md\:inline{ display: inline; } .md\:flex{ display: flex; } .md\:hidden{ display: none; } .md\:h-12{ height: 3rem; } .md\:h-2{ height: 0.5rem; } .md\:h-auto{ height: auto; } .md\:h-screen{ height: 100vh; } .md\:h-summary-view-md-height{ height: calc(100svh - 7.25rem); } .md\:w-1\/2{ width: 50%; } .md\:w-1\/3{ width: 33.333333%; } .md\:w-2\/3{ width: 66.666667%; } .md\:w-2\/5{ width: 40%; } .md\:w-3\/5{ width: 60%; } .md\:w-\[38\%\]{ width: 38%; } .md\:w-\[400px\]{ width: 400px; } .md\:w-\[45\%\]{ width: 45%; } .md\:w-\[55\%\]{ width: 55%; } .md\:w-\[80\%\]{ width: 80%; } .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\]{ width: var(--radix-navigation-menu-viewport-width); } .md\:w-auto{ width: auto; } .md\:w-full{ width: 100%; } .md\:max-w-\[420px\]{ max-width: 420px; } .md\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:grid-cols-8{ grid-template-columns: repeat(8, minmax(0, 1fr)); } .md\:grid-cols-\[min-content_1fr\]{ grid-template-columns: min-content 1fr; } .md\:flex-row{ flex-direction: row; } .md\:flex-col{ flex-direction: column; } .md\:items-center{ align-items: center; } .md\:gap-3{ gap: 0.75rem; } .md\:overflow-y-auto{ overflow-y: auto; } .md\:rounded-\[4\.8rem\]{ border-radius: 4.8rem; } .md\:border-b{ border-bottom-width: 0.5px; } .md\:border-r{ border-right-width: 0.5px; } .md\:border-border{ border-color: var(--border); } .md\:p-14{ padding: 3.5rem; } .md\:p-2{ padding: 0.5rem; } .md\:px-10{ padding-left: 2.5rem; padding-right: 2.5rem; } .md\:px-6{ padding-left: 1.5rem; padding-right: 1.5rem; } .md\:pt-0{ padding-top: 0px; } .md\:pt-2{ padding-top: 0.5rem; } .md\:text-3xl{ font-size: 2.25rem; line-height: 1.12; letter-spacing: -0.03em; } .md\:text-4xl{ font-size: 3rem; line-height: 1.08; letter-spacing: -0.035em; } .md\:text-8xl{ font-size: 6rem; line-height: 1; } .md\:text-\[4\.5rem\]{ font-size: 4.5rem; } .md\:text-md{ font-size: 1.125rem; } .md\:opacity-0{ opacity: 0; } .md\:\[--wpb-rise\:40px\]{ --wpb-rise: 40px; } } @media (min-width: 1024px){ .lg\:sticky{ position: sticky; } .lg\:top-4{ top: 1rem; } .lg\:col-span-2{ grid-column: span 2 / span 2; } .lg\:col-span-3{ grid-column: span 3 / span 3; } .lg\:mr-0{ margin-right: 0px; } .lg\:mt-0{ margin-top: 0px; } .lg\:mt-3{ margin-top: 0.75rem; } .lg\:block{ display: block; } .lg\:inline-block{ display: inline-block; } .lg\:inline{ display: inline; } .lg\:flex{ display: flex; } .lg\:hidden{ display: none; } .lg\:h-screen-under-app-header-with-padding{ height: calc(100svh - 68px); } .lg\:w-2\/3{ width: 66.666667%; } .lg\:w-\[250px\]{ width: 250px; } .lg\:min-w-\[18rem\]{ min-width: 18rem; } .lg\:max-w-3xl{ max-width: 48rem; } .lg\:max-w-4xl{ max-width: 56rem; } .lg\:max-w-5xl{ max-width: 64rem; } .lg\:max-w-\[250px\]{ max-width: 250px; } .lg\:max-w-none{ max-width: none; } .lg\:grid-cols-10{ grid-template-columns: repeat(10, minmax(0, 1fr)); } .lg\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-cols-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); } .lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 1\.2fr\)\]{ grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); } .lg\:flex-row{ flex-direction: row; } .lg\:flex-col{ flex-direction: column; } .lg\:gap-6{ gap: 1.5rem; } .lg\:space-x-8 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(2rem * var(--tw-space-x-reverse)); margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse))); } .lg\:p-8{ padding: 2rem; } .lg\:px-0{ padding-left: 0px; padding-right: 0px; } .lg\:px-1\.5{ padding-left: 0.375rem; padding-right: 0.375rem; } .lg\:px-3{ padding-left: 0.75rem; padding-right: 0.75rem; } .lg\:px-6{ padding-left: 1.5rem; padding-right: 1.5rem; } .lg\:px-8{ padding-left: 2rem; padding-right: 2rem; } .lg\:py-8{ padding-top: 2rem; padding-bottom: 2rem; } .lg\:pb-1\.5{ padding-bottom: 0.375rem; } .lg\:pt-0{ padding-top: 0px; } .lg\:text-3xl{ font-size: 2.25rem; line-height: 1.12; letter-spacing: -0.03em; } .lg\:text-base{ font-size: 1rem; } } @media (min-width: 1280px){ .xl\:block{ display: block; } .xl\:inline-block{ display: inline-block; } .xl\:flex{ display: flex; } .xl\:hidden{ display: none; } .xl\:min-h-\[3\.25rem\]{ min-height: 3.25rem; } .xl\:w-1\/3{ width: 33.333333%; } .xl\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .xl\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .xl\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } .xl\:grid-cols-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); } .xl\:px-4{ padding-left: 1rem; padding-right: 1rem; } .xl\:px-6{ padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1536px){ .\32xl\:block{ display: block; } .\32xl\:hidden{ display: none; } .\32xl\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .\32xl\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } .\32xl\:grid-cols-6{ grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (min-width: 1920px){ .\33xl\:block{ display: block; } .\33xl\:hidden{ display: none; } .\33xl\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } .\33xl\:grid-cols-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); } .\33xl\:grid-cols-6{ grid-template-columns: repeat(6, minmax(0, 1fr)); } .\33xl\:grid-cols-7{ grid-template-columns: repeat(7, minmax(0, 1fr)); } } @media (min-width: 2560px){ .\34xl\:block{ display: block; } .\34xl\:hidden{ display: none; } .\34xl\:grid-cols-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); } .\34xl\:grid-cols-6{ grid-template-columns: repeat(6, minmax(0, 1fr)); } .\34xl\:grid-cols-8{ grid-template-columns: repeat(8, minmax(0, 1fr)); } } .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar{ display: none; } .\[\&\:has\(\>\.day-range-end\)\]\:rounded-r-md:has(>.day-range-end){ border-top-right-radius: calc(var(--radius) - 2px); border-bottom-right-radius: calc(var(--radius) - 2px); } .\[\&\:has\(\>\.day-range-start\)\]\:rounded-l-md:has(>.day-range-start){ border-top-left-radius: calc(var(--radius) - 2px); border-bottom-left-radius: calc(var(--radius) - 2px); } .\[\&\:has\(\[aria-selected\]\)\]\:rounded-md:has([aria-selected]){ border-radius: calc(var(--radius) - 2px); } .\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]){ background-color: var(--accent); } .first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child{ border-top-left-radius: calc(var(--radius) - 2px); border-bottom-left-radius: calc(var(--radius) - 2px); } .last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child{ border-top-right-radius: calc(var(--radius) - 2px); border-bottom-right-radius: calc(var(--radius) - 2px); } .\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end){ border-top-right-radius: calc(var(--radius) - 2px); border-bottom-right-radius: calc(var(--radius) - 2px); } .\[\&\:has\(\[data-state\=checked\]\)\>div\]\:border-primary:has([data-state=checked])>div{ border-color: var(--primary); } .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){ padding-right: 0px; } .group:hover .group-hover\:\[\&\:hover\]\:border-white\/\[0\.07\]:hover{ border-color: rgb(255 255 255 / 0.07); } .group:hover .group-hover\:\[\&\:hover\]\:bg-black\/55:hover{ background-color: rgb(0 0 0 / 0.55); } .group:hover .group-hover\:\[\&\:hover\]\:shadow-\[0_1px_1px_rgba\(0\2c 0\2c 0\2c 0\.2\)\]:hover{ --tw-shadow: 0 1px 1px rgba(0,0,0,0.2); --tw-shadow-colored: 0 1px 1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .\[\&\>\*\:not\(\:first-child\)\]\:hidden>*:not(:first-child){ display: none; } .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox]{ --tw-translate-y: 2px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .\[\&\>div\]\:\!block>div{ display: block !important; } .\[\&\>div\]\:w-full>div{ width: 100%; } .\[\&\>div\]\:\!min-w-0>div{ min-width: 0px !important; } .\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div{ --tw-translate-y: -3px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .\[\&\>svg\]\:absolute>svg{ position: absolute; } .\[\&\>svg\]\:left-4>svg{ left: 1rem; } .\[\&\>svg\]\:top-4>svg{ top: 1rem; } .\[\&\>svg\]\:rotate-0>svg{ --tw-rotate: 0deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .\[\&\>svg\]\:text-destructive>svg{ color: var(--destructive); } .\[\&\>svg\]\:text-foreground>svg{ color: var(--foreground); } .\[\&\>svg\~\*\]\:pl-7>svg~*{ padding-left: 1.75rem; } .\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div{ --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .\[\&\[data-state\=open\]\>svg\]\:rotate-90[data-state=open]>svg{ --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading]{ padding-left: 0.5rem; padding-right: 0.5rem; } .\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading]{ padding-top: 0.375rem; padding-bottom: 0.375rem; } .\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading]{ font-size: 0.8125rem; } .\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading]{ font-weight: 700; } .\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading]{ color: var(--muted-foreground); } .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group]{ padding-top: 0px; } .\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group]{ padding-left: 0.5rem; padding-right: 0.5rem; } .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg{ height: 1.25rem; } .\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg{ width: 1.25rem; } .\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input]{ height: 3rem; } .\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item]{ padding-left: 0.5rem; padding-right: 0.5rem; } .\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item]{ padding-top: 0.75rem; padding-bottom: 0.75rem; } .\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg{ height: 1.25rem; } .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg{ width: 1.25rem; } .\[\&_a\]\:last\:mb-0:last-child a{ margin-bottom: 0px; } .\[\&_p\]\:leading-relaxed p{ line-height: 1.625; } .\[\&_pre\]\:my-0 pre{ margin-top: 0px; margin-bottom: 0px; } .\[\&_pre\]\:max-h-\[650px\] pre{ max-height: 650px; } .\[\&_pre\]\:overflow-hidden pre{ overflow: hidden; } .\[\&_pre\]\:pb-\[100px\] pre{ padding-bottom: 100px; } .\[\&_svg\]\:invisible svg{ visibility: hidden; } .\[\&_svg\]\:mb-\[4px\] svg{ margin-bottom: 4px; } .\[\&_svg\]\:h-4 svg{ height: 1rem; } .\[\&_svg\]\:w-4 svg{ width: 1rem; } .\[\&_svg\]\:fill-white svg{ fill: #fff; } @media (min-width: 768px){ .md\:\[\&_svg\]\:mb-\[2px\] svg{ margin-bottom: 2px; } .md\:\[\&_svg\]\:mr-\[6px\] svg{ margin-right: 6px; } .md\:\[\&_svg\]\:inline svg{ display: inline; } } .\[\&_tr\:last-child\]\:border-0 tr:last-child{ border-width: 0px; } .\[\&_tr\]\:border-b-0\.5 tr{ border-bottom-width: 0.5px; } .is-visible .\[\.is-visible_\&\]\:translate-y-0{ --tw-translate-y: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @media(hover:hover){ .\[\@media\(hover\:hover\)\]\:opacity-0{ opacity: 0; } .group:hover .\[\@media\(hover\:hover\)\]\:group-hover\:opacity-100{ opacity: 1; } } @media(hover:none){ .\[\@media\(hover\:none\)\]\:opacity-100{ opacity: 1; } }