/* uikit v0.1.0 2026-09-24 */
@layer tokens, base, components, utilities, overrides;
@layer tokens {
:root {
--white: oklch(1 0 0);
--black: oklch(0 0 0);
--gray-50: oklch(0.985 0.000 0);
--gray-100: oklch(0.970 0.000 0);
--gray-200: oklch(0.922 0.000 0);
--gray-300: oklch(0.870 0.000 0);
--gray-400: oklch(0.708 0.000 0);
--gray-500: oklch(0.556 0.000 0);
--gray-600: oklch(0.439 0.000 0);
--gray-700: oklch(0.371 0.000 0);
--gray-800: oklch(0.269 0.000 0);
--gray-900: oklch(0.205 0.000 0);
--gray-950: oklch(0.145 0.000 0);
--red-50: oklch(0.973 0.011 33.0);
--red-100: oklch(0.941 0.028 33.0);
--red-200: oklch(0.894 0.056 33.0);
--red-300: oklch(0.822 0.103 33.0);
--red-400: oklch(0.726 0.174 33.0);
--red-500: oklch(0.664 0.215 33.0);
--red-600: oklch(0.601 0.221 33.0);
--red-700: oklch(0.526 0.193 33.0);
--red-800: oklch(0.463 0.161 33.0);
--red-900: oklch(0.413 0.129 33.0);
--red-950: oklch(0.269 0.084 33.0);
--green-50: oklch(0.980 0.009 156.3);
--green-100: oklch(0.955 0.023 156.3);
--green-200: oklch(0.920 0.046 156.3);
--green-300: oklch(0.866 0.086 156.3);
--green-400: oklch(0.793 0.145 156.3);
--green-500: oklch(0.747 0.178 156.3);
--green-600: oklch(0.676 0.184 156.3);
--green-700: oklch(0.592 0.161 156.3);
--green-800: oklch(0.520 0.134 156.3);
--green-900: oklch(0.464 0.107 156.3);
--green-950: oklch(0.302 0.070 156.3);
--amber-50: oklch(0.984 0.009 73.1);
--amber-100: oklch(0.964 0.022 73.1);
--amber-200: oklch(0.936 0.044 73.1);
--amber-300: oklch(0.893 0.082 73.1);
--amber-400: oklch(0.836 0.138 73.1);
--amber-500: oklch(0.799 0.170 73.1);
--amber-600: oklch(0.723 0.175 73.1);
--amber-700: oklch(0.633 0.153 73.1);
--amber-800: oklch(0.557 0.128 73.1);
--amber-900: oklch(0.496 0.102 73.1);
--amber-950: oklch(0.323 0.066 73.1);
--blue-50: oklch(0.985 0.005 229.5);
--blue-100: oklch(0.966 0.013 229.5);
--blue-200: oklch(0.939 0.026 229.5);
--blue-300: oklch(0.899 0.049 229.5);
--blue-400: oklch(0.844 0.082 229.5);
--blue-500: oklch(0.808 0.101 229.5);
--blue-600: oklch(0.732 0.104 229.5);
--blue-700: oklch(0.641 0.091 229.5);
--blue-800: oklch(0.564 0.076 229.5);
--blue-900: oklch(0.503 0.061 229.5);
--blue-950: oklch(0.327 0.039 229.5);
--space-0: 0;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--text-xxs: 0.625rem;
--leading-xxs: 0.875rem;
--text-xs: 0.75rem;
--leading-xs: 1rem;
--text-sm: 0.875rem;
--leading-sm: 1.25rem;
--text-base: 1rem;
--leading-base: 1.5rem;
--text-lg: 1.125rem;
--leading-lg: 1.75rem;
--text-xl: 1.25rem;
--leading-xl: 1.75rem;
--text-2xl: 1.5rem;
--leading-2xl: 2rem;
--text-3xl: 1.875rem;
--leading-3xl: 2.25rem;
--text-4xl: 2.25rem;
--leading-4xl: 2.5rem;
--radius: 0.5rem;
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--radius-full: 9999px;
--shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.05);
--shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
--shadow: 0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
--shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1);
--font-emoji: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji";
--font-sans: "Noto Sans JP", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Helvetica Neue", Arial, sans-serif, var(--font-emoji);
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--font-emoji);
--icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0'/%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E");
--icon-circle-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
--icon-circle-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
--icon-triangle-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
--icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
--icon-lightbulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
--width-xs: 16rem;
--width-sm: 24rem;
--width-md: 32rem;
--width-lg: 48rem;
--width-xl: 64rem;
--duration: 150ms;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ring-width: 2px;
--ring-offset: 0;
--background: var(--white);
--foreground: var(--gray-950);
--card: var(--white);
--card-foreground: var(--gray-950);
--popover: var(--white);
--popover-foreground: var(--gray-950);
--primary: var(--gray-900);
--primary-foreground: var(--gray-50);
--secondary: var(--gray-100);
--secondary-foreground: var(--gray-900);
--muted: var(--gray-100);
--muted-foreground: var(--gray-500);
--accent: var(--gray-100);
--accent-foreground: var(--gray-900);
--destructive: var(--red-500);
--destructive-foreground: var(--white);
--success: var(--green-600);
--warning: var(--amber-500);
--info: var(--blue-700);
--border: var(--gray-200);
--input: var(--gray-200);
--ring: var(--blue-200);
--control: var(--blue-600);
--input-focus: var(--blue-300);
--control-foreground: var(--white);
--overlay: oklch(from var(--black) l c h / 0.5);
--toast: var(--white);
--toast-foreground: var(--gray-950);
--gradient-brand: linear-gradient(in oklch 90deg, #00c950 0%, #51a2ff 50%, #bedbff 100%);
--gradient-sunset: linear-gradient(in oklch 90deg, #fd9a00 0%, #fb2c36 100%);
--gradient-mono: linear-gradient(in oklch 180deg, #f5f5f5 0%, #ffffff 100%);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--background: var(--gray-950);
--foreground: var(--gray-50);
--card: var(--gray-900);
--card-foreground: var(--gray-50);
--popover: var(--gray-900);
--popover-foreground: var(--gray-50);
--primary: var(--gray-200);
--primary-foreground: var(--gray-900);
--secondary: var(--gray-800);
--secondary-foreground: var(--gray-50);
--muted: var(--gray-800);
--muted-foreground: var(--gray-400);
--accent: var(--gray-800);
--accent-foreground: var(--gray-50);
--destructive: var(--red-400);
--destructive-foreground: var(--white);
--success: var(--green-400);
--warning: var(--amber-400);
--info: var(--blue-400);
--border: var(--gray-800);
--input: var(--gray-700);
--ring: var(--blue-700);
--control: var(--blue-500);
--input-focus: var(--blue-400);
--control-foreground: var(--white);
--overlay: oklch(from var(--black) l c h / 0.7);
--toast: var(--gray-900);
--toast-foreground: var(--gray-50);
--gradient-brand: linear-gradient(in oklch 90deg, #008236 0%, #155dfc 50%, #1c398e 100%);
--gradient-sunset: linear-gradient(in oklch 90deg, #7e2a0c 0%, #82181a 100%);
--gradient-mono: linear-gradient(in oklch 180deg, #262626 0%, #0a0a0a 100%);
}
}
[data-theme="dark"] {
--background: var(--gray-950);
--foreground: var(--gray-50);
--card: var(--gray-900);
--card-foreground: var(--gray-50);
--popover: var(--gray-900);
--popover-foreground: var(--gray-50);
--primary: var(--gray-200);
--primary-foreground: var(--gray-900);
--secondary: var(--gray-800);
--secondary-foreground: var(--gray-50);
--muted: var(--gray-800);
--muted-foreground: var(--gray-400);
--accent: var(--gray-800);
--accent-foreground: var(--gray-50);
--destructive: var(--red-400);
--destructive-foreground: var(--white);
--success: var(--green-400);
--warning: var(--amber-400);
--info: var(--blue-400);
--border: var(--gray-800);
--input: var(--gray-700);
--ring: var(--blue-700);
--control: var(--blue-500);
--input-focus: var(--blue-400);
--control-foreground: var(--white);
--overlay: oklch(from var(--black) l c h / 0.7);
--toast: var(--gray-900);
--toast-foreground: var(--gray-50);
--gradient-brand: linear-gradient(in oklch 90deg, #008236 0%, #155dfc 50%, #1c398e 100%);
--gradient-sunset: linear-gradient(in oklch 90deg, #7e2a0c 0%, #82181a 100%);
--gradient-mono: linear-gradient(in oklch 180deg, #262626 0%, #0a0a0a 100%);
}
[data-brand="default"] {}
@media (prefers-reduced-motion: reduce) {
:root {
--duration: 0ms;
}
}
}
@layer base {
*,
::before,
::after {
box-sizing: border-box;
border: 0 solid var(--border);
outline-color: transparent;
margin: 0;
padding: 0;
}
:root {
color-scheme: light dark;
}
:root[data-theme="light"] {
color-scheme: light;
}
:root[data-theme="dark"] {
color-scheme: dark;
}
html {
font-family: var(--font-sans);
line-height: var(--leading-base);
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
tab-size: 2;
}
body {
min-height: 100dvh;
background: var(--background);
color: var(--foreground);
font-size: var(--text-sm);
line-height: var(--leading-sm);
}
h1, h2, h3, h4 {
font-weight: 600;
letter-spacing: -0.02em;
text-wrap: balance;
}
h1 {
font-size: var(--text-3xl);
line-height: var(--leading-3xl);
font-weight: 700;
}
h2 {
font-size: var(--text-2xl);
line-height: var(--leading-2xl);
}
h3 {
font-size: var(--text-xl);
line-height: var(--leading-xl);
}
h4 {
font-size: var(--text-lg);
line-height: var(--leading-lg);
}
p {
text-wrap: pretty;
}
a {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.2em;
}
a:hover {
text-decoration: none;
}
strong, b {
font-weight: 600;
}
small {
font-size: var(--text-xs);
}
ul, ol {
padding-left: var(--space-6);
}
[role="list"] {
list-style: none;
padding: 0;
}
li + li {
margin-top: var(--space-1);
}
blockquote {
padding-left: var(--space-4);
border-left: var(--space-1) solid var(--border);
color: var(--muted-foreground);
font-style: italic;
}
hr {
height: 0;
border-top: 1px solid var(--border);
}
code, kbd, samp, pre {
font-family: var(--font-mono);
font-size: 0.875em;
}
code, kbd {
padding: 0.15em 0.35em;
border-radius: var(--radius-sm);
background: var(--muted);
}
kbd {
border: 1px solid var(--border);
box-shadow: var(--shadow-xs);
font-size: var(--text-xs);
}
pre {
padding: var(--space-4);
border-radius: var(--radius-md);
background: var(--muted);
font-size: var(--text-xs);
line-height: var(--leading-sm);
overflow-x: auto;
}
pre code {
padding: 0;
background: none;
font-size: inherit;
}
img, video, canvas {
display: block;
max-width: 100%;
height: auto;
}
svg {
flex-shrink: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
button, input, select, textarea {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
button {
background: none;
cursor: pointer;
}
fieldset {
min-width: 0;
}
legend {
padding: 0;
}
textarea {
resize: vertical;
}
::placeholder {
color: var(--muted-foreground);
opacity: 1;
}
:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: var(--ring-offset);
}
:disabled,
[aria-disabled="true"] {
opacity: 0.6;
cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
*, ::before, ::after {
animation: none;
}
}
}
@layer components {
.accordion {
border-bottom: 1px solid var(--border);
& > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: 500;
line-height: var(--leading-sm);
cursor: pointer;
list-style: none;
transition: background-color var(--duration) var(--ease);
}
& > summary::-webkit-details-marker {
display: none;
}
& > summary::after {
content: "";
width: var(--space-2);
height: var(--space-2);
margin-right: var(--space-1);
border-right: 1px solid var(--muted-foreground);
border-bottom: 1px solid var(--muted-foreground);
rotate: 45deg;
translate: 0 calc(var(--space-1) / -2);
transition: rotate var(--duration) var(--ease);
}
&[open] > summary::after {
rotate: -135deg;
translate: 0 calc(var(--space-1) / 2);
}
& > summary:hover {
background: var(--accent);
color: var(--accent-foreground);
}
}
.accordion-content {
padding: var(--space-1) var(--space-3) var(--space-4);
color: var(--muted-foreground);
font-size: var(--text-sm);
line-height: var(--leading-sm);
}
}
@layer components {
.alert {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-1) var(--space-3);
width: 100%;
padding: var(--alert-py, var(--space-3)) var(--alert-px, var(--space-4));
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--card);
color: var(--card-foreground);
font-size: var(--text-sm);
&::before {
content: "";
grid-row: span 2;
width: var(--space-4);
height: var(--space-4);
margin-top: calc(var(--space-1) / 2);
background: var(--alert-accent, currentColor);
mask: var(--alert-icon, var(--icon-bell)) center / contain no-repeat;
}
& > svg {
grid-row: span 2;
width: var(--space-4);
height: var(--space-4);
margin-top: calc(var(--space-1) / 2);
color: var(--alert-accent, currentColor);
}
&:has(> svg)::before,
&[data-icon="none"]::before {
display: none;
}
&[data-icon="none"] {
grid-template-columns: 1fr;
}
&[data-variant="success"] { --alert-accent: var(--success); --alert-icon: var(--icon-circle-check); }
&[data-variant="destructive"] { --alert-accent: var(--destructive); --alert-icon: var(--icon-circle-x); }
&[data-variant="warning"] { --alert-accent: var(--warning); --alert-icon: var(--icon-triangle-alert); }
&[data-variant="info"] { --alert-accent: var(--info); --alert-icon: var(--icon-info); }
&[data-variant]:not([data-variant="default"]) {
border-color: color-mix(in oklch, var(--alert-accent) 20%, transparent);
background: color-mix(in srgb, var(--alert-accent) 8%, var(--card));
color: var(--alert-accent);
}
&[data-variant]:not([data-variant="default"]) .alert-description {
color: color-mix(in oklch, var(--alert-accent) 90%, transparent);
}
}
.alert-title {
font-weight: 500;
line-height: var(--leading-sm);
letter-spacing: -0.01em;
}
.alert-description {
color: var(--muted-foreground);
font-size: var(--text-xs);
line-height: var(--leading-xs);
}
}
@layer components {
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
width: fit-content;
height: var(--space-5);
padding: 0 var(--badge-px, var(--space-2));
border: 1px solid transparent;
border-radius: var(--badge-radius, var(--radius-full));
background: var(--primary);
color: var(--primary-foreground);
font-size: var(--text-xxs);
font-weight: 500;
line-height: 1;
white-space: nowrap;
text-decoration: none;
& > svg {
width: var(--space-3);
height: var(--space-3);
}
&[data-variant="secondary"] {
background: var(--secondary);
color: var(--secondary-foreground);
}
&[data-variant="outline"] {
border-color: var(--border);
background: transparent;
color: var(--foreground);
}
&[data-variant="destructive"] {
background: var(--destructive);
color: var(--destructive-foreground);
}
&[data-variant="success"] {
background: color-mix(in oklch, var(--success) 15%, transparent);
color: var(--success);
}
&[data-variant="warning"] {
background: color-mix(in oklch, var(--warning) 18%, transparent);
color: var(--warning);
}
&[data-variant="info"] {
background: color-mix(in oklch, var(--info) 15%, transparent);
color: var(--info);
}
}
}
@layer components {
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--btn-gap, var(--space-2));
height: var(--btn-h, var(--space-9));
padding-inline: var(--btn-px, var(--space-4));
border: 1px solid transparent;
border-radius: var(--btn-radius, var(--radius-md));
background: var(--primary);
color: var(--primary-foreground);
font-size: var(--text-sm);
font-weight: 500;
line-height: var(--leading-sm);
white-space: nowrap;
text-decoration: none;
cursor: pointer;
user-select: none;
box-shadow: var(--shadow-xs);
transition: all var(--duration) var(--ease);
&:hover {
background: color-mix(in oklch, var(--primary) 90%, transparent);
}
&:disabled,
&[aria-disabled="true"] {
pointer-events: none;
}
& > svg {
width: var(--space-4);
height: var(--space-4);
pointer-events: none;
}
&[data-variant="secondary"] {
background: var(--secondary);
color: var(--secondary-foreground);
}
&[data-variant="secondary"]:hover {
background: color-mix(in oklch, var(--secondary) 80%, transparent);
}
&[data-variant="outline"] {
border-color: var(--input);
background: var(--background);
color: var(--foreground);
}
&[data-variant="outline"]:hover {
background: var(--accent);
color: var(--accent-foreground);
}
&[data-variant="ghost"] {
background: transparent;
color: var(--foreground);
box-shadow: none;
}
&[data-variant="ghost"]:hover {
background: var(--accent);
color: var(--accent-foreground);
}
&[data-variant="link"] {
padding-inline: 0;
background: transparent;
color: var(--primary);
box-shadow: none;
text-decoration: underline;
text-underline-offset: 0.2em;
}
&[data-variant="link"]:hover {
text-decoration: none;
}
&[data-variant="destructive"] {
background: var(--destructive);
color: var(--destructive-foreground);
}
&[data-variant="destructive"]:hover {
background: color-mix(in oklch, var(--destructive) 90%, transparent);
}
&[data-size="sm"] {
--btn-h: var(--space-8);
--btn-px: var(--space-3);
--btn-gap: var(--space-1);
font-size: var(--text-xs);
}
&[data-size="lg"] {
--btn-h: var(--space-10);
--btn-px: var(--space-6);
}
&[data-size="icon"],
&[data-size="icon-sm"] {
--btn-px: 0;
--btn-radius: var(--radius-full);
width: var(--btn-h, var(--space-9));
}
&[data-size="icon-sm"] {
--btn-h: var(--space-8);
}
}
}
@layer components {
.bubble {
position: relative;
width: fit-content;
max-width: var(--bubble-max-w, 75%);
padding: var(--bubble-py, var(--space-2)) var(--bubble-px, var(--space-3));
border-radius: var(--radius-lg);
border-end-start-radius: var(--radius-sm);
background: var(--muted);
color: var(--foreground);
font-size: var(--text-xs);
line-height: var(--leading-xs);
overflow-wrap: anywhere;
&::before {
content: "";
position: absolute;
bottom: 0;
left: calc(var(--space-1) * -1.5);
width: calc(var(--space-2) + 2px);
height: var(--space-2);
background: inherit;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
&[data-variant="primary"] {
margin-inline-start: auto;
border-end-start-radius: var(--radius-lg);
border-end-end-radius: var(--radius-sm);
background: var(--primary);
color: var(--primary-foreground);
}
&[data-variant="primary"]::before {
left: auto;
right: calc(var(--space-1) * -1.5);
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
}
.bubble-meta {
display: block;
margin-top: var(--space-1);
font-size: var(--text-xxs);
line-height: var(--leading-xxs);
opacity: 0.7;
}
}
@layer components {
.card {
display: flex;
flex-direction: column;
gap: var(--card-gap, var(--space-4));
padding-block: var(--card-py, var(--space-4));
border: 1px solid var(--border);
border-radius: var(--card-radius, var(--radius-lg));
background: var(--card);
color: var(--card-foreground);
}
.card-header,
.card-content,
.card-footer {
padding-inline: var(--card-px, var(--space-4));
}
.card-header {
display: grid;
gap: var(--space-1);
}
.card-title {
font-size: var(--text-sm);
font-weight: 600;
line-height: 1;
}
.card-description {
color: var(--muted-foreground);
font-size: var(--text-xs);
line-height: var(--leading-xs);
}
.card-footer {
display: flex;
align-items: center;
gap: var(--space-2);
}
}
@layer components {
.dialog {
display: none;
flex-direction: column;
gap: var(--space-4);
width: calc(100% - var(--space-8));
max-width: var(--dialog-max-w, var(--width-md));
max-height: calc(100dvh - var(--space-8));
margin: auto;
padding: var(--dialog-p, var(--space-6));
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--popover);
color: var(--popover-foreground);
box-shadow: var(--shadow-lg);
overflow: auto;
&[open] {
display: flex;
}
&::backdrop {
background: var(--overlay);
}
}
.dialog-header {
display: grid;
gap: var(--space-2);
padding-right: var(--space-8);
}
.dialog-close {
position: absolute;
top: var(--space-3);
right: var(--space-3);
display: grid;
place-items: center;
width: var(--space-7);
height: var(--space-7);
border-radius: var(--radius-sm);
color: var(--muted-foreground);
transition: all var(--duration) var(--ease);
&:hover {
background: var(--accent);
color: var(--accent-foreground);
}
& > svg {
width: var(--space-4);
height: var(--space-4);
}
}
.dialog-title {
font-size: var(--text-base);
line-height: var(--leading-base);
font-weight: 600;
}
.dialog-description {
color: var(--muted-foreground);
font-size: var(--text-xs);
line-height: var(--leading-xs);
}
.dialog-footer {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-2);
margin-top: var(--space-2);
}
}
@layer components {
.dropdown {
min-width: var(--dropdown-min-w, var(--width-xs));
margin: var(--space-1) 0 0;
padding: var(--space-2);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background: var(--popover);
color: var(--popover-foreground);
box-shadow: var(--shadow-lg);
inset: auto;
position-area: bottom span-right;
position-try-fallbacks: flip-block, flip-inline;
}
@supports not (position-area: bottom) {
.dropdown {
inset: 0;
margin: auto;
width: fit-content;
height: fit-content;
}
}
.dropdown-item {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
color: inherit;
font-size: var(--text-sm);
line-height: var(--leading-sm);
text-align: left;
text-decoration: none;
cursor: pointer;
& > svg {
width: var(--space-4);
height: var(--space-4);
color: var(--muted-foreground);
}
&:hover,
&:focus-visible {
background: var(--accent);
color: var(--accent-foreground);
outline: none;
}
&[aria-haspopup]::after,
&[aria-checked="true"]::after {
content: "";
flex-shrink: 0;
width: var(--space-3);
height: var(--space-3);
margin-left: auto;
background: currentColor;
}
&[aria-haspopup]::after {
clip-path: polygon(30% 5%, 45% 5%, 80% 50%, 45% 95%, 30% 95%, 65% 50%);
color: var(--muted-foreground);
}
&[aria-checked="true"]::after {
clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 22%, 84% 8%, 40% 66%);
color: var(--info);
}
&[data-variant="destructive"] {
color: var(--destructive);
}
&[data-variant="destructive"] > svg {
color: inherit;
}
&[data-variant="destructive"]:hover {
background: color-mix(in oklch, var(--destructive) 10%, transparent);
}
&:disabled {
pointer-events: none;
}
}
.dropdown-label {
padding: var(--space-2) var(--space-3) var(--space-1);
color: var(--muted-foreground);
font-size: var(--text-xs);
line-height: var(--leading-xs);
}
.dropdown-separator {
height: 1px;
margin: var(--space-2) calc(var(--space-2) * -1);
background: var(--border);
}
.dropdown-search {
display: block;
width: 100%;
height: var(--space-8);
margin-bottom: var(--space-2);
padding: 0 var(--space-3);
border: 1px solid var(--input);
border-radius: var(--radius-md);
background: var(--background);
color: inherit;
font-size: var(--text-sm);
line-height: var(--leading-sm);
}
.dropdown-dot {
flex-shrink: 0;
width: var(--space-2);
height: var(--space-2);
margin-inline: var(--space-1);
border-radius: var(--radius-full);
background: var(--dot, var(--muted-foreground));
}
}
@layer components {
.gradient-flow {
background-image: var(--gradient, var(--gradient-brand));
background-size: 200% 100%;
animation: ui-gradient-flow var(--gradient-speed, 12s) linear infinite;
}
@keyframes ui-gradient-flow {
to {
background-position: 200% 0;
}
}
}
@layer components {
.input {
display: flex;
width: 100%;
min-width: 0;
height: var(--input-h, var(--space-9));
padding: 0 var(--input-px, var(--space-3));
border: 1px solid var(--input);
border-radius: var(--input-radius, var(--radius-md));
background: var(--background);
color: var(--foreground);
font-size: var(--text-sm);
line-height: var(--leading-sm);
transition: all var(--duration) var(--ease);
&[type="file"] {
padding-block: 0;
line-height: var(--input-h, var(--space-9));
}
&:disabled,
&[readonly] {
background: var(--muted);
color: var(--muted-foreground);
}
&:disabled {
opacity: 1;
}
&[readonly]:focus-visible {
outline: none;
border-color: var(--input);
}
&::file-selector-button {
margin-right: var(--space-3);
border: 0;
background: transparent;
color: var(--foreground);
font-weight: 500;
}
}
.textarea {
display: flex;
width: 100%;
min-width: 0;
min-height: var(--textarea-min-h, var(--space-16));
padding: var(--space-2) var(--textarea-px, var(--space-3));
border: 1px solid var(--input);
border-radius: var(--textarea-radius, var(--radius-md));
background: var(--background);
color: var(--foreground);
font-size: var(--text-sm);
line-height: var(--leading-sm);
field-sizing: content;
transition: border-color var(--duration) var(--ease);
&:disabled,
&[readonly] {
background: var(--muted);
color: var(--muted-foreground);
}
&:disabled {
opacity: 1;
}
&[readonly]:focus-visible {
outline: none;
border-color: var(--input);
}
}
.select {
display: inline-flex;
width: 100%;
min-width: 0;
height: var(--select-h, var(--space-9));
padding: 0 var(--space-8) 0 var(--select-px, var(--space-3));
border: 1px solid var(--input);
border-radius: var(--select-radius, var(--radius-md));
background-color: var(--background);
background-image: linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%), linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);
background-position: right calc(var(--space-4) + 1px) center, right var(--space-3) center;
background-size: calc(var(--space-1) + 1px) calc(var(--space-1) + 1px);
background-repeat: no-repeat;
color: var(--foreground);
font-size: var(--text-sm);
line-height: var(--leading-sm);
appearance: none;
cursor: pointer;
transition: border-color var(--duration) var(--ease);
&:disabled {
opacity: 1;
background-color: var(--muted);
color: var(--muted-foreground);
}
&[multiple],
&[size] {
height: auto;
padding: var(--space-1);
background-image: none;
}
& option {
background: var(--popover);
color: var(--popover-foreground);
}
}
.checkbox {
display: inline-grid;
place-content: center;
flex-shrink: 0;
width: var(--checkbox-size, var(--space-4));
height: var(--checkbox-size, var(--space-4));
border: 1px solid var(--input);
border-radius: var(--checkbox-radius, var(--radius-sm));
background: var(--background);
appearance: none;
cursor: pointer;
transition: all var(--duration) var(--ease);
&::before {
content: "";
width: calc(var(--checkbox-size, var(--space-4)) - var(--space-1));
height: calc(var(--checkbox-size, var(--space-4)) - var(--space-1));
background: var(--control-foreground);
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
scale: 0;
transition: scale var(--duration) var(--ease);
}
&:checked,
&:indeterminate {
border-color: var(--control);
background: var(--control);
}
&:checked::before {
scale: 1;
}
&:indeterminate::before {
mask: none;
clip-path: inset(40% 10% 40% 10%);
scale: 1;
}
}
.radio {
display: inline-grid;
place-content: center;
flex-shrink: 0;
width: var(--radio-size, var(--space-4));
height: var(--radio-size, var(--space-4));
border: 1px solid var(--input);
border-radius: var(--radius-full);
background: var(--background);
appearance: none;
cursor: pointer;
transition: border-color var(--duration) var(--ease);
&:disabled {
background-color: var(--muted);
}
&::before {
content: "";
width: calc(var(--radio-size, var(--space-4)) / 2);
height: calc(var(--radio-size, var(--space-4)) / 2);
border-radius: var(--radius-full);
background: var(--control);
scale: 0;
transition: scale var(--duration) var(--ease);
}
&:checked {
border-color: var(--control);
}
&:checked::before {
scale: 1;
}
}
.switch {
position: relative;
display: inline-block;
flex-shrink: 0;
width: var(--switch-w, var(--space-9));
height: var(--switch-h, var(--space-5));
border: 0;
border-radius: var(--radius-full);
background: var(--input);
appearance: none;
cursor: pointer;
transition: background-color var(--duration) var(--ease);
&::before {
content: "";
position: absolute;
top: calc(var(--space-1) / 2);
left: calc(var(--space-1) / 2);
width: calc(var(--switch-h, var(--space-5)) - var(--space-1));
height: calc(var(--switch-h, var(--space-5)) - var(--space-1));
border-radius: var(--radius-full);
background: var(--background);
box-shadow: var(--shadow-sm);
transition: translate var(--duration) var(--ease);
}
&:checked {
background: var(--control);
}
&:checked::before {
translate: calc(var(--switch-w, var(--space-9)) - var(--switch-h, var(--space-5))) 0;
}
}
}
@layer components {
.label {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: 500;
line-height: var(--leading-sm);
user-select: none;
&:has(> :disabled) {
color: var(--muted-foreground);
cursor: not-allowed;
}
}
}
@layer components {
.panel {
padding: var(--panel-p, var(--space-4));
border: 1px solid var(--border);
border-radius: var(--panel-radius, var(--radius-lg));
background: var(--panel-bg, var(--card));
color: var(--card-foreground);
&[data-variant="note"] {
display: grid;
grid-template-columns: auto 1fr;
column-gap: var(--space-2);
border-color: transparent;
background: var(--panel-bg, color-mix(in srgb, var(--muted) 50%, var(--background)));
color: var(--foreground);
&::before {
content: "";
width: var(--space-4);
height: var(--space-4);
margin-top: calc(var(--space-1) / 2);
background: var(--muted-foreground);
mask: var(--icon-lightbulb) center / contain no-repeat;
}
}
}
}
@layer components {
.popover {
width: var(--popover-w, var(--width-xs));
margin: var(--space-1) 0 0;
padding: var(--popover-p, var(--space-4));
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--popover);
color: var(--popover-foreground);
box-shadow: var(--shadow-md);
inset: auto;
position-area: bottom span-right;
position-try-fallbacks: flip-block, flip-inline;
}
@supports not (position-area: bottom) {
.popover {
inset: 0;
margin: auto;
height: fit-content;
}
}
}
@layer components {
.progress {
position: relative;
width: 100%;
height: var(--progress-h, var(--space-2));
border-radius: var(--radius-full);
background: color-mix(in oklch, var(--primary) 20%, transparent);
overflow: hidden;
}
.progress-indicator {
width: var(--progress-value, 0%);
height: 100%;
border-radius: var(--radius-full);
background: var(--primary);
transition: width var(--duration) var(--ease);
}
}
@layer components {
.skeleton {
border-radius: var(--radius-md);
background: var(--accent);
animation: ui-pulse 2s var(--ease) infinite;
}
@keyframes ui-pulse {
50% {
opacity: 0.5;
}
}
}
@layer components {
.split-btn {
display: inline-flex;
align-items: stretch;
width: fit-content;
& > .btn {
--btn-radius: var(--radius-md);
border-radius: 0;
}
& > .btn:first-child {
border-start-start-radius: var(--btn-radius, var(--radius-md));
border-end-start-radius: var(--btn-radius, var(--radius-md));
}
& > .btn:last-child {
border-start-end-radius: var(--btn-radius, var(--radius-md));
border-end-end-radius: var(--btn-radius, var(--radius-md));
}
& > .btn + .btn {
margin-inline-start: -1px;
}
& > .btn:not([data-variant]) + .btn:not([data-variant]),
& > .btn[data-variant="destructive"] + .btn[data-variant="destructive"] {
border-inline-start-color: color-mix(in oklch, var(--background) 20%, transparent);
}
& > .btn:focus-visible {
position: relative;
z-index: 1;
}
& > .btn[data-size="icon"],
& > .btn[data-size="icon-sm"] {
--btn-px: 0;
width: var(--btn-h, var(--space-9));
}
}
}
@layer components {
.table {
width: 100%;
font-size: var(--text-sm);
caption-side: bottom;
& th,
& td {
padding: var(--table-py, var(--space-2)) var(--table-px, var(--space-2));
text-align: left;
vertical-align: middle;
}
& th {
height: var(--space-10);
color: var(--muted-foreground);
font-size: var(--text-xxs);
font-weight: 500;
white-space: nowrap;
}
& tr {
border-bottom: 1px solid var(--border);
}
& tbody tr:last-child {
border-bottom: 0;
}
& tfoot {
border-top: 1px solid var(--border);
background: color-mix(in oklch, var(--muted) 50%, transparent);
font-weight: 500;
}
& caption {
margin-top: var(--space-4);
color: var(--muted-foreground);
}
}
}
@layer components {
.tabs {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.tabs-list {
display: inline-flex;
align-items: center;
width: fit-content;
padding: calc(var(--space-1) - 1px);
border-radius: var(--radius-lg);
background: var(--muted);
color: var(--muted-foreground);
}
.tabs-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: calc(var(--space-7) + 1px);
padding-inline: var(--space-3);
border: 1px solid transparent;
border-radius: var(--radius-md);
color: inherit;
font-size: var(--text-sm);
font-weight: 500;
line-height: var(--leading-sm);
white-space: nowrap;
transition: all var(--duration) var(--ease);
&:hover {
color: var(--foreground);
}
&[aria-selected="true"] {
background: var(--background);
color: var(--foreground);
box-shadow: var(--shadow-sm);
}
&:disabled {
pointer-events: none;
}
}
.tabs-content {
outline: none;
}
}
@layer components {
ui-toast {
position: fixed;
inset: auto var(--space-4) var(--space-4) auto;
z-index: 100;
display: flex;
flex-direction: column;
gap: var(--space-2);
width: calc(100% - var(--space-8));
max-width: var(--width-sm);
pointer-events: none;
}
.toast {
position: relative;
display: grid;
grid-template-areas: "icon title close" "icon desc close" "icon actions close";
grid-template-columns: auto 1fr auto;
column-gap: var(--space-3);
padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--toast);
color: var(--toast-foreground);
font-size: var(--text-sm);
line-height: var(--leading-sm);
box-shadow: var(--shadow-xs);
pointer-events: auto;
animation: ui-toast-in var(--duration) var(--ease);
&::before {
content: "";
grid-area: icon;
width: var(--space-4);
height: var(--space-4);
margin-top: calc(var(--space-1) / 2);
background: var(--toast-accent, currentColor);
mask: var(--toast-icon, var(--icon-bell)) center / contain no-repeat;
}
&:has(> svg)::before,
&[data-icon="none"]::before {
display: none;
}
&[data-icon="none"] {
grid-template-areas: "title close" "desc close" "actions close";
grid-template-columns: 1fr auto;
}
& > svg {
grid-area: icon;
width: var(--space-4);
height: var(--space-4);
margin-top: calc(var(--space-1) / 2);
color: var(--toast-accent, currentColor);
}
&[data-variant="success"] { --toast-accent: var(--success); --toast-icon: var(--icon-circle-check); }
&[data-variant="destructive"] { --toast-accent: var(--destructive); --toast-icon: var(--icon-circle-x); }
&[data-variant="warning"] { --toast-accent: var(--warning); --toast-icon: var(--icon-triangle-alert); }
&[data-variant="info"] { --toast-accent: var(--info); --toast-icon: var(--icon-info); }
&[data-variant]:not([data-variant="default"]) {
border-color: color-mix(in oklch, var(--toast-accent) 20%, transparent);
background: color-mix(in srgb, var(--toast-accent) 8%, var(--toast));
color: var(--toast-accent);
}
&[data-variant]:not([data-variant="default"]) .toast-description {
color: color-mix(in oklch, var(--toast-accent) 90%, transparent);
}
&[data-state="closing"] {
opacity: 0;
transition: opacity var(--duration) var(--ease);
}
}
.toast-title {
grid-area: title;
font-weight: 500;
}
.toast-description {
grid-area: desc;
margin-top: calc(var(--space-1) / 2);
color: var(--muted-foreground);
font-size: var(--text-xs);
line-height: var(--leading-xs);
}
.toast-actions {
grid-area: actions;
display: flex;
align-items: center;
gap: var(--space-4);
margin-top: var(--space-3);
}
.toast-action {
color: inherit;
font-size: var(--text-xs);
font-weight: 500;
text-decoration: underline;
text-underline-offset: 0.2em;
cursor: pointer;
&:hover {
text-decoration: none;
}
}
.toast-close {
grid-area: close;
align-self: start;
display: grid;
place-items: center;
width: var(--space-5);
height: var(--space-5);
border-radius: var(--radius-sm);
color: var(--muted-foreground);
transition: color var(--duration) var(--ease);
&:hover {
color: var(--toast-foreground);
}
& > svg {
width: var(--space-3);
height: var(--space-3);
}
}
@keyframes ui-toast-in {
from {
opacity: 0;
translate: 0 var(--space-2);
}
}
}
@layer components {
.tooltip,
[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + var(--space-2));
left: 50%;
z-index: 50;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-md);
background: var(--foreground);
color: var(--background);
font-size: var(--text-xs);
font-weight: 400;
line-height: var(--leading-xs);
white-space: nowrap;
translate: -50% var(--space-1);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration) var(--ease), translate var(--duration) var(--ease);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
translate: -50% 0;
opacity: 1;
}
}
@layer components {
.lead {
color: var(--muted-foreground);
font-size: var(--text-lg);
line-height: var(--leading-lg);
}
.muted {
color: var(--muted-foreground);
font-size: var(--text-xs);
line-height: var(--leading-xs);
}
.code {
padding: 0.15em 0.35em;
border-radius: var(--radius-sm);
background: var(--muted);
font-family: var(--font-mono);
font-size: 0.875em;
}
.typography {
& > * + * {
margin-top: var(--typography-gap, var(--space-4));
}
& > h1 + *,
& > h2 + *,
& > h3 + *,
& > h4 + * {
margin-top: var(--space-3);
}
& > * + h2 {
margin-top: var(--space-10);
}
& > * + h3,
& > * + h4 {
margin-top: var(--space-8);
}
}
}
@property --gap { syntax: "*"; inherits: false; }
@property --cols { syntax: "*"; inherits: false; }
@property --cols-sm { syntax: "*"; inherits: false; }
@layer utilities {
.container {
width: 100%;
max-width: var(--container-max, var(--width-xl));
margin-inline: auto;
padding-inline: var(--container-px, var(--space-4));
}
.stack {
display: flex;
flex-direction: column;
gap: var(--gap, var(--space-4));
}
.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: flex-start;
gap: var(--gap, var(--space-2));
}
.center {
display: grid;
place-items: center;
text-align: center;
}
.grid {
display: grid;
grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
gap: var(--gap, var(--space-4));
}
@media (max-width: 640px) {
.grid {
grid-template-columns: repeat(var(--cols-sm, 1), minmax(0, 1fr));
}
}
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.px-0 { padding-inline: var(--space-0); }
.px-1 { padding-inline: var(--space-1); }
.px-2 { padding-inline: var(--space-2); }
.px-3 { padding-inline: var(--space-3); }
.px-4 { padding-inline: var(--space-4); }
.px-6 { padding-inline: var(--space-6); }
.px-8 { padding-inline: var(--space-8); }
.py-0 { padding-block: var(--space-0); }
.py-1 { padding-block: var(--space-1); }
.py-2 { padding-block: var(--space-2); }
.py-3 { padding-block: var(--space-3); }
.py-4 { padding-block: var(--space-4); }
.py-6 { padding-block: var(--space-6); }
.py-8 { padding-block: var(--space-8); }
.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.text-xxs { font-size: var(--text-xxs); line-height: var(--leading-xxs); }
.text-xs { font-size: var(--text-xs); line-height: var(--leading-xs); }
.text-sm { font-size: var(--text-sm); line-height: var(--leading-sm); }
.text-base { font-size: var(--text-base); line-height: var(--leading-base); }
.text-lg { font-size: var(--text-lg); line-height: var(--leading-lg); }
.text-xl { font-size: var(--text-xl); line-height: var(--leading-xl); }
.text-2xl { font-size: var(--text-2xl); line-height: var(--leading-2xl); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.text-muted { color: var(--muted-foreground); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.icon { width: var(--space-4); height: var(--space-4); flex-shrink: 0; }
.w-full { width: 100%; }
.max-w-prose { max-width: 65ch; }
.rounded { border-radius: var(--radius-lg); }
.border { border: 1px solid var(--border); }
.shadow { box-shadow: var(--shadow); }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
:is(input, select, textarea):focus-visible { border-color: var(--input-focus); }
[aria-invalid="true"] { border-color: var(--destructive); outline-color: color-mix(in oklch, var(--destructive) 40%, transparent); }
.hidden,
[hidden],
[popover]:not(:popover-open) { display: none; }
}