import { cva, type VariantProps } from "class-variance-authority";
import { Slot } from "radix-ui";
import * as React from "react";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
outline:
"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
ghost:
"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
destructive:
"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default:
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
icon: "size-8",
"icon-xs":
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
"icon-sm":
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
"icon-lg": "size-9",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
);
function Button({
className,
variant = "default",
size = "default",
asChild = false,
...props
}: React.ComponentProps<"button"> &
VariantProps<typeof buttonVariants> & {
asChild?: boolean;
}) {
const Comp = asChild ? Slot.Root : "button";
return (
<Comp
data-slot="button"
data-variant={variant}
data-size={size}
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
);
}
export type ButtonProps = React.ComponentProps<typeof Button>;
export { Button, buttonVariants };
Border Beam Button
By cult/ui
Try the interaction, copy the React source files, or download the complete example.
About Border Beam Button
Border Beam Button is an animated React and Tailwind CSS button by cult/ui. Try the interaction, copy the React source, or download the example with creator credit.
- Effects and categories
- Hover effects, Animated
- Using this example
- Copy a TSX file or download the original source and standalone demo. Test keyboard focus, motion and contrast in your own project.
Usage, Tailwind and licensing questions
Read the source files
registry/default/example/border-beam-button-demo.tsx
"use client"
import { useEffect, useId, useState, type ReactNode } from "react"
import type { BorderBeamColorVariant } from "border-beam"
import { ArrowRight, Pause, Play, Sparkles, Wand2, Zap } from "lucide-react"
import { cn } from "@/lib/utils"
import {
BorderBeamButton,
BorderBeamIconButton,
} from "@/registry/default/ui/border-beam-button"
const COLOR_ROW: { key: BorderBeamColorVariant; label: string }[] = [
{ key: "colorful", label: "Colorful" },
{ key: "ocean", label: "Ocean" },
{ key: "sunset", label: "Sunset" },
{ key: "mono", label: "Mono" },
]
const BEAM_SIZES = ["sm", "md", "line"] as const
function Section({
title,
description,
children,
}: {
title: string
description?: string
children: ReactNode
}) {
return (
<section className="space-y-4">
<div className="space-y-1">
<h3 className="font-semibold text-foreground text-sm tracking-tight">
{title}
</h3>
{description ? (
<p className="text-pretty text-muted-foreground text-xs leading-relaxed">
{description}
</p>
) : null}
</div>
{children}
</section>
)
}
export default function BorderBeamButtonDemo() {
const id = useId()
const [beamActive, setBeamActive] = useState(true)
const [respectsReducedMotion, setRespectsReducedMotion] = useState(false)
useEffect(() => {
const mq = window.matchMedia("(prefers-reduced-motion: reduce)")
const sync = () => setRespectsReducedMotion(mq.matches)
sync()
mq.addEventListener("change", sync)
return () => mq.removeEventListener("change", sync)
}, [])
const effectiveActive = beamActive && !respectsReducedMotion
return (
<div className="mx-auto w-full max-w-3xl space-y-10 px-4 py-8 md:px-6">
<header className="space-y-2 text-center">
<p className="font-medium text-[11px] text-muted-foreground uppercase tracking-[0.2em]">
Border beam
</p>
<h2 className="font-semibold text-foreground text-xl tracking-tight md:text-2xl">
Button + traveling glow
</h2>
<p className="mx-auto max-w-lg text-pretty text-muted-foreground text-sm leading-relaxed">
<span className="text-foreground/90">className</span> targets the
shadcn <span className="text-foreground/90">Button</span>;{" "}
<span className="text-foreground/90">borderBeamClassName</span> styles
the beam wrapper. Use{" "}
<span className="text-foreground/90">colorVariant</span>,{" "}
<span className="text-foreground/90">beamSize</span>, and{" "}
<span className="text-foreground/90">active</span> to tune the effect.
</p>
</header>
<div className="">
<Section
description="Outline and secondary read well against the beam; default adds a stronger fill."
title="Button variants"
>
<div className="flex flex-wrap items-center justify-center gap-3">
<BorderBeamButton type="button" variant="default">
Continue
</BorderBeamButton>
<BorderBeamButton type="button" variant="outline">
Outline
</BorderBeamButton>
<BorderBeamButton type="button" variant="secondary">
Secondary
</BorderBeamButton>
<BorderBeamButton type="button" variant="ghost">
Ghost
</BorderBeamButton>
</div>
</Section>
</div>
<div className="">
<Section
description="Same outline button; swap the beam palette."
title="Beam color"
>
<div className="flex flex-wrap items-center justify-center gap-3">
{COLOR_ROW.map(({ key, label }) => (
<BorderBeamButton
colorVariant={key}
key={key}
type="button"
variant="outline"
>
{label}
</BorderBeamButton>
))}
</div>
</Section>
</div>
<div className="">
<Section
description="sm keeps a tight glow on controls; md is fuller; line is a bottom traveling accent."
title="Beam size"
>
<div className="flex flex-wrap items-center justify-center gap-3">
{BEAM_SIZES.map((size) => (
<BorderBeamButton
beamSize={size}
key={size}
type="button"
variant="outline"
>
<span className="font-mono text-xs">{size}</span>
</BorderBeamButton>
))}
</div>
</Section>
</div>
<div className="">
<Section
description="Icon buttons default to icon sizing; pair with lucide icons."
title="Icon buttons"
>
<div className="flex flex-wrap items-center justify-center gap-3">
<BorderBeamIconButton
aria-label="Sparkles"
colorVariant="sunset"
title="Sparkles"
type="button"
variant="outline"
>
<Sparkles aria-hidden className="size-3.5" />
</BorderBeamIconButton>
<BorderBeamIconButton
aria-label="Zap"
colorVariant="ocean"
title="Zap"
type="button"
variant="secondary"
>
<Zap aria-hidden className="size-3.5" />
</BorderBeamIconButton>
<BorderBeamIconButton
aria-label="Wand"
colorVariant="mono"
staticColors
title="Wand"
type="button"
variant="outline"
>
<Wand2 aria-hidden className="size-3.5" />
</BorderBeamIconButton>
</div>
</Section>
</div>
<div className="">
<Section
description="Toggle the beam without hiding the button. Respects prefers-reduced-motion."
title="Interactive"
>
<div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
<BorderBeamButton
active={effectiveActive}
className="gap-2 pr-5 pl-6"
colorVariant="colorful"
type="button"
variant="outline"
>
Get started
<ArrowRight aria-hidden className="size-4 opacity-80" />
</BorderBeamButton>
<BorderBeamIconButton
aria-label={effectiveActive ? "Pause beam" : "Play beam"}
aria-pressed={beamActive}
colorVariant="ocean"
onClick={() => setBeamActive((v) => !v)}
title={effectiveActive ? "Pause beam" : "Play beam"}
type="button"
variant="secondary"
>
{effectiveActive ? (
<Pause aria-hidden className="size-3.5" />
) : (
<Play aria-hidden className="size-3.5" />
)}
</BorderBeamIconButton>
</div>
<p
className={cn(
"text-center text-xs",
respectsReducedMotion
? "text-amber-600 dark:text-amber-400"
: "text-muted-foreground"
)}
id={`${id}-hint`}
>
{respectsReducedMotion
? "Reduced motion is on — beam animation stays off."
: "Tip: pause leaves the button fully clickable; the glow stops."}
</p>
</Section>
</div>
</div>
)
}
lib/utils.ts
import { clsx, type ClassValue } from "clsx"
import { extendTailwindMerge } from "tailwind-merge"
import { siteConfig } from "@/config/site"
const twMerge = extendTailwindMerge({
extend: {
classGroups: {
shadow: [{ shadow: ["soft-sm", "soft", "soft-md"] }],
},
},
})
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
export function absoluteUrl(path: string) {
return `${siteConfig.url}${path}`
}
registry/default/ui/border-beam-button.tsx
"use client"
/**
* `border-beam` around `Button` — compact `beamSize="sm"` glow for controls.
* `className` styles the button; `borderBeamClassName` styles the beam wrapper.
*/
import type { ComponentProps, CSSProperties } from "react"
import { forwardRef } from "react"
import {
BorderBeam,
type BorderBeamProps,
type BorderBeamSize,
} from "border-beam"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
type BeamShellProps = Pick<
BorderBeamProps,
| "colorVariant"
| "theme"
| "staticColors"
| "duration"
| "active"
| "borderRadius"
| "brightness"
| "saturation"
| "hueRange"
| "strength"
| "onActivate"
| "onDeactivate"
> & {
beamSize?: BorderBeamSize
borderBeamClassName?: string
borderBeamStyle?: CSSProperties
}
export type BorderBeamButtonProps = ComponentProps<typeof Button> &
BeamShellProps
export type BorderBeamIconButtonProps = BorderBeamButtonProps
export const BorderBeamButton = forwardRef<
HTMLDivElement,
BorderBeamButtonProps
>(function BorderBeamButton(
{
beamSize = "sm",
borderBeamClassName,
borderBeamStyle,
theme = "auto",
colorVariant,
staticColors,
duration,
active,
borderRadius,
brightness,
saturation,
hueRange,
strength,
onActivate,
onDeactivate,
className,
...buttonProps
},
ref
) {
return (
<BorderBeam
active={active}
borderRadius={borderRadius}
brightness={brightness}
className={cn(
"overflow-visible! inline-flex w-fit min-w-0 flex-col items-stretch leading-none",
borderBeamClassName
)}
colorVariant={colorVariant}
duration={duration}
hueRange={hueRange}
onActivate={onActivate}
onDeactivate={onDeactivate}
ref={ref}
saturation={saturation}
size={beamSize}
staticColors={staticColors}
strength={strength}
style={borderBeamStyle}
theme={theme}
>
<Button className={className} {...buttonProps} />
</BorderBeam>
)
})
BorderBeamButton.displayName = "BorderBeamButton"
export const BorderBeamIconButton = forwardRef<
HTMLDivElement,
BorderBeamIconButtonProps
>(function BorderBeamIconButton(
{ size = "icon-sm", className, ...props },
ref
) {
return (
<BorderBeamButton
className={cn("!leading-none [&_svg]:block [&_svg]:shrink-0", className)}
ref={ref}
size={size}
{...props}
/>
)
})
BorderBeamIconButton.displayName = "BorderBeamIconButton"
config/site.ts
export const siteConfig = {
/* ───────────────── Brand & positioning ───────────────── */
name: "Cult UI – Shadcn UI Components, Blocks & Templates",
description:
"Open-source Shadcn UI components, animated blocks, and full templates you can copy-paste into any TypeScript/Next.js project.",
url: "https://www.cult-ui.com",
ogImage: "https://www.cult-ui.com/og",
/* ───────────────── Social links ───────────────── */
links: {
components: "/docs/components/dynamic-island",
twitter: "https://x.com/nolansym",
github: "https://github.com/nolly-studio/cult-ui",
},
} as const;
export type SiteConfig = typeof siteConfig;
components/ui/button.tsx
import { cva, type VariantProps } from "class-variance-authority";
import { Slot } from "radix-ui";
import * as React from "react";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
outline:
"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
ghost:
"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
destructive:
"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default:
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
icon: "size-8",
"icon-xs":
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
"icon-sm":
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
"icon-lg": "size-9",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
);
function Button({
className,
variant = "default",
size = "default",
asChild = false,
...props
}: React.ComponentProps<"button"> &
VariantProps<typeof buttonVariants> & {
asChild?: boolean;
}) {
const Comp = asChild ? Slot.Root : "button";
return (
<Comp
data-slot="button"
data-variant={variant}
data-size={size}
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
);
}
export type ButtonProps = React.ComponentProps<typeof Button>;
export { Button, buttonVariants };
demo.tsx
export { default as default } from "@/registry/default/example/border-beam-button-demo";CSS
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
:root, :host {
--color-amber-400: oklch(82.8% 0.189 84.429);
--color-amber-600: oklch(66.6% 0.179 58.318);
--color-zinc-900: oklch(21% 0.006 285.885);
--spacing: 0.25rem;
--text-xs: 0.75rem;
--text-xs--line-height: calc(1 / 0.75);
--text-sm: 0.875rem;
--text-sm--line-height: calc(1.25 / 0.875);
--text-xl: 1.25rem;
--text-xl--line-height: calc(1.75 / 1.25);
--text-2xl: 1.5rem;
--text-2xl--line-height: calc(2 / 1.5);
--font-weight-medium: 500;
--font-weight-semibold: 600;
--tracking-tight: -0.025em;
--leading-relaxed: 1.625;
--radius-md: calc(var(--radius) - 2px);
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-geist-sans);
--default-mono-font-family: var(--font-geist-mono);
}
}
@layer base {
*, ::after, ::before, ::backdrop, ::file-selector-button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp, pre {
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-feature-settings: var(--default-mono-font-feature-settings, normal);
font-variation-settings: var(--default-mono-font-variation-settings, normal);
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring:where(:not(iframe)) {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol, ul, menu {
list-style: none;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
}
img, video {
max-width: 100%;
height: auto;
}
button, input, select, optgroup, textarea, ::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
::placeholder {
color: currentcolor;
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
::-webkit-calendar-picker-indicator {
line-height: 1;
}
:-moz-ui-invalid {
box-shadow: none;
}
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
display: none !important;
}
}
@layer utilities {
.mx-auto {
margin-inline: auto;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.size-3\.5 {
width: calc(var(--spacing) * 3.5);
height: calc(var(--spacing) * 3.5);
}
.size-4 {
width: calc(var(--spacing) * 4);
height: calc(var(--spacing) * 4);
}
.size-6 {
width: calc(var(--spacing) * 6);
height: calc(var(--spacing) * 6);
}
.size-7 {
width: calc(var(--spacing) * 7);
height: calc(var(--spacing) * 7);
}
.size-8 {
width: calc(var(--spacing) * 8);
height: calc(var(--spacing) * 8);
}
.size-9 {
width: calc(var(--spacing) * 9);
height: calc(var(--spacing) * 9);
}
.h-6 {
height: calc(var(--spacing) * 6);
}
.h-7 {
height: calc(var(--spacing) * 7);
}
.h-8 {
height: calc(var(--spacing) * 8);
}
.h-9 {
height: calc(var(--spacing) * 9);
}
.w-fit {
width: fit-content;
}
.w-full {
width: 100%;
}
.max-w-3xl {
max-width: 50rem;
}
.max-w-lg {
max-width: 33rem;
}
.min-w-0 {
min-width: 0px;
}
.shrink-0 {
flex-shrink: 0;
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
.items-stretch {
align-items: stretch;
}
.justify-center {
justify-content: center;
}
.gap-1 {
gap: var(--spacing);
}
.gap-1\.5 {
gap: calc(var(--spacing) * 1.5);
}
.gap-2 {
gap: calc(var(--spacing) * 2);
}
.gap-3 {
gap: calc(var(--spacing) * 3);
}
.gap-4 {
gap: calc(var(--spacing) * 4);
}
:where(.space-y-1 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-2 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-4 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-10 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
}
.overflow-visible\! {
overflow: visible !important;
}
.rounded-\[min\(var\(--radius-md\)\,10px\)\] {
border-radius: min(var(--radius-md), 10px);
}
.rounded-\[min\(var\(--radius-md\)\,12px\)\] {
border-radius: min(var(--radius-md), 12px);
}
.rounded-lg {
border-radius: var(--radius);
}
.border {
border-style: var(--tw-border-style);
border-width: 1px;
}
.border-border {
border-color: var(--border);
}
.border-transparent {
border-color: transparent;
}
.bg-background {
background-color: var(--background);
}
.bg-destructive\/10 {
background-color: var(--destructive);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
}
}
.bg-primary {
background-color: var(--primary);
}
.bg-secondary {
background-color: var(--secondary);
}
.bg-clip-padding {
background-clip: padding-box;
}
.px-2 {
padding-inline: calc(var(--spacing) * 2);
}
.px-2\.5 {
padding-inline: calc(var(--spacing) * 2.5);
}
.px-4 {
padding-inline: calc(var(--spacing) * 4);
}
.py-8 {
padding-block: calc(var(--spacing) * 8);
}
.pr-5 {
padding-right: calc(var(--spacing) * 5);
}
.pl-6 {
padding-left: calc(var(--spacing) * 6);
}
.text-center {
text-align: center;
}
.font-mono {
font-family: var(--font-geist-mono);
}
.text-sm {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}
.text-xl {
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
.text-xs {
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
.text-\[0\.8rem\] {
font-size: 0.8rem;
}
.text-\[11px\] {
font-size: 11px;
}
.\!leading-none {
--tw-leading: 1 !important;
line-height: 1 !important;
}
.leading-none {
--tw-leading: 1;
line-height: 1;
}
.leading-relaxed {
--tw-leading: var(--leading-relaxed);
line-height: var(--leading-relaxed);
}
.font-medium {
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
}
.font-semibold {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
}
.tracking-\[0\.2em\] {
--tw-tracking: 0.2em;
letter-spacing: 0.2em;
}
.tracking-tight {
--tw-tracking: var(--tracking-tight);
letter-spacing: var(--tracking-tight);
}
.text-pretty {
text-wrap: pretty;
}
.whitespace-nowrap {
white-space: nowrap;
}
.text-amber-600 {
color: var(--color-amber-600);
}
.text-destructive {
color: var(--destructive);
}
.text-foreground {
color: var(--foreground);
}
.text-foreground\/90 {
color: var(--foreground);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--foreground) 90%, transparent);
}
}
.text-muted-foreground {
color: var(--muted-foreground);
}
.text-primary {
color: var(--primary);
}
.text-primary-foreground {
color: var(--primary-foreground);
}
.text-secondary-foreground {
color: var(--secondary-foreground);
}
.uppercase {
text-transform: uppercase;
}
.underline-offset-4 {
text-underline-offset: 4px;
}
.opacity-80 {
opacity: 80%;
}
.shadow {
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.outline {
outline-style: var(--tw-outline-style);
outline-width: 1px;
}
.transition-all {
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.outline-none {
--tw-outline-style: none;
outline-style: none;
}
.select-none {
-webkit-user-select: none;
user-select: none;
}
@media (hover: hover) {
.hover\:bg-destructive\/20:hover {
background-color: var(--destructive);
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-destructive\/20:hover {
background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
}
}
.hover\:bg-muted:hover {
background-color: var(--muted);
}
.hover\:bg-secondary\/80:hover {
background-color: var(--secondary);
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-secondary\/80:hover {
background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
}
}
.hover\:text-foreground:hover {
color: var(--foreground);
}
.hover\:underline:hover {
text-decoration-line: underline;
}
}
.focus-visible\:border-destructive\/40:focus-visible {
border-color: var(--destructive);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
}
}
.focus-visible\:border-ring:focus-visible {
border-color: var(--ring);
}
.focus-visible\:ring-3:focus-visible {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus-visible\:ring-destructive\/20:focus-visible {
--tw-ring-color: var(--destructive);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
}
}
.focus-visible\:ring-ring\/50:focus-visible {
--tw-ring-color: var(--ring);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
}
}
.disabled\:pointer-events-none:disabled {
pointer-events: none;
}
.disabled\:opacity-50:disabled {
opacity: 50%;
}
:where([data-slot="button-group"]) .in-data-\[slot\=button-group\]\:rounded-lg {
border-radius: var(--radius);
}
.has-data-\[icon\=inline-end\]\:pr-1\.5:has([data-icon="inline-end"]) {
padding-right: calc(var(--spacing) * 1.5);
}
.has-data-\[icon\=inline-end\]\:pr-2:has([data-icon="inline-end"]) {
padding-right: calc(var(--spacing) * 2);
}
.has-data-\[icon\=inline-end\]\:pr-3:has([data-icon="inline-end"]) {
padding-right: calc(var(--spacing) * 3);
}
.has-data-\[icon\=inline-start\]\:pl-1\.5:has([data-icon="inline-start"]) {
padding-left: calc(var(--spacing) * 1.5);
}
.has-data-\[icon\=inline-start\]\:pl-2:has([data-icon="inline-start"]) {
padding-left: calc(var(--spacing) * 2);
}
.has-data-\[icon\=inline-start\]\:pl-3:has([data-icon="inline-start"]) {
padding-left: calc(var(--spacing) * 3);
}
.aria-expanded\:bg-muted[aria-expanded="true"] {
background-color: var(--muted);
}
.aria-expanded\:bg-secondary[aria-expanded="true"] {
background-color: var(--secondary);
}
.aria-expanded\:text-foreground[aria-expanded="true"] {
color: var(--foreground);
}
.aria-expanded\:text-secondary-foreground[aria-expanded="true"] {
color: var(--secondary-foreground);
}
.aria-invalid\:border-destructive[aria-invalid="true"] {
border-color: var(--destructive);
}
.aria-invalid\:ring-3[aria-invalid="true"] {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
--tw-ring-color: var(--destructive);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
}
}
@media (width >= 40rem) {
.sm\:flex-row {
flex-direction: row;
}
.sm\:justify-center {
justify-content: center;
}
}
@media (width >= 48rem) {
.md\:px-6 {
padding-inline: calc(var(--spacing) * 6);
}
.md\:text-2xl {
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
}
}
.dark\:border-input:where(.dark, .dark *) {
border-color: var(--input);
}
.dark\:bg-destructive\/20:where(.dark, .dark *) {
background-color: var(--destructive);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
}
}
.dark\:bg-input\/30:where(.dark, .dark *) {
background-color: var(--input);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--input) 30%, transparent);
}
}
.dark\:text-amber-400:where(.dark, .dark *) {
color: var(--color-amber-400);
}
@media (hover: hover) {
.dark\:hover\:bg-destructive\/30:where(.dark, .dark *):hover {
background-color: var(--destructive);
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:hover\:bg-destructive\/30:where(.dark, .dark *):hover {
background-color: color-mix(in oklab, var(--destructive) 30%, transparent);
}
}
.dark\:hover\:bg-input\/50:where(.dark, .dark *):hover {
background-color: var(--input);
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:hover\:bg-input\/50:where(.dark, .dark *):hover {
background-color: color-mix(in oklab, var(--input) 50%, transparent);
}
}
.dark\:hover\:bg-muted\/50:where(.dark, .dark *):hover {
background-color: var(--muted);
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:hover\:bg-muted\/50:where(.dark, .dark *):hover {
background-color: color-mix(in oklab, var(--muted) 50%, transparent);
}
}
}
.dark\:focus-visible\:ring-destructive\/40:where(.dark, .dark *):focus-visible {
--tw-ring-color: var(--destructive);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
}
}
.dark\:aria-invalid\:border-destructive\/50:where(.dark, .dark *)[aria-invalid="true"] {
border-color: var(--destructive);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
}
}
.dark\:aria-invalid\:ring-destructive\/40:where(.dark, .dark *)[aria-invalid="true"] {
--tw-ring-color: var(--destructive);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
}
}
.\[\&_svg\]\:pointer-events-none svg {
pointer-events: none;
}
.\[\&_svg\]\:block svg {
display: block;
}
.\[\&_svg\]\:shrink-0 svg {
flex-shrink: 0;
}
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*='size-']) {
width: calc(var(--spacing) * 3);
height: calc(var(--spacing) * 3);
}
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*='size-']) {
width: calc(var(--spacing) * 3.5);
height: calc(var(--spacing) * 3.5);
}
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
width: calc(var(--spacing) * 4);
height: calc(var(--spacing) * 4);
}
@media (hover: hover) {
.\[a\]\:hover\:bg-primary\/80:is(a):hover {
background-color: var(--primary);
}
@supports (color: color-mix(in lab, red, red)) {
.\[a\]\:hover\:bg-primary\/80:is(a):hover {
background-color: color-mix(in oklab, var(--primary) 80%, transparent);
}
}
}
}
:root {
--background: #fff;
--foreground: #111;
--primary: #171717;
--primary-foreground: #fff;
--secondary: #eee;
--secondary-foreground: #171717;
--muted: #eee;
--muted-foreground: #666;
--accent: #eee;
--accent-foreground: #171717;
--border: #ddd;
--input: #ddd;
--ring: #777;
--destructive: #dc2626;
--destructive-foreground: #fff;
--popover: #fff;
--popover-foreground: #111;
--success: #15803d;
--success-foreground: #fff;
--radius: .625rem;
--hairline: 1px;
}
.dark {
--background: #090909;
--foreground: #fafafa;
--primary: #fafafa;
--primary-foreground: #171717;
--secondary: #262626;
--secondary-foreground: #fafafa;
--muted: #262626;
--muted-foreground: #a3a3a3;
--accent: #262626;
--accent-foreground: #fafafa;
--border: #333;
--input: #333;
--popover: #171717;
--popover-foreground: #fafafa;
}
:root {
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.51 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.577 0.245 27.325);
--border: oklch(0.94 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
--gradientTopRight: linear-gradient(
229.7deg,
oklch(0.85 0.12 45) 10.61%,
oklch(0.75 0.18 340) 26.17%,
oklch(0.65 0.15 264) 31.93%,
oklch(0.7 0.15 200) 46.54%,
oklch(0.12 0.002 220) 54.36%
);
--gradientTopRightLogin: linear-gradient(
90.7deg,
oklch(0.15 0.05 264) 0.61%,
oklch(0.18 0.05 220) 9.93%,
oklch(0.16 0.05 220) 13.93%,
oklch(0.12 0.05 220) 24%,
oklch(0 0 0) 66.36%
);
--gradientTopRightLoginSm: linear-gradient(
90.7deg,
oklch(0.5 0.25 300) 5.61%,
oklch(0.8 0.1 200) 19.93%,
oklch(0 0 0) 46.36%
);
--gradientTopRightLightHeader: linear-gradient(
30.7deg,
oklch(1 0 0 / 0.3) 0%,
oklch(0.85 0.1 140) 0%,
oklch(0.8 0.1 180) 17.93%,
oklch(0.8 0.1 220) 7.54%,
oklch(1 0 0 / 0.3) 13.36%
);
--gradientTopRightLightSm2: linear-gradient(
210.7deg,
oklch(1 0 0 / 0.3) 1.85%,
oklch(0.8 0.1 200) 5.61%,
oklch(0.8 0.15 340) 13.93%,
oklch(0.85 0.1 60) 22.54%,
oklch(1 0 0 / 0.3) 28.36%
);
--gradientTopRightLightFeatures: linear-gradient(
210.7deg,
oklch(1 0 0 / 0.2) 13.85%,
oklch(0.6 0.2 220 / 0.2) 18.61%,
oklch(0.6 0.2 220 / 0.2) 22.61%,
oklch(0.8 0.15 160 / 0.1) 33.93%,
oklch(1 0 0 / 0.2) 53.36%
);
--gradientTopRightLight: linear-gradient(
210.7deg,
oklch(1 0 0 / 0.3) 13.85%,
oklch(0.6 0.2 220 / 0.4) 18.61%,
oklch(0.6 0.2 220 / 0.6) 22.61%,
oklch(0.8 0.15 160 / 0.7) 33.93%,
oklch(1 0 0 / 0.3) 53.36%
);
--gradientTopRightLightSm: linear-gradient(
210.7deg,
oklch(1 0 0 / 0.3) 16.85%,
oklch(0.85 0.1 140) 22.61%,
oklch(0.85 0.02 220) 50.54%,
oklch(1 0 0 / 0.3) 64.36%
);
--gradientDevTools: linear-gradient(
290.7deg,
oklch(0.8 0.15 340) 14.85%,
oklch(0.8 0.15 340) 50.36%
);
--cultGradient: linear-gradient(
229.7deg,
oklch(0.85 0.08 20) 14.85%,
oklch(0.75 0.15 60) 20.61%,
oklch(0.85 0.12 90) 26.17%,
oklch(0.8 0.1 140) 31.93%,
oklch(0.7 0.15 220) 46.54%,
oklch(0.75 0.12 300) 54.36%
);
--stripeGradient: linear-gradient(
135deg,
oklch(0.6 0.2 250 / 0.7) 20%,
oklch(0.7 0.15 300 / 0.7) 33%,
oklch(0.75 0.1 220 / 0.7) 46%,
oklch(0.8 0.1 180 / 0.7) 66%
);
--cultGradientLight: linear-gradient(
220.55deg,
oklch(0.15 0.05 220) 0%,
oklch(0.3 0.08 220) 50%,
oklch(0.45 0.12 220) 100%
);
--gradientBottomLeft: linear-gradient(
47deg,
oklch(0.99 0.001 220) 10.68%,
oklch(0.85 0.12 45) 17.61%,
oklch(0.75 0.18 340) 24.3%,
oklch(0.65 0.15 264) 31.23%,
oklch(0.7 0.15 200) 48.82%,
oklch(0.12 0.002 220) 58.23%
);
--resendGradient: linear-gradient(
135deg,
oklch(0.5 0.2 300) 10%,
oklch(0.7 0.15 300) 24%,
oklch(0.8 0.1 300) 31%,
oklch(0.85 0.08 300) 50%
);
--gradientToTop: linear-gradient(
0deg,
oklch(1 0 0) -2.39%,
oklch(0.85 0.12 45) 7.4%,
oklch(0.75 0.18 340) 16.83%,
oklch(0.65 0.15 264) 26.61%,
oklch(0.7 0.15 200) 51.42%,
oklch(0.12 0.002 220) 64.69%
);
--background: oklch(1 0 0);
--canvas: oklch(0.985 0 0);
--foreground: oklch(0.205 0 0);
--text-dimmed: var(--muted-foreground);
--text-highlighted: var(--foreground);
--elevation-soft-sm: 0 0 0 1px rgb(0 0 0 / 0.05), 0 1px 2px 0 rgb(0 0 0 / 0.04);
--elevation-soft: 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06),
0 2px 4px 0 rgb(0 0 0 / 0.04);
--elevation-soft-md: 0 0 0 1px rgb(0 0 0 / 0.07), 0 2px 4px -1px rgb(0 0 0 / 0.06),
0 8px 16px -4px rgb(0 0 0 / 0.08);
--code: oklch(0.985 0 0);
--code-foreground: oklch(0.205 0 0);
--code-number: oklch(0.708 0 0);
--code-highlight: oklch(0.955 0 0);
}
.dark {
--elevation-soft-sm: 0 0 0 1px rgb(255 255 255 / 0.05), 0 1px 2px 0 rgb(0 0 0 / 0.35);
--elevation-soft: 0 0 0 1px rgb(255 255 255 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.4),
0 2px 4px 0 rgb(0 0 0 / 0.3);
--elevation-soft-md: 0 0 0 1px rgb(255 255 255 / 0.08), 0 2px 4px -1px rgb(0 0 0 / 0.45),
0 8px 16px -4px rgb(0 0 0 / 0.4);
--background: oklch(0.145 0 0);
--canvas: oklch(0.145 0 0);
--code: oklch(0.18 0 0);
--code-foreground: oklch(0.95 0 0);
--code-number: oklch(0.45 0 0);
--code-highlight: oklch(0.235 0 0);
--foreground: oklch(0.95 0 0);
--text-dimmed: var(--muted-foreground);
--text-highlighted: var(--foreground);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.95 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.235 0 0);
--muted-foreground: oklch(0.715 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--destructive-foreground: oklch(0.637 0.237 25.331);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
}
.dark [data-rehype-pretty-code-fragment] .word--highlighted {
background-color: var(--color-zinc-900);
}
@keyframes cosmic-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes cosmic-spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
@keyframes gold-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes caret-blink {
0%, 49% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
@property --tw-space-y-reverse {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-border-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-leading {
syntax: "*";
inherits: false;
}
@property --tw-font-weight {
syntax: "*";
inherits: false;
}
@property --tw-tracking {
syntax: "*";
inherits: false;
}
@property --tw-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
syntax: "*";
inherits: false;
}
@property --tw-shadow-alpha {
syntax: "<percentage>";
inherits: false;
initial-value: 100%;
}
@property --tw-inset-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
syntax: "*";
inherits: false;
}
@property --tw-inset-shadow-alpha {
syntax: "<percentage>";
inherits: false;
initial-value: 100%;
}
@property --tw-ring-color {
syntax: "*";
inherits: false;
}
@property --tw-ring-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
syntax: "*";
inherits: false;
}
@property --tw-inset-ring-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
syntax: "*";
inherits: false;
}
@property --tw-ring-offset-width {
syntax: "<length>";
inherits: false;
initial-value: 0px;
}
@property --tw-ring-offset-color {
syntax: "*";
inherits: false;
initial-value: #fff;
}
@property --tw-ring-offset-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-outline-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
--tw-space-y-reverse: 0;
--tw-border-style: solid;
--tw-leading: initial;
--tw-font-weight: initial;
--tw-tracking: initial;
--tw-shadow: 0 0 #0000;
--tw-shadow-color: initial;
--tw-shadow-alpha: 100%;
--tw-inset-shadow: 0 0 #0000;
--tw-inset-shadow-color: initial;
--tw-inset-shadow-alpha: 100%;
--tw-ring-color: initial;
--tw-ring-shadow: 0 0 #0000;
--tw-inset-ring-color: initial;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-inset: initial;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-outline-style: solid;
}
}
}